超实用六步透视网易设计规范分享

错误五：规范没有执行力

有两种规范是缺乏执行力的：

第一、规范内容不具体，缺少对核心模块的细节说明。各个模块缺少必需的说明，比如色彩模块中有主色却缺少辅助色的说明，按钮模块中缺少滑过、点击、不可点状态的说明，字体模块缺少字体磅数的分布设定。这种没有核心内容的规范，没有参考价值，规范的作用几乎等于零，其他参与项目的设计师还得找制作规范的设计师要相关的规范才能进行下去，所以这种类型的规范是没有执行力的。

第二、规范太全面死板太臃肿，无从看起，对后续设计有束缚。对所有界面的所有元素进行规范，连不重要的元素也强行归纳进来，多达几十页的规范文档。造成三方面的影响，一是会增加大量没必要的工作时间来制作规范，二是设计师和程序员需要花很多时间精力去看无关紧要的内容，增加了很多负担。三是设计本来就不是一件绝对的事，需要20%的灵活空间，不然后面遇到新的页面，死板的把规范用在新的页面上，出来的效果可能并不好。

三、设计规范怎么做？

设计规范的模块分类有很多，会让新人感到无从下手，怎么样梳理才更能科学易用?以下六个维度可以作为参考。

1、信息系统：字体选择、颜色、层级区分

产品中的字号应该有一个全局的规划，在同一个界面内，尽量少用太多太接近的字号，比如一个产品详情页的正文部分，如果同时用了12、13、14、15、16、18去排版，文字的层级对比会比较弱，不利于阅读，视觉效果也会有点凌乱。

如果你对全局的字号没把握，不妨参考一下上图的字号分布，这套基于12、14、16、20和34号的字号分布能够良好的适应布局结构，层次明晰，所以具有一定的参考意义。当然以上仅供参考，没有绝对的字号布局方案，设计师可以根据具体的产品情况来分布。

如上图所示，「L」和 「XXL」用了两个很相似的颜色#666666和#6e6e6e，这两个颜色肉眼难以区分，在同一层级去做字体颜色区分是没必要的。同一组中的内容属于同一层级，从信息层级来讲应该要用同一种颜色，表示是同一个层级。

产品文字中一般会有一级标题、二级标题、一级正文、二级正文、提示文字、辅助文字等，为了区分层级便于浏览，通常会根据产品需要把字体颜色深浅分成3到5个层级，常见的有#333333、#666666、#999999这个组合，这个组合的层级区分比较分明，适应性比较广，因此有一定的参考价值。

从技术实现层面来讲，对于字体的选择，产品设计和推广设计有较大的区别。

推广设计的风格多种多样，需要根据需求选择字体来营造氛围，推广设计的字体往往是做在图片上，不需要考虑用户的设备中有没有包含该字体。

产品设计的字体，很少会做在图上，大多数字体由前端工程师来实现，设计师一般会选择用户设备里自带的字体来进行设计。如果在页面中用了兰亭黑、正黑等大量第三方字体，用户的设备没有这些字体就会以默认字体来显示，最终效果会和视觉稿有很大出入。

另外，从视觉层面来讲，文字的层级一般用字号去区分，如果既用字号去区分，又用不同字体去区分信息，会显得凌乱缺乏美感，因此字体的数量应做减法，能用2种就不要用3种，能用1种就不要用2种。