交互设计读书笔记——《用户体验要素：以用户为中心的产品设计》[美] 杰西·詹姆斯·加勒特

川陀Trantor

已于 2024-12-31 13:53:17 修改

阅读量801

点赞数 6

文章标签：交互 ux 笔记

于 2024-12-30 19:27:31 首次发布

本文链接：https://blog.csdn.net/Trantors/article/details/144832586

版权

个人摘要

《用户体验要素：以用户为中心的产品设计》是用户体验领域的经典之作，它将网站设计系统地分为五个要素：战略层、范围层、结构层、框架层和表现层，并分章节讲述了每一层要素下辖的内容。我们可以从这本书中以小见大，洞见产品交互设计如何才能取得好的用户体验。

本文原是考研笔记，由于应试缘故，我对书中重要概念作了词条化的整理，许多细节有失严谨，对一些作者独创的概念也没有深入考究。因此，本文比较适合作为二次研究的楔子，而非标准化工具书。

一、用户体验为何重要

投资回报：Return On Investment, ROI；
转化率：完成转化行为如订阅的用户占全体用户的比例。它能衡量一个设计的商业效率和用户体验。
以用户为中心的设计：user-centered design, UCD；在开发产品的每一个步骤中，都把用户纳入考虑范围，以创建吸引人的、高效明快的用户体验的方法理念（包含5要素）。

二、认识用户体验要素

表现层：一系列网页，由图片和文字以及超链接组成。它为产品窗机爱你感知体验。22
框架层：按钮、控件、照片、文本区域的位置布局；解决如何优化布局，以发挥这些元素的最大效果效率的问题；框架是结构的具体表达。决定表现层。22
结构层：确定特性和功能的组合方式；解决用户如何到达某个界面，能够前往什么地方的问题；结构是框架的抽象概括。决定框架层。23
范围层：描述网站各种特性和功能的构成的范畴；解决某个功能是否应该纳入产品的问题。决定结构层。23
战略层：描述经营者和用户分别想通过产品获得什么。决定范围层。23
五要素建设要自下而上、环环相扣地进行：后一个层面的工作，需要在前一个层面完成前就开始。26
功能型产品vs信息型产品：

三、战略层

战略层定义：战略层明确“产品目标”和“用户需求”，确定开发者和用户分别想通过产品得到什么。
产品目标：为了确定它，要结合品牌识别、成功标准（显示目标是否被满足的可追踪指标）、印象数（网站上广告被展示的数量）等来确定。
用户需求：为了确定它，要通过用户细分（划分关键用户特征）、人口统计学、消费者心态档案、可用性和用户研究、市场调研、人物分析、用户测试、卡片排序法、人物角色等来确定。
设计团队角色和流程：团队包括战略专家、决策层、普通员工，各有优势；产品目标和用户需求被定义在战略文档（愿景文档）中。

四、范围层

范围层定义：范围层明确“功能规格”（功能型产品）和“内容需求”（信息型产品）。它是一个有价值的过程，同时产生有价值的产品。它确定工作流、日程安排、里程碑等利于产品功能和内容开发的手段，避免陷入“范围蠕变”。
过程的价值：迫使团队考虑潜在冲突和产品中粗略的点，确定哪些问题现在解决，哪些问题之后解决。
产品的价值：给予团队一个参考点，明确项目中要完成的全部工作，提供一门共同语言，确保设计不出现模棱两可。
特性：软件的功能和所提供的内容。
功能规格：描述软件产品功能的组合。要求积极、具体、客观。
功能规格-积极：提供不好情况的解决手段，而非禁止不好情况发生（不允许购买风筝线 > 引导到风筝线界面）。
功能规格-具体：具体描述功能需求（最受欢迎要多显示 > 点赞最多放在列表最前）。
功能规格-客观：避免主观语气，使需求保持明确、避免歧义，变得可验证（这个网站应该是时尚闪耀的 > 这个网站符合企业品牌指南文档要求）。
内容需求：纳入设计范围的内容信息。需要提供每一个特性规模的大致评估（文本字数、图片分辨率、更新频率等）。
内容管理系统：Content Management System, CMS；实现展示、交付内容给用户的自动化标准和流程的系统，包含多语言、内容格式、更新发包等方面的自动化管理标准和流程。
内容清单：重要，让团队每个人知道设计用户体验需要做哪些工作。
确定需求优先级：综合收集潜在需求和想法，评估需求间的依赖/冲突关系、哪些需求最能满足战略目标，同时考虑它们的可行性，而得出的优先级。
范围层对战略层的反作用：留意可能需要改变战略的特性建议。

五、结构层

