一直以来，制定design guidelines被普遍地认为是一项庞大的工程。
大家可能被“guideline”这个词吓到，几乎每个designer都有阅读ios design guideline或Android design guideline的经历。那些又长又复杂的文档确实让人头大，也因为这个，很多人认为design guidelines是那些“big company"的事情。
“对于我们一个小小的团队，或者单打独斗的设计师而言，有什么必要呢？”
目前主流的设计开发流程，如agile design（敏捷开发）中，我们很少看到设计design guidelines这一项。
敏捷开发流程 - by New Haircut
Design guidelines去哪了？它真的不重要吗？
其实，很多团队已经逐渐意识到了缺少design guidelines所带来的问题。包括我自己，从大团队到startups，身为一名designer，我是整个产品开发流程中的一环。在整个流程中，团队沟通与协同合作是必不可少的。缺少design guidelines，合作会变得复杂。
所以今天我就来简单聊聊design guidelines这个玩意儿。
1、Design Guidelines是什么玩意儿？
如果你有这样的疑问，这篇文章正适合你。
过去我所参与过的项目中，我经常听到manager或者director说 “目前，我们正在着手制定我们的Design Guidelines（or System Guidelines or Design Opts)”。
“Design guidelines are intended to provide clear instructions to designers and developers on how to adopt specific principles.” - Interaction Design Foundation
简而言之，design guidelines就是一项“指南”，是“设计狮”和“程序猿”之间沟通的桥梁，是产品团队提高效率的利器。
Design Guidelines可以很系统很复杂，如ios design guidelines或Android design guidelines。也可以很简单，如几页pdf简单说明字体，颜色，icon等。对于小团队或第一次制定的design guidelines，简单、清晰、短而精是一个好的开始。
一项chat bot开发的design guidelines - by Vidia Anindhita
当然，更精细的design guidelines能提供更多的信息。尤其是设计团队和开发团队沟通时用的guidelines，需要标注更多开发时需要的内容：如颜色代码（是用HEX值？还是RGB？）、像素单位（pt? dpi?) 。这也是为何一个懂coding的设计师在真实工作中能更高效地输出自己的产能。（很可惜，很多团队依然没有意识到这一点）
当项目变得复杂时，不断的添加更新design guidelines是很有必要的。没错，design guidelines也需要迭代。
一项website开发的design guidelines - by Vidia Anindhita
2、Design Guidelines的价值？
身为一个“效率优先“的摩羯座设计师，我从来不做无意义的工作。(Just kidding ;P）
那Design Guidelines能带给团队什么样的价值呢？
- 对外：建立统一的用户体验。Keep the integrity and consistency of a product.
做PPT时，每个人都知道一个统一的主题能瞬间提高PPT的档次。Design Guidelines也有一样的功效。统一的设计，首先能带来舒适的视觉体验，其次有助于建立产品的品牌，提高品牌的辨识度和可靠度。
视觉不是用户体验的唯一，但是是其中重要的一环，是用户首先接触到的东西。统一的视觉能更清晰的指导用户。想象一下，当产品的开发者都不知道什么时候用什么样的字体和颜色时，看到不同字体和颜色的用户就更加一头雾水了。
- 对内：简化交流，保持统一。It is important to maintain the scalability.
前面也提到，Design Guidelines更多是给产品团队内部带来便利。
这里举一个真实的“栗子”。
我的一位好友，在韩国某S开头大公司担任了7年的UX designer兼font-end developer。她曾和我吐槽，在工作中遇到的最大的问题是设计团队和开发团队交付信息的不统一。
一个小的细节，设计师们决定颜色时是很随性的，不同的设计师会用不同的颜色代码来决定颜色。虽然肉眼看上去的颜色是一致的，但是所用的代码却千差万别。当设计文档交付到开发团队后，程序员们根据设计师所标注的代码来实现设计。一个设计师一种编码，一个团队的设计师就是好几种编码。虽然对于设计师而言标注编码没有什么，但是在开发时不同编码的写法是不一样的，所以编码的不统一给程序员们增加了多余的工作负担。
这里分享一个很好的Design Guidelines例子，是Shopify Design Guildline中关于color的制定。
Shopify design guildline - color
3、从"零"开始建立design guidelines?
说了那么多有的没的，来说点实际的。这里提供一些快速搭建design guidelines的方法，适用于小团队或初版的design guidelines。
无论你是Sketch党还是Adobe党，工具不重要。建立一个新的canvas/page (whatever it is called)，取名为design guidelines。很好，你已经迈出了第一步。
- 基本要素:
字体 Font：列出文字的使用场景，如标题，副标题，说明，引用，正文等。制定每一种文字的字体，大小，颜色。
颜色 Color Palette：主题色，副主题色，主体色，字体颜色等。元素在不同状态时的颜色。每个颜色的名称+颜色编码。
图标 Icon：列出常用icon。元素不同状态时的icon。icon的尺寸。
形状 Shape：列出常用形状。尤其应用圆角时，标注圆角的大小。
- 常用元素：如button，text field，input field等。制定每一个元素的不同状态，以及在不同状态下的视觉。
- 进阶：如illustration，motion design，sounds，tones等。这些元素能让产品拥有更好的用户体验，是点睛之笔。当然需要考虑到产品的所处的阶段，并不是所有的产品都需要立即拥有。
这些描述可能让你看得头大，没关系，后面会有实际案例供参考。
制定合适的design guidelines需要团队的共同参与，但不妨由一个人先发起行动，从最简单的开始。“开始”是成功的第一步。
4、案例推荐
看了那么多文字说明，最有效的还是看几个优秀的design guidelines案例。
大苹果和大谷歌就不列在这里了，大家应该都读过了。推荐几个容易上手的。欢迎大家补充。
Shopify Design Guideline - 简洁清晰。并且包括illustration和sounds的设计指导，值得一读。
Slack Brand guidelines - 包含logo，color和text。
如果你有时间， Discover the world's best design practices—DesignBetter.Co
希望大家喜欢这次的文章！希望能带给你们一点点的帮助或灵感；）
欢迎留言讨论，大家共同进步~
也欢迎私信给我 mx536@nyu.edu
网友评论