如何自定义设计规范

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

01

设计规范的意义

大家知道,现在几乎很多大企业都有自己的设计系统,目的是减少重复性工作,达到全平台体验一致的效果。
设计规范具有明确的指导意义,帮助设计师、开发、产品等人员能够更好的快速搭建设计原型,或者开发提效,最终起到降本增效的作用。
16570737089914
Line Design System

对于企业而言,设计规范能够对外形成一致的品牌调性。
从宏观上来说增强企业对外的品牌感知,我们可以从苹果硬件产品、官网、线下门店、手机软件就能看出设计品牌语言一致的重要性,能够让用户记住你,增强品牌传播口碑率。
对设计师来说,掌握设计规范定义是我们的核心底层能力,现在几乎任何产品都需要做设计标准定义,比如智能电视,手机端,智能手表端,车机端等等。如果你不会,那么你的竞争力自然会减少许多。

02

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

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

16570737688121

这里我选择基于现有产品来展开讲解说明。
第一步:全局梳理产品原有的组件,要有多细呢?
比如图标、色彩、字体层级、按钮、卡片比例、列表类型、网格、圆角、空状态的样式等等,这些所有的都要穷举出来,把它们分类好,方便后面进行规则重新梳理。

16570737843406
NOKIA的设计规范

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

16570737999756
苹果设计原则

第三步:这里就开始基于你定义出来的规则进行重新整理,比如图标大小不统一,这时候你是不是需要重新定义大小,比如定义三个尺寸或者4个,只要满足业务需求即可。
再来说个例子,比如列表,定义方法一样的,把单行列表,双行列表,三行列表,各种分类整理,规则统一,比如行高都是基于8dp的倍数。

16570738100027
Apple List

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

16570738221322
苹果图标规范一致性统一

那么其他组件的思路也是同样的道理,一个个去推导定义出来,当然了,不能一股脑子直接定义,还需要一边尝试一边定义。
第四步:梳理空状态场景规则,比如加载不出来,无网络等等,这种属于全场景都会有,你需要规定统一的风格样式,包括在页面中的布局位置,也可以做成设计模式。

16570738479968

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

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

16570738586990
幽灵按钮和填充按钮

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

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

16570738879817
奥迪UIKT

03

设计规范优化和发展

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

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

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