在品牌设计中，品牌风格指南是最重要文档之一。无论是建立一个全新的品牌，还是为一个现有公司重建品牌，都需要为之定下基调，围绕着这个品牌建立一系列具有凝聚力的素材和规范。

在这篇文章中，我们将会探讨一下针对不同用户群体创建设计风格指南的技巧，如何通过系统化的细分来强化品牌生态系统。文中所涉及的技巧不仅适用于传统的品牌，其中还有一些建议会有助于依托互联网创建和传播的原生品牌。

用户#1：你自己

人都需要规则约束，包括自己。同时，人也需要责任感。如果没有这些，你将无法塑造拥有凝聚感的品牌。创建一套规范的设计风格指南需要有严格的基本结构，在开发和设计过程中要将自己从漫无目的的联想中释放出来，系统化地梳理。

White Stripes的吉他手Jack White曾经说过一句名言：

“你可以告诉自己，你拥有全世界所有的时间，全部的金钱，掌控所有想要的色彩，一切如你所想——我的意思是，这样一来，就扼杀了全部的创造力。”

谨慎设定限制条件，不要盲目作出选择，应该通过研究，结合手头的第一手资料和自己的经验与记录来进行实践。值得注意的是，研究和创意、直觉并不冲突，而三者是可以辅助强化。

应选择什么样的限制条件？

这个问题并不容易回答，因为限制条件会因实际状况变化而有差异。接下来我们会探讨设计风格规范对于其他用户的影响，但是在此之前我们得先明确为自己设定限制条件。

设计风格指南，或者说规范，它的最终目标是通过限制条件达到规范化的目的。为了更好的探讨这个问题，我们不妨假定要为一个品牌来设计风格设计指南。

在品牌设计的语境之下，限制条件的挑选是至关重要的。我们现在以MailChimp的风格设计规范素材为样本来探讨：

为了更为有效地设计，在认知上应该将这个品牌视为一个有血有肉的人，将品牌服务视为一个有待设定的占位符。这样一来，品牌设计就更加形象了。那么他 应该给人怎样的感受？用什么样的语音来和用户沟通，以什么样的形象展现出来呢？仔细考虑这些因素，在这个过程中自然而然就会明确品牌的定位，而品牌自然也 会成为公司和组织值得信赖的代言人。

在设计品牌风格规范的过程中，会有哪些因素与之紧密关联呢？坦率地讲，所有的因素你都要考虑到。参考设计研究方法、传播理论和心理学原理，你可以基 于之前为品牌“形象”所设定的风格和语调，来逐步完善其他的设计元素。如果你将这个品牌想象成为一个友好的小孩子，那么你在视觉设计的时候，应该考虑明亮 的色调，在文案选取上应该使用简短自然的语言，而不是复杂的长句，控制好文字和图案的比例，并且尽量使用图片等设计元素。

当品牌主要通过互联网传播的时候，有些品牌设计的细节需要完善：

设计建议：

• 当你需要用户填写表单的时候，请注意表述的语气和风格。不要将所有的精力都投入到宣传和标语中，因为表单本身也是和用户进行沟通的一部分，控制好语气和表述方式，才能保证风格一致。
• 同理，当用户填写信息出错的时候，也应该确保提示信息的表述风格与整体风格的统一性。

• 除了设定整套规范中的色板或者配色组成之外，还需要明确色彩和含义之间的联系。比如，如果规范中色板上的红色代表了积极的含义，那么这一定义是需要记录下来，因为这并非是暗示或者自然联系。当色彩与含义都被界定好了之后，会非常有助于接下来的设计决策。

• 不要只考虑颜色、形状、样式等静态的设计元素，动画特效也是应当重点考虑的设计元素。色彩渐变，线性滑动，翻页特效，反弹特效，哪些需要，如何展 示，都是需要考虑的事情。对于Skype而言，对于动画特效的需求并不大，所以这些需要用到动效的地方就得仔细考量了，毕竟每一种过度效果都有着不同的含 义。这个时候，你需要参考动效设计12原则来做筛选。
• 确定所有基础页面的类型和模板，并且通过注释解释它们的功能。通常我们会使用一个线框图页面来展示这些信息。
• 确定整个网站需要复用的模块，同样以线框图的形式对其予以解释说明，包括样式的使用，尺寸的要求，在不同情况下的响应和交互。
• 需要明确的因素不仅仅是视觉上看得见的东西，还应该包括用户体验设计上的限制和规范。也就是说，设计风格指南还应该包括“用户体验指南”这样的部 分，比如在开发阶段要求规范化的审核和测试，确保设计和使用体验；在设计阶段要求控制好动效的变化速率、页面加载速度等涉及到使用体验的部分。
• 在设计初期就应该区分使用移动端和桌面端的用户群体，界定两者不同的使用习惯和风格，根据这些差异来进行差异化设计。
• 根据不同屏幕使用状况，设定好各种状况下不同的字体的使用规则。
• 界定网站或者APP所面对的普通用户。通过研究产品的用户群，来确定是否只有一种原型用户，如果存在多种不同类型的原型用户，那么弄清楚哪种是最重要的，并且尽量通过设计让产品尽量覆盖不同的用户群。
• 不要忽略网站的边边角角，对于那些标准化设计难以覆盖和企及的角落需要单独设计，以确保整体设计的质量。
• 确保默认情况下每一种元素的样式都足够协调和实用。
• 在切换视觉元素的样式和风格的时候，确保不同主题或者样式在易用性、可用性和美学上的平衡。即使是诸如滚动、点击、悬停这些常见的操作的不同样式，也应该在你的设计风格指南中明确地标识出来。

