一、什么是感知性设计模式

产品界面设计中的感知性设计模式大致包括话术气质、字体、配色、图片与图形风格、空间与布局、特定的形状、交互感知、动效、音效，以及所有对这些要素进行组合运用的特定方法。

1. 感知性模式有助于品牌特质的体现

        1. 清晰有效的感知性设计模式是构筑品牌差异化的重要手段

        2. 感知性设计模式由界面来传达品牌信息，界面也因此具有品牌识别性，可以给用户留下深刻的印象

        3. 成功的感知性模式能通过界面的局部截图就能使用户辨认出品牌

        4. 全局范围内确保字体与配色的一致、特定的比例关系与搭配方式对于品牌特质的传达都存在影响

2. 感知性模式将局部连接为整体

        1. 感知性模式的关联能力不仅作用于模块之间，同时还能体现在产品与系统平台或适用情境的关系当中。

        2. 跨平台的产品中重复运用带有特色的元素（组件等）能够帮助感知性模式的体现

二、感知性设计模式的体系化

1. 探索与识别感知性设计模式

1.1 探索方法

        1. 情绪版（Mood Boards）：通过软件、印刷素材拼贴来收集灵感。可以是泛化的，也可以聚焦于某些特定的方向。

        2. 风格磁贴（Style Tiles）：确定了大致的品牌设计方向后，通过风格磁贴对细节层面进行探索。由一些关键字体、配色及界面元素的基础定义所组成的设计产出物，用于传达品牌视觉风格的基本构成。

        3. 元素拼贴（Element Collages）：将若干界面元素汇集在一处，集中探索品牌风格在实际界面中的传达效果。聚焦于实体元素，即功能性设计模式。

2.2 识别外观特质与标志性设计模式

识别标志性模式是个不错的实践起点。可以让团队的每一个人将他们认为最能体现你们产品差异性的、最令人印象深刻的样式元素记录下来。包括：

        1. 想到你们的产品时，哪些风格或调性会首先浮出脑海

        2. 用户时如何描述你们产品的外观特质的 

        3. 有哪些元素时用户时常在反馈当中提及的？例如“哪个总是让我感到开心的粉色对勾”一类 

        4. 特色风格要素，比如“动效精致而缓和，不急促不张扬”等

2. 定义感知性设计模式

完成标志性设计模式识别后，可以将其归纳为若干类：配色、交互状态、动效、字体、栅格边距、图标风格、形状边框样式、插图、图片、语气基调、音效。

其中每个类别的体系化定义工作都要参考一下流程进行：分析目标、清查与归类、定义设计模式、规范使用方式。

2.1 配色

为了确保配色规则的一致性，我们首先要将每个颜色在界面中的功能用途一一列出。

        1. 分析目标

            描述配色目标时，用词必须清晰明了。更具体的描述方式：

            (a）用于体现文本的类型与层级关系（正文、标题、引用）

            (b) 用于呈现链接与行动点（主要行为召唤、次级行为召唤、文本链接）

            (c) 吸引用户关注特定的信息，体现信息的类型差异（确认信息、警示信息）

            (d) 区隔内容，体现重点（背景、边框）

        2. 配色清查

            从四个方面对每种颜色进行描述，包括：

            (a) 类型：使用了该颜色的界面元素类型，例如行为召唤按钮、页头等

            (b) 范例：通过实际截图演示使用了该颜色的具体界面元素

            (c) 色值：Hex色值

            (d) 感知：如果该颜色用于塑造特定的感知或氛围，则进行描述

        3. 定义设计模式

            基于清查清单对配色进行实际定义。   从功能目标的维度对配色进行梳理，从而发现颜色误用的问题.

        4. 凝练

            (a) 仅定义用得到的配色：控制色盘的增幅，保持色盘的的简约和聚焦

            (b) 确保对比度：测试字色与背景色的对比度，移除不利于阅读的多余配色（https://contrast-ratio.com/）

        5. 规范使用方式

            制定配色使用原则，供实际工作参考执行。

2.2 动效

        1. 分析目标

            识别动效的目标用途大致包括：    

            (a) 使交互状态的切换更加柔和自然，例如鼠标悬停样式的变化

            (b) 强化信息或行动点的呈现效果，例如轻微的推移效果有助于用户留意并点击”下一步“按钮

            (c) 隐藏或呈现内容，例如收起侧边菜单，展开下拉列表或是呈现弹窗

        2. 动效清查

            通过录屏工具捕捉

        3. 定义设计模式

            以设计目标与感知类型作为分类为度

        4. 凝练

            (a) 两个关键概念：时长（timing）、缓动（easing）

            (b) 时长对于动效非常关键。一致的参数未必能够实现感知上时长一致性例如尺寸不同或运动距离不同的两个元素，即便动效时长相同，给人带的感知也会有很大差别。

        5. 规范使用方式

            需要对具体行为方式进行定义。像material design，实体化材料的隐喻有助于设计师和工程师更加具象化地思考动效的实现方式。

2.3 语气基调

        1. 语气基调清查

            人们在日常交流和会议中的语言模式，包括对话习惯都可以作为其产品的语气基调情绪版当中的素材。    

        2. 定义设计模式

            MailChimp的基调规范网站是这方面最具代表性的范例。其语气运用方式会随着用户的情绪状态变化而调整，例如何时应该表现出幽默无忧，何时应该更具严肃性和实践性等等。       

        3. 规范使用方式

            Quickbook的设计体系当中对语气基调的运用原则进行了详细的定义，包括“引领行为”、“保持简练”、“趣味”等多个方面。

3. 创建设计模式文档

        1. 描述使用方式：正确与错误的使用方式对照也是一种常用的形式。

        2. 跨类定义：对功能性设计模式的风格定义可以出现在感知性文档中

        3. 描述风格元素之间的关联：颜色之间的关联、字体与空间的关联、视觉风格与语气基调的关联等

三、迭代

1. 品牌风格与一致性之间寻求平衡

        1. 在品牌探索阶段，不要对方向和范围做太多约束，也无需下沉到细节层面

        2. 在验证和迭代阶段，重点就变成了收归而非发散，需要持续进行细化和精炼

        3. 仅聚焦于一致性的维护可能导致能在细节中体现品牌气质的风格要素被忽略

2. 关于“标志性时刻”

标志性时刻：足以成为产品差异化标志的细节设计模式

3. 小规模测试

        1. 现在小地方进行设计的试验，如果一些模式被证明是行之有效的，再逐渐将其整合到界面的其他部分

        2. 以最小化的方式进行新风格尝试，明确探索的目标是什么，且要时刻记得探索的实验性。

        3. 新风格被证明局部有效后，需要谨慎的逐渐进行推官，期间务必明确其作用范围

4. 在品牌风格与业务需求之间寻求平衡

当新的业务需求与设计模式放生冲突或需要定义新的设计模式时，作为设计师应当去捍卫产品的品牌特质，保持敏感，不能任由体系外的元素泛滥。

以上笔记均来源于阅读《设计体系 Design Systems》Alla Kholmatova —— C7210译版（译者C7210，于2018年7月至8月发布于公众号“Beforeweb”，并非中国大陆官方引进的译版）有兴趣的朋友可以去读一下这本书的完整版。

本篇笔记纯个人读书记录非盈利目的，禁止商业转载或任何盈利目的传播。