凹凸技術揭祕 · 夸克設計資產 · 打造全矩陣優質物料

一、誕生背景

近幾年圍繞業務中臺化的場景，涌現了不少中臺，有面向開發者的，有面向產品的，有面向運營團隊的，可是卻缺乏一個能夠提供給設計師協做的中臺，設計師與開發、交互的協做仍處於源文件交換的原始刀耕火種時代。

上下游之間的合做成本高，沒有統一的規範性。每每一個視覺稿會經歷反反覆覆的改版，文件的傳輸只能使用網盤管理，沒有一個統一存儲和管理的平臺。項目團隊的設計規範落地效果不佳，公共的設計素材共享不便，同時各個團隊的設計資產沒法共享流通，資源沒法進行整合，甚至存在重複設計等問題。

咱們經過分析當前的痛點，參照現有的協做流程以及將來的發展趨勢，是否能夠有一套供各個角色都能使用的設計物料平臺呢？按照這個思路，咱們開發出了一套京東本身的設計資產管理平臺，命名它爲「夸克」。夸克在物理學上是構成物質的基本粒子，夸克相互結合組成萬物，咱們是用夸克來比喻那些構成組件、模塊、頁面、網站的全部物料，是咱們星辰大海中的重要基石。

二、平臺介紹

夸克平臺是數字化設計資產管理平臺，集物料收集、拓展、外接與輸出能力於一身，內容涵蓋組件、模板、圖標、字體、動效、圖片、素材、VI等。

夸克平臺目前提供 Sketch 插件、WEB 端和 CLI 端三種形式進行物料收集與共享，覆蓋產品、設計、研發、運營和商家等用戶人羣。

夸克平臺爲每一個項目設立物料管理空間，各個團隊持續豐富夸克平臺各種型設計資產，統一在線管理和協做，最大化提高業務總體設計效率，從而達到增效降本的目標。

三、平臺能力

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.1 物料市場

平臺目前提供了物料市場功能，它將全部物料進行扁平化搜索，縮短使用路徑，賦予更便捷的對外能力。目前已有300+京東各設計團隊入駐，涉及400+業務線，共同組成物料資源共享生態，實現設計資源互通雙贏。

4.2 羚瓏智能頁面設計

夸克平臺將組件庫能力服務於可視化搭建，經過夸克平臺爲「羚瓏智能設計平臺的頁面設計」輸送組件物料，優化研發效能發揮，助力用戶可視化地快速搭建頁面。

4.3 京東內部其餘設計團隊

平臺還將能力持續輸出到京東內部其餘團隊中，如京東首頁項目、京東數科、京東金融、7Fresh等。用物料原材料的方式不斷提供快速發展的動力。

五、將來展望

將來，會有更豐富多樣的數字資產沉澱。物料種類在將來還會繼續拓寬，讓數字資產的觸角涵蓋更廣，好比後續會考慮接入音效物料，視頻物料，版權信息等。

同時，會強化更多端的觸達能力，在物料的沉澱與輸出賦予多端化、雲端化。好比擴展資產沉澱的方式，增長 Figma 和 AdobeXD 等插件工具，儘量地融入現有設計工做流中，爲設計師提供便捷的獲取和沉澱物料的能力。還能夠與兄弟中臺進行上雲協做，做爲中颱上雲產品的一部分，賦予雲端產品全矩陣物料的能力。

其餘

感謝一直關注凹凸實驗室的讀者，爲了提供更優質的內容，但願您能抽出幾分鐘時間，完成一個小調查，明年凹凸公衆號的內容由你決定。點擊直達

加入凹凸實驗室開放、開源、專業、有愛、有夢的你們庭？點擊直達

尚未關注「凹凸實驗室」的讀者們，關注咱們吧，咱們一個月只有 4 次推送機會，咱們很珍惜每一次推送，不會讓你失望的。微信搜索「凹凸實驗室」關注便可。

凹凸揭祕系列文章地址

• 1.《凹凸實驗室的過去與將來》
• 2.《凹凸技術揭祕·羚瓏智能設計平臺·逐夢設計數智化》
• 3.《凹凸技術揭祕 · Deco 智能代碼 · 開啓產研效率革命》
• 4.《凹凸技術揭祕·羚瓏頁面可視化·成長蛻變之路》
• 5.《凹凸技術揭祕 · 夸克設計資產 · 打造全矩陣優質物料》
• 6.《凹凸技術揭祕 · Tide 研發平臺 · 佈局研發新基建》

---

歡迎關注凹凸實驗室博客：aotu.io

或者關注凹凸實驗室公衆號（AOTULabs），不定時推送文章：