界面设计师职业进阶：如何建立一套 UI 设计规范？

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

建立 UI 设计规范，这个对于 UI 设计师来说，应该是工作到一定阶段，必须要掌握的技能。我可以把过去若干年我们在工作过程中的积累做一下回答。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

UI 设计规范的目的

首先要明确建立 UI 设计规范的目的是什么，主要是以下的几个方面：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

1. 统一对于设计工作的具体要求，建立设计工作的准则；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

2. 保持界面界面设计工作持续执行的统一性；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

3. 提高协同工作的执行效率，能够让不同的团队按照统一的标准理解和管理设计；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

4. 协助开发建立统一的统一的框架和布局；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

5. 针对于产品的风格和定义能够建立统一的标准，并且利于未来的延续。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

我们能够看到的日常的规范的内容有很多种类型，包括「品牌规范」，「平台设计的语言规范」等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

UI 设计的规范，要注意参考这些其他的规范内容，尤其是「品牌规范」，对于色彩的使用方面，很多情况下要严格遵守；而平台设计的语言规范，比如说 Apple 或 Google MD 的规范，在定义控件时，也是同样要兼顾到。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

接下来，我会详细描述一下，制定一份 UI 设计规范需要哪些内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

什么时候建立规范

一般引入 UI 设计规范的时期，基本上是两种情况。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

从0研发一款新的产品文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

针对于这一类产品，我们一般情况下是在确定了具体的设计风格以后，就可以开始着手建立规范。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

如果一些页面已经开始启动设计，那么就需要频繁的沟通，以保证设计方向和正在着手完善的 UI 设计规范保持一致。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

如果产品已经进入了研发阶段，那么此时就要按照已经确定的设计方案来进行统一规划。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

这个时候存在的风险，就是发现不能够统一的部分，那么就要进行一定的评估，是否会因此影响到用户体验：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

1. 如果没有影响，或者影像的代价非常小，那么建议是接下来的产品迭代再进行按照规范的统一处理，否则会出现开发方面的反复工作的问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

2. 如果影响非常大，那么就要推翻设计方案，统一按照规范进行处理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

具体情况要根据团队的实际情形进行判断，涉及到成本问题，因此不要非常草率的下结论。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

比较成熟的产品文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

如果是一款已经迭代若干版本的产品，那么其实随时都可以开始着手建立 UI 设计规范。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

明确你的目标用户是谁

说实话，在制定规范的同时，也是在做一份设计，要考虑到用户的使用问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

因此我们首先还是要明确目标用户是什么人，这样能够掌握他们在使用过程中的需求是怎样的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

人群可能会包括以下的一部分：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

1. 内部设计团队文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

2. 产品团队文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

3. 运营团队文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

4. 研发团队文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

5. 第三方团队— 有些公司的项目，有可能是要外包给其他的团队来做的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

其中的内部设计团队，会包括已经一起合作一段时间的设计师、或者新来的设计师。后者需要这样一份规范了解之前的设计情况，然后才能跟随完成后续的内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

建立版本号管理

大家首先要有一个意识，一份 UI 设计规范，是不可能通过一段时间的努力工作，就达到百分百完善的可能性，因此需要大家经过长时间的维护，逐渐达成一定程度的标准。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

因此需要建立统一的文档名称以及相关的版本管理策略，这样才能够做到明确的了解到更新进度，以及相关的内容完善计划。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

按照我们过去几年的项目经验，一般情况下会按照如下的标准建立文件版本号：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

客户名称_产品名称_文档名称_更新时间_版本号文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

一般情况下，跟随产品内部版本更新的情况，来修改版本号。如果是大版本的更新，那么就是比较大的版本号展示，如： V1.0 、V2.0；如果是比较小的版本更新，那么则按照子集的方式来定义版本号，如：V1.1 ，V2.0.1 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

针对于这样的版本管理，需要在整体团队内，包括设计团队本身，也包括产品、研发、运营等团队建立统一的标准，可以按照具体的情况进行调整，但是人人都要明确，从名称开始，就是规范的一部分。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

建立更新记录

另外一个细则就是更新记录，也就是在哪一天，完成了哪个版本，主理的负责人是谁。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

