【阅读详记】《用户体验要素》Chapter6：框架层-界面设计、导航设计、信息设计

本章聚焦于五个层次中的框架层，内容上则强调了框架层应当从用户出发进行设计，并将框架层的设计分为三块考虑。本篇笔记共4825字，预计需要8分钟完成阅读。

按照设计的侧重点，框架层的设计被分为界面设计、导航设计、信息设计三个部分：
信息设计指的是通过对单个信息元素的排列、分组、视觉呈现设计，我们希望让用户更便利地获取到信息；
界面设计中需要根据用户需求呈现并强化重要内容，目的同样是便利用户使用，不过更侧重于用户交互界面的设计；
导航设计则需要保证清晰地告诉用户“我在哪、我能去哪、我怎么去”（作者在这里主要介绍了一些类型，没有具体执行的说明）。
这三部分的决策结果将综合形成页面内的布局图，也就是线框图。从线框图开始，交互和视觉设计师的重要性逐渐上升（专业的事交给专业的人）。

看框架层这一部分的时候，我个人有点困惑。比如，框架层的“比喻”和结构层的概念模型是一回事吗；信息设计的分组和结构层的分组到底哪里不同。
目前我的认知是，框架层专注于功能的组成与呈现：在这一层，我们通常不思考“用户需要什么”，而是“在设计好的结构中，我们如何呈现用户要的东西”，是通过可视化的内容设计来引导用户，帮助用户尽可能“在下意识行为中实现目的”。同时，在可视化的方面，我们又不用过分纠结于页面细节，只需要专注于设计我们需要为用户传达那些信息、如何表现即可。

战略和范围层确定了要做哪些需求，结构层界定了产品的架构与运作方式。而框架层，就需要具体到“我们用什么样的功能和形式来实现产品”，关注独立的组件以及组件之间的相互关系。

以功能型产品为例，“要做哪些功能”是在范围层就决定好的，交互设计明确了这些功能如何被组织起来，而框架层则决定了具体用哪些控件、需要强调哪些信息，后续的表现层会实现对视觉的设计。

框架层的具体设计被分为①功能型产品的界面设计-确定界面控件的框架；②信息型产品的导航设计-确定信息的截面形式；③信息设计-用于呈现有效的信息沟通。
这三部分设计紧密结合、边界并不清晰，而且它们常常要联系在一起考虑(尤其是信息设计与另两者)；将它们定义为独立的领域，主要是为了帮助我们对解决方案进行评估，从而保证每个部分的设计都没有被遗漏。

• 界面设计的核心是提供给用户做某件事情的能力：通过“界面”，用户可以接触到结构层所确定的某个具体功能；
• 导航设计的核心是提供给用户去某个地方的能力：通过“导航”，用户可以了解到结构，从而在结构中穿行；
• 信息设计的核心是向用户传递想法：无论是“以任务为导向”的功能性产品，还是“以信息为导向的”信息性产品，都需要一个良好的信息设计作为基础。

通过对界面、导航以及信息的设计，我们可以支持用户尽可能轻松地完成使用。什么样的设计是“符合用户体验的设计”？这里作者给出了一个方向：重视用户习惯。

习惯

在框架层中，我们想做的事情就是“为用户提供一个合理的页面框架”，减少用户操作中的认知负载。针对框架层的设计，作者给出两个建议，①尊重用户的操作习惯，②不要滥用比喻来实现现实世界的映射。

• ①重视用户的操作习惯：习惯和条件反射是与这个世界交互的基础，也是用户与产品交互的基础。

  • 为什么要重视“用户习惯”？
    • 生活中的大量任务都是依赖潜意识和条件反射完成的，包括开车、烹饪，以及使用产品时下意识的点击行为；
    • 一个违背习惯的框架层设计“看起来只会让用户多花一小点时间”，但用户使用时会感受到显著的挫败感、体验降低；
    • 习惯与条件反射的形成依赖于日常的长期积累，非必要情况下，我们的产品不应该轻易违背用户已经建立的习惯。
  • 如何重视用户习惯？
    • 尊重用户已经建立的习惯，包括现实生活、同类产品为用户建立的习惯；
      • 电子产品的设计与用户习惯会受到现实生活的影响——例如，随着转盘式拨号电话的消失，“三行四列”取代圆形成为最常用的按钮布局
    • 在有充分、明显的益处的情况下，我们的产品可以谨慎地尝试建立新习惯；
    • 在自己的网站内保持一致。在网站内保持一致可以让用户套用系统内其他部分了解的知识、减少用户困惑，这比“与用户已经养成的习惯保持一致”更重要。明确网站特性的概念模型后，我们可以为同类特性设计类似的界面、为用户构建同样的操作习惯；另外，共用的模块应当使用统一的处理方式。

