结合这几年在B端平台做的项目，尝试用自己微浅的经验和大家分享一下我关于建立设计规范的一点个人观点。好的设计是有科学方法论的，更是有设计师长年累月个人经验与习惯融合的，本文仅做个人心得分享，希望大家都能找到自己的设计方向。

如何建立一套可复用的设计规范

没有任何一套规范可以完全适用于所有的业务场景，可复用这个概念是存在一个局限的。设计规范本身包含的内容是由小及大地从底层搭建的。其中的基础样式-文字、颜色、投影、间距这些原子化的元素是最容易被复用的。往上由基础样式中的分子化元素构成的组件也是有可复用性的。不过此时组件的形态可能由于考虑业务背景而带有了一些业务属性，也就没有那么高的适用度。再往上，当组件构建出典型页面或场景解决方案，这部分的内容就基本只能在本身的业务场景中进行复用了。

再回过头说，怎么建立设计规范。我把规范的拆解成四个层级的组成部分。最最底层的是：

1 设计语言or设计原则and业务场景

这一层基本是理论层面的。在Ant Design 中的设计原则有：亲密性、对齐、对比、重复、直截了当、足不出户、简化交互、提供邀请、巧用过度、即时反应。前四个算是视觉设计中老生常谈的话题，这些原则背后都有具体的说明与示例，可以在antd中查看。
我在B端平台时，经历了一次为移动端脱胎换骨的大改版。背景是，由于是b端平台，我们业务方一直把注意力集中在pc端，移动端几乎几个月才有一些不痛不痒的小迭代。但其实一线使用者bd们是有移动办公的场景的，而且从调研的反馈来看也确实有这个诉求。在老板的推动下，我们进行了一个移动端整体改造的战役。在这个战役的前期，我为移动端量身定制，制定

了一套设计原则：轻便（舍弃冗余、移动场景）、高效（简化流程、意义明确）、专注（减少干扰、串联流程）。辅助原则-所见即所得、合并同类项、灵活显示/隐藏。这套设计原则背后同样有一系列基本的阐释与示例，不仅是给我们设计的同学使用，对前端开发及产品同学同样有一定参考价值。在设计原则的辅助下，我在之前原有的pc端的设计规范基础上，衍生建立了一套移动端的规范，相对pc端没有那么复杂，主要是为了支撑在移动办公场景下的核心业务场景。

2 基础样式（原子）

原子化设计是由一位名为Bard Frost的国外网页设计师提出的。BF认为，我们把页面中所有内容进行解构，可以发现最后都会得到文字、颜色、图标等基本的元素。这些元素即是原子，所有页面都是由这些成分组成的。这个理论虽然很有启发性，但其中把设计内容分为：原子、分子、组织、模板、页面这五个阶段，我觉得在所处的业务场景中，分界稍显琐碎模糊。所以仅作为一种思维模式上的指导去按自己的方式理解。我还是很喜欢用这个概念去理解设计规范及组件库的搭建过程的。
原子内容包含：文字、颜色、圆角、投影、icon、栅格、布局、插画场景等。

3 组件模块（分子、组织、模板）

通常在基础样式完善的情况下，就可以进行组件模块的搭建了，这也是组件库的重要部分。从最简单的按钮样式及不同态到可复用的页面模块。
内容包括：按钮、面包屑、导航、分页、步骤、选项卡、输入框、选择器（日期选择、级联选择、穿梭框）、开关、上传、菜单、标签、折叠面板、跑马灯、气泡、弹窗（对话框、信息反馈）、表格、表单等。
这一部分内容通常会非常多，但也要根据业务需求来做取舍，有些内容业务需求可能不会用到就不要为了加而加。还是那句话，要考虑内容的可复用性。

4 页面场景（典型页面、场景解决方案）

为了最终能够良好地阐释以上内容，我们需要用一个更直观方式来呈现。典型页面及场景解决方案的好处是既可以满足阐释设计规范应用方式与场景，又可以将本身作为设计规范的一部分进行复用。
比较典型的内容如：缺省、结果反馈、表单、表格、文件上传步骤等。

最后

说一下我自己关于设计规范的感受，虽然在现在的toB项目中已经待了了两年，但也是今年才尝试建立这个项目的设计规范。因为背靠大山，公司有中台整体的设计规范可以采用，之前一直以它为准。但后来发现覆盖面越广的设计规范越难以适配到不同的精细场景，所以在项目业务稳定，自己也对业务背景有了足够的了解，而不是只从设计视角考虑，这才能把设计规范中最具代表性的页面场景这一部分做到在可以项目中复用。只有达到这一目的，设计规范才算是有意义，可以带来降本提效的价值。但业务是不断进化的，所以设计规范如果要贴合业务和项目，也是要不断更迭。当然，还是那句话-建立设计规范虽然能有指导性作用，但设计师不能被其完全限制，场景解决方案不会全写在规范中。与其被规范牵着走，不如不断超越，引领规范前进。