优酷暗黑模式（二）：如何建立设计语言标准化管理体系

伴随着行业的成熟与竞争加剧，中国互联网产品中心化、平台化的趋势越加明显。越来越多的公司对产品的设计体系与效率提出了更高的要求。为了更高效地服务多样的业务场景，快速应对未来市场竞争的变化，需要我们跳出设计师的视角，更系统化体系化的看待整个产研过程中的问题。

一、项目背景

消费者端的用户界面一致性是设计平台需要关注的问题，保证一致性和体验品质，并实现设计开发的工作提效，是“设计语言标准化管理体系”的建设的核心诉求。

2006 年开始，优酷手机客户端产品经历了多次迭代，每个业务都依各自的场景有独特的设计诉求，但作为平台型产品，实则需要对整体的体验品质做严格把控，才能实现有品质和一致性下的个性化。而平台型应用，体量大，承载业务繁多复杂，开发方式多样，每次视觉改版，都是牵一发而动全身，对设计和开发资源的调动也是极其巨大。

平台级产品的设计团队和研发团队在协同工作中的最常见问题有:

1. 多团队协作一致性拉齐成本大；

2. 技术实现不一致复用率不高；

3. 从视觉设计到开发实现成本较高；

在这种状况下如何通过有效的设计手段提升优酷的体验一致性，实现设计开发双提效，是当前要解决的主要问题。

(优酷 App 2018 年版本用户界面)

二、设计目标与策略

核心目标：建立设计语言的标准化管理体系，改变设计与开发生产模式，实现设计与开发的品质和效率提升。

策略：在既定的设计语言和风格的指引下，实现设计语言的规范化、产品化和工具化。

1.规范化

通过规范化的手段，提升产品的一致性。规范化带来的一致性体验可以更好的统一视觉语言强化品牌调性，让用户对品牌有一个统一的心理认知，增强产品的易用性。

2.产品化

通过设计元素和组件代码化的手段可以打造低成本可复制的能力，使各个不同颗粒度的设计元素成为一个基础的产品化能力，来高效灵活的应对未来复杂多变的产品设计形态。

3.工具化

以工具的形式辅助产品的设计与研发，提升协作效率快速响应业务需求。

三、执行过程

“标准化是通过统一、简化、通用、组合模块化的手段保证业务的秩序、整体构成精简合理及使产品功能效率最高化，来满足业务不断发展的需要。”

优酷在设计语言标准化管理体系建设中包括三个过程：

1. 规范建立：认知标准统一

2. 产品化，代码化：协作语言统一

3. 工具化

下面就详细介绍下，优酷的实践：

1. 认知标准统一：统一设计和技术对界面元素的认知体系，定义标准

1）统一认知

在自然界中，原子是最小存在的单元，原子结合在一起形成分子，这些分子可以进一步结合形成相对复杂的有机物。而在产品的视觉体系里最小颗粒度的原子，我们理解是圆角、颜色、文字、栅格尺寸等这些最基础的视觉的组成要素；利用这些基础要素，我们形成以组件为单位的设计内容，如标题、按钮等控件。原子单位（基础设计要素）、组件、模块、模板、页面组成一个设计稿。

Brad Forst 最早把原子设计理论应用在界面设计中，原子设计不是线性过程，而是一种心理模型，可以帮助我们将用户界面既视为一个整体，又是一部分的集合。设计师与工程师通过原子设计理论形成对页面的结构的的认知统一。

2）定义标准

俗话说没有规矩不成方圆，需要一定的规则更好的服务于用户体验。

原子（颜色、间距、圆角、栅格等）是影响产品设计风格的核心要素，我们对核心要素的使用规则进行了重新定义，由核心要素构成的所有的基础规范以及扩展的运营设计、商业化广告规范都是基于这个设计准则下去设计，保证核心基因的统一。

设计规范的目标重在提升设计质量及一致性，设计侧有了统一的设计规范标准，将不规范约束在一定的范围之内，保证设计输出的一致性。在一定程度上提高设计效率。