用户#2 品牌

品牌不仅仅是一个LOGO，它代表着一个群体，一种想法和行为，甚至是一种文化，最直接的，它还代表着一个公司和机构。所以，在你设计品牌风格指南的时候，还有一个重要的受众，就是组成这家公司人，他们是构成这个品牌的重要组成部分。

归根结底，品牌风格指南是一份构建品牌的准则和参考。而构建品牌的那批人也应该是使用品牌设计指南最频繁的用户。考虑到品牌凝聚力，品牌风格指南中 所有的限制条件和规范，都应该为这些核心用户清晰明了的标识出来。大多数公司都需要一个品牌风格指南，在公司里，它的用户可以分为两个群体：有设计意识者 和无设计意识者。

有设计意识者

在培训过程中，将品牌风格指南交付有设计意识者手上的时候，需要根据他们的实际需求，进行适当的修订和调整。

一般情况下，这些有设计意识者会明确地感知和运用设计语言。品牌风格指南会帮助这些有设计意识者，在之后的工作中，探索并完善品牌；而品牌本身自然也需要保留可塑性，随着这些用户和市场同步成长，逐渐转变。

无设计意识者

对于无设计意识者，给他们品牌风格指南的目的在于构建他们的品牌意识，并通过培训引导他们遵守并执行它。如果品牌风格指南的主要受众用是无设计意识者，那么在规范和限制条件上应该给予更明确的描述和更详细的说明。

以Adobe为例，面对这样的用户群体的时候，需要将标识的位置、类型、关键词、色彩乃至可用性测试和要求都尽量描述地清晰而详细。

设计建议：

• 使用不好、一般、好、最好等不同级别的案例来说明
• 不要混淆有设计意识者和无设计意识者两种不同类型的用户。通常，在指南偏向工具性而非规定性的时候，人们会乐于按照指引来操作。

• 明确说明比隐式规定（潜规则）更好，在必要的时候使用截图、案例来协助说明。
• 清单是承载和展示信息的好办法，但前提是千万不要太过于技术，不要塞进过多内容，或者要求过于严苛。
• 不要仅仅作出规定而说明原因。用清晰明了的语言来解释，而不要滥用术语。
• 使用清晰的色块来展示标准色，并且提供不同色彩模式下对应的色彩代码来予以说明，方便使用。

• 对于应用于互联网涉及HTML等代码的设计风格指南，需要提供相应的代码集，方便用户可以复制粘贴，并且代码中需要添加合理清晰的注释。
• 在使用图片的地方请确保图片质量，并为用户提供案例，说明符合要求的图片应该具备的特征。

用户#3 公众（可选）

如果你的品牌属于大众品牌，而不仅仅是公司内部使用，那么你可能需要针对公众单独制作一个品牌风格指南了。通常，大家经常接触、熟知的大品牌都在这个范畴以内。比较典型的案例就是Twitter、Facebook、新浪微博、腾讯QQ。

以Twitter的LOGO使用为例，放置的尺寸和使用的细节都在指南中使用了明确的反例予以说明。在LOGO使用上，其实是有基本规则的：

• 需要提供常用格式的LOGO文件下载，并且提供多种尺寸应对不同需求。
• 明确规定LOGO与周围内容的间距大小，以及周围文字所使用的字号等信息。
• 明确规定LOGO是否居中、靠左或者靠右，或者是否可以根据页面状况灵活应对。
• 说明LOGO周围以及背景的用色规范，并使用实际案例说明哪些可以，哪些不行。

网站风格指南：身份与交互

可能风格指南与网站用户体验之间最令人困惑的地方就在于品牌与交互之间的鸿沟。两者关系晦涩难明，我们通常只能用“感觉”来描述两者之间的关系。这 样一来，交互原型的重要性就体现出来了。很少会有品牌风格指南通过交互设计来凸显品牌的身份特征，但正是因此，我们有必要完善这一点。所以，当你在为一个 品牌制定规范的时候，请慎重考虑下列几条涉及交互的建议：

• 让交互设计成为品牌风格指南最重要的组成部分之一，与色彩和样式并列。
• 通过“用户故事”来明确用户路径和用户行为，这可以帮助交互设计师明确高层级、跨页面的交互行为。
• 使用两种不同的语言来描述动画特效：1、使用统一的描述性语言，试图客观地定义动效；2、使用主观的语言，来描述动效给人带来的感觉。一个好的设计师很清楚2秒和3秒的动画会有什么差别，但是无法使用准确数据来描述两者之间的深层差异。
• 当无法进行描述时，提供你试图实现效果的交互原型。请务必注意交互的细微末节，在几秒钟的时间中会发生什么事情，会出现什么样的意外。

结语

这篇介绍如何构建风格指南的说明文档其实还很粗糙，远未完成。哪怕是做一个非常简短的品牌风格指南都需要考虑各方面的因素，因为它本身就是一个系统工程。说易行难，最好的VI设计师都是在真刀真枪的实践中磨出来的，希望这篇“务虚”的文章能给你帮助。

原文来自：优设

原文地址：tutsplus

优设网翻译：@陈子木