超全面的 UI 工作流程指南（四）：设计规范

编者按：完整的 UI 设计流程到底是怎样的？从需求到产品上线，要经历多少个阶段，每个阶段有哪些应该掌握的基础知识，本次优设独家专题为你从零开始梳理出 UI 工作流程，适合新手阅读学习。

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

确定规范内容

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

·

拓展链接：各大官网设计规范集合

色彩规范

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

·

·

字体规范

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

·

图标规范

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

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

·

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

·

·

图片规范

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

·

·

设计尺寸&栅格系统

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

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

·

△ Christie Tang

栅格系统拓展链接：《看不懂不会用的栅格系统，这篇帮你彻底掌握它！》

界面布局

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

• 明确用户在此场景中完成的主要任务和需获取的决策信息。
• 明确决策信息和操作的优先级及内容特点，选择合理布局。

·

△部分布局类型展示

控件规范

控件是指产品界面中可操作的部件，与组件是有一些区别的。控件翻译为 Control，组件翻译为 Component。

通俗的解释说法就是组件为多个元素组合而成，控件为单一元素组合而成。

常用的 UI 控件（Control）：按钮、输入框、下拉列表、下拉菜单、单选框、复选框、选项卡、搜索框、分页、切换按钮、步进器、进度条、角标等。

以下列举一些我们在 APP 设计规范中整理的内容。

1. 按钮

按钮有 5 个状态：正常、点击、悬停、加载、禁用。需要在规范中分别罗列出这五个状态，标注上对应的按钮填充色、边框色、圆角值、按钮宽度和高度，按钮文本大小、颜色值。如果是图标按钮的话，除了上述参数值以外，还需要标注 icon 和按钮文本之间的间距，icon 图标的大小。

·

2. 输入框

用于单行信息录入文字上下居中显示，支持键盘录入和剪切板输入文本，对特定格式的文本进行处理：密码隐藏显示、身份证、卡号分段显示，标注宽高。

·

3. 选择

选择可分为单选与多选，并且也有五种不同状态：未选择、已选中、未选悬停、已选失效、未选失效项。规范中需展示出所有效果状态。

·

4. 选项卡

用于让用户在不同的视图中进行切换。标签数量，一般是 2-5 个；其中，标签中的文案需要精简，一般是 2-4 个字。每个标签所占的宽度可适当调整。

·

5. 滑动开关

滑动开关有两个互斥的选项（例如开/关、是/否、启动/禁止），它是用来打开或者关闭选项的控件。选择其中一个选项会立即执行操作。

·

6. 进度条

用于向用户展示步骤的步数以及当前所处的进程。

·

7. 角标

用于聚合型的消息提示，一般出现在通知图标或头像的右上角，通过醒目的视觉形式吸引用户眼球。

·

组件规范

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

·

△ Ant design 移动组件

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

推荐阅读：《Sketch 进阶教程！利用Symbol 建立一套设计规范组件库？》

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

·

缺省页面

• 空状态页面：显示对应的页面空状态的图标，增加相应的引导按钮。
• 无网络状态：在没有连接到网络时的提示页面。
• 404&505页面：发生未知错误时的页面。

·

规范优先级

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

·

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

注：本系列文章为优设独家专题，请勿转载。

欢迎添加作者微信交流