建议详细写清楚，更新或者修改了哪些内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

这样做的好处在于能够追溯到更新进度，以及更新的具体情况。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

目录

前面已经说过，针对于不同的目标用户，他们在阅读这份规范的时候，可能会有不同的需求，因此需要一份完整的目录协助他们定位到相应的位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

具体目录的展示形式要依据这份规范的展示情况来决定的，总之要考虑到具体的使用情况。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

有了目录， 那么接下来具体的内容就可以按照目录的结构依次进行展示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

产品概述

这部分其实是这份文档的开篇引言，会包括对于这个产品，以及产品使用情况的整体描述。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

概述包括：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

1. 产品的描述；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

2. 设计规范试用人群；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

其中的产品描述部分，可以包括产品品牌方面的一些要求，比如说启动图标的试用情况，品牌 logo 的使用情况等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

色彩

色彩的使用，基本上就要依托于产品定义层面上对于色彩的要求。往往也要考虑到「品牌规范」所要求的内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

色彩方面主要考虑的在于主色调和辅助色，一般适用于通用控件或 强调的内容、文字、标签等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

接下来要考虑的是背景、线条、分隔线等色彩。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

对于不同的产品，需求可能不同，这里不详细描述这些都要包括哪些色彩方面的组合，但是基本上要保证的是涵盖现有产品的所有情况。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

另外色彩方面大家经常会遗漏的是状态问题，包括正常、激活、点击以及点击完毕，针对于按钮、文字都有可能存在不同的展示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

字体与字号

在软件或者网站中，字体为了保证界面的统一性及易读性，一般只会使用一种字体；而对于一些特殊界面或者情况，则要单独处理，添加不同的字体样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

通过文字样式设定字号，比如正文( Body )使用频率最高，那么以它为基准去设定其他文字的大小，或者可以遵照平台对字体的规范结合设计环境进行字号的设定。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

一般情况下，我们要定义尺寸的字号包括：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

1. 标题字体，用于标题或者按钮等；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

2. 正文字体，主要用于界面中显示的文字正文；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

3. 列表分组标题，主要应用于列表区块；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

4. 次要文字信息，主要应用于一些提示信息的文字或者次要信息的文字；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

5. 标签文字，主要是应用在标签上。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

其他可能还有不同的类型，是需要大家结合自己的产品，具体情况具体分析的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

图标

图标的关键在于统一。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

另外依据于模块和功能的不同，需要将图标进行分类，并且保持同一模块或同一功能类型的图标保持大小、风格的一致，并且要考虑到具体的状态问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

状态包括：正常、激活、点击、反馈、不可用等状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

对于应用的启动图标，可以出现在产品概述中，也可以出现在整体的图标规范展示中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

但是具体用法，实际上不建议在这里展示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

布局

产品的界面布局形式，重点会包括一级界面和次级界面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

这里就需要大家做很多归类的情况，把现有能够涉及到的布局形式涵盖其中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

展示形式可以通过线框图原型的方式进行展示。其中比较重要的是一些布局方面数据的规定—— UI 设计师一般都是算术高手。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

为保证界面信息布局的统一性 韵律及易读性，界面中的边距需要统一;行间距种类不宜过多。过多的边距、行间距种类会使界面呈现混乱、 缺乏层级效果，影响用户浏览信息、操作功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

针对于布局方面，还需要考虑到一些特殊界面和创意界面的展示，在这方面，建议能够灵活考虑或运用，比如说一些内嵌的 Webview 界面，主要定义好具体的控件或品牌展示形式即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

控件展示

控件的规范，和一般平台的 UI Guideline 基本上，在这里同样要求各位 UI 设计师能够做到规范化以及按照一定的逻辑进行归类。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

在界面中控件的复用率很高， 所以相同功能的控件样式保持统一；以控件按钮举例，在不同的使用场景下， 按钮的大小、颜色有所不同，但是样式、 文字排版在一般情况下需要保持统一。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

对于每一个控件触发的状态，均需要不同的反馈状态。一般情况下，我们在阅读平台的 UI Guideline 时，能够看到里面会提到正确的情况和错误的情况，而我们在做 UI 设计规范时，一般情况下只要展示正确的情况即可。要保持留有一定的空间，这样才有助于设计师或研发工程师在阅读规范以后，能够产出新的创意，留有一些对于未来创新的期望。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

