如何定义设计规范，总监看完都说方法太实用！

关注 功夫体验设计 与十万读者见证成长的力量

这是功夫体验设计公众号第 238 期分享

作者 | 刘涛

经常有同学问我如何定义设计规范，网上很多文章看完后还是云里雾里的，不知道如何下手做，即使看懂了一些，但真正当自己做的时候，就不知道怎么开始。

今天我们主要来说说定义设计规范的基本思路流程，以及如何从原有产品中全局梳理出组件，重新进行优化定义。

设计规范的意义

大家知道，现在几乎很多大企业都有自己的设计系统，目的是减少重复性工作，达到全平台体验一致的效果。

设计规范具有明确的指导意义，帮助设计师、开发、产品等人员能够更好的快速搭建设计原型，或者开发提效，最终起到降本增效的作用。

Line Design System

对于企业而言，设计规范能够对外形成一致的品牌调性。

从宏观上来说增强企业对外的品牌感知，我们可以从苹果硬件产品、官网、线下门店、手机软件就能看出设计品牌语言一致的重要性，能够让用户记住你，增强品牌传播口碑率。

对设计师来说，掌握设计规范定义是我们的核心底层能力，现在几乎任何产品都需要做设计标准定义，比如智能电视，手机端，智能手表端，车机端等等。如果你不会，那么你的竞争力自然会减少许多。

如何定义一个产品设计规范

设计规范的定义方法很多，不同的视角切入也会有不同的流程，今天我们分享主要以通用类型的思路，大家看完后这套底层的方法掌握，可以迁移到其他产品设计规范定义中。

这里我选择基于现有产品来展开讲解说明。

第一步：全局梳理产品原有的组件，要有多细呢？

比如图标、色彩、字体层级、按钮、卡片比例、列表类型、网格、圆角、空状态的样式等等，这些所有的都要穷举出来，把它们分类好，方便后面进行规则重新梳理。

NOKIA的设计规范

第二步：当你梳理完后，这一步需要从原则层面定义，因为设计原则能够指导你接下来的一些工作，比如网格定义，图标尺寸大小定义等。这一步很容易被大家忽略掉，最好加上去，尽量避免后续再补充。

苹果设计原则

第三步：这里就开始基于你定义出来的规则进行重新整理，比如图标大小不统一，这时候你是不是需要重新定义大小，比如定义三个尺寸或者4个，只要满足业务需求即可。

再来说个例子，比如列表，定义方法一样的，把单行列表，双行列表，三行列表，各种分类整理，规则统一，比如行高都是基于8dp的倍数。

Apple List

如上图，苹果列表，大家可以从图中看出，都是单行列表，左侧是小图标，右侧是大图标，但是我们可以看看，在图标区域他们大小都是统一的，这个就是高明之处。

苹果图标规范一致性统一

那么其他组件的思路也是同样的道理，一个个去推导定义出来，当然了，不能一股脑子直接定义，还需要一边尝试一边定义。

第四步：梳理空状态场景规则，比如加载不出来，无网络等等，这种属于全场景都会有，你需要规定统一的风格样式，包括在页面中的布局位置，也可以做成设计模式。

比如上图，这些POPUP的场景图形，同样也是需要定义其位置和风格样式，这些都是在规则里面统一定义。

第五步：全局所有的组件，需要考虑命名规则。比如常用简单命名方式，Btn_Ghost_Normal，这里需要注意Btn是Buttons的缩写，命名时候尽量可以使用缩写单词，其他组件也是同样的思路。

幽灵按钮和填充按钮

当然命名方式很多种，可以根据自己业务和公司团队协作方式来定。

第六步：到这一步基本上前面的定义完整了，这里可以整理成UIKT和library输出给团队使用。

奥迪UIKT

设计规范优化和发展

设计规范并不是一层不变的，而是需要不断使用，发现问题，然后优化调整到最好的状态。

任何好的设计规范都是在不断使用中，不断满足产品不同功能不同场景的使用需求。当然规范的发展壮大，并不是定义规则人的事情，需要整个团队在使用过程中，发现问题后，即时提出来，交给规范小组去优化。

没有什么完美的规范，任何规范都很难去覆盖到全场景，这就需要设计师个性化定制不同场景规则。