3）建立标准化组件库

优酷在业务需求迭代过程中积累了大量的组件，相同的组件设计细节不一致，这就需要设计师站在全局角度系统化的对所有的组件进行一次拆解抽象再重组，使每个组件具有唯一性，沉淀一个通用的标准化的设计组件库，反哺给业务。

2、统一协作语言，组件库代码化

以视觉规范为基础，把设计侧的规范文档及组件库。通过一种协作语言形成设计与技术的映射关系，实现客户端设计组件与技术组件的统一拉通，沉淀成统一的 SDK 共同维护。

1）统一协作语言

什么是 Design Token？它不是一个新的概念，在 lighting design system 被应用。

“Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.’’

设计令牌是设计系统的视觉设计原子-具体地说，它们是存储视觉设计属性的命名实体。我们使用它们代替硬编码的值（例如，颜色的十六进制值或间距的像素值），以便为 UI 开发维护可扩展且一致的视觉系统。’’

把影响视觉风格的视觉原子（颜色、字号、间距、圆角、栅格）进行语义化命名-Design Token。设计师与工程师通过同一种协作语言，描述视觉样式。

整个过程需要设计师与工程师共同参与深度合作，确保 token 名称可理解性，要根据业务的复杂度及开发实现的最优方式给视觉原子进行命名，我们采用不带任何业务属性的命名方式，各业务调用更灵活。

部分命名如图：

2）组件代码化

以往开发实现过程中，研发代码中会写视觉原子的原始属性值，研发实现的结果直接影响设计效果，设计师在针对某个原子属性进行全站一致性拉齐时，涉及到要修改的场景众多，点对点修改成本高。视觉样式对于研发来说是一系列参数的表达，参数是否可以统一管理，只需要修改一个就可以做到全站生效呢？答案是肯定的。

研发以引入 Design Token 的方式对组件库进行重新标准化开发，把视觉样式的代码进行统一管理，形成统一的研发组件库，各业务线可以直接调用，收拢了散落各处的代码，基于优酷的业务及开发实现，找到了一个适合优酷的开发实现方式。

视觉标准化之后实现的是一整套设计风格体系化的调整。例如，只需要改一个圆角间距的参数，全站呼应修改。

3、工具化赋能

先进工具代表性先进生产力，在多团队协作的过程中，如果有工具辅助势必事半功倍。

设计团队将设计规范组件封装在 sketch 插件工具中，建立了设计与设计之间的规范协同，方便设计师以所见即所得的方式快速搭建页面，技术上 sketch 设计插件导出标注会对属性的值进行符号化处理，显示属性对应的值的同时会显示对应的 design token。从而解决了设计输出与开发实现的效率问题。

通过将设计工具与开发平台进行拉通，使得设计产出与研发实现保持一致，完成了全流程的研发提效。通过工具云同步的方式进行迭代，改变了以往点对点的沟通模式，减小了大团队迭代的沟通和协作成本。

四、产生结果和未来展望

伴随着产品的不停迭代，不一致性正在逐渐的收敛，通过规范化，代码化，工具化的手段解决了产品的一致性体验。终结了在老的模式下，设计样式不断发散的趋势。

在 2019 年优酷 App 改版的项目中，这种设计与研发的协作模式极大提升了执行效率，在业务需求并行的情况下可以灵活的调整视觉样式，使设计师的精力得以释放，更多投入到创造性的工作中。

同时，这种模式为后续优酷 Dark mode 的适配，换肤机制提供了很好的基础能力支持，节省实现成本，更进一步验证了设计标准化的带来的便利和工程化的思维模式的可复制性。

设计标准化体系建设是一个长线的工作和课题，我们会持续地进行探索，希望这套视觉标准化体系更完善更加强健，向更多业务赋能。

参考：

http://atomicdesign.bradfrost.com/chapter-2/

https://www.lightningdesignsystem.com/design-tokens/

作者简介：

宓宁，阿里文娱体验设计专家。

相关阅读：

优酷暗黑模式（一）：是什么、为什么、如何落地？