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

凹凸技术揭秘 · 夸克设计资产 · 打造全矩阵优质物料相关推荐

凹凸技术揭秘 · Tide 研发平台 · 布局研发新基建
背景随着前端技术领域的高速发展,前端开发也变得越来越复杂.业务扩张,小程序平台井喷式增加,都导致开发者肩上的负担越来越重.为了提升研发效率,减少人力浪费,我们开发了开放式跨端跨框架解决方案 Taro ...
凹凸技术揭秘 · Taro · 开放式跨端跨框架之路
承载 Web 的主战场转移 2017 年 1 月 9 日凌晨,微信正式推出小程序,为移动端家族增加了新的业务形态和玩法,当大家还在探讨这一新兴平台能做什么的时候,京东率先上线了「京东购物」小程序,随后 ...
凹凸技术揭秘·羚珑智能设计平台·逐梦设计数智化
1.简介- 羚珑智能设计平台是由京东零售集团用户体验设计部[1]打造的在线设计服务平台,专注于泛零售领域的设计,帮助客户解决日常经营过程中所碰到的各类设计需求,例如商品上新时的商品主图视频.各种节日大 ...
凹凸技术揭秘·羚珑页面可视化·成长蜕变之路
作者: 凹凸曼前言京东零售集团 · 用户体验设计部打造的「羚珑智能设计平台」于 2019 年 5 月为内部运营及商家推出了智能页面设计工具,羚珑智能页面设计是一款在线可视化页面搭建平台,拥有在线搭 ...
凹凸技术揭秘：618 大促解析
导语 2021 年 618 已经圆满下线,平台下单金额创新高,达到了 3056 亿.作为大促线的主要前端承接团队,今年负责了 16 个会场的开发.本文将从会场创新功能.技术框架以及协作方式这三方面来揭 ...
凹凸技术揭秘：如何服务 toG 项目——数字人民币项目前端总结
前言 toG 项目--一个在我等日常工作中极为罕见.极为神秘的项目领域,所有经历过的人,都仿佛经受了一场狂风暴雨的洗礼,谁做谁知道. 而数字人民币项目,光看名字就令人心生敬畏--新的货币形式.政府合作 ...
element ui 多个子组件_ElementUI 技术揭秘（2）组件库的整体设计
需求分析当我们去实现一个组件库的时候,并不会一上来就撸码,而是把它当做产品一样,思考一下我们的组件库的需求.那么对于 element-ui,除了基于 Vue.js 技术栈开发组件,它还有哪些方面的需 ...
使用container的嵌套_ElementUI 技术揭秘（4）— Container 布局容器组件的设计与实现。...
前言上一篇文章我们分析了 Layout 布局组件的设计和实现,它的应用场景通常是局部布局.对于整个页面的布局,element-ui 提供了 Container 布局容器组件,专门用于 PC 管理后台 ...
【CDS技术揭秘系列 02】阿里云CDS-SLS大揭秘
简介:CDS-SLS 作为云化的日志平台,将组件进行高内聚低耦合,线下用户最低可以在6台规模的机器上将上述所有的功能自动化部署,在运维.运营.财务管理.数据分析报表等大数据场景领域以低代码模式有效解决 ...

凹凸技术揭秘 · 夸克设计资产 · 打造全矩阵优质物料