前言

建立合适的 UI 设计规范，对提升用户体验有很大帮助。这篇文档讲述了设计规范的定义和来由，并说明了在文字、色彩、阴影、圆角、布局、栅格、图标、文案和组件等方面的详细设计规范。

设计规范综述

定义

INFO

作为一个 B端 领域的项目和产品，为了应对公司快速迭代开拓市场和一部分购买者的定制化需求，与此同时还要保障产品间的用户体验一致性，近年来设计规范这一解决方案不断升温，如 Salesforce，antdesign 等纷纷推出了自己的设计规范。

那么到底什么是设计规范呢？和设计语言、设计原则、组件库等有什么关系呢？

我认为的设计规范是以下的定义：设计规范由设计原则、设计语言和组件库构成，在设计原则的指导下使用设计语言和组件库创建体验一致的用户界面。

设计原则：即整个设计规范所要遵循的全局规则，为设计提供方向指导。以下给出几个例子：

👀 基本分类

设计语言：包括色彩，文字、图标等。
组件库：分为基础组件（按钮，下拉列表等）及业务组件（商品模块）。

在做设计语言和组件库时，有一个基本原则是，少即是多(less is more)，用尽可能少的样式来实现设计目标，例如按钮提供三种尺寸即可，在适应不同场景需求的同时保证体验的 一致性 ；
另一方面，保持克制的设计规范 可以进一步减少设计师的决策时间，提高设计效率。

理论基础 - “原子设计”

什么是原子设计？

👀

原子设计是构建设计规范的核心指导理论。2013 年，Brad 从化学中得到了灵感，创建了原子设计理论。在化学中，所有的物体都是由原子构成，原子构成分子，进而构成宇宙万物。对应到界面中，界面也是如此，所有的元素都是由文字、颜色等最基本的元素构成的。这些基本元素构成组件，组件构成页面。

原子设计概念的提出使得设计规范演变成为了一种更为高效、科学的设计规范，极大的改善了设计师与前端工程师的工作体验。

原子设计系统的五个层次

为什么需要设计规范？

软件危机

在讲述设计规范之前，我想先讲述一个互联网史上的真实事件 - "软件危机"。

19 世纪 80 年代，软件的复杂度进一步提升，大规模软件甚至会由由数百万行代码组成，有数以百计的程序员参与其中，抽象语言解放了程序员的生产力和想象力，人们可以像写文学小说一样随意发挥地去写代码。

摆在面前的问题是如何高效且可靠地维护与迭代如此庞大的软件。之后 C++、Java 等我们熟知的面向对象的编程语言诞生了。

面向对象这种模式有一个很重要的特征是封装。这就好比当你在写王者荣耀的代码时，小兵是出现频率较高的模块，你可以提前把王者荣耀里的一个小兵封装成一个代码块，当你需要用到它时，不必重新一行一行写，只需要把它整体调用即可。

纵观软件发展史，20 世纪 60 年代的第一次软件危机创造了“模块”概念；20 世纪 80 年代第二次软件危机引出了“面向对象编程”，创造了“对象”概念。

TIP

模块与对象本质上都是对软件进行拆分与封装，只是对象拆分的粒度更大，维度更高。这点与原子设计的原理不谋而合，从色彩文字等基础元素，到按钮、选择器等 基础组件、再到典型模块，也是对大型软件的设计元素不同粒度的拆分与封装。

设计规范的优势

为什么要自己做设计规范？

这个时候可以会有小伙伴问，目前市面上有这么多的第三方设计规范，例如 antdesign，element，有必要自己重复造轮子做一遍吗？答案是非常有必要。原因如下：

第一，B 端自身的业务性决定了市场上没有万能的设计规范，那些设计规范的组件并不能 100% 满足我们产品的需求。另外一方面使用封装好的第三方设计规范，在此基础上进行修改，效率很低，适配的复杂度和重新开发相差无几。

第二，大家都在使用第三方设计规范时，产品的同质化便不可避免。为了避免这种情况发生，我们必须要从设计语言开始，设计自己的规范。

👀 那些大厂的成熟的组件库该如何用？把它当成一个字典，有不会的地方，参考人家的成熟的解决方案。

设计规范的落地

落不了地的原因？

如何落地？

确定规范内容

UI 设计中，设计规范是一个关键步骤。知名大厂基本上都有一套自己的完整规范体系，在整理设计规范时，以大平台规范体系作为参考，针对产品自身情况增删，整理出我们自己所需要的规范内容，能有效地避免规范内容遗漏缺失。

规范优先级

了解规范的内容有哪些之后，我们需要确认的是规范优先级，规范内容庞大复杂，基础的、必要的、高性价比的放在第一个版本中，复杂的往后放，随着产品的迭代，规范才会越来越完整。