译者声明
：
原书
Design Systems
由 Smashing Magazine 出版，作者 Alla Kholmatova。C译版《设计体系》是个人自发项目，并非官方引进版本；译者 C7210，发布于 Beforweb，仅用于知识交流，不涉及任何商业或盈利目的；译文禁止转载，禁止任何以商业或盈利为目的的传播形式。
你可以在 Smashing Magazine 购买到纸质或电子版英文原书。如果你喜欢C译版，可以通过文末的“
喜欢作者
”为我提供咖啡支援，随缘。
查看关于C译版《设计体系》的更多信息
。
Prev：
第八章 功能性设计模式的体系化
第九章 感知性设计模式的体系化
约7650字
本章介绍的实践方法将帮你了解如何对感知性设计模式进行体系化定义。
最近，有两个产品当中的折叠组件吸引了我的注意。它们的外观类似，功能也基本相同，即用于展开或收起内容区块。在样式方面，它们对多数人来说都可以达到美观的程度，但其中一个用起来的感觉就是不如另一个让人踏实，例如鼠标悬停状态太过微弱，动效有些拖沓，选中态不够明显，标题和主体之间的对比度也不够强烈。
而另一个的细节都恰到好处。不仅如此，它所体现出的样式属性，包括配色、动效、对比度、字体等等与页面其他地方都能保持良好的一致，感觉非常用心。即便两者功能相似，后者的质量感和可靠性就是要强于前者。
我们通常会认为，漂亮的外观并非产品的最高追求，美观度的优先级相对较弱，譬如"这只是个工具 app，无须给人带来任何独特的感觉"；而我们也因此错过了塑造品牌感知的机会。重点在于
效应
，而非风格本身；对于一个工具 app 来说，可用性和易用性的确是重中之重，但它
必须能够将"简单"、"安全"、"可靠"的感知有效传达给用户才行
。
要通过灵活而可靠的方式塑造产品感知，我们需要对感知性设计模式进行深入了解。
仅定义属性是不够的
说到配色、字体、间距等风格要素，我们通常会想到具体的色值、字号、度量单位等等。
以配色为例，在很多设计模式库当中，它都体现为一系列的色值定义。
但即便对于这样一套标准色盘，所需要诠释的东西也有很多，例如不同的色值代表怎样的含义？某种状况下应该使用哪种绿色？它们之间应该如何搭配使用？
以下看法对于标准化支持者们来说可能有些反直觉：颜色的细微差异其实并不是问题。实际上，最大的问题不在于你们的体系当中有20种蓝色的定义，
只要蓝色在全局界面环境中表达着相同的含义
。反之，即便只定义一种蓝色，但它在某些页面用于链接色，而在其他一些页面中用于非交互元素的背景色，这才是问题。
因此，
仅有一系列色值定义是不够的，你必须同时对它们在实际页面情境中的使用方法进行标准化定义
。
同理，仅依靠一套全面详实的字体表也难以在全局范围内构造和谐一致的内容层级。在 FutureLearn，即便我们对所有的字体字号都进行了标准化定义，很多标题的样式当中仍然存在着不一致性的问题，因为设计师和工程师并不知道应该在何时使用哪个字号。行之有效的字体定义必须同时包含明确的用法规范供团队统一执行。
应该以怎样的方式在风格定义当中将样式的目标与使用方法体现出来？与之前相仿，我们仍需要从较高的层面入手，逐渐深入到细节当中。在对功能性模式进行定义时，我们首先从产品目标及关键行为的角度进行分析；对于感知性设计模式而言，我们则需要从其整体的外观特质起步。
外观特质与标志性设计模式
每个界面都可以给人带来独特的感受，即便仅通过文本或语音阅读的形式来进行呈现。最有效的风格元素并非附属于界面表层，而是根植于品牌核心层面，并会随着产品的发展而保持进化；它们与产品特质及核心设计原则息息相关。思考一下对于你的产品来说，产品特质是如何通过外观进行体现的？哪些元素在你的产品中塑造着经典的气质，或是实用的、传统的、前沿的、温暖人心的、值得信赖的气质。
对于已经发展到一定阶段的产品来说，识别这些关键的感知性元素或许不太容易。正如我们在
第四章
当中介绍过的，随着产品的发展，外观样式也在持续的复杂化；不过你仍会发现，其中的一些风格元素与品牌特质之间存在着很强的关联。
识别标志性模式，这对于团队来说是个不错的实践起点。正如
第四章
所介绍，你可以让每一个人将他们认为最能体现你们产品差异性的、最令人印象深刻的样式元素记录下来，包括：
这里也可以包括那些非品牌性的，但具有特色的风格要素，例如"动效精细而缓和，不急促不张扬"。
不要只关注样式属性，而是要上升到设计原则层面，考虑风格要素之间的作用关系，以及如何组合运用等等。例如，不要只是简单地将关键配色列举出来，而是要对它们的用途及配比关系进行描述："白色区域为主，通过粉色与蓝色传达品牌特质"，同时提供典型的模式范例。
这项工作的产出形式或可参考下图：
识别标志性设计模式的过程可以为接下来的体系化定义工作提供指导方向，并有助于发现一些问题所在，例如当你俯瞰整个产品的风格特质时，发现圆形元素更具品牌代表性，那么你可能需要思考为什么有些地方使用了矩形元素，其用法是否合理。
定义感知性设计模式
完成了标志性设计模式的识别，你可以将其归纳为若干类别，逐一进行体系化定义；其中通常包括：
-
配色
-
交互状态
-
动效
-
字体
-
字体
-
栅格边距
-
图标风格
-
形状与边框样式
-
插图
-
图片
-
语气基调
-
音效
其中每个类别的体系化定义工作都要参考以下流程进行：
-
分析目标
-
清查与归类
-
定义设计模式
-
规范使用方式
我们通常很难一次性完成所有这些方面的定义；其中每一项都需要各自的清查工作，而且往往需要多轮迭代。
定义过程中可能会出现一些重叠的状况，例如在字体定义当中可能涉及到栅格边距的使用规则问题，在配色定义当中可能涉及到字色使用的问题，等等。这是正常现象，因为风格要素之间确实存在着各种关联；你可以首先着手核心风格要素的定义，以此为基础对其他模式进行定义，譬如在完成了配色定义之后再制定交互元素的状态样式规则，而后者又是动效定义的基础；在处理字体和栅格边距时，你也可以同时考量字号对于布局空间的影响。
配色
为了确保配色规则的一致性，我们首先需要将每个颜色在界面中的功能用途一一列出。
分析目标
描述配色的目标时，用词必须清晰明了。加拿大政府的"Web Experience Toolkit"当中关于配色原则的声明看起来就有些含糊和泛化："颜色是用于传达信息或装饰页面的表现性元素。"
而更具体的描述方式应该是：
-
用于体现文本的类型与层级关系（正文、标题、引用）。
-
用于呈现链接与行动点（主要行为召唤、次级行为召唤、文本链接）。
-
吸引用户关注特定的信息，体现信息的类型差异（确认信息、警示信息）。
-
区隔内容，体现重点（背景、边框）。
-
体现数据的类型差异（图表、曲线图）。
目标定义将决定着配色清查的分类方式。
配色清查
虽然我个人一直倾向于通过纸张打印的方式进行清查，因为会比较具有实感，但实际上通过 Google Docs、Keynote 或 Sketch 来操作确实更为快捷；你可以采用任何适合自己和团队的工具。
基于目标定义中的分类方式创建一系列空白文档或画板；随着清查工作的进行，分类方式和名称或许会有所调整。
通过 Google Doc 建立的空白分类文档。
从四个方面对每种颜色进行描述，包括：
-
类型
：使用了该颜色的界面元素类型，例如行为召唤按钮、页头、反馈信息等等。
-
范例
：通过实际截图演示使用了该颜色的具体界面元素。
-
色值
：Hex 色值。
-
感知
：如果该颜色用于塑造特定的感知或氛围，则在这里进行描述。
你会得到一系列按照功能目标分类的配色用例。下图演示了我们的"图书馆网站"当中所有的链接与按钮用到的颜色。通过类似的方法，我们还要对其他类别的配色进行描述，包括文字内容、反馈信息、背景色、边框色等。
某些颜色可以为产品带来独特的感知，例如在 TED 的视频界面中，黑色的页头用于营造影院般的沉浸体验；而在 FutureLearn，蓝色到黄色的大幅渐变则用于在课程结束之后营造强烈的庆贺与激励氛围。
对于这类与气质、氛围、情感高度相关的颜色要重点关注；任何误用或滥用都可能导致其设计目标的错位。例如在 FutureLearn 当中，如果将大幅渐变误用在课程推广模块当中，则会弱化其与"课程完成"场景的关联，令用户产生困惑。
定义设计模式
接下来，我们要基于上面的清单来完成配色的实际定义。何时使用蓝色链接，何时使用灰色文字？灰色背景与亮色背景的使用场景区别在何处？黑色标题与红色标题分别代表着怎样的含义？定义的首要目标是对配色的目标用途达成一致。
链接与按钮的配色定义。
从功能目标的维度对配色进行梳理，这有助于我们发现颜色误用的问题。在图书馆网站中，红色是典型的交互色，用户会对红色元素产生可交互的预期。然而在下图所示的模块中，红色标题文字是无法点击的。这种情况下，我们或许要将其字色改为黑色，或是使其可以点击并链接至推荐页。
需要注意的是，这类改动有可能影响到整个产品的视觉感知。譬如我们决定将某些模块中的交互色由红色改为蓝色，那么全局的外观样式及相应的感知印象都有可能受到影响。
在 FutureLearn，我们曾考虑将课程进度模块当中所有的矩形元素都替换为圆形；但最终我们意识到课程相关模块对于 FutureLearn来说是标志性设计模式，其关键元素的形状变化势必导致整个品牌感知的异化。
对标志性设计模式的深刻理解将有助于你在样式迭代与品牌感知之间寻求平衡。如果你们确定要进行全局层面的风格迭代，那么需要在感知性设计模式的体系化定义工作之前进行。
凝练
在配色清查期间，我们通常会发现同一颜色的多种变体。其中多数并非必需，却为设计与代码增加了复杂度。
通过移除这些没有必要存在的颜色，我们可以使色盘更加聚焦和精简。
仅定义用得到的配色
以目标为中心的配色清查有助于我们控制颜色的使用数量。一旦了解了某种颜色的目标用途，我们对于实际需要的变体数量也会了然于胸。以蓝色为例，即便考虑到更多的扩展状况，我们可能最多仅需要三种变体。
具体数量取决于实际的产品环境。在 FutureLearn，我们会有意识地避免过暗或过亮的颜色，尽可能保持色盘的简约和聚焦。
而 UXPin 由于提供了明、暗两种界面模式，因此会用到更多的变体色来构建对比度。
左侧为 FutureLearn 的主、次配色；右侧是 UXPin 配色定义中的一部分。
有时你的界面可能因为多种主题设置或数据可视化需求而需要更多配色，但仍要尽可能控制主色与变体的数量。选项越多，体系就越为复杂，一致性也更加难于维护。任何时候都要以"绝对必需"为原则来添加配色。
如果你需要为一种颜色增加两个变体色，可以尝试20%的增减量；规律性的增减幅度更易用、易记。类似的方法也可以用在字号、间距、动效等元素的定义当中。
确保对比度
测试字色与背景色的对比度，移除不利于阅读的多余配色。例如在多种灰字当中挑选出符合 WCAG 2.0 标准的作为默认字色。
有很多工具可以帮你测试配色的对比度，例如来自 Lea Verou 的 Contrast Ratio，非常便捷易用。
https://contrast-ratio.com
颜色调整要充分考虑到全局效应。例如将默认的蓝色略微调暗，整个界面的视觉感受会瞬间不同。如果现有配色当中存在对比度方面的问题，调节过程要特别注意权衡整体感知。
根据需要，你也可以面向明、暗背景而定义不同的字色，或是根据背景色而调整字色的明暗度。有很多工具可以帮你找到符合对比度要求的配色组合，或是为基准色搭配更多的辅助配色选项，例如 Color Safe（注）和 Tanaguru Contrast Finder（注）。
注：http://colorsafe.co，http://contrast-finder.tanaguru.com
规范使用方式
最后，我们要制定一系列配色使用原则，供实际工作参考执行。原则可以是整体性的，例如"始终确保对比度"，也可以具体到品牌层面，例如牛津大学的团队是这样定义的：
"牛津蓝主要用作页头与页脚的背景色，在全局范围内体现出强烈的品牌形象。不推荐在其他地方大范围地使用这种蓝色，但可在图标、搜索栏等局部元素当中使用。"
动效
对于动效这类较为复杂的感知性模式，我们同样会采用上述步骤完成定义，即分析目标、清查、定义设计模式、规范使用方式。接下来让我们以 FutureLearn 为例。
分析目标
识别动效的目标用途，大致包括：
-
使交互状态的切换更加柔和自然，例如鼠标悬停样式的变化。
-
强化信息或行动点的呈现，例如轻微的推移效果有助于用户留意并点击"下一步"按钮。
-
隐藏或呈现内容，例如收起侧边菜单，展开下拉列表或是呈现弹窗。
此外，动效带来的特定感知也是需要考虑的一个方面。Val Head 在其
Designing Interface Animation
一书中描述了动效是如何体现品牌特质的，例如快速、柔和的弹跳动效可以被感知为充满能量与活力；而稳健的缓入缓出动效可以体现出抉择性与确定性。界面设计中的动效运用必须有着明确的目标与含义。
动效清查
明确了目标与感知类型，下一步便是动效清查。收集界面中的动效，按照目标归类，就像我们在配色清查当中做过的那样。你可以通过 QuickTime 或其他录屏工具来实现捕捉。
定义设计模式
以设计目标与感知类型作为分类维度，基于动效清查的结果进行模式定义。经过梳理，我们发现在 FutureLearn 的界面当中，用于"强化信息和行动点"的动效通常更具趣味性，而"柔化交互状态切换"的动效更精细而稳健。
如果这些都是你希望在全局范围内实现的动效基调，那么尽可能以其作为标准来定义其他的动效模式，例如在其他动效当中尝试这些标准化的参数，以实现统一。
-
目标
：交互状态切换
-
属性
：
-
感知
：平静，柔和
-
目标
：隐藏/呈现
-
属性
：
-
展开：0.4s，swing
-
收起：0.7s，ease
-
淡入：0.3s，ease
-
旋转：0.3s，ease
-
感知
：平静，柔和
-
目标
：信息强化
-
属性
：
-
脉冲：0.3s，ease in
-
摆动：0.5s，ease-in-out
-
感知
：强力，趣味
凝练
动效当中有两个关键概念，即"时长"（timing）和"缓动"（easing）。前者指动效持续时间，后者定义了动效的运动模式，例如"缓慢起步、逐渐加速"（缓入，ease-in），或是"快速起步、逐渐减速"（缓出，ease-out）。我们同时还要对动效属性的变化进行描述，例如颜色、透明度、放大缩小等。
