超实用6步透视网易设计规范（附完整PDF下载）

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

对于刚进入这个行业的新人来说，他们可能会觉得设计规范是一件非常高大和令人头痛的事情。面对如此多的设计模块，他们感到无法开始。如果设计规范考虑不到位，往往会出现规范空间缺乏实际指导意义、规范过于僵化等问题，影响设计发挥。本文将从新人的角度总结一些设计规范的要点，这可以看作是对旧总结的分享。

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

文字：网易UEDC / 吴良

一、设计规范有什么用？

设计规范可以为团队解决许多问题，提高工作效率，主要体现在以下三个方面：

1、解决多人合作时控制混乱问题

一个大型项目的视觉草案通常有几十个甚至数百个页面。对于第一次做这个大项目的设计师来说，如果他们在视觉风格形成后没有规范，即使他们安排了所有的页面，也很难统一视觉风格。在创建阶段设计其他页面时，如果没有规范指导，设计过程中很容易产生细微的差异，导致每个控制器都有细微的差异，经常出现控制不一致的问题，如A页面按钮为4PX圆角，B页面按钮为6PX圆角，然后C页面按钮为2PX圆角。如果你一直在努力赶上页面，没有发现这些问题，页面做得越多，错误就越多，那么几十个页面的控制就会被修改，这真的很痛苦。

当一个人制作页面时，这种风格仍然是不统一的，更不用说多人合作了。因此，在进行多人合作项目之前，主视觉设计师可以制定视觉规范。只有遵循这一规范，其他几位设计师才能控制视觉统一，提高效率，降低返工率。

此外，当新人加入团队时，他们可能无法理解产品的品牌基因。此时，设计规范可以帮助他们快速启动，保持产品的统一。

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

如果没有规范，以按钮为例。程序员不知道具体的规范。每个程序员用代码编写一个页面的按钮样式，然后在开发B页面时使用代码编写按钮样式。页面越多，程序员的工作量就越大，影响项目进度，代码就会越来越臃肿。

如果做了规范，程序员可以从视觉规范中了解哪些控制器可以一次性编写并重复调用。在规范的帮助下，程序员在构建按钮、行间距、字体大小、色值等全球共享元素时，规则更加清晰。

此外，终端界面未规范的角落和由规范控制组成的新页面提供了有效的参考，如规范中列出的五种常用弹出窗口风格。后来，当需求迭代时，由原规范风格混合组成的新弹出窗口。此时，程序员可以从原来五个弹出窗口中的标题、间距、按钮等风格中学习。

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

在迭代过程中，产品通常是一个小版本来迭代几个功能。如果没有规范，在多次迭代过程中会忘记设计的初衷，同样的TAB控制例如，可能会有各种不同风格的TAB。这种过于随意的设计会使产品控制混乱，导致品牌形象变形，看起来非常不协调，就像几个不同风格的设计师共同完成的半成品一样。

有了规范，后续迭代也可以保持设计初衷，遵循定制的设计规范，保持品牌形象。即使新设计师后来加入，新设计师也可以通过主设计师的规范统一品牌形象。

规范可以使产品在不断更新迭代中保持品牌形象不变形，保持产品特点，产品规范统一提高用户使用意识，有效改善用户体验。

二、设计规范操作五大误区

设计规范的工作量不小。在开始之前，我们应该知道有哪些误解，尽量少走弯路，更科学高效地完成一份有效的规范文件。

错误1：规范建立时机错误1：

标准化建立的时机非常重要。过早或过晚会给后续迭代带来很多麻烦。

如上图所示，如果在创作初期制定设计规范，则视觉风格尚未形成，投入过多精力进行规范。视觉风格定位后，以前的视觉规范将被推翻和重做。因此，过早制定设计规范将导致不必要的返工。

如果V1.0上线后开始规范，错过了最佳时机。因为V1.0开发的后半部分是设计师开发页面和程序员，在设计师开发页面的阶段，如果没有设计规范指导往往难以保持视觉统一，然后页面到程序员，每个页面的相同控制风格不同，混乱不协调的控制库会给程序员带来麻烦，从而影响开发进度。在程序员的早期开发阶段，如果有规范，可以根据规范快速建立控制库，高效完成工作。

因此，最佳时机是在完成风格定位后进行规范，能够承上启下高效完成工作。

错误2：规范非重要界面的设置

我记得当我第一次接触到设计规范时，我认为设计规范就像一本设计圣经，可以非常详细和全面地指导设计工作。然后我对所有界面都做了详细的规范。我花了很多时间和精力制定了几十页和几十个细分模块的设计规范。最后，在实际应用中，我发现我被这个设计规范打了脸，因为有时我会制作一个新的页面。如果100%的僵化遵循规范，视觉效果不好；如果完全抛开设计规范，以前做的过于全面的规范将是徒劳的。可以看出，过于全面的规范会影响设计师的发挥，这不是一件好事。

因此，在整理规范时，应只设置控件、色值、质感、动效、品牌元素等重要界面。

错误3：规则不灵活

