1、誕生背景
近幾年圍繞業務中台化的場景，涌現了很多中台，有面向開發者的，有面向產品的，有面向運營團隊的，但是卻缺少一個可以提供給設計師協作的中台，設計師與開發、交互的協作仍處於源文件交換的原始刀耕火種時代。
上下游之間的合作成本高，沒有統一的規范性。往往一個視覺稿會經歷反反復復的改版，文件的傳輸只能使用網盤管理，沒有一個統一存儲和管理的平台。項目團隊的設計規范落地效果不佳，公共的設計素材共享不便，同時各個團隊的設計資產無法共享流通，資源無法進行整合，甚至存在重復設計等問題。
我們通過分析當前的痛點，參照現有的協作流程以及未來的發展趨勢，是否可以有一套供各個角色都能使用的設計物料平台呢？按照這個思路，我們開發出了一套京東自己的設計資產管理平台，命名它為「誇克」。誇克在物理學上是構成物質的基本粒子，誇克相互結合組成萬物，我們是用誇克來比喻那些構成組件、模塊、頁面、網站的所有物料，是我們星辰大海中的重要基石。
2、平台介紹
誇克平台是數字化設計資產管理平台，集物料收集、拓展、外接與輸出能力於一身，內容涵蓋組件、模板、圖標、字體、動效、圖片、素材、VI等。
誇克平台目前提供 Sketch 插件、WEB 端和 CLI 端三種形式進行物料收集與共享，覆蓋產品、設計、研發、運營和商家等用戶人群。
誇克平台為每個項目設立物料管理空間，各個團隊持續豐富誇克平台各類型設計資產，統一在線管理和協作，最大化提升業務整體設計效率，從而達到增效降本的目標。
3、平台能力
3.1 DSM能力
近幾年設計系統作為重要的設計資產及解決方案，其被重視的程度與日俱增。由於原始的設計方法已經無法滿足爆發式增長的設計需求，設計師開始尋求工程化的解決方案。於是引入原子設計理論（Atomic Design）解決問題，即使用一種有條理創建模式庫的方法，結合軟件開發的組件化思想，從最原始的原子出發，逐層構築更高級別的組織，很好地解決了模塊化和規模化的問題，這就是設計系統的前身。
3.1.1 什么是設計系統
設計系統是由設計語言和模式庫構成，在設計原則的指導下，通過統一的協作語言和科學的管理方法組織起來，並創建體驗一致的用戶界面的系統。
設計語言： 設計系統的基礎，與品牌識別和情感相關，包含顏色、字體、圖標等基礎設計原子；
模式庫： 一系列由設計原子組成的可復用的組件，模板等。
3.1.2 DSM 資產庫
在設計系統中，設計語言和模式庫就好比「原子設計理論」中的原子、分子、組織、模板、頁面，他們是保證團隊協作一致性的基礎，而設計規范更像是一份說明文檔，指導設計師在設計過程中遵循一定的規則。
誇克作為數字化的設計資產平台，需要解決設計系統數字化的問題。
那設計系統中，有哪些可被數字化存儲的物料資產呢？結合目前流行的 Sketch 設計軟件來看，我們可以給設計語言和模板庫做個映射，看看 Sketch 原生支持哪些設計系統中的原子物料。
Sketch 之所以能打敗 PhotoShop 成為最流行的 UI 設計工具之一，是因為軟件大量運用了「復用」的工程化思想解決設計問題，如 Symbols, TextStyle, LayerStyle, SharedStyles 等
- Symbol：類似於工程中的代碼組件，並提供組件嵌套、實例化等開發流程中常見的操作；
- Color：在 Sketch 中不單單是顏色的色值，還包含漸變色及圖片填充；
- TextStyle：針對文本圖層的共享樣式，類似於 CSS 中的公共 SCSS Font Mixins；
- LayerStyle：針對容器圖層的共享樣式，包含 Background、BoxShadow、BorderRadius 信息。
3.1.3 如何沉淀 DSM 數字化資產
我們借助 Sketch 圖層解析的能力，開發了「誇克 Sketch 插件」，將視覺稿中的抽象信息序列化為可存儲的數據，並以項目庫的形式承載 Sketch 視覺稿中沉淀的數字化資產。
基於 Sketch 目前支持的共享設計元件，我們將 DSM 物料分為六大類：
- 組件：圖層或圖層組，即 Layer、LayerGroup、Symbols；
- 模板：跟組件類似，但顆粒度更大，普遍以頁面的形式沉淀，即 Artborad；
- 圖標：圖標類型的矢量圖形，即 Path；
- 顏色：色值、漸變色、圖片填充；
- 字符樣式：SharedStyles 中的 TextStyles；
- 圖層樣式：SharedStyles 中的 LayerStyles。
DSM 數字資產本質上是 Sketch 視覺稿中的共享設計元件，得益於 Symbols 和 SharedStyles 自帶的同步能力，團隊成員在調用組件物料時，能及時同步最新的組件規范。當視覺規范發生變更，如主題色，字體樣式調整，使用到這些共享樣式的視覺組件也會同步被更新，這非常利於設計流程中的協作。
從設計系統到 DSM，再到最終研發的視覺代碼還原，通過 DSM 的建立，設計的產出有了統一標准，開發迭代的效率也得到顯著提升，設計師也能更專注於深耕體驗和細節，實現設計向產品的賦能。
3.2 組件庫
所有頁面或應用，從底層分解開來，都是由各種大大小小的組件所構成。隨着公司業務的擴展，面對各式各樣的前端業務需求，我們需要一套標准化、規范化的組件，以提高我們的開發效率且給業務賦能，誇克組件庫就應運而生了。
對於開發者而言，誇克組件庫分為「基礎組件庫」、「業務組件庫」、「自由組件庫」三類。
3.2.1 基礎組件庫
基礎組件庫（也指 Taro UI），是一套居於 Taro 框架開發的多端 UI，包括：通用類、布局類、導航類、數據輸入類、數據展示類、反饋類、手勢類等多種樣式類型。我們針對設計師跟開發者都有對應的使用方式。
設計師可以通過下載源文件或插件的方式來使用：
開發者可以通過在 Taro 文件中引入組件的方式來使用組件，例如：
import { AtButton } from 'taro-ui'
每個組件都有詳細的參數可以供開發者配置與參考，而且基礎組件具有以下特性：
- 多端適配：一套組件可以在微信小程序、京東小程序、百度小程序、H5 等多端適配運行；
- 組件豐富：提供豐富的基礎組件，覆蓋大部分使用場景，滿足各種功能需求；
- 按需引用：可按需使用獨立的組件，不必引入所有文件，可最小化的注入到項目中。
3.2.2 業務組件庫
業務組件庫是由誇克平台官方出品的一套標准化、規范化的電商導購類組件庫。通過梳理出日常商城業務中的常用業務組件，最終形成一套可快速復用、便捷維護、功能覆蓋全面的組件庫。業務組件的 UI 更是由 JDC 設計師設計，提供多種配色方案、多種排版模式、多項自定義調整樣式，足以滿足大部分日常頁面需求。
業務組件本質上是一個使用 Taro 框架開發的代碼包，居於 Taro 的多端支持能力，可以完美適配微信小程序、京東小程序、百度小程序、H5 等環境。在項目中，開發者可以通過 tarball 的組件方式安裝使用，也可以直接下載代碼包使用。
3.2.3 自由組件庫
自由組件庫是由開發者自由開發，不依賴誇克組件開發框架、不需要遵守誇克組件開發文檔規范，最終以獨立代碼包或 NPM 在線安裝的方式，共享到誇克平台，提供給其他開發者或開發團隊下載使用的組件類型。
在誇克平台，開發者可以上傳並管理自己開發的自由組件，也可以使用搜索去下載其他人共享的組件。
3.3 字體庫
字體庫是物料中不可或缺的一部分，個性化的字體不僅能提升用戶的良好體驗，還可以提升項目的設計品牌化和個性化等。
3.3.1 版權字體下載
誇克字體庫將字體分為八類，包含黑體、宋體、仿宋、楷體、圓體、書法體、手寫體和裝飾體。然后將京東的授權字體和開源免費字體進行分類歸納，一共收錄了2000+的字體包源文件和1000+的字體家族。
使用者可以通過關鍵字檢索或者類別篩選（繁簡/字形）查找京東版權字體家族，點擊右側「下載」按鈕便可直接下載使用。
3.3.2 在線字體生成
往往一個字體包文件是偏大的，雖然小的字體可以有十幾K，但是大的字體可以去到上百兆，直接使用會出現加載慢、體驗差、浪費流量等問題，而且在我們的應用場景里一般不會使用到一個字體包里的全部字體。
因此，誇克平台的字體庫提供了字體切片的功能。它可以對字體包文件進行按需提取，然后將提取的片段生成一個新的字體格式文件，從而大幅的降低了字體包文件大小。
4、對外賦能
4.1 物料市場
平台目前提供了物料市場功能，它將所有物料進行扁平化搜索，縮短使用路徑，賦予更便捷的對外能力。目前已有300+京東各設計團隊入駐，涉及400+業務線，共同組成物料資源共享生態，實現設計資源互通共贏。
4.2 羚瓏智能頁面設計
誇克平台將組件庫能力服務於可視化搭建，通過誇克平台為「羚瓏智能設計平台的頁面設計」輸送組件物料，優化研發效能發揮，助力用戶可視化地快速搭建頁面。
4.3 京東內部其他設計團隊
平台還將能力持續輸出到京東內部其他團隊中，如京東首頁項目、京東數科、京東金融、7Fresh等。用物料原材料的方式不斷提供快速發展的動力。
5、未來展望
未來，會有更豐富多樣的數字資產沉淀。物料種類在未來還會繼續拓寬，讓數字資產的觸角涵蓋更廣，比如后續會考慮接入音效物料，視頻物料，版權信息等。
同時，會強化更多端的觸達能力，在物料的沉淀與輸出賦予多端化、雲端化。比如擴展資產沉淀的方式，增加 Figma 和 AdobeXD 等插件工具，盡可能地融入現有設計工作流中，為設計師提供便捷的獲取和沉淀物料的能力。還可以與兄弟中台進行上雲協作，作為中台上雲產品的一部分，賦予雲端產品全矩陣物料的能力。
其他
感謝一直關注凹凸實驗室的讀者，為了提供更優質的內容，希望您能抽出幾分鍾時間，完成一個小調查，明年凹凸公眾號的內容由你決定。點擊直達
加入凹凸實驗室開放、開源、專業、有愛、有夢的大家庭？點擊直達
還沒有關注「凹凸實驗室」的讀者們，關注我們吧，我們一個月只有 4 次推送機會，我們很珍惜每一次推送，不會讓你失望的。微信搜索「凹凸實驗室」關注即可。
凹凸揭秘系列文章地址
- 1.《凹凸實驗室的過去與未來》
- 2.《凹凸技術揭秘·羚瓏智能設計平台·逐夢設計數智化》
- 3.《凹凸技術揭秘 · Deco 智能代碼 · 開啟產研效率革命》
- 4.《凹凸技術揭秘·羚瓏頁面可視化·成長蛻變之路》
- 5.《凹凸技術揭秘 · 誇克設計資產 · 打造全矩陣優質物料》
- 6.《凹凸技術揭秘 · Tide 研發平台 · 布局研發新基建》
歡迎關注凹凸實驗室博客：aotu.io
或者關注凹凸實驗室公眾號（AOTULabs），不定時推送文章：