另外控件的使用，需要考虑到的状态也会有些区别。包括：正常状态、选择&点击状态，激活&活跃状态，以及不可用状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

对于控件，有可能会包括表盘等信息数据展示的控件，需要考虑的情况可能更多，比如说数据过载、警示等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

界面提示

这里涉及到一些界面的提示信息展示的形式，包括：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

1. 弹出窗口，可以使用系统的弹窗，也可以使用自己单独设计的弹出窗口形式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

2. 进度展示，针对于进度条等展示的形式，包括加载过程中的动画等等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

3. 提示文字，针对于界面中可能出现的各种提示文字，给出展示形式的规范。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

4. 为空情况，界面中没有信息，那么是否有给用户的具体提示呢？或者展示的是一个插画，这种情况下也需要编辑进入到 UI 设计规范的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

提示信息的展示，在用户界面设计中，实际上也是非常重要的展示部分，因此在做规范的时候，需要给这些信息留下关键的标记。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

特殊界面

按照我们之前的项目经验，是需要把一些特殊界面也归纳到 UI 设计规范中的，这类界面包括：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

1. App 的启动页面，有的有可能是一张图，也有的可能是一个配合广告内容的启动页面，这种类型的界面同样需要加入在 UI 设计规范中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

另外由于启动页面的形式会频繁做出更新，因此也需要把多种可用的形式记录在 UI 设计规范中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

2. 广告位界面，带有广告位的界面也是需要具体定义它们的展示形式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

我们一般情况下最常见的可能是 Banner 的展示，或者推荐广告的展示（这在产品运营中经常会使用到）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

针对这类界面，我们可能要定义好尺寸，以及配色的范围等，在已有的范围内让设计师们自如的做设计。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

3. 其他界面，这里可能是不好判断的，因为有可能要跟随产品的业务不同，涉及到的界面就会有很大区别。大家要按照自身产品的情况灵活配置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

UI KIT

UI KIT 不应该是一份文档，是一个界面元件库，是一张快捷的图示，告诉所有人现有的产品内容都有什么。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

UI KIT 有助于提升用户查看 UI 设计规范的效率，整理界面元件库包括色彩、字体和字号、 图标、布局及内容、控件等元素，相关人员使用它可以快速的开展设计工作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

切图和坐标标注规范

在 UI 设计规范中，也要包括切图规范。具体什么是切图，如何切图，希望大家去其他问题中寻找答案。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

在这里，我主要讲的是几个切图和坐标标注需要规范的关键点：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

1.切图命名的方式，这个极为重要，能够保证设计师与开发人员的沟通保持顺畅；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

2.切图的规则，一些元素的输出，可能会存在多种输出方式，因此要建立统一的输出规则，比如说，图标的输出，应该是 SVG 的格式还是 PNG 的格式，以及图标的空白余地需要按照尺寸进行定义。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

3.坐标标注的规则，同样是需要我们完善的制定规则，而且对于不同的平台都要单独去定义，包括标注的单位，布局的尺寸规范等等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

需要注意的是，现在有很多的团队逐渐会采用一些比较新的工作方式，来完成坐标标注的工作，因此需要设计师们具体评估自己产品团队的工作流程，是否需要这部分工作，并不是教条的一件事情。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

最后需要注意的关键

最后还有几个关键点，是需要大家注意的：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

1. UI 设计规范不是教条，而是需要大家灵活运用的总结。回到前面提到的目标， UI 设计规范的存在应该是提高工作效率，便于大家配合，而不应该是限制大家的条条框框，要根据具体情况具体分析。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

2. 规范的设定需要后续的弹性空间。规范不可能涵盖所有场景，需要灵活运用，同样在规范设定时不能100%的限制界面中元素，要留有余地，否则设计过于死板，影响设计师发挥。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

3. 设计师需要根据产品的迭代而更新优化设计规范，需要有专人去维护。在产品迭代中对旧的规范中设计不合理的、过时的进行优化处理，并及时归纳整理，通知到相关人员。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/16623.html