本章聚焦于五个层次中的表现层，内容上强调了视觉设计的目的，并介绍了界面和品牌维度的感知设计。本篇笔记共4611字，预计需要8分钟完成阅读。
互联网产品的“感知设计”主要集中于视觉设计；值得注意的是，视觉设计不局限于“页面UI设计”，而是根据产品的定位和具体设计中的呈现需求设计表现方案。
在页面内，我们主要通过页面的对比和一致性来规划视线的落点和移动轨迹，从而实现对用户注意力的规划，进而落实底层设计。页面内的视觉设计结果将以design comp 的形式出现。
在比页面更高的维度上，我们则希望通过产品与公司维度的一致性维持来优化用户的品牌观感，并通过配色方案和排版进一步传达和强化品牌。产品甚至企业维度的感知设计方案应当以风格指南的形式在团队中同步。
框架层确定了界面的要素和关系，在确定的页面结构的基础上，表现层开始处理设计的感知呈现问题。表现层是五层模型中最具象的一层，这一层也是用户首先注意到的地方。
感知设计与视觉设计
无论是与产品或服务的交互，还是人与人、人与世界的交互，这些都是通过我们的感觉器官来进行的。而表现层的设计就是对“产品在人类感官层面的感受”的设计。
感官感受包括视觉、听觉、触觉、嗅觉和味觉五大类：
- 嗅觉和味觉：互联网or软件用户体验设计师通常不需要关注这方面；
- 触觉：工业设计领域会很关注用户和产品间的物理接触。在振动设备的支持下，基于屏幕交互的产品(手机、手持游戏设备)也开始由触觉体验了。【个人印象很深的包括PS4手柄的震动，还有小米手机的键盘和卸载程序震动。由于触觉当前阶段应用的“稀缺性”，合理应用触觉设计会带来更大的情感互动；但是同样需要避免滥用】；
- 听觉：声音既可以传递特定的信息（如警报、提示音），也可以让产品变得更个性；
- 视觉：是互联网产品向用户传递信息的主要途径，也是用户体验设计的核心模块。
视觉设计(的目标)是什么
视觉设计决定了用户的“第一眼印象”，同时，表现层也是我们向用户传递信息的具体层面。
因此，视觉设计不仅仅是“美术”，或者说视觉上的愉悦感受。相比于“是否具有美感”，视觉设计的评估核心更应该是“方案是否运作良好”、是否服务于产品，包括以下两方面：
- 视觉设计是否完成了对结构的传递：视觉设计应当强化结构，保证用户对选项的体验更清楚明了；
- 样式与格式的选择是否与品牌形象等产品战略定位相符合。
页面内部的视觉设计
用户使用产品时，我们主要通过视觉要素来实现内容和功能的呈现。正如 Chapter5的信息架构中所提到，我们希望给用户呈现合理且有意义的信息，让用户以较小的心智成本来理解和使用信息，在页面的视觉设计中同样如此。
视觉设计中，我们希望通过对界面的视觉焦点以及视觉移动轨迹进行规划设计，来减少用户的迷茫或负担，帮助用户获取信息。而通过页面的对比和一致性，我们可以规划视线的落点和移动轨迹。
视觉焦点与视线的设计
界面的视觉焦点以及视觉移动轨迹是判断视觉设计方案合理性的重要因素。
视觉落点/视觉焦点，就是看到页面时，用户的视线首先会落在什么地方。通过寻找视觉落点，我们可以发现，页面设计中的哪个设计要素会第一时间吸引用户的注意（比如obsidian的blue topaz对正在编辑的段落有高亮，在编辑长篇文档时感觉非常好用）；
一般地，我们希望视觉落点和战略目标相匹配，即用户第一眼注意到的东西要么满足产品目标（例如宣传），要么满足用户目标（解决用户问题）。
视觉移动轨迹，就是眼睛扫视页面时的无意识移动路径。
通过寻找视觉移动轨迹，我们可以判断用户的浏览是否流畅、我们是否成功引导用户完成目标。
- 视觉移动轨迹应当是一条流畅的路径；如果元素的视觉设计缺少轻重、用户的眼睛在各种要素间跳来跳去，用户就会感到设计“拥挤”或“忙碌”（典型如很多早期的网站，要素密集、超链接很多、样式无显著差异）
- 适当在用户的目标完成路径上做出引导；重点是，引导不应分散用户对“能完成目标的信息或功能”的注意力，且不要用太多细节吓倒用户。
视线的觉察
觉察视线、评估视觉设计时，有条件的话可以使用精密的眼球追踪仪器，不过，简单的肉眼测试也可以实现对页面视觉设计的评估。
通过用户或自己来评估视觉设计的方法包括
- 简单询问用户或自己，视觉的落点在哪、看东西时是怎么移动的；
- 可以通过眯眼、斜看、从远处走近等方法来发现页面中最吸引眼球的元素。需要注意的是，我们需要了解的是眼睛无意识移动的落点和轨迹，应避免想太多干扰结果；
- 一般情况下，人们的本能视觉移动轨迹应当遵循一致的模式；如果部分用户的测试结果和其他用户不同，有可能ta反馈的是有意识控制下的结果。
通过对人共有的视觉刺激反应的研究，我们可以使用一定的视觉手段来实现注意力的吸引或分散。
视觉设计手段：对比与一致性
在页面内的视觉设计中，我们常使用对比作为吸引用户注意的手段；同时通过一致性，我们可以减少用户的迷惑，提升视觉传达的效率。
对比：当一个元素在设计中显得与众不同时，用户会本能地对之投射注意力，这就是对比的效果。
- 什么是对比：对比是基于“无对比”出现的。
- 没有任何突出元素的页面也称为视觉上的中性布局页面。在“灰色”的中性布局页面中，用户的视线可能会四处游离；
- 当页面内存在差异化足够显著的内容时，这个内容会一下子抓取到用户的目光。
- 为什么要对比：通过与众不同的元素与普通元素的对比，我们可以
- 吸引用户注意力，帮助用户聚焦到界面的关键部分；例如对关键内容(战略性内容)、错误提示等进行强调；
- 帮助用户理解页面导航元素间的关系；
- 传达信息设计中的概念群组(“打组”，例如标题采用更醒目的格式，可以实现对文本的分组)。
- 如何对比：对比的核心在于“突出需要突出的内容”。
- 突出方法包括 颜色、醒目的图形等等；
- 对比的核心不是差异，而是“突出”——不仅仅要有足够让用户分辨出来的差异，还要能让用户分辨出“哪个是我要抓住的重点”；
- 只突出需要强调的内容：不要滥用“突出”，强调过多内容只会让用户困惑。
对于“书”这个产品，对比的效果同样显著。
大片段的正文通常采用中性布局，用户线性地阅读并获取信息；标题采用特殊格式，保证用户在线性的浏览过程中可以下意识了解“这是一块新内容”，另外，有一些书会通过加粗等特殊格式的文本来强调重要信息。
对比不一定需要在文本上下工夫——例如电商往往不会对文本做强调处理，让用户自由浏览商品图片，再根据图片去抓取对应信息（选择商品时如此，阅读商详页也是）。
一致性：在通过对比传达和强调信息的同时，我们可以通过保持页面内的一致性来避免用户的焦虑或迷惑。
- 什么是一致性：(个人理解)一致性的根本在于“避免混乱”。页面内部的一致性包括元素和布局等。
- 为什么需要一致性：
- 通过一致的秩序来辅助传达信息，减少用户的困惑、迷茫和焦虑（比如，可以帮助用户识别“blocks”，以及块与块之间的关系）；
- 通过规范视觉元素的大小、风格等，提高设计中的复用性，提升设计师工作效率。
- 如何保持一致性：
- 将视觉元素的大小保持一致尺寸，例如相同元素概念的按钮；
- 平面设计中的
基于栅格线的布局也可以应用于网页设计（参考上方附图）。- 通过栅格，我们可以在支持页面个性化布局的同时，保证页面的视觉秩序是一致的；
- 需要注意，在将栅格应用到屏幕交互式产品时需要加以变通，切忌生搬硬套。设计标准和其他工具一样，都是为了产品设计服务的。
品牌层面的视觉设计
产品与公司维度的一致性维持
上一节我们介绍了如何通过“页面内部的一致性”来帮助用户获取信息。而产品甚至企业层级的一致性则更多地作用于品牌维度，希望传递一个“统一的品牌识别形象”、提升访问者对企业的印象。
- (产品)内部一致性：在同一个产品的每一个层级，产品的的设计都应该体现品牌识别的一致性。小到icon风格，大到结构，同一个产品的设计风格往往会保持一致；
- (产品)外部一致性：在同一家企业的其他产品中，也需要反映出相同的设计方法(例如mac和ios系统的风格打通)。
统一的视觉呈现有助于提升访问者对企业的印象，传递企业形象的同时，也给用户强化“这家企业对自身的定位很明确”的认知。
在实际工作中，产品的设计往往是逐步进行的，过程中会出现分批甚至分团队。
想要保持设计方法的一致，我们需要提前确定统一方案：
- 确定方案的基础是对网站框架深刻理解；确定各环境(界面、导航、信息设计)中反复出现的设计元素，并抽象出共性的设计方案。
- 具体产品设计中，我们会将方案中确定的元素应用到具体的环境：
- 避免重复设计相同元素，减少成本的同时也保证了一致性；
- 应用时需要避免生搬硬套，元素应当在具体的整体场景中与其他元素和谐共存。
- 即使是同一个功能，在不同环境下的呈现可能是不同的(结账页的结算可以加大尺寸、设计为红色，但产品定制页面的结算按钮可能需要为拥挤的其他元素进行妥协)
这个确定的“方案”应当从属于Chapter7产出物中的“风格指南”，类似公司的组件库等基础建设。
品牌形象的强化：配色方案和文字样式
译本将 typography 翻译成了“排版”，看了下原文，我感觉这里主要还是指字体，因此改为了“文字样式”。
色彩，很可能是向外界产地品牌识别的最有效方法之一。典型如可口可乐、UPS、柯达，它们的红、棕、黄在公众脑海中创造了一个强烈的感觉。
品牌的“色彩”不仅仅是核心色，而是一个配色方案。
- 配色方案在强化企业品牌的同时，也能减少设计选择、提高设计效率；
- 标准配色方案彼此和谐合作，保证了网站配色的对比性和一致性。
配色的选择需要服务于产品：
- 通过设置前景色和背景色，我们可以让用户潜意识中了解我们的意图（通常我们会将更亮或更醒目的色彩设计为前景色、应用于需要获取注意的元素，将更暗淡的色彩设计为不需要跳出页面的背景色）；
- 选择颜色时，我们既要保证相近元素应用的一致性，也要在选色时选择色度差异到足够让用户明确区分的不同颜色(色卡里的其他颜色）。
此外，不同配色方案传达的品牌感受也会有差异。例如下图中，右侧偏色后呈现更深沉的颜色，没有左侧原方案的活泼感，感觉更严谨、守旧、刻板。
配色对产品体验的影响
除了色彩，文本的样式风格也是企业品牌识别的重要要素。例如苹果电脑、大众汽车、伦敦地铁等，这些品牌甚至通过定制字型来传达强烈的品牌印象。
不过即使没有到定制的程度，我们依然可以善用字体设计来传达形象。选用字体时需要注意：
- 选用大面积使用的文本(正文)时一定要兼顾可读性，例如Helvetica或者Times这些大众字体；
- 在大文本元素、导航中的标签元素等特殊文本元素中，我们完全可以应用更有个性的字体；
- 需要注意，字体和色彩等视觉设计的原则是一致的：风格服务于信息传递。
- 字体是为了满足沟通需求，而不是为了制造混乱；
- 只有在需要传达不同信息时，才需要使用不同的风格。不同风格应当有足够的差异，但仍需要保持统一性。
设计合成品和风格指南
如果说线框图是框架设计的产物，那么类似地，视觉设计的产出物就是 视觉模型(visual mock-up) 或者 设计合成品(design comp)。
design comp 展示了选定的组件最终组成的可视化产品。
- design comp的组件是上一层已选定的组件（即基于框架层进行设计）；
- design comp 中的组件一定与线框图中的组件一一对应，但不一定与线框图布局一致（布局、视觉关注是表现层的设计范围）；
- design comp需要将各个独立组件结合为一个有机整体（视觉设计服务于产品，产出物需要和谐统一）。
除了服务于单次设计的设计图，出于品牌层的一致性考虑，我们也需要为我们的设计系统维护一份记载决策的权威性文档——风格指南(style guide)。
- why：风格指南作为文档，可以很好地留存信息：
- 风格指南可以保留最新的标准与一贯的风格取向，确保企业级别的一致性；
- 风格指南可以帮助企业留存知识，防止由于人员流失或遗忘造成的知识丢失。
- 随着时间的推移，决策原因会从记忆中逐渐消失；文档可以很好地记录哪些是“特殊环境下解决某个具体问题的临时决策”，那些事“为了形成将来的设计工作的基础而有意识做出的决策”。
- what：风格指南中需要包括哪些内容：
- 风格指南的第一部分应当是需要在产品全局应用的要素标准，包括设计栅格、配色方案、字体标准、标志应用指南等等；
- 风格指南中应当包含模块或功能级别的元素标准记录，以便于后来的成员进行决策；
- 风格指南是对视觉设计所有元素的汇总，大到产品的整体风格，小到单个元素的设计标准；
- 总之，风格指南需要覆盖产品所有层级的设计，为决策提供足够的细节。
- how：风格指南建设的注意点：
- 风格指南应由专门的成员甚至部门来负责，且执行风格指南的团队应具备较高权限。在有多个负责团队的大企业中尤甚。