产品发展日趋平稳时，产品定位和品牌形象已进入稳定状态，参与设计的人越来越多，设计的统一性和效率的问题也渐渐显现。因此，为了保证平台设计统一性，提升团队工作效率，打磨细节体验，就需要我们定义和整理设计规范。

1.确定规范内容

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

2.色彩规范

颜色是设计中最重要的元素，颜色的运用与搭配决定设计的品质感。在 UI 设计中，颜色的使用规范主要在于：品牌主色、文本颜色、界面颜色（背景色、线框色）等。

3.字体规范

不同的字体气质不一样，并且不同场景下带给人的感受也不一样。所以需要在设计的时候考虑到字体的设计效果，然后在设计规范中注明。

4.图标规范

在 UI 界面中，具有标识性质的图形就是图标。作为 UI 设计中重要的设计模块，产品的每个页面中都有可能存在图标。设计规范中，图标一般按照用途分为两类：应用图标、功能图标。

应用图标：各种应用程序的识别标志，在应用商店里下载的一些应用程序的标志。

功能图标：规范中最好标明图标格式与使用方式。比如 Web 设计，图片可以使用 iconfont 管理，可生成代码交付给前端开发；如果是原生 APP，那么需要标注图标导出格式与尺寸。

5.图片规范

图片作为界面设计的重要组成部分，需要标明尺寸规范，分为不同用途的种类。

6.设计尺寸&栅格系统

设计尺寸，是指进行设计时，选择的画板尺寸。例如是 750*1334，还是 375*667，每个公司设计的基准都不一样，所以设计尺寸并没有规定只能用某一个尺寸，我们在设计时，使用的 1 倍图为基准进行设计的，基准尺寸为 375*667。

栅格系统，是运用固定的格子设计版面布局，在 UI 设计和前端开发中被广泛应用的一套体系。在设计尺寸中提到栅格系统，是因为现在的设计基本都是一稿适配多端，而栅格系统能很好的解决这个问题。

7.界面布局

布局是页面构成的前提，是后续展开交互和视觉设计的基础。设计规范中可以提供常用的布局模板来保证同类产品间的一致性，设计者在选择布局之前，需要注意以下几点原则：

• 明确用户在此场景中完成的主要任务和需获取的决策信息。

• 明确决策信息和操作的优先级及内容特点，选择合理布局。

△部分布局类型展示

8.组件规范

常用的 UI 组件（Component）：表格、对话框、提示条、气泡提示、日期选择器、多级选择器、标签输入框、组合框、上传等。

△ Ant design 移动组件

在 skecth 中设计时，使用 Symbol 创建的组件，在后期整理时，可以节省许多的时间。

当然，Figma 也同样具备这样的能力，你所创建的组件都存在于 Assets 中。

9.缺省页面

• 空状态页面：显示对应的页面空状态的图标，增加相应的引导按钮。

• 无网络状态：在没有连接到网络时的提示页面。

• 404&505页面：发生未知错误时的页面。

• 
  

10.规范优先级

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

总结

一个好的规范应该是高效的、简单易懂的。具体执行时，我们应该确保分类合理、规范本身保持一致、布局排版易读，来提升设计师查阅的效率；确保定义清晰、描述准确、场景完备，来帮助设计师理解和使用。但值得注意的是，设计规范并不是「圣经」，不要因为规范而限制了自己的思维，当发现规范有问题的时候，要及时去修正，而不是做了一次之后，一直沿用，永不修改。