PMcaff-产品 | 教你做好产品设计规范，提升工作效率

闲话念叨到这，进入正文，关于设计规范、风格指南的话题。就我个人的经历来说，从零开始创建设计规范其实不是易事，包括公司和产品的实际情况、规范的目的、面向的使用者、开工的时间点等等因素都是需要充分考虑的，而且很容易在过程当中跑偏，产出一些并没有实际参考价值的、单纯为了规范而创建的规范。接下来我们一起看看这篇译文，看看作者的一些看法和建议，还有一些不错的范例。走起。

不是所有的网站或移动应用都需要设计规范。你表弟的博客就未必需要，你邻居自己搭建的用来卖猫草的小电商网站也不那么需要，当然这也要看他能卖掉多少，能做到多大规模。

通常，只有那些需要维护专业形象和品牌一致性的产品才真正需要设计规范(或是风格指南一类的说法)。不要把这事儿想的太容易，真正意义上的设计规范需要你花费大量的时间成本去创建并持续维护，所以在决定动手之前，最好确认一下你的产品是否真的需要设计规范，它所需要投入的成本是否能够被接受。

什么是设计规范？

在确认是否需要设计规范之前，我们首先应该明确一下设计规范到底是什么。简单的说，它就是一份由很多范例组成文档(电子文档、印刷文档或HTML文件等)，用来描述和展示你的产品应该具有怎样的外观和交互方式。它就是一份指南，让你在创建和更新网站或应用时知道在什么地方使用怎样的风格标准。设计规范可以帮助你了解一些典型的问题包括“这里应该使用怎样的配色？”、“H1标题要用多大的字号？”、“这部分文字内容应该左对齐还是两侧对齐？”等等。

The Yahoo! Style Guide

你需要设计规范吗？何时需要？

答案取决于你的产品类型，以及设计规范的使用者会有哪些。这里所说的使用者包括设计师、开发人员、内容创建者等角色。搞清楚“规范的使用者是谁”，这非常重要——很多管理人员或设计师会告诉你，如果我们创建一份设计规范，它会在接下来很长一段时间内帮助团队节省大量的时间，叭啦叭啦；但实际情况是，你们很有可能在投入了巨大的时间与人力成本去做这件事之后，却发现这份规范当中的内容对团队里的任何一个职能类型都没有很大的参考价值；最坏的情况是，无论设计师还是开发人员，他们压根就不会去看它。

“时间”也是一个重要的因素。如果你们当前正忙于新产品的设计开发，那么显然无法抽出足够的时间去做规范方面的事情。设计规范是一项长期投资，如果眼下不确定自己有足够的资源可以投入，那么就不要去做，但你可以从现在开始为此做些准备，在新产品的设计开发过程中留意那些有可能写入设计规范的方方面面，将它们作为素材搜集起来，到创建规范的时候加以整理。

你也可以试着回答如下这些问题，如果其中大部分的答案都是肯定的，那么你可以考虑创建一份设计规范了：

你是否想节省脑细胞？
你是否希望在产品中落实良好的用户体验？
你是否觉得有必要在产品的设计方面保持一致性？
除了当前的网站或应用之外，你的品牌和产品在将来是否延续性和扩展性？
是否有第三方合作者会用到你的品牌元素？
你的产品当中是否会有频繁而规律的内容更新？
在自己的团队之外是否有第三方的内容提供者？
你的产品是否有提供给第三方设计师与开发人员的API接口？
你是否准备以公司的形式长期维护当前产品或是继续开发新产品？
你是否就职于一家大公司？

Netflix的API规范（pdf)

怎样创建设计规范？

如果你确定自己需要一份设计规范，那么怎样着手进行创建呢？正如前面提到的，这也要取决于你的产品和团队的实际情况。有可能你只需要为自己创建设计规范，这时它更像是一种备忘或归纳，那么你就没必要做的非常细致，也不需要在表现形式上花费太多时间；而多数情况下，设计规范是面向产品系列及大中型团队的，这时你就必须在个各方面都深入的进行，同时保证必要的细节。

我列了两个清单，分别是“包含哪些内容？”和“还需要些什么？”。其中第一个清单里列出了设计规范当中通常需要涉及到的内容，后者则包括了你有可能需要进行额外处理的内容。当然，这两份清单并不是标准摸板一类的东西，你只需要在创建规范时结合自己的实际情况对这些要点加以考虑。

包含哪些内容？

品牌元素

给出官方logo和标准配色方案的定义及范例，介绍logo在全彩、黑白或不同背景色等状况下的使用方式，提供标准配色的HEX及RGB值，另外也可以提供logo文件的下载，包括.png、.jpg甚至是.ai或.psd文件。

文字

对页头、段落、引用、标签、表单标题等任何有可能出现格式化文字的地方进行规范定义，包括字体、字号、行高、字间距等方面。

布局