采用28原则只能规范产品80%的界面。这里提到的80%和20%是一个相对的概念，80%代表颜色、按钮、字体、间距等重要内容，需要详细说明。另外20%意味着有些控件不能重复使用，也不重要。这20%的内容不需要花费精力进入规范。这一28原则需要设计师根据具体情况进行分析，使其更适合当前设计。

如果对所有界面进行100%的规范，一方面会限制设计师的发挥，另一方面也会影响产品迭代的设计弹性。比如一个产品官网进行了100%的规范，需求迭代时需要在导航上加一个活动入口。这个时候，如果按照原来的导航规范加这个活动入口，视觉效果和活动数据效果可能不理想。因此，面对这种需求，也可以适当地进行导航调整。

从技术实现的角度来看，字体的选择、产品设计和推广设计有很大的不同。

推广设计的风格多种多样，需要根据需要选择字体来营造氛围。推广设计的字体通常是在图片上制作的，不需要考虑字体是否包含在用户的设备中。

产品设计的字体很少在图纸上制作。大多数字体由前端工程师实现。设计师通常选择用户设备中的字体进行设计。如果页面中使用大量的第三方字体，如兰亭黑和正黑，用户的设备将在没有这些字体的情况下以默认字体显示，最终效果将与视觉手稿大不相同。

此外，从视觉层面来看，文本的层次通常用字体大小来区分。如果你用字体大小和不同的字体来区分信息，它会显得凌乱和缺乏美感。因此，字体的数量应该减去。如果你能使用两种，你就不能使用三种，如果你能使用一种，你就不能使用两种。

2、控制系统：按钮样式统一

按钮控件在产品中的复用性很高，同样的确定按钮也会根据页面环境设置不同的宽度和高度。

需要注意的是，即使按钮宽度不同，按钮风格也需要统一宽度比、边缘、直角、圆角、色值、文本区域、字体、字间距等，以确保按钮风格的统一。

此外，在正常情况下，按钮有四种鼠标状态。在不同颜色的按钮之间，相同的鼠标状态也需要统一的视觉效果。例如，当同一级别的蓝色和绿色按钮放在一起时，这两个按钮的亮度变化应该相对统一。

3、布局系统：界面内不能出现多余的行间距

在设计过程中，隐形元素间距往往被新人忽视。间距可以显示内容之间的层次和从属关系。混乱和复杂的间距会给用户的认知带来很大的麻烦。

因此，设计师需要将间距设计为颜色、字体和字体大小相同的元素。如果一个界面可以使用5个间距，则不要使用6个间距；如果你能使用3个，就不要使用4个。这是一个需要减法的设计原则。

此外，内部距离不应大于外部距离。在大多数环境中，当外部距离小于内部距离时，内容会有外部扩展，这是拥挤和阅读压力。当外部距离大于内部距离时，会有适当的空白。内容没有外部扩展，用户的视线不会受到干扰，他们会更加关注内容本身。

4、配色系统

在选择主色调时，首先确定产品的色调、用户对象和要表达的氛围，以及使用颜色想要达到的目的。颜色取向决定了产品的风格。产品的辅助颜色可以是主色调的相邻颜色，也可以是对比色。在确定主色调和辅助色调之前，建议将其应用于各种页面，以查看实际效果，因为每个页面的使用环境不同，最终的颜色方案只能在反复验证后确定。

一般来说，可以选择一到三种辅助颜色，整个产品的颜色最好控制在四种颜色之内。

5、品牌系统：LOGO应用

LOGO将应用于各种页面。LOGO定稿后，需要对LOGO的各种组合进行整理，以便于后续的实际应用。例如，LOGO的左右结构和上下结构；反白情况；黑白情况；单色情况；黑底和白底情况；最小尺寸；需要标记错误的使用方法。

6、推广系统

推广规范的设置应突出商品、主要内容和主要文案。无版权的图片和字体不得使用。文案排版应符合阅读习惯，避免折叠。字体不宜过小，字体笔画识别度高，辅助图形不得扰乱文案信息和产品展示。

以及具体的排版结构，无论是上下还是左右，先图后文，还是先图后图，周围的边距和副本之间的距离，可以和不可能的排版行为需要标记。

四、设计规范案例

网易云音乐android端V3.0版规范遵循28原则，规范80%产品的主界面，规范中有序安排ICON的风格统一、色彩整体控制和品牌统一。这种精致严谨的设计规范列出了大量方便复用的控件，在内容框架梳理和模块细节描述上极具参考性，非常适合设计新人参考。

经过几个大版本的迭代，LOFTER的设计风格和LOGO发生了变化，因此规范也进行了迭代和优化。与V1.0和V5.2规范相比，可以发现LOFTER只需要在V1.0产品的早期阶段规范颜色、品牌大小、按钮等主要模块。随着产品的发展，对V5.2版本的设计规范进行了更多的补充说明，并保持了产品本身的品牌基调。

LOFTER是一种精美的设计规范，页数不多，但每一页都是经过三思而后得出的总结，推荐一看。

本文下载了网易云音乐和LOFTER的标准文档 http://pan.baidu.com/s/1o8arqhc