与DEEP Design 同行的4年

设计规范的起源

2014年9月iphone 6 发布，其屏宽750是很多UI设计师永远不会忘掉的数字，这一年也是奠定这个数值作为移动设计1X基准的元年。该年互联网公司如雨后春笋中破土而出，美工逐渐转型为UI设计师，百人规模公司也设立了独立UED部门。多人设计协同对输出一致性的要求孵化了第一代业界设计规范雏形。

(2015年我在第一家公司为6人设计团队做的规范卡片)

第一年：设计物料代码化

2015年的信息平台，支撑着“人财事物法”等集团内的所有办公应用，在这个阶段就是将产出实现复用的初期阶段。在达成了设计的一致化产出后，前端将物料代码化实现可被即时调用的「组件库」，设计一致化增值为开发效能的提升。该阶段是0-1的阶段，时间跨度是漫长的，但好在可以参考业界已有的经验沉淀。我们基于自身业务场景的共性定义了“文字”“颜色”“图形”“动效”，DEEP Design 在该阶段的主要产物就是“组件”（PC+Mobile）数量的积累。

第二年：拓展设计物料提升开发效能

基于设计物料代码化的模式，设计侧需要通过拓展的物料边界来提升更多的开发效能。2018年，Ant Design在3.0中提出“ETCG”概念，将设计物料拆解为Global Styles（全局样式），Components（组件&功能模块），Templates（模版），Examples （功能范例）4种颗粒度。

在这个阶段中，面对最大的挑战就是构建物料间的生态关系网，也就是“原子设计”。当你改变一个底层的样式时，所有引用这个样式的上层物料都会随之发生变化。周密的引用或组合关系不但保障了基础交互的一致性，也正符合React模块化开发的前端技术底层。此时「组件库」一定意义上升级为「设计系统」，我们设想的提效、解放生产力才会真正实现。

这一年中，DEEP Design 沉淀了91个基础组件，14个模版，5+设计范式。这些设计物料同步输入至我们自研的可视化搭建工具「乐高」，这个工具可以帮助前/后端开发降低大部分Coding工作量。

第三年：中台战略下的差异化场景

越来越多的设计语言主题如雨后春笋般破土而出，而大部分设计系统的基础能力仍是新瓶装旧酒。避免重复造轮子，这一年集团将Fusion定为设计系统的基础标准，Fusion的能力是可以基于一套「通用组件」在线编译「全局样式」Global Styles，并且直接生成这套被定制化的「通用组件」，来满足不同产品线的基础物料需求。

感觉一夜回到解放前了？过去1年半精心建设的前端物料站点基本就变成收藏品了。长痛不如短痛，我们花了不少精力在fusion上还原了80%物料，Follow了20%物料。由此一来，我们更多的精力就要放在更垂直的业务差异化建设上了。因为「通用组件」仅具备的是功能逻辑，譬如在一个输入框组件中输入字段，下拉展开的面板中会呈现匹配的内容。譬如一个对话框，它出现的位置是在视窗中心，主体具备内容区和操作区。只有灌注了数据，以及用业务逻辑将「通用组件」串联起来，才能为业务真正使用。

基于此，我们将重心投入在「HR」「采购」「IT」「法务」「财务」等13+垂直业务域，去针对性解决在多个业务中独立存在，但能力却相似的链路，通过「通用组件」整合为「通用业务组件」，它可被高频复用，并实现跨业务域的标准化。另一类是某业务中特有链路，仅在其自身迭代或生态化时会被复用，它具备解决特定业务场景的典型问题，依此会由业务团队主导沉淀出特定业务域的物料。

在另一方面，DEEP Design 横向拓展出了业务研发流程的“自交付”体系，比如在表单场景的设计解决方案沉淀就造就宜搭1.0版本的诞生，0代码平台让技术小白可以在线搭建出一个可用的网页；物料库存的增长也直接夯实了低代码搭建平台“乐高”能力的覆盖面；同时“体验+”的衍生让开发链路形成体验质检的闭环，形成了更完整的DEEP体验管理体系。

第四年：多端一体化

2019年初继iPhone X的全面屏上市之后，曲面屏、折叠屏从设计概念逐渐落地为现实，屏幕的形状尺寸变得愈加不可预测。而移动设备精度的提升使得多端能力场景成为产品的核心竞争力之一，这倒逼设计系统需要具备灵活的适应式方案。

在这个方向下我们发力于PC First 的物料多端方案（独立于原先的Mobile Only物料），让一套代码在多个终端界面中都可以满足较好的使用体验。为了应对内容的不可控性，DEEP Design在上半年优先输出了多端响应框架，在容器层优先实现不同屏幕尺寸的适应式样式。然后在通用组件层面联手Fusion实现最小（最通用）颗粒度物料的响应方案。而并不是所有物料都可以通过简单的响应式进行自动适应，接下来难度最大的就是大颗粒物料，譬如「业务组件&模块」「模版」「解决方案」，针对这类封装程度较高(复杂)的方案，我们需要独立设计移动化适应方案。

拿「表格」举个例子，PC的宽屏到了Mobile的窄屏，简直就是「表格」的灾难，启用横向滑动的能力是最基础的解法，在此之上，我们为Mobile下的「表格」提供紧凑间距来提升信息的露出空间，收纳操作节省横向空间，通过自定义列对次要内容在显示顺序上降级，还提供了一键横屏功能进行沉浸操作。

为了“让多端成为支持业务的默认能力”，物料的具体方案设计是一个不可被压缩的过程。