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），不定時推送文章：

標籤：JavaScript

上一篇：浮動元素的特點

下一篇：凹凸技術揭秘 · 夸克設計資產 · 打造全矩陣優質物料