结构层定义：结构层明确“交互设计”（功能型产品）和“信息架构”（信息型产品）。它确定呈现给用户的元素的模式和顺序。
交互设计：关注描述“可能的用户行为”，同时定义“系统如何配合与响应”这些用户行为。
概念模型：用户对“通过交互实现目标”这一过程的认知，不一定符合产品内部机制。常和“直接操作”有关（直接操作使用户操作过程协调、概念模型得到满足且有目的感）。预测并提供满足概念模型的功能路径，但也别忘了设置更高效专业但略难学习的用法（如单一功能入口），因为概念模型来自用户已有认知，低门槛同时也低效率，在用户足够熟练的情况下，强迫用户继续使用原有概念模型交互将成为用户负担，无论是视觉上还是交互逻辑上。概念模型-新型操作-新的概念模型是一个螺旋前进、永无止境的过程，贯穿人类交互行为演进的历史。
错误处理：预防错误（自动挡汽车必须挂P档发动）、使错误难以发生、主动纠错、错误挽救措施（撤销）。
信息架构：基本单位是节点，可以对应任意的信息片段或组合。节点需具一定结构方法和组织原则。关注呈现给用户的信息是否合理并有意义。
信息架构的作用：内容型网站上，信息架构帮助设计组织分类、导航结构，让用户得以高效合理地浏览网站，同时实现教育、通知或说服用户。
信息架构分类体系-从上到下：根据产品目标和用户需求直接进行结构设计，由战略层驱动；可能导致内容重要细节被忽略。
信息架构分类体系-从下到上-对预期将存在的内容进行分类，进行结构设计，由范围层驱动；可能导致过于细致，结构僵化。
高效信息结构能避免重构：能容纳成长和适应变动，让新需求不会导致整体重构。
结构方法：信息架构节点的安排方式。包含层级结构（树状结构、中心辐射结构）、矩阵结构、自然结构、线性结构等。
- 层级结构（树状结构、中心辐射结构）：节点与其他节点间由父级/子级关系链接，对于用户、开发者很好理解，也和软件工作方式类似。
- 矩阵结构：允许用户在节点间沿着多个维度移动，适合“带着不同需求而来”的用户。
- 自然结构：节点间没有明确连接模式，适合探索一系列关系不明确或一直在演变的主题。
- 线性结构：节点之间具有一维线性的连接，书、文章、录音等都是这种线性结构，适合明确且单一的需求。
组织原则：节点在信息架构中的安置原则，涉及哪些类型节点需要成组，哪些要保持独立。如按重量划分、按大洲划分就是一种组织原则，这在图书馆学中被称为“截面”。
语言和元数据：
- 命名原则：描述、标签，和产品的其他术语。
- 受控词典：强调一致性的工具，它帮助网站“使用用户的语言”，保持一致性。它为每个概念提供一个固定的词，从而让我们能依靠自动化来帮助定义内容元素之间的联系。
- 类词词典：提供常用的，但未纳入网站标准用语的词汇供选择。
- 元数据：描述信息的信息，它以结构化方式来描述内容的信息。
团队角色和流程：
- 架构图：描述网站结构的工具；记录哪些类别要放在一起，哪些保持独立。
- 视觉辞典：图解网站结构的系统。

六、框架层

框架层定义：框架层明确“界面设计”（功能型产品）、“导航设计”（信息型产品）以及“信息设计（功能&信息），确定用什么样的功能和形式来实现产品目标和用户需求。
界面设计：提供给用户“做某些事”的能力，用户通过它接触到结构层交互设计中确定的“具体功能”。相比考虑“边缘情况”更应该思考如何将用户注意力集中在“重要情况”。
导航设计：提供给用户“去某个地方”的能力，用户通过它在结构中自由穿行。
信息设计：传达想法给用户，范围很广。涉及如何呈现信息，使人们更易理解。
习惯和比喻：不要过度强调概念模型和比喻。
多重导航系统：包含多种导航方式的混合导航系统。
- 全局导航：无论身处何处，都能跳转主要页面。
- 局部导航：沿信息架构关系发生的导航。
- 辅助导航：一些非常规的特殊导航，提供全局或局部导航不包含的捷径。
- 上下文导航（内联导航）：嵌入页面自身内容的导航，它以内容文字自身的超链接形式出现，可避免用户需要额外信息时视线被迫离开内容扫向导航。
- 友好导航：作为一种便利途径提供用户一般不需要，但有必要存在的链接（如服务条款）。
- 远程导航：不包含于页面结构的，独立存在的导航。
- 网站地图：常见的远程导航工具，通常以分级概要形式出现，提供全部层级的导航。
- 索引表：按字母顺序排列的，链接到相关页面的列表。
信息设计：如何呈现信息，使人们更易理解。
- 指示标识：帮助用户理解当前位置和目的地的系统（即路标）。结合信息设计和导航设计能支持指示标识。
- 线框图：对页面中所有组成部分以及它们如何组成到一起的最直观描述。它捕获所有在框架层做出的决定，作为视觉设计和网站实施的参考。这是一种概念化的页面布局，能让开发者低成本、快速地掌握页面布局的信息设计、页面设计、导航设计是否合理。

七、表现层

表现层定义：表现层明确“感知设计”，确定“产品框架层的逻辑排布”的感知呈现问题。
多种感知：
- 嗅觉和味觉：较少考虑，因为“普鲁斯特效应”通常不是用户体验设计师能轻易决定的，受影响因素太多。
- 触觉：通常是用户与产品间的物理接触，涉及材质、外形、控件布局等；得益于震动设备，屏幕交互也开始有丰富的触觉体验了。
- 听觉：广泛应用。
- 视觉：最广泛应用。
管理用户眼动行为：好的设计能让用户眼动行为具有如下特点：
- 路径流畅：好设计让用户的视觉焦点得以流畅有序地移动。
- 目标引导：好设计在视觉上引导用户进行正确的交互。
对比：对比本质上是信息密度的差异，是吸引用户注意力的最有效工具。
一致性：使设计能有效地传达信息，而不会导致用户迷惑或焦虑。
- 基于网格的布局：见AF，网格系统保证可用性和一致性，在美学上吸引人，减少开发成本，但会引入适配问题。
内部一致性：产品内不同区域的设计方法的一致性。实现方法-设计之前，独立出设计元素、使用同一的品牌识别形象。
外部一致性：同一企业的不同产品间，设计方法的一致性。实现方法：统一的品牌形象，强化“跨媒体的一致性”，即使是在最少出现的按钮上。
配色方案和排版：对品牌重要。
视觉模型 & 设计和成品：视觉设计中对线框图最直接的模拟，它是由选定的组件建立的，最终的可视化的产品。
风格指南：承载视觉设计决策的汇总文档，包括栅格距离、配色方案、字体标准、标志应用等。