定义不同的区块和元素在界面当中的位置，还有它们彼此之间的关系。对于那些在全局范围内普遍适用的外间距(margin)、内边距(padding)、网格模式等规则也要作以说明；另外，有些元素会根据界面环境的不同产生相应的变化，这些也需要在规范中也要进行说明，最好可以搭配图片进行展示。

链接和按钮

定义链接和按钮的视觉风格，为不同模块中的链接以及不同类型表单中的按钮提供色值及图例。这个过程也有可能帮助你对一些过于复杂的界面进行简化。

视觉继承

定义页头、标题、段落、图片等元素是怎样在视觉上保持关联性的，提供必要的图例，并通过文字描述出视觉继承关系对于整个产品的外观气质的影响作用。

图片与图标

对内容和界面元素当中的图片及图标进行定义，包括文件类型、尺寸、文件大小、比例、风格等方面。内容中是否会有特色图片？正文中的图片是左右浮动还是居中？是否有一套特定的图标素材？

UI标准

定义不同的UI元素所对应的交互模式，以及它们的视觉表现形式，例如在哪些情况下使用复选框(check box)或单选按钮(radio button)。可以试着将网站涉及到的所有类型的UI元素都陈列出来，提供图例及前端代码。

表单和验证

定义表单的整体风格及元素布局，对表单涉及到的功能流程进行描述；定义表单的验证规则以及各种有可能出现的错误提示等。

W3C - logo的使用规范

还需要些什么？

多元化

有时你也许需要面向不同的使用者创建不同版本的规范。例如，对于某些类型的网站来说，有着不同级别和权限的内容创建者与管理人员，最有效的做法是针对不同的角色提供特定的规范指导；当然你也可以将完整版本的规范面向不同职能的人员进行订制性的简化。

目标任务

为了使相关配合部门在大方向上达成默契，你也许需要在设计规范中结合具体内容对整个的产品目标及阶段性的工作任务加以描述，这也可以让大家充分理解规范的必要性，理解一致化的表现风格及用户体验对产品策略的推动作用。

代码

根据设计规范所面向的人员范围的实际情况，可以考虑将前端代码标准及最佳实践模式配合图例进行展示，包括HTML、CSS、JavaScript等。

文件规范

你也许需要面向所有的内容创建者制订文件使用方面的规范，包括文件类型限定、命名规则、版本号更新方式等。从长远的角度来看，这样可以避免很多琐碎的潜在问题。

内容标准

面向内容的创建者及管理者，你也有必要在规范中对人工生成的内容进行格式化的定义，例如正文内容的长度、标题的字符数等等。另外对于内容的基调，提交与编辑操作的流程、版权处理方式等等也要作以具有实际指导意义的说明。

评论和论坛

如果你的产品为用户提供了评论功能，或是开设了相关的论坛，那么你同样需要对这些方面的管理进行规范。例如，评论内容的审核标准是什么，怎样回复用户的评论，怎样处理负面内容，在哪些情况下需要关闭评论功能等等。

可下载、可打印

如果你通过在线的方式创建的设计规范，那么要尽量确保相关人员可以将它下载或打印出来，方便离线使用。不过这里也存在一个问题，就是在更新规范的时候无法对他人手中的离线版本进行同步处理。这种情况下可以尝试通过邮件通知的方式加以弥补。

做的漂亮些

既然是设计规范，那么其自身的外观形象也是很重要的。在时间允许的情况下尽量多的使用图片范例，即保证内容形式上的丰富，也能对设计开发人员更有直观的参考价值。从某种程度上讲，设计规范也是产品整体质量和形象的一个组成部分。当然，如果涉及规范只是供内部设计开发使用，不涉及第三方合作的话，那么在资源和成本上进行充分的控制也是合理的，譬如一个内部wiki系统就可以满足最基本的需求。

参考范例

最后我们来看一些设计规范的实际范例；这些实例主要展示了设计规范在品牌元素的使用规则方面起到的作用。

文章来源：Be For Web

pmcaff合作媒体：Chinaz

更多精彩推荐

回复“31”——【干货】腾讯产品大拿告诉你，用户体验是这样设计的！！！

回复“32”——【专访】小米产品经理颠覆早教行业，欲送给孩子1000万美金的人生

回复“33”——【产品】阿里产品经理内训：能力模型解读

回复“34”——【重温经典】张小龙：微信背后的产品观

回复“35”——【专访】PP租车张丙军：“打虎亲兄弟“，好团队才能书写互联网传奇

回复“36”——【干货】产品经理的需求管理

回复“37”——【干货】APP解构重构，让你用户不再流失

回复“38”——【干货】产品经理解决问题七步法则

回复“39”——【运营】你不知道的HTML5的概念、方法和推广实战指南

回复“40”——【干货】从苹果ios8的发布，来细数那些精彩纷呈的引导页

文章推荐可直接回复公众账号或者发送至xiaoxi@pmcaff.com，可根据推荐质量将推荐人邀请至pmcaff智囊团预备群中，原创或者推荐均可，欢迎来稿~