• 尽管设计会受到现实生活的影响，但是，不要生硬地模仿现实世界。

  • 在电子产品中直接套用现实世界的要素可能反而会让用户感到困惑——用户看到的不是一个精妙的比喻，而是一个不明含义的icon；
  • 在网站中适当地运用比喻，原则就是“别让用户猜测”，即提供一定的上下文来帮助用户更好地猜测比喻所表达的内容，最好直接消除猜测的成分。

界面设计

界面设计是什么：
界面设计通过选择正确的界面元素，并用适当的方法进行组织，帮助用户理解、使用界面元素来完成任务。
结构层的交互设计中决定哪个功能要在哪个界面完成，界面设计的范畴是，功能如何在界面上被用户认知到、界面内的元素如何设计。

界面设计的原则：
成功的界面设计要求“让用户一眼就看到最重要的东西”；用户不需要注意的内容需要被设计得不容易被注意到，甚至被隐藏。

• 我们需要弄清楚，用户不需要知道哪些东西，从而淡化甚至排除它们；对于复杂系统得界面设计，淡化与隐藏尤为重要；
• 设计中需要避免“程序员思维”——不能过分重视边缘情况和少见场景、平等对待每一种可能性；我们需要组织好用户最常采用的行为，并保证界面元素可以被轻松地使用。

界面设计的技巧：
界面设计可以通过很多技巧来帮助用户更轻松地完成任务。常用的技巧包括：

• 通过大小、颜色等对重要与常用内容进行强调。这是最简单的控制界面元素的视觉权重的方法，但需要注意，滥用后会反而让用户感到困惑。
• 通过元素的选择与设计帮助用户减少思考与操作。
  • 不同的界面元素的功能与效果不同，我们需要结合场景与用户在场景下的状态来选择最合适的界面元素设计。
    • (2000年)常见的标准界面元素包括①复选框 checkbox (单个或一组出现)、②单选框 radio button(一组出现)、③文本框 text field、④下拉菜单 dropdown list、⑤多选菜单 list box、⑥按钮 action button等等。这些界面元素在呈现中有不同的特性，例如，下拉菜单相比单选框节约了界面，但是用户无法一眼看到所有选项；让用户输入想要搜索的分类名称可能降低数据库的载入负担，但是用户的负担会增加。
    • 需要注意的是，技术工具和体系自身可能会限制可选择的界面选项。PM应当与开发充分沟通，并结合技术环境选择最合适的方案
  • 通过默认设置，我们可以减少用户的思考。
    • 默认设置的值可能是开发者预设的固定值、大部分人希望勾选的复选框或者“记住用户上次选择状态”。典型案例就是大部分软件的安装程序(默认安装地址、默认配置等)

导航设计

导航设计不仅仅是“在页面上放置几个链接”。导航承载着“帮助用户找到出路”、前往正确界面的使命，需要清晰地告诉用户“我在哪、我能去哪、我怎么去”。其中，告诉用户“我在哪”也是有意义的。在长路径流程中，用户有可能发生遗忘，甚至由于网站的开放性，用户有可能偶然进入当前节点的。导航的指示可以帮助用户了解状况、减少困惑。

导航设计≠一级二级菜单设计。菜单是全局导航的一种形式，不是导航设计的全部。

无论是不是信息型的产品，任何一个网站的导航设计都必须同时完成以下三个目标：

1. 选取可以促进用户行为的导航元素。
   1. 导航的链接必须真实有效，这是前提；
   2. 导航不会涵盖所有网页的链接，所以“哪些元素可以推动用户完成可能的任务”会成为选取导航元素的重要依据。
2. 导航设计必须表现出元素所包含的内容之间的差异与联系，从而帮助用户理解“如何进行选择才是有效的”。这要求我们清晰地向用户表达①导航元素的内容分别是什么，元素间的差异点在哪，②导航元素间的层级关系、重要性对比。
3. 导航设计必须传达出用户当前浏览页面和其他内容间的关系，从而帮助用户判断是否应当选择其他导航元素、选择后会对浏览页面产生什么影响。

导航不仅仅出现在页面结构内部；很多网站会设置独立于网站的内容或功能的远程导航，来帮助未开始使用或无法继续使用网站的用户。

网站常用的导航设计方法包括：

• 全局导航：覆盖整个网站的通路的导航。全局导航的经典应用就是在导航栏放上网站所有主要栏目的链接；
  这里的“覆盖整个网站”强调的点是，全局导航应当包含网站页面的关键点，而不是强调在其需要所有页面上出现(persistent menu不一定和全局导航完全对等)
• 局部导航：提供用户到架构“附近地点”的通路。局部导航通常只链接当前页面的父级、兄弟级和子级通路；
  我个人的理解是，“局部导航”与“全局导航”的核心差异在于，全局导航需要覆盖网站的全部分支，但是局部导航只需要覆盖对应部分即可；例如FB的Business Manager左侧菜单基本应用了局部导航(将模块拆分、单面板只显示对应模块的导航，全局导航收缩在一个icon内)
