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

对于刚入行的新人，可能觉得设计规范是一件很高大上又很让人头疼的事情，面对这么多设计模块感到无从下手。设计规范如果考虑不到位，往往会出现规范太空洞缺乏实际指导意义、规范太死板影响设计发挥等问题。这篇文章会从新人的角度出发，总结一些设计规范要点，算是一次温故总结的分享。

本文提供网易云音乐和LOFTER的规范文档下载，强烈推荐下载：http://pan.baidu.com/s/1bp2vmwR

文：网易UEDC / 吴良

读者对象：

刚接触产品设计的视觉设计师

一、设计规范有什么用?

设计规范能为团队解决不少问题，并提升工作效率，主要体现在以下三个方面：

1、解决多人协作时控件混乱问题

一个大型项目的视觉稿，往往会有几十个甚至是上百个页面。对于第一次做这种大项目的设计师，如果在视觉风格成型后没有做规范的话，哪怕自己一手包办全部页面，恐怕也很难统一视觉样式。在创作阶段设计其他页面时，如果没有规范来指导，设计过程中很容易产生细微的出入，导致每个控件都会有细微的差别，经常会做着做着就出现控件不一致的问题，比如A页面的按钮是4PX圆角，B页面的按钮又做成了6PX圆角，再后来做的C页面的按钮又做成了2PX圆角。如果一直埋头苦干赶页面，没检查出这些问题，页面做的越多错误就越多，到时候几十个页面的控件都要修改，那可真是苦不堪言啊。

一个人做页面尚且会出现这种样式不统一的问题，更何况是多人协作。因此，在进行多人协作一个项目前，可由主视觉设计师出一份视觉规范，其他一起协作的几个设计师遵循这个规范，才能把控视觉统一性，提高效率，减少返工率。

另外，当新人加入团队的时候，他们对产品的品牌基因可能理解不透，这时设计规范就可以帮他们快速上手，并且保持产品的统一性。

2、解决开发效率、代码冗余问题

如果没有做规范，就拿按钮这个常见的控件来举例，程序员不知道具体的规范，每个程序员用代码写了A页面的按钮样式，然后在开发B页面时又要重新用代码写按钮样式，页面越多程序员的工作量也就越大，影响项目进度，代码也会越来越臃肿。

如果做了规范，程序员从视觉规范中了解到哪些控件是可以一次性写好并能重复调用。在规范的辅助下，程序员在搭建全局共用元素时规则更加清晰明了，如按钮、行间距、字体大小、色值等等。

另外，对于末端界面没有规范到的角落和由规范控件组成的新页面提供了有效参考，比如规范中已经列出的5种常用弹窗样式，后来需求迭代时出现由原有规范样式混搭组成的新弹窗，这时程序员就可以借鉴原有5种弹窗里的标题、间距、按钮等样式去完成该工作。

3、解决产品迭代中品牌形象会走样问题

产品在迭代过程中，往往是小版本进行几个功能的迭代比较多。如果没有做规范，在多次迭代过程中会忘记设计初衷，同样一个TAB控件，可能会出现多种不同样式的TAB，举一反三，这种太随意的设计会让产品控件混乱，导致品牌形象走样，看起来很不协调，像是几个风格不同的设计师共同完成的半成品。

有了规范，后续迭代中也能保持设计初衷，遵循定制好的设计规范，维护好品牌形象。就算是后来加入新的设计师，新的设计师也能通过主设计师做好的规范，统一品牌形象。

规范能使产品在不断更新迭代中保持品牌形象不走样，保持产品特性，产品的规范统一增加了用户使用认知，不同程度有效提升用户体验。