一文读懂：如何建立UI设计规范

我们在做互联网产品中，有的是以产品功能，但大部分以项目为纬度进行分割。在产品1.0后，设计团队需要UI设计师建立规范，如果你所在的产品团队有2个以上的UI同学。那可能在1.0还没开始，一套好的UI规范就是需要立马做的。

首先要明确，UI规范是需要UI设计师或UED团队来完成的。但今天这里我归纳了一些好的设计规范方法集合（含多个案例）。

从如何建立设计规范、团队什么是需要规范、设计规范应该有什么纬度，本文涵盖较多的图片内容，建议注意。

下面这些内容都来自一群优秀的设计师回答者，通过产品经理视角归纳了上面3个问题的答案。

UI的设计规范总共可以分为三类：

帮助企业做的宣传手册、PPT、市场公关等pr文件，企业的整体形象颜色。就好比你现在看到的瓜子二手车，绿色是整个的颜色。

常见的是IOS、谷歌、开放平台、小程序等，需要第三方开发者介入，需要第三方的开发者在设计上遵循什么理念，以及遵循该套理念 后的背景与原因、好处

面向产品内部，规则侧重在产品设计和实现层面，实用性第一。设计文档、标注都不能少，其他设计同学或工程师可以直接参考或使用

设计互联网产品，Style Guide /Pattern library、Specification各具不同的功能和作用，却都含“设计规范”的概念

偏重视觉概念，常见文档或图像格式呈现（还可以扩展）

内容：对设计作品的字体（Typeface)、字型（Font）、色板、品牌标识规范（Brand Guideline)、Icon等要素进行展示和说明

这个部分主要的功能是方便设计师与设计师之间，展示产品的视觉风格。方便风格复用，规范新的元素或第三方接入。

偏重（web前端）开发概念，基本都是以网页文档形式呈现

内容：对界面元素（UI Elements)的样式风格以及实现其效果所对应的代码片段作出解释（HTML、CSS），常见的布局（Grid System)、字体排版（Typography)、按钮、菜单、列表、对话框（Dialog)、Toolip等等

可以帮助团队Web设计和协作开发，统一产品风格。减少UI还原与验收的工作，保证用户体验与最初设计稿一致。

介于设计与开发之间，由设计师直接在（mockup)中创建

内容：主要由Annotation（注释，国内俗称“标注”）和Measurement(量度）构成。其实说白了就是我们常规研发中的让UI切图，是开发与设计人员最直接的交流。通过切图，我们可以把字体字型、色纸

细节的设计规范在不注重设计的公司是非常难以推动，第一是版本变化太快。很可能今天上线的新产品，明天就说要重构。UI稿都没时间做完了，哪还有时间去琢磨这个版本的设计规范，小步快跑待商业模式清楚后再去考虑设计规范的事情。

当然，如果团队中已经有几个设计师的情况，可以考虑在基础控件、组件上建立规范，方便设计稿合并的时候可以连接上。

通过设计团队一起讨论、草稿、细化、定稿、规划、批量化，设计规范就像炒菜一样。绝对不是通过加点盐、少点醋可以把菜做好的，而是通过时间的积累，越沉淀会越香。

设计师也需要从无规范到沉淀自己的规范，如果一个版本推翻，就全部重新更换规范。这就是去了规范的意义，规范是可以复用，并且也可以让用户达到了固定的认知，推翻则可能是对用户习惯的挑战。

UIKit,其实说白了是将设计稿源文件以 psd\sketch文件，可以让不同设计师快速使用，并且产生设计风格相似的产品。

比如小程序与app或web，如果已经订好了web，则设计师可以通过该规范快速产生小程序设计稿，让小程序可以用一套规范。

如知乎在web的热搜榜与知乎小程序的热搜

UI设计文档规范

文档与UIkit的不同点在于，可以更加详细和准确的表达。对风格、颜色、文字、控件、交互、图标、东校，甚至还可以包含配乐都有了明确的标注。需要不停的更新、迭代、完善，这是一个持续的动态文档。有点类似产品经理的需求池、需求文档一样，随着新功能、新版本、新元素的加入，设计师需要增加UI设计文档规范的内容甚至推翻部分规范。

文档规范又分

• 字体排版（Typography),即界面式设计

• 颜色（Color)规范，产品主要的颜色库

• 图标库（Icon)

• 控件库（UI Toolikt)

• 视觉框架（Visual Hierarchy)，定义产品的交互框架结构，与信息架构有关需要产品经理参与

下面是一个UI文档规划web端案例

企业vi并不是互联网的UI规范，他没有像互联产品的什么button\控件等。但他们都非常相似，因为两者紧密相关。通过企业的logo展开的产品、企业服务、企业形象都是vi、UI设计师需要考虑的。

两个比较好的例子就是MUJI和Apple，下面分别是他们的app \网页\实体店。

MUJI

Apple

设计UI规范步骤

既然知道UI规范有什么，需要什么内容。UI同学真正在实际工作中是如何建立设计规范的？

大体的流程为

1. 浏览所有组件

2. 分类

3. 整合

4. 参考竞品，优化组件

5. 写UI文档》验证、拓展更新

浏览组件

浏览产品所有的页面，对产品的组件进行全面的了解，比如如果是社区产品，则feed流、登录注册、图文组件。一定要注意纬度是最细的：组件，搞清楚有多少种组件

分类

不同行业的产品，组件的优先级会有不同。比如电商类的是以图文组件、新闻资讯的是信息流组件。

通过截图的方式进行收集，不要一开始就用sketch或axure来进行绘制。非常耽误时间

整合

对组件进行分类，注意的是有一些组件可能会出现个性化的情况。根据产品经理需求而定。对照新版本和需求，对现在没有的组件也进行标注，以下面的方式进行展开