• 辅助导航：提供了用户无法快速到达内容的快捷途径；
  个人理解是，辅助导航有点类似于“你可能要找”这种功能，里面是识别出的、用户可能需要的内容链接。这些内容可能散落于结构的其他地点，通过辅助导航用户可以实现快速跳转
• 上下文导航/内联导航：嵌入在文本内容中、用于补充额外信息的导航。通常以超链接的形式出现；
  上下文导航的重点在于，基于对用户目标、用户需求的理解，通过增加相关链接来协助用户。需要避免滥用上下文导航带来的混乱。个人认为，飞书表格中的右侧说明栏也是上下文导航的一种应用形式，并且进一步做了优化（用gif替代文本）
• 友好导航：提供用户通常不会需要、但确实有必要性的链接(例如零售店即使开业也会挂着营业时间的信息)。典型应用是网页底部的联系信息、反馈表单、法律声明等；
  上述导航通常包含在页面结构内部；以下为远程导航
• 网站地图：提供一个简明的但也的网站整体结构预览，通常涵盖一级和二级导航（我个人检索资料后，感觉sitemap应该更类似于一个主要网址清单）；
• 索引表：提供按字母排序的链接列表。通常适用于涵盖不同主题、大量内容的网站。

信息设计

信息设计就是通过设计信息的呈现来帮助用户使用和理解它们。

信息设计与前两者的区别在于，信息设计的设计单位为“信息元素”，通过信息元素的排列、分组、整理，用“反映用户的思路”、便于理解的方式来呈现信息，从而“支持用户的任务”。

信息设计的核心是保证“系统能为用户提供正确使用系统的信息”，因而和其他设计部分存在一定的交叉，例如

• “信息元素的概念关系”的设计，本身属于微观信息架构的范畴（只不过信息架构侧重信息的定义与信息关系的设计，框架层的信息设计则需要在页面上完成信息的传达）；
• 信息设计会涉及视觉呈现，例如图表形式、icon的选择等；
• 信息设计可以为解决界面设计提供支撑；
  • 信息元素的分组属于信息设计。如信息的填写通常会将姓名等个人信息放在最前面，并按照一定的规则进行分组，这个案例中，“界面设计”依赖于“信息设计”
  • 界面设计中的特殊提示背后、系统给予用户的使用提示同样需要信息设计的支持
• 信息设计与导航设计可以结合为“指示标识/wayfinding”，用于帮助用户理解“他们在哪”以及“他们能去哪”。
  • 导航系统可以提供并清晰地传达通往网站不同区域的通路；最好能帮用户对自己的位置、重点以及最优路径建立心理认知
  • 信息设计则通过色彩、图标、标签系统为用户强化“这是哪儿”或者“你在这儿”的信息

再次提出，五层模型的意义不在于“如何区分”，而在于如何通过模型内的各个要素来检查设计的完整性

线框图

在框架层，我们需要通过信息设计、界面设计和导航设计三者形成一个统一的、有内在凝聚力的页面布局。页面布局通常以页面示意图或线框图作为载体；线框图以直观的方式描述了页面的组成部分以及元素间的结合方式。

页面布局需要涵盖①设计的各层级的导航系统、②支持功能所需要的界面元素、③经过设计的信息点。

线框图的样式

线框图是什么：
线框图是对页面组成的描述文件，通常以图的形式出现。
线框图中需要整合框架层设计的界面要素：①界面设计-界面元素的选择和整合，②导航设计-核心导航系统的识别和定义，③信息设计-信息组成部分的优先级判定、放置和排列。

线框图不是什么：
× 线框图不是一个“大而全”的说明文档——它往往需要配合架构图等交互设计文档、内容需求或功能规格说明一起使用。单个内容元素的说明可能会以链接方式被附加在图上；线框图不涉及结构的设计与图示（那是结构层的工作），线框图是针对实际完成的具体说明。
× 线框图不单指一个“图”，它有时候需要配合更详细的文字说明，用于描述网站行为或元素。

线框图有什么用：
线框图是建立网站视觉设计的第一步，一般用于指导页面的建立，指导后续的网站实际建设与运作；
此外，线框图也可以帮助战略层、范围层和结构层的设计者确认产品是否满足期望。因为这个阶段还没有进入开发，在这个时候进行调整的成本也相对小。

线框图“怎么画”：
线框图是信息架构与视觉设计的汇集点，应当由用户体验设计师+线框图绘制者+视觉设计师共同完成，从而保证结构的清晰以及视觉传达的准确。
复杂的系统可能需要用一组线框图来描述系统。不过线框图不需要与页面一一对应，只要保证线框图足以反应一类界面结构即可。
注意：不要为了写文档而写文档，线框图也只是传达信息的手段。线框图的完善与正式程度取决于团队和产品的复杂度。