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

一、诞生背景

近几年围绕业务中台化的场景，涌现了不少中台，有面向开发者的，有面向产品的，有面向运营团队的，可是却缺乏一个能够提供给设计师协做的中台，设计师与开发、交互的协做仍处于源文件交换的原始刀耕火种时代。

上下游之间的合做成本高，没有统一的规范性。每每一个视觉稿会经历反反复复的改版，文件的传输只能使用网盘管理，没有一个统一存储和管理的平台。项目团队的设计规范落地效果不佳，公共的设计素材共享不便，同时各个团队的设计资产没法共享流通，资源没法进行整合，甚至存在重复设计等问题。

咱们经过分析当前的痛点，参照现有的协做流程以及将来的发展趋势，是否能够有一套供各个角色都能使用的设计物料平台呢？按照这个思路，咱们开发出了一套京东本身的设计资产管理平台，命名它为「夸克」。夸克在物理学上是构成物质的基本粒子，夸克相互结合组成万物，咱们是用夸克来比喻那些构成组件、模块、页面、网站的全部物料，是咱们星辰大海中的重要基石。

二、平台介绍

夸克平台是数字化设计资产管理平台，集物料收集、拓展、外接与输出能力于一身，内容涵盖组件、模板、图标、字体、动效、图片、素材、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），不定时推送文章：