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

原创： Kevin改变世界的点滴 Kevin改变世界的点滴

3天前

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

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

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

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

设计规范的分类

UI的设计规范总共能够分为三类：

品牌类（VI）

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

平台、系统类

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

产品业务类

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

互联产品的设计规范概念

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

Style Guide

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

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

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

Pattern Library:

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

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

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

Specification(Spec)

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

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

UIKit与设计文档规范

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

固然，若是团队中已经有几个设计师的状况，能够考虑在基础控件、组件上创建规范，方便设计稿合并的时候能够链接上。

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

设计师也须要从无规范到沉淀本身的规范，若是一个版本推翻，就所有从新更换规范。这就是去了规范的意义，规范是能够复用，而且也可让用户达到了固定的认知，推翻则多是对用户习惯的挑战

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

好比小程序与app或web，若是已经订好了web，则设计师能够经过该规范快速产生小程序设计稿，让小程序能够用一套规范

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

UI设计文档规范

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

文档规范又分：

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

  
  

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

  
  

• 图标库（Icon)

  
  

• 控件库（UI Toolikt)

  
  

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

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

企业vi/品牌形象的规范

企业vi并非互联网的UI规范，他没有像互联产品的什么button\控件等。但他们都很是类似，由于二者紧密相关。经过企业的logo展开的产品、企业服务、企业形象都是vi、UI设计师须要考虑的。

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

苹果

设计UI规范步骤

既然知道UI规范有什么，须要什么内容。UI同窗真正在实际工做中是如何创建设计规范的？

大致的流程为：

浏览全部组件》分类》整合》参考竞品，优化组件》写UI文档》验证、拓展更新

浏览组件

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

分类

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

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

整合

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

参考竞品、对照需求，优化组件

经过分类，咱们能够以组件的类型去参考一些好的案例。好比网易、腾讯等产品，甚至是本身所在行业的竞品，上面咱们只是把以前的组件进行了规整。接下来就是对不一样类型的组件进行优化，由于不少组件可能在没有规范的时候实际上是老化或淘汰的。

参考竞品既能够知道组件规范的问题，也能够知道是否付费时代用户趋势。在这步完成后，咱们的组件就基本新鲜出炉啦。

写UI规范文档

经过上面的工做，咱们接下来使用sketch或蓝湖等工具，将文档规范输出。注意前面说的，UI规范文档是一个持续动态的文档，保证团队能够及时更新和复用。下面是一个例子

颜色提供高度定制化仍是提供有限色板

在这里有2个前端开源工具，分别是Bootstrap和Semantic UI，都是很是丰富的前端规范案例。

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合做基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷

Semantic UI

Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

在色调的选择上

有去色板的，色彩主题很是容易切换；因为颜色的可选性很少致使场景的选择上会更加苛刻，或者须要添加额外的设计

定制化的优点是方便提供色彩的丰富性，每个component的颜色均可以毫无相关，但劣势是增长了色板的控制难度，对开发的要求也会很是高。开发须要经过管理不肯定的颜色，就要管理未知的代码设计。

下面是在是一个案例

本次规范内容原创的做者门：

阿本、陈希 Chris、周莜、叶卉、静静、阿本、icecreamliker

原文连接：https://www.zhihu.com/question/29936125/answer/97371682

（如有侵权请留言删除）

好的内容会发光，感谢他们的内容提供。相信也能在这里帮助正在阅读的你

定一套设计规范，减小产品弯路

之因此花这么长时间整理这篇概括内容，是近期在工做中深入认知到一套UI规范是能够大大提高开发效率，减小在测试、UI还原的工做量，并在思考一个问题产品经理如何协助UI定规范？

产品经理须要告知需求的背景、需求介绍、产品将来的规划甚至是产品的商业模式

固然，若是你只有一个点子，尚未开始你的项目运营。那设计规范能够放在后边，但当项目上线后，逐步开始进行UI的迭代与团队成员增长，一个持续动态更新的UI规范是很是有必要的。

产品经理要知道在UI规范中常见的一些事件，好比按钮的状态、输入框的状态等类型。由于不少状况下，UI设计师一我的是没办法所有想全面，产品经理须要在测试环境甚至是线上环境就给予建议。

固然，理想的方式仍是在UI设计中就给予对应的元素、元素状态。

在最后，产品经理如何与UI进行有效沟通展开协做，也会在我《Kevin带新人第二期》中教学，30个学生目前还剩18个名额。

在春节，进行一次成功的产品经理转型、完成训练，是本次训练我开设的目标。若是你还在担忧鱼龙混杂的产品课程现状，这一次你不妨能够试试。若是你想了解课程大纲能够点击下面连接