交互设计读书笔记——《About Face 交互设计精髓》[美] 艾伦·库伯

个人摘要

《About Face 交互设计精髓》可以说是交互设计领域最经典的工具书之一。该书从“目标导向设计”这个切入点出发，系统介绍了交互设计全流程各方面的概念，至今仍然受用。

本文原是考研笔记，由于应试缘故，我对书中重要概念作了词条化的整理，许多细节有失严谨；同时，我在许多地方增添了自己的理解，也将一些拗口的地方用自己的语言作了重述。因此，本文比较适合作为二次研究的楔子，而非标准化工具书。

因为版权原因，作了以下调整：删除书籍封面图、删除章节标题和小标题、删除部分书中摘录语句、删除附录交互原则部分。
内容都是自己手打总结的，能不能过审就看运气了 = =，确实东西有点多

---

• 数字产品不好的四个原因：重点错置、无视真实用户、利益冲突、流程缺失 5
• 目标VS任务或活动：ACD的局限，你设计的活动真的符合目标吗？ 12
• 实现模型：软件实际的运行逻辑 14
• 心理模型（针对系统来说，就是概念模型）：用户对“通过交互实现目标”这一过程的认知，不一定符合产品内部机制。常和“直接操作”有关（直接操作使用户操作过程协调、概念模型得到满足且有目的感）。预测并提供满足概念模型的功能路径，但也别忘了设置更高效专业但略难学习的用法（如单一功能入口），因为概念模型来自用户已有认知，低门槛同时也低效率，在用户足够熟练的情况下，强迫用户继续使用原有概念模型交互将成为用户负担，无论是视觉上还是交互逻辑上。概念模型-新型操作-新的概念模型是一个螺旋前进、永无止境的过程，贯穿人类习得交互技能的历史。 14
• 呈现模型（诺曼的设计师模型）：对实现模型的不同呈现，目的是尽可能符合心理模型 16
• 目标导向设计概论 18
• 目标导向设计过程 20
  1. 设计研究 21
  2. 用户建模 22
  3. 需求定义 22
  4. 框架定义 23
  5. 提炼 24
  6. 开发支持 24
• 关注目标，而非特性！24

---

• 启动会：聚集利益相关者，讨论产品用户竞争对手商业技术等 31
• 文献综述：调查相关文献，包括市场规划品牌策略用户调查技术规范等 31
• 原型或竞争者审核：调研现有产品，准备访谈问题 31
• 利益相关者访谈：了解每个人对产品的想法 32
• 主题专家（SME）访谈：专业用户，往往有10年以上专业经验，能全面熟练完成任务，具有计算机和目标任务的全局知识，了解行业情况和产品发展历史，能横向比较，具备操作妙招，有创新思考。 33
• 客户访谈：购买产品的人 34
• 用户访谈：亲自使用产品的人 35
• 用户观察：避免访谈对用户产生影响，偷偷观察 35
• 访谈和观察之情境调查：在用户熟悉的环境进行访谈观察 36
• 访谈和观察之改进情境调查：提升效率
• 访谈和观察之准备人种学（深入研究人类文化）访谈：37
  • 确定候选人
  • 人物模型假设：哪类人用产品？需求和行为如何变？有哪些行为和环境？
  • 商业和消费领域角色
  • 行为和人口统计学变量：购物频率、喜好程度、便宜导向和需求导向
  • 技术和行业知识：为经验缺乏的用户提供领域支持
  • 环境因素：公司规模、位置、产业、安全级别
  • 访谈计划：根据以上因素，确定访谈计划
• 人种学访谈：早期探索、中期细节、后期微调，和一些方法 41
  • 在交互发生地访谈
  • 避免固定问题
  • 假装为门外汉
  • 开放式和封闭式提问交替
  • 首先关注目标，任务其次
  • 避免把用户当设计师，让他提方案
  • 避免技术问题
  • 鼓励讲故事
  • 请求演示和讲解
  • 避免诱导性问题
  • 目标导向问题：
    • 目标：哪些事愉快？
    • 机会：哪些事浪费时间？
    • 优先级：哪些事最重要？
    • 信息：什么帮助你决定？
  • 系统导向问题：
    • 功能：
    • 频率：哪个部分频率最高？
    • 偏好：
    • 失败：你如何解决遇到的问题？
    • 经验：你用什么样的快捷键？
  • 工作流程导向问题：
    • 过程：早起第一件事？
    • 频率：这件事多久做一次？
    • 特殊情况：有什么事不寻常？
  • 态度导向：
    • 期望：
    • 避免：
    • 动机：
• 可用性测试： 46
• 卡片分类： 46
• 任务分析： 47

---

• 什么是人物模型（Persona），他能做什么 49

• Persona 的优势：确定功能，达成共识，衡量效率 59

• Persona 可避免设计陷阱：弹性用户、自我参考、边缘功能 52

• Persona 为什么有效：53

  • 它把产品团队同理心聚集在用户目标上
  • 它以研究为基础
  • 它代表特定产品的用户类型
  • 它拓展了用户行为的范围（更真更全）
  • 它有动机，可当成目标，专注于目标而非任务
  • 它可以代表用户之外（避免为其服务的人物）

• 找出目标：Persona 最重要的任务之一 59

• 用户目标三类型：体验目标（本能）、最终目标（行为）、人生目标（反思） 59

• 体验目标 62

• 最终目标 63

• 人生目标 63

• 非用户目标：客户目标、商业或组织目标、技术目标 64

• 成功产品首先要满足用户目标 65

• 访谈对象分组 67

• 行为变量：活动、态度、能力、动机、技能等 67

• 访谈对象和行为变量联系 68

• 找出行为模型（购买CD则很可能下载MP3文件）69

• 综合特征阐明目标：行为、环境、经验、态度、替代方案、人口统计学、社会关系等 69

• 检查完整性和冗余 70

• 人物模型类型：主要、次要、补充、客户、接受服务的、负面人物模型（快题也可如此细分） 71

• 进一步描述Persona特征：虚构情节（故事板）、大头照片等 73

• 临时人物模型 79

• 工作流模型 / 序列模型：优点是能更好帮助捕捉详尽的人际间或组织间的工作流，局限是缺乏同理心；若以工作流模型为主要交互设计依据，则设计往往会像依赖“实现模型”的软件一样失败，功能齐备却没有人性。80

  • 过程的目标或期望的结果。
  • 过程和每个动作的频率及重要性。
  • 过程和每个动作的诱发和促进因素。
  • 依赖关系，即过程和每个动作执行所必须的条件，以及什么依赖于过程和每个动作的完成。
  • 参与者及其角色和责任。
  • 具体执行的动作。
  • 做出的决定。
  • 哪些地方会犯错，有哪些错误和例外情况。
  • 如何纠正错误和意外情况。

• 人工制品模型：代表的是用户执行任务和工作流中使用的各种不同人造品，这些人造品通常指在线或纸质表格，目的是捕捉用户环境的人造品元素，在设计后期有用；将纸质系统数字化时，如果不认真分析目标运用设计原则将导致可用性问题。 80

• 物理模型：同人工制品模型，意在捕捉用户环境的元素，其关注点是捕捉构成用户工作空间的物理对象的布局，帮助发现用户使用频率问题和妨碍生产效率的物理障碍；相比人物模型，离散而详尽物理模型能在复杂的物理环境中（如医院平面图）更精确地捕捉用户痛点。 81

---

• 场景：以叙述为设计工具（故事板） 83

• 场景不同于使用案例，他更全，是目标，后者是活动 84

• 基于场景的设计（批判卡罗尔，他没考虑目标） 85

• 基于人物模型的场景（比单纯场景更好，将Persona用于故事板） 86

• 三类基于人物模型的场景：情境场景本、关键路径场景、验证场景（随着设计的进行依次深入）86

• 需求不是特性 87

• 需求不是产品需求文档 88

• 需求是战略性的 88

• 需求来源广泛 89

• 需求定义五大步骤：创建问题和愿景描述、探索和脑暴、确定Persona期望、构建情境场景、明确设计需求 89

  1. 创建问题和愿景陈述：通过此前的设计研究、用户建模和场景，定义问题，提出解决问题的愿景 90
  2. 探索和头脑风暴：不对解决方案带先入之见，而是探索各类创意 91
  3. 确定人物模型期望 92
  4. 构建Persona的情境场景：早晨梳洗后收邮件，看到客户信息，呼叫他，切换免提，电话会自动收集信息，自动更新行程表，去另一个办公室做事…… 92
  5. 明确设计需求：数据需求、功能需求、情境需求、其他需求 95

---

• 创建设计框架：定义用户体验的结构，包括底层组织原则、工作流、交互、视觉语言、品牌识别等 97
• 定义交互产品框架：98
  • 定义形式要素（小巧or庞大？高分or低分？）、姿态（用户会投入多大注意力）和输入方法 99
  • 定义功能性（功能元素，快速拨号，声控等）和数据元素（产品数据主体如图片邮件） 100
  • 确定功能组和层级（人物模型如何影响元素组织？哪些元素要放一起？）102
  • 构建交互框架（流程图，信息架构图等）103
  • 构建关键线路情境剧本：验证主要交互内容（故事板，旅程图等，保证关键交互步骤流畅）104
  • 使用验证性场景检查设计：验证细枝末节找bug，三类验证场景：替代场景、必须使用的场景、边缘情形场景 106
• 定义视觉设计框架 107
  • 开发视觉体验特征（体验属性）：熟悉品牌纲要、收集相关示例、留意受访者提到的术语如“友好” 107
  • 开发视觉语言研究：颜色、类型、小部件风格、按钮材质 108
  • 应用于屏幕原型 109
• 定义工业设计框架：与交互设计者就形式要素和输入方法合作、开发粗略原型、开发形式语言研究 110
• 定义服务设计框架：描述客户旅程、创建服务蓝图、创建体验原型 111
• 细化外形和行为 112
• 验证与测试设计：用户反馈和可用性测试（按钮命名、信息组织、初次使用和可发现性、有效性） 114
• 形成性可用性测试：避免取代正面设计决定和过于量化 116

---

• 共同思考更好
• 创造者和综合者：创造者深入创造，综合者统揽全局；它们是两种不同思维模式，一个人可以切换为两种模式；多使用创造-综合模式。
• 思想伙伴：开工前要明晰目标问题；向具有创造力的同事请求创意；一筹莫展时给出一个烂主意，由创造者修改。
• 脱离困境15分钟规则：讨论停滞超过15min，应引入另一位设计者参与讨论。
• 核心团队规模：对于单个问题2-4个人最好，多了会造成间接成本。
• 跨设计领域：视觉设计者同交互设计者合作。
• 不同角色的责任：交互设计者对目前产品用户、对用户反应负责；让工程师有权决定原材料的选择和建造过程、营销人员负责定义市场机遇、商业领导定义商业机遇。
• 设计者：关注UX；
• 可用性人员：关注产品有用性、可用性、可期待性和用户实际反馈；
• 工程师：如何以快速、有活力、可扩展的方式构建设计；
• 市场人员：如何激发可采纳性；
• 商业领导：产品功能和市场需求最明显的重合点是什么？
• 同敏捷开发人员合作：敏捷设计允许产品体验定义方面存在矛盾、融合用户反馈。
• 创建创造性团队文化。
• 确定设计师技术水平：学徒、技术高手、领导者。

---

• 设计价值：描述有效、合乎道德的设计实践所遵循的规则 136

• 如何创建设计价值：136

  • 合乎伦理：
    • 不造成伤害，包括人际关系、心理、身体、经济、社会等 135
    • 改善人类环境 137
  • 目标明确：
    • 帮助用户实现目标和期望 137
    • 符合用户场景和能力水平 137
  • 实用：137
    • 帮助设计者实现目标、满足商业和技术需求 136
  • 优雅：
    • 代表最简单而完整的方案 138
    • 有内在一致性，让人感觉是整体，各部分一致和谐 138
    • 顺应和调动认知与情感 138

• 概念原则：界定产品定义，产品如何融入广泛的使用情境 139

• 行为原则：描述产品在一般情境和特殊情境中应有的行为 139

• 界面原则：描述行为及信息有效的视觉传达策略 139

• 行为和界面原则使工作负荷降到最低 141

• 交互设计模式：捕捉有效交互设计方案并将其应用于类似问题的方法 142

• 定位模式：应用于概念层面，帮助界定产品对于用户的整体定位.如“暂态”（打电话时的界面）。 141

• 结构模式：解答如何在屏幕上安排信息和功能元素之类的问题 142

• 行为模式：解决功能或数据元素的具体交互问题 142

• 反馈模式（补）：涉及系统如何响应用户的输入或操作。例如，按钮点击后的视觉反馈、加载动画、表单提交后的确认消息等。

• 导航模式（补）：指导用户在系统中的移动方式，帮助用户了解当前位置以及如何到达目标。例如，面包屑导航、分页、侧边栏、下拉菜单等。

• 数据输入模式（补）：定义用户如何输入或选择数据的方式。例如，表单输入、日期选择器、滑动条、开关、复选框等。

• 社会化模式（补）：与社交功能相关的交互模式，帮助用户通过系统进行互动和协作。例如，评论系统、点赞、分享按钮、通知系统等。

• 引导模式（补）：用于引导用户熟悉产品功能或流程的设计模式。例如，新手引导、工具提示、渐进式披露（逐步展示复杂功能）。

• 内容显示模式（补）：决定如何展示信息和内容，以便用户更易于阅读、理解和操作。例如，卡片布局、标签页、网格布局、分栏布局等。

• 错误处理模式（补）：处理用户操作错误或系统问题的模式，帮助用户理解错误原因并提供解决方法。例如，错误提示、自动纠错、输入校验，或提供单选框供修复操作如重启。

• 结构模式示例：组织者-工作区：iOS照片APP，左边是导航栏，右边是工作区 144

• 结构模式示例：双层抽屉：从手机左侧向右划，拉出个人信息面板 145

• 结构模式示例：消息横幅左滑，拉出删除等按钮（自己补充）

• 行为模式示例：根据用户快速批量关闭附属标签页的行为，优化设计。（补）

• 现代更多设计模式：可见 iOS Human Interface Guidelines 的模式章节。

• 界面设计模式（和交互设计模式不同）：指响应式布局、流式布局、中央舞台、汉堡菜单等。

---

• 关心用户喜好：记住小习惯 148

• 恭顺：提供建议而非强迫 148

• 乐于助人：主动提供信息 149

• 具有常识：无害功能和重大决定项不应排在一起 149

• 有判断力：不去记住密码和报告不当操作 150

• 预见需求： 提前预测缓存下一步页面、撞车自动报警、上车运动小球防晕车 150

• 尽责：打扫厨房顺带擦干柜台、倒空垃圾，而不只是洗盘子 150

• 不因为自身问题而增加用户负担：老是弹确认 151

• 及时通知：对变化及时反馈 152

• 自信：允许用户自信操作，支持恢复，而非删除时弹出确认，让用户不自信 152

• 不问过多问题：不要有过多要求用户输入的信息和选择 152

• 不失风度：出现运行错误，应该努力弥补和解决，提供原因和解决选项，而非直接让系统崩溃 153

• 适时调整规则：允许规避能力（允许客户提供信息前，先下个订单），或如我插件的贴图部分 154

• 承担责任：打印提交时，打印第一页取消后仍打印剩下，却告诉用户已取消 155

• 帮助避免低级错误：提醒你正在将信息发给全部朋友 155

• 利用计算机的空闲周期：多线程，协程，预处理，等待确认时预执行 156

• 记忆：记忆用户习惯 157

• 根据记忆预测需求：看完视频，搜索框自动出现相关内容。基于任务一致性原则 158

• 记住细节：提供最近打开文件的快捷入口；继承上次内容；写入撤销栈至文件，再次打开依旧可撤销；推断信息，不合用户习惯的奇怪操作加以记录提供恢复方法 159

• 发挥聪明：缩小决策数量，提供智能概要；根据使用习惯自动调整呈现 162

• 社交规范和市场规范：不要让市场规范应用在家人身上，也别让社交规范用于市场中 163

• 帮助用户展现最好一面：用户身份、动态形象 164

• 简单协作：添加文档评论等 164

• 控制社交强度：类似飞书的社交+文档软件中，社交功能不应超越主要任务 165

• 规则和网络健康：Discord 的加群群规等，有专门的分栏供呈现 165

• 尊重社交的复杂：不同人群可见性、管理文档的权限 166

• 尊重隐私 166

• 处理不良社交行为 167

---

• 产品姿态：产品的外观和行为根据被使用方式而向用户呈现的姿态（自定义）169
• 驻留姿态（自创）：以常驻方式提供重要信息和最关键的功能
• 桌面软件 - 独占姿态：文字编辑软件、DCC软件 170
  • 锁定中级用户：主要群体通常是中级的，既不专家也不小白 171
  • 慷慨使用屏幕空间：独占应用可以放心布局屏幕 172
  • 保持保守视觉：用户会长时间盯着独占应用，应该使视觉风格保守耐看 172
  • 丰富视觉反馈：尽可能暗示更多信息以供用户有需要时读取，并不使界面混乱 173
  • 丰富输入方式：草图试图、大纲视图、打印视图……更多可能 173
• 桌面软件 - 暂时姿态：短暂的打开后关闭，文件浏览器。要求保持简一、信息清楚，记住上次打开的特点 174
• 桌面软件 - 后台姿态：监控程序，辅助性能程序等 177
• 桌面软件 - 网络姿态：信息类网站、事务性网站、网站应用 179
  • 信息类网站姿态：平衡独占和暂时姿态，详细信息要充分利用空间，偶尔访问则突出导航 179
  • 事务性网站姿态：淘宝网，亚马逊； 181
  • 网站应用姿态 182
• 移动设备 - 智能手机和手持姿态：184
  • 卫星姿态：信息检索和浏览，如天气显示，健康状态 185
  • 独立姿态：同独占应用 186
  • 暂时姿态：打电话 186
• 平板电脑姿态：关注独占质量 187
• 信息亭姿态：点餐器、ATM机，特点是线性流程和单一功能 189
• 远离界面姿态：PS5主机，需要使用远程控件 189
• 汽车界面姿态：多用暂时姿态和驻留姿态 190

---

• 中级用户：隔月大量使用软件的人，普通使用者，种种此类的用户是产品的核心 194
• 扭转界面：导航最少话，常用功能放外面直达 195
• 付出和回报相称：复杂操作的结果必须要有吸引力 196
• 渐进式展开：Adobe PS 的工作区可折叠拉伸，Blender Panel 197
• 组织界面的扭转：触手可及、两次点击和工具栏深处的考量。转换功能是对内容造成大影响的功能，要深藏 197
• 新手：聪明且忙碌，学习过程应该有针对性；但主打暂时姿态和以漫不经心使用为主的产品应该关注新手，如公共场所信息亭 199
• 中级用户需要什么：快速触及最常用工具、知道如何使用参考材料以供进一步研究、知道高级功能入口、可上可下 201

---

• 流：米哈伊《流：最优体验的心理学》。为了创造流，要让交互自然到似乎没有，让用户认为它们在直接操作对象 202
• 编配：交互元素齐心协力地奔向同一个目标，安排得当 203
• 和谐交互：使交互与用户“流”相匹配（★ 如何编配交互，才能营造心流？） 203
  • 遵循用户心理模型 204
  • 少就是多 204
  • 让用户指示而非讨论：打车确定目的地而非和用户讨论目的地 206
  • 提供选择而非提出问题：提供工具栏选中工具，而非选中对象后弹窗问想做什么 207
  • 必要工具近在咫尺 207
  • 无模态反馈：不打断正常活动的反馈，将信息呈现在界面中，如顶部消息提醒、HUD等 208
  • 避免冗余交互：999次没用的弹窗和1次有用的弹窗（造成冗余的原因常常是程序员将严密的代码逻辑延申进了交互）209
  • 合适的上下文信息：有时，知道磁盘剩余空间占比比精确到字节数的统计更有用 210
  • 反映对象和应用程序的状态：提供线索让用户知道程序在干嘛，恢复、处理数据中、待命？要有无模态信息来反映 211
  • 避免不必要报告：减少细节报告，以免用户分神，担心任务内容 212
  • 避免空白状态：在创建内容时，不要问一大堆问题再创建，而是提供一个默认模板，允许用户修改 212
  • 区分命令和设置：执行功能时，应直接采用或预装填合理的缺省配置或上次配置，并允许用户修改，而非每次盘问细节 213
  • 隐藏“弹射座椅操纵杆”：对内容或工作区造成大幅或不可逆改动的功能，应该有，但需要隐藏，避免不小心触发。尤其是工作区，工作区改变，想要按原来操作恢复原工作区，都变得困难 214
  • 为响应优化但容许延迟：0.1秒被视为即时，1秒延迟可注意但不会打断思路，10秒用户意识到系统变慢会走神但会保留注意（因此提供进度条），10秒以上用户注意力会转移（此时应该后台执行并提供剩余时间和取消机制，且操作前应提示预计时间）215
• 动作、事件和过渡：216
  • 动作表达说明对象之间的关系
  • 动画利用人眼动态视力，将用户注意力集中在合适的地方
  • 动画让人能获得信息：进度条和旋转箭头
  • 转换功能的形象化表达
  • 短暂而愉快的响应
  • 承载用户概念模型的期望：用户把后台程序向上滑以丢弃
  • 有节奏、自然和顺滑的过渡动画在第一时间承接用户期待

---

• 目标导向任务vs负担任务：负担任务如预热发动机、安装软件、配置网络等，使我们努力却不能直接完成目标 220

• 导航负担：寻找功能的负担 220

  • 多视图（多屏幕，多网页等）切换最让人不知所措，需要避免 221
  • 窗格间导航：任务窗格如blender 3d 和 shading 222
  • 工具和菜单间导航：工具类别点开是新工具如ps的油漆桶和渐变 223

• 拟物化负担：用户学会基本用法后管理隐喻便成为负担，也使屏幕拥挤信息过多尤其是独占姿态应用 225

• 模态负担：错误、通知和确认；设计原则：任何输出之处应允许输入 226

• 样式负担：用户需要区分哪些是可点击的，哪些是装饰 228

• 减少要去地方的数量 230

• 提供导航标志：顶层导航栏 File Edit View，菜单，工具栏，其他界面标识 232

• 提供概览：缩略图，长篇注释提供滚动条 233

• 映射：描述控件、它所影响的失误以及预期结果间的关系 234

• 恰当映射：燃气灶台旋钮和灶台位置的映射 234

• 常见负担：

  • 强迫到另一个窗口完成与本窗口相关的功能
  • 强迫用户记住事物在层级系统中的位置
  • 强迫用户手动调整窗口大小
  • 弹出窗口位置不合适而强迫用户移动窗口
  • 强迫用户一遍遍重新设置
  • 强迫用户完整输入
  • 强迫用户请求许可
  • 强迫用户确认（而是以强大的撤销机制代替）
  • 强迫用户总是移动鼠标（补充）
  • 让用户行为容易产生错误

---

• 3类界面范式：实现中心范式、隐喻范式、习惯用法范式 242

• 实现中心范式：每种功能一个按钮，老式遥控器，相机快门 242

• 隐喻范式界面：剪刀表示剪切，废纸篓表示回收站 243

  • 好处：建立视觉与功能的联系，而不必了解软件的运行机制 243
  • 坏处：用户熟悉后将增加成本，本可以直接理解软件功能，却每次必须回到街道才能配置其他 244
  • 坏处：不易调整，对于更深的概念难以找到隐喻如进程、服务等 245
  • 例外：电子游戏的仿真界面让玩家融入游戏世界、模拟飞行软件、库乐队 246

• 全局隐喻不好：严重依赖隐喻，将界面与机械时代的制品完全绑定，有街道等夸张深入的隐喻。 244

• 习惯用法范式：248

  • （自补充）好的设计往往会形成习惯用法，这是双向的。如现在普遍用蓝色文字+下划线代表超链接。习惯用法-新设计-新的习惯用法是一个辩证且螺旋上升永无止境的过程。
  • 图形界面大多是习惯用法，我们早已习得，如顶部导航、多点触控 248
  • 创建习惯用法：交互倒金字塔，原语-鼠标定位、点击、键盘键入，中间层-双击、拖动、捏，最上层-标签、字段、导航条、列表框 251

• 能供性：事物所被感知到的及其实际的属性，能决定事物可能被如何使用的属性 251

• 手动能供性（人性能供性）manual affordance：操作对象的本能，看见门铃就想按，有锯子就想锯东西 251

• 能供性的实现预期：屏幕上的锯子让我们觉得他能锯断某样图素 253

• 直接操作：通过数据对象的视觉呈现、对象上执行的视觉和手势机制、动作的即时可视结果来操作。它极为满足概念模型。 254

• 直接操作的使用：想要把A移到B，就点击并拖动，而非在右键菜单中找到对应功能。拖动文件到视图而非点击导入。提供数字滑块而非输入。更好、更容易引发“流”的界面，往往有更多直接操作和习惯用法（我的浏览器页面观察也是例子）。它使用户操作过程协调、概念模型得到满足且有目的感 254

• 直接操作不总合适：他会过于复杂，拆散可以合并的操作，丢失计算机的自动性 257

• 顺从与提示：控件应满足用户的能供性需求，按下时就被按下，此即顺从 258

• 表达顺从-静态视觉提示：渲染为凸起的按钮让人想按下 258

• 表达顺从-动态改变视觉能供性：光标悬置在按钮上时，按钮高亮；按下按钮时，按钮呈现被按下状态（即使要松开才能真正执行）；iP16 siri边框流彩，说话时激起波澜 258

• 摆脱全局隐喻，拥抱能供：隐喻能使初级用户快速到达中级，却会让中级用户陷入低效交互的桎梏。260

---

• 数据完整：要求数据经过过滤和清洁才进入计算机 262

• 数据免疫：允许用户输入脏数据，如nine代替9，如输入asdf则高亮显示错误但不中断程序，如将姓名输在姓的框里，自动分配，如复制这段口令 263

• 处理丢失数据：通过无模态反馈提醒必填框缺失，但不强制用户填 263

• 数据输入规避机制 264

• 审核，不要编辑：无模态警告错误。word的错误拼写提示红色波浪号 265

• 过时：对话框如果总是得到相同回答，就该消灭 268

• 过时：保存和取消保存：后者常被用来实现大面积撤销，但这不合理 268

• 过时：另存为：另存为如果只为了命名和保存文件，他就工作得很糟糕.但它却又是唯一能改变文件路径的软件内功能 269

• 过时：增量保存（保存副本）：用户花心血编辑了一份副本，不合理 270

• 统一文件模型：石墨文档，obsidian 271

• 自动保存当前：当前的任何更改都将被自动保存 271

• 创建副本：与原来的确认保存不同，当用户打开文件，原文件就会作为副本被保存，确保用户更改的永远是最新文件 272

• 命名和重命名文件：文档名字应该直接显示，并且可双击更改或直接全选更改 272

• 移动位置：允许用户调用移动位置功能，而非另存为或手动在文件浏览器中修改 273

• 指定格式：保存不应与指定格式捆绑，应该提供导出而非保存为某格式 274

• 还原更改：以文件为中心的撤销（详见15章）274

• 放弃更改：提供一个放弃更改的功能，而非退出文件并选择不保存 274

• 历史版本：提供历史版本的管理，并提供足够用户辨认版本的时间戳、特征描述等信息 274

• 新文件菜单：新建、关闭、重命名或移动、创建副本、创建版本、放弃更改、属性、退出 275

• 传递状态：要么只有单例并允许传递，要么多开且指出被另一进程使用的文件 276

• 文件夹和目录：这种检索的确有用，但有更好的方法，而非此类隐喻 278

• 按位置检索：即通过目录 278

• 按索引检索：查找图书时，提供作者、主题、标题三个索引 279

• 按标示检索：Tags 280

• 数字检索方法：结合位置检索和标示检索 281

• 智能文件夹：根据所设目标属性或标识来智能收纳文件 282

• 关系数据库：种种预定义的分类关系构成的数据库 283

• 数字汤：数据放一起，设置检索规则，我们只需亮出规则令牌 284

• 受限的自然语言处理：筛选机制，近六个月，100点赞 286

---

• 富视觉非模态反馈：如显示联系人状态，是否适合通话；以颜色代表男女，是否占用等；文明六城市状态 286

• 听觉反馈：不要负面声音，而是沉默 289

• 撤销允许用户探索功能 291

• 渐增动作：包含数据修改的动作，如绘图、文本修改 293

• 过程动作：只是修改呈现形式的动作，如图片旋转，（？），界面修改 293

• 隐蔽撤销和解释性撤销：没提示撤销内容就是隐蔽撤销 293

• 单词撤销和多次撤销：撤销一次，或连续撤销的区别 293

• 多次撤销的局限：为了撤销目标步骤，需要先撤销很多其他步骤 294

• 分类撤销：解决多次撤销的局限，退格键就是一种分类撤销，他只撤销文字。可以有格式撤销等 297

• 大粒度撤销：用版本控制和还原功能解决！298

• 冻结：选取一部分内容不允许修改 300

• 作为对比功能的撤销重做：用户常用反复撤销重做来对比修改前后内容，这包括两个操作，可以考虑增加对比按钮 300

---

• 命令模态：让用户将操作指令发给应用的技术。如直接操作柄（如滑块）、下拉菜单和弹出菜单项、工具栏控件、快捷键等 302

• 教学式模态命令：以查看的方式讲述自己的行为，如鼠标悬停气泡解释弹窗、菜单上的详尽描述如新建文档 303

• 直接命令、隐形命令：如快捷键，直接有效，中级用户喜欢 303

• 表达直接模态：拖放处理、滑块、按钮 303

• 隐形模态：快捷键、手势 304

• 现实中的信息和头脑中的信息 304

• 记忆矢量：使用户学会教学式命令对应地直接命令的途径，如在相应按钮上悬停显示快捷键，提供帮助文档 305

• 有效功能集：大多数用户都常用的功能集合 306

• 导览教程：开屏教程几页卡片 307

• 覆盖层教程：覆盖界面，以箭头和文字等元素介绍目标内容，需要手动下一步或关闭 308

• 库和模板：提供给用户模板和组件库，避免空白恐惧 309

• 输入提示：在空的输入框中的灰底文字提示，提示操作又和真正输入区分，激励用户初次操作 310

• 内容区域：页面为空白时，在页面中央用文字提示这个空间应该做什么，激励用户初次操作 310

• 向导：安装软件时一系列复选框和下一步；问卷的多部分也算向导，可以配合进度条减少用户答题负担（MBTI测试） 311

• 工具提示：非模态交互式帮助典型例子，鼠标悬停时弹出框介绍工具，这和真人教学指着内容很像！312

• 覆盖式工具提示：通常由点击帮助按钮触发，或首次遇见功能触发，它以模态呈现，提示用户如何操作，点击才能关闭。激进程度更高？ 312

• 传统在线帮助：对想要进一步使用的用户来说是不可或缺的，通常需要索引和全文搜索功能，概述章节也很重要；离线内置帮助文档也很好（不过现在上网居多） 314

• 个性化：个性化是特质模态的；个性化需要简单易用，容易撤销 315

• 配置：适合经验丰富的用户，对专家用户来说是必须的。移动工具栏控件就是个性化配置的例子；此外，企业IT经理会需要配置，这能让他们公司建立标准，根据企业环境配置，适应他们的工作方式 316

• 特质模态行为：一半用户喜欢这种习惯用法，一半用户喜欢那种，他们的偏好是特质模态的，我们要尽力让两种用法和谐共存，满足它们，至少，提供切换方式。317

• 本地化：按特定的语言和文化习俗呈现产品，使人感到亲切和符合习惯 318

• 国际化：让产品尽可能在多种语言和文化下通用 318

• 本地化注意点：单词长度、字母顺序、时间表达法、标点习惯、历法习惯 318

• 无障碍性（可访问性）：Accessibility, A11y.无障碍性设计意味着设计时应考虑所有人的情况，无论是…的人都能有效使用产品。适老化设计就属于无障碍行设计 318

• 无障碍的目标：319

  • 用户能够感知和理解所有指示、信息和反馈 319
  • 用户能够感知、理解并轻易地操纵所有控件进行输入 319
  • 用户能够轻易地导航，并且总能知道所处界面的位置及其导航结构 319

• 无障碍人物模型：相比普通用户的主要人物模型，通常是次要人物模型或临时任务模型，有普通需求也有特殊需求 319

• 无障碍设计方针：

  • 利用操作系统地无障碍工具或指南：iOS等系统有屏幕阅读器.这要求不占用原有按键和手势、打开无障碍特性时app能正常工作、尽可能使用标准api 320
  • 继承普通模式下的系统设置：如用户在普通模式下设置主题色为蓝色，那么无障碍ui主题也应是蓝色 320
  • 启用标准的键盘访问方式：用户应该能用tab遍历所有控件和内容区域，能用方向键遍历表格菜单等，回车能用来做任何确认性质的事情 320
  • 为视力不佳的人加入显示选项：高对比度、放大加粗字体、色盲友好、减少动画等 320
  • 提供只有视觉和只有听觉的输出：支持冗余视觉和听觉反馈 321
  • 避免屏幕闪烁：频率超过2hz就会让人晕头转向，引发光敏性癫痫、其他脑部紊乱症状患者疾病发作，普通用户也不喜欢；自动滚动文本和动画会使视障用户带来困难。 321
  • 简明精炼的语言 321
  • 响应时间：如切换显示恢复倒计时，要满足所有人，双击间隔也是，支持足够长也可以足够短 321
  • 一致的布局和任务流程：概念模型满足 321
  • 视觉元素添加文本释义：控件下方可以标注文字，至少要悬停时弹出介绍。这可以保证屏幕阅读器能清晰读出内容 322

---

• 视觉艺术vs视觉设计：表达自我vs最优信息传递方案 323

• 情境：电脑桌上方有光源？用户在黑暗卧室中？在刺眼阳光下？用情境限制视觉设计 324

• 形状：形状是人识别对象的首要方式，但比颜色大小等需要更高层次注意力（？） 324

• 大小：大小可以传达层级关系，可作为排序和量化的依据。但它是解离属性，过于大或小时，区别物体就很难用上其他元素 325

• 颜色：先考虑用户目标、环境、内容、品牌，再考虑色值、色调、饱和度 325

• 色值：可表达层级，如苹果灰度体系。物理上就具有解离属性，如太亮太暗就不易关注到形状细节和颜色区分 325

• 色调：人们对色调有多重联想，如涨跌、正负极，且和文化有关，不适合传达有序或量化数据.避免过多色调杂糅造成“嘉年华效应” 325

• 方向：箭头、三角等是传达方向的有用变量，但通常当作次要沟通向量或无模态暗示使用因为有时太小 326

• 纹理：能成为重要能供性信号，如按钮的阴影使它看起来能点击，高度扁平化融入少量纹理能大幅提高易学性 326

• 位置：有序和量化的，可传达层级；可暗指概念，如聚集在附近的元素代表相似 327

• 文字与版面的若干指南 327

  • 高对比度文字，但不要影响可读性的互补色和过分的明暗对比（解离属性），通常80%对比 327
  • 恰当字体和大小：清爽的无衬线字体适合屏幕阅读，细节多的衬线字体需要足够像素密度或抗锯齿手段来避免锯齿 327
  • 简洁组织文字：增加易读性，可以考虑使用标准缩写 327

• 信息层级：用户会下意识评估界面上最重要的内容和它们与控件的关系。信息层级让这一解码过程更迅速轻松。对于暂时式应用尤其需要良好层级。大小明暗上下等 328

• 动画：关闭窗口会动画显示窗口藏进哪，实现愉悦的满足曲线追求的过渡和信息暗示 328

• 眯眼测试：可以模仿用户粗略浏览界面时的状态，观察哪些元素在粗略浏览下能立刻被人眼标记为分组，发现布局和构成问题。

• 体验属性：一组形容词，可以用于一起描述应如何感受产品的任何交互。如“安全、灵活”，他们将是品牌独有的亮点。329

• 传达风格 / 传播品牌：通过挖掘品牌独特的体验属性，进行相应视觉设计，从而传达品牌风格 329

• 带领用户厘清视觉层级：用户会下意识寻找层级和关联，使用前小节提到的视觉元素分层级，优化信息密度和排布，建立信息关系。329

• 在组织的每一层提供视觉结构和流：331

  • 对齐到网格：标签、控件、控件组、窗格应该对齐，让用户有组织地、系统地体验产品 331
  • 网格系统：二战后流行，为布局提供了统一且一致的结构.将屏幕分成多个大的水平和垂直区域，采用原子网格单位（如4像素） 332
  • 网格系统常用比例：黄金分割0.618，2的平方根，4：3，16：9，2.35. 333
  • 模块化：使用比例要避免两个区域差不多大。如果差不多大，干脆设置为对半，或1/3，而非强塞比例 333
  • 网格系统的好处与局限：333
    • 可用性和一致性：元素更规则，一致的间距和定位可辅助人内在的视觉处理机制，提高可读性，更易找到关键元素 333
    • 美学上吸引人：井井有条使人舒适 333
    • 提高设计效率：布局标准化可减少视觉设计工作量，以较少迭代次数达到较高完成度 333
    • 局限-适配问题：不同设备分辨率千差万别，带来锯齿问题。
  • 创建逻辑路径：考虑人眼阅读习惯顺序 334
  • 界面元素平衡：控制界面元素视觉重量使屏幕视觉平衡。可以用眯眼测试 334

• 在特定屏幕上告诉用户能做什么（使用图标）334

  • 低分辨率渲染图标需要大量经验，相关书籍：The Icon Book
  • 传达功能感的一些原则：
    • 表达动作和动作施加的对象，增进理解 335
    • 小心使用隐喻：OK手势在中东表示冒犯，因此任何国际化应用都不应使用 335
    • 图标在视觉上将关键功能分组，满足相似性原则 335
    • 保持简单 335
    • 尽可能复用元素，避免多次学习 335
  • 关联视觉符号与对象：尽可能用某符号代表对象，重复它们的联系 335
  • 简单渲染，是用最少的颜色和阴影，避免注意力被引向符号本身 336
  • 通过图标提供预览：用户照片缩略图可以提供预览，这与提供能供性的图标有区别，但也是个好方法 336

• 响应命令：0.1秒内响应，仅通过内容变化反馈；0.1-1秒，在开始和完成时提供细微线索；1-10秒，提供线索如旋转加载动画、进度条；10秒以上，开始前提示可能长时运行，并提供进度和结束提示 337

• 注意力吸引到重要事件：如通知栏 338

• 最小化视觉工作量：避免视觉噪音，如过多装饰、无信息的3d渲染、标尺等分离控件的元素过重、拥挤、对比密集、太多颜色 338

• 保持简单：奥卡姆剃刀定律；杠杆，即一个元素表达多重一突，如窗口左边logo点开能有控制窗口的菜单 339

• 数字媒体的缺点：多维信息难显示、分辨率不够高、像素密度不够高 340

• 数字媒体的有点：可以逐步展现信息 340

• 加强视觉对比：如股票多股同列 341

• 显示因果关系：使用非模态视觉反馈告诉用户可能的结果和操作暗示 341

• 显示多个变量：可提供更清晰的对比和因果关系。可选择开启以避免信息冗杂

• 整合文本、图形和数据 342

• 确保内容的质量、相关性和完整性：显示信息要确保能帮助用户实现目标，而不是因为技术上可能才去显示 342

• 在相邻空间上显示事物，而非按时间堆积：对于静态信息，以空间排布暗示时间顺序，而非堆积并要求用户切换（动画则不需要） 342

• 保留量化数据：存储空间即使有饼状图，也应附上精确数据 343

• 界面标准化的好处：降低用户学习界面的成本，提高生产率，贴合用户在其他界面养成的概念模型；减少开发时间和提高代码复用率 343

• 界面标准化的风险：难以兼顾特定情境中的具体用户行为，依附于标准开发的产品难以比标准出色 344

• 标准、指南和经验法则：微软和苹果都在持续发布并迭代界面标准 344

• 有充分理由就打破标准：当一个习惯用法被目标用户（Persona）试用后，大多数人觉得更好，就考虑打破标准 344

• 应用程序间的一致性和标准：PPT为了迎合excel和word的结构，偏离心理模型，失去很多易用性；但它确实特有一个PPT页面 345

• 设计语言：设计元素如形状、颜色、版式等的一定组合范式所营造的情感维度的交流方式。他创造了恰当的情感色彩，建立了人们能够识别和理解的模式，人们还会以此产生对品牌和服务的积极联想。如微软Metro，可口可乐红白 345

---

• 窗口：桌面应用的上层（操作系统是底层），它是可移动和放大缩小的，盛放内容和功能的容器。349

• 主窗口：独占式应用通常有一个主窗口，经常分为多个窗格.现代应用常使用标签页支持多开主窗口。 349

• 辅窗口：呈现不频繁的功能，如首选项窗，浮动工具版。现代应用通常可将辅窗口吸附于主窗口作为一个窗格 350

• 主窗口结构 350

  • 菜单和工具栏 350
  • 内容窗格 350
  • 索引窗格：如iPad相册app左侧的文件夹，供访问内容 351
  • 工具板（模态工具）：单一功能，有一套独特操作动作的面板。通常光标会变化，如颜色选择面板，光标变成圈以显示所选颜色 352
  • 工具栏：选择工具的条状栏 351
  • 侧栏（快捷属性栏）：显示设置如字号，并可以直接修改 351
  • 状态栏：通常在底部实时显示数据如字数（自补充）

• 层叠窗口：堆叠，鼠标悬停时弹出。层叠隐喻确实提高了窗口切换效率和心理模型，但屏幕小时很恼人 352

• 平铺窗口：解决了窗口定位问题但浪费像素 353

• 虚拟桌面空间：即后台切换到前台 353

• 全屏应用：即前台应用 354

• 多窗格应用：左侧邮箱列表，中间邮件列表，右边邮件内容。三分布局至今沿用。左侧也会用双层抽屉隐藏 354

• 窗口状态：得到全屏能力后，软件主窗口可分为最小化、最大化和多元化（窗口模式）355

• 窗口vs文档：一个应用进程，多个文档 vs 一个应用进程，一个文档，如vscode和word 355

• 不必要窗口：窗口意味着和主任务分开，滥用窗口会导致导航问题（频繁进入陌生房间），带来负担。PS亮度窗口就是窗口污染的例子。LR就好很多。357

• 必要窗口：非日常任务，如偏好设置，提供特殊场所。简言之，非主线任务就放窗口。358

• 菜单可用作教学：想初步了解某软件，通过菜单和对话框浏览所有可用功能。360

• 用菜单提供教学：菜单文本应直白完备；在菜单标注相应快捷键（注意快捷键应加底纹以和正常文本区别）；鼠标悬停应提供详细描述。361

• 禁用菜单项：可以告诉用户在何种场合使用何种命令，减少操作负担。应暗示禁用理由。362

• 菜单图标：应与工具栏图标一样，建立菜单与工具栏的关系。

• 设计快捷键：遵循标准、形成日常习惯、标明如何使用。

• 验伤分类：医学名词，可借用于快捷键分配。分为三组，公认日常功能、公认非日常功能、争议功能。给最频繁的功能分配最易用的快捷键。

• 助记符（访问键）：打开助记符状态后，在每个图标按钮上显示对应快捷键。如微软用Alt打开助记符。365

• 级联菜单：菜单中打开的子菜单。365

• 工具栏是非模态的 367

• 工具栏vs非模态对话框：前者总是可见很方便，后者可以提供灵活布局。两全其美的方案——停靠式工具栏 367

• 工具栏图标按钮：不为新手准备，提供快速访问；具有按钮的受范特征；不必强求隐喻，而应追求辨识度。368

• 工具提示：悬停一定时间弹出提示，避免图标配以图和文字挤占空间，也避免干扰使用。368

• 禁用工具栏控件：不适用于当前工作区状态，呈现灰色，无法按下（技术上用轮询实现）。不应消失而应变灰。369

• 图标按钮组合框：在图标按钮边或右键提供下拉菜单，保留更多功能的入口。370

• 可移动的工具栏（停靠式）：工具栏可以拖放在屏幕任意位置。371

• 重叠工具栏：窗口缩小后，提供可滚动的工具栏以访问所有工具。371

• 定制工具栏：允许用户定制 372

• 情境（弹出）工具栏：在触发时，鼠标旁边弹出一组按钮。如Blender饼菜单。372

• Ribbon（彩条）控件：本质上是扩展表现形式的工具栏，包含各类大小的图标按钮和下拉菜单，往往按功能分类。372

• 工具板（模态工具）：针对某一任务所特化的，提供相应命令的面板。单一功能，有一套独特操作动作的面板。通常光标会变化，如颜色选择面板，光标变成圈以显示所选颜色 373

• 侧栏、任务窗格、抽屉：为高效工作流而设计的各种非模态的习惯用法。侧栏提供对任务窗格的访问（侧栏里包含多个窗格）。如LR主要调色面板，Blender的物体属性就在任务窗格。抽屉是可以打开关闭的任务窗格。374

• 鼠标的人体工学：精细和粗略控制切换，如滚动条使人不满。解决办法是滚动条一端同时放上下微调按钮、采用滚轮、方向键等。377

• 同时支持鼠标和键盘：总是提供可替代方案，让用户能不切换设备完成操作。378

• 鼠标按键：包含左键、右键、滚轮/滚球、侧键、配套的元键（如Ctrl）等 379

• 鼠标控制：指向、单击、指向+单击、拖放、双击、合击、双击拖动、释放vs按下 382

• 顺从响应暗示：鼠标释放才真正执行，允许用户从容退出无意中发生的单击；但鼠标按下时复选框视觉上已激活，直到释放才真正打上勾，这就是顺从响应暗示。382

• 触控板、轨迹球、手势传感器：便捷，各有好处。但普遍不适合拖放动作 383

• 光标：点指Pointing和选择Selection靠光标Cursor，光标指向的确切单个像素称为热点Hotspot 384

• 选择：包含离散选择、连续选择、互斥选择（选了其他的，先前的就被弃选）、添加选择、成组选择（框选）等 385

• 命令次序：动词-对象次序状态明确，易开发，程序不易出错（因为命令失败会立刻告知用户），但对用户来说反复进入动作状态很麻烦，而且需要先知道动作的客体，对多个对象也很麻烦；对象-动词次序适合多对象操作，选择对象时展示可操作命令也减少学习负担，而且是无模态的，不会干扰用户，低调。384

• 插入和替换：顾名思义。替换有个好处，不会干扰无关数据，如PPT设置好图片大小和效果，想换图片直接替换。

• 拖放：一般有两种，一种是拖放到空间，代表位置变换；一种是拖放到其他元素，代表元素关系改变，如拖进文件夹。390

• 拖放视觉反馈：界面必须暗示受范性（暗示顺从），或通过静态外形，或通过动画。393

• 指示拖动受范性：拖放候选对象必须表现能接受拖放，而不用光标变化表示，因为光标闪烁导致混乱。393

• 指示拖放候选对象：拖动时光标必须表明拖动状态，带着拖放对象经过候选对象时，它们要有反馈，以暗示当前松开拖放会带来的结果。393

• 拖放插入目标：精确表明拖放目的地，暗示拖放结果（和上一条一样，如文字间光标）。393

• 拖放完成时的视觉反馈：如题。394

• 拖放自动滚屏：可减少状态切换，这是拖放状态下的操作替代方案。注意提供滚屏延迟，以避免无意触发滚屏。394

• 拖放除颤（迟缓判定）：当对象既可以被选择也可以被拖动时很重要，应建立拖动触发阈值，避免用户手部颤动带来的误拖动。396

• 更复杂的拖动阈值：如Visio水平拖动和垂直拖动触发。当明显垂直拖动时，动作才会被解释为垂直拖动，否则将被解释为水平拖动。397

• 精确滚动：允许用户进行像素级移动，完成精确对齐。398

• 控件操作：GUI的基础，新手友好，但麻烦。400

• 模态工具和工具板：活动时，显示区完全处于这种工具的模态中。多了会难以管理，考虑通过加元键来组成不同功能，但这样对新手不友好。401

• 加载光标工具：选择后，光标切换到该工具的形状，直至操作完成或取消操作。如格式刷。它在视觉上提示用户处于该操作模态。401

• 2D调整位置：需要为受范区提供视觉暗示。（窗口可拖动的唯一暗示就是标题栏颜色，这纯粹是习惯用法，不能直接理解，但也证明了基于习惯用法设计的有效性）；Shift键常被用于约束拖动（水平竖直）；网格线提供轻松准确的拖动体验；智能定位辅助预见等间距需求。402

• 2D调整大小形状：习惯用法是拖右下角、控制柄，也有元键约束。常见的还有双击添加控制柄。403

• 3D多重视点：深度和遮挡的问题，但不直观。如三视图。但可帮助精确对齐。404

• 3D基线网格、景深、阴影和标杆：如题。都是些习惯用法和隐喻。407

• 3D准线：如题，拉出标准线。408

• 3D选取：透视选取，框选，掠过扫选等。409

• 3D旋转和缩放：根据自己Blender, u3d 经验来吧。

---

• 多数暂态式：移动应用多数暂态，因为他们在移动中使用，式高度情境驱动的，且因为设备不大要防误触。412

• 大小分类：手持设备、平板、小平板。413

• 界面堆叠：移动应用总是全屏。应用内多板块堆叠，如导航栏、列表、状态栏堆叠。414

• 屏幕轮显：可以滑动切换卡片。414

• 方位和布局：即自动旋转。415

• 平板的索引窗格：平板拥有较大屏幕面积，可由按钮调出常驻或堆叠的索引窗格，用于浏览和选择内容条目，还可以添加搜索等控件。416

• 弹出控制窗格：弹出可以修改控件或某对象属性的面板，同时保留背景屏幕内容，让用户的主要工作流获得连贯性，不打断心流（感到并未离开这个房间，避免导航问题和窗口污染）417

• 平板上的类桌面布局：对于复杂的创作型应用，需要很多工具栏和窗格，变得像桌面。此时注意以下原则 419

  • 确保触控空间：确保工具栏、控制面板、菜单项有充足面积，使得点击热区（hit area）和元素间距足够手指操作 419
  • 避免拖放：拖放操作在触摸屏上易失误，应尽量避免
  • 弹出面板溯源：弹出面板要指向它的来源对象，并具备清晰标注的页眉。通过这些暗示，帮助用户了解导航关系。
  • 线性工作流：关注功能层级，尽可能线性化工作流，让用户在单个路径中完成任务，而非在多个窗口中来回切换。
  • 单一屏显模式：不要设计成水平或竖直通用，而是利用屏显特点，在确定一种屏显方向作为主工作方向后，将另一种方向设计得适用于不同场合。

• 类硬件控件布局：库乐队。不只是单纯模仿钢琴，还可以设计出超越硬件的操作，如用手指重塑声音波形。

• 小平板应用：注意以下内容 420

  • 避免多个相邻窗格：太拥挤了，可以运用弹出窗格或抽屉。
  • 工具栏：放在侧边合适
  • 不用列表：单列列表在小平板上有点单薄，网格、泳道、卡片等才是平板上列出内容的最佳方式，也能利用平板面积。
  • 用弹出对话框而非全屏对话框：利用平板面积，避免过多跳转。

• 列表：如题。列表常配标签栏，用以跳转不同列表（底部导航栏类似）422

• 网格：如手机主界面APP图标排列。它将应用图标、缩略图、功能图标等对象组织成规则的行列形式。Win的MetroUI、iPhone控制台也是一种网格。423

• 内容轮显：滚动推荐、早期Safari标签页卡片、小组件siri推荐等.需要提供控件，让用户选择轮显内容 426

• 泳道：排列的一排卡片，可来回滑动（单排的轮显）。千万别设置成自动滚动，这会影响顺从性 428

• 卡片：能以网格、列表、轮显、泳道、流式布局等，以及他们的混合形态出现。它提供一种自我封装的暗示，使交互对象呈现高度独立性和模块化特征，让用户获得强烈的“面向对象”感，进一步减少用户处理元素排布的负担，获得轻松愉悦的GUI体验。428

• 导航和工具栏：栏bar是移动应用用于导航不同功能和内容区域的机制，通常是一条包含多个控件的狭窄区域，通常位于屏幕顶端或底端。430

• 标签栏：导航不同类别内容和区域的控件工具栏，如首页，搜索。431

• “更多”控件：弹出附加导航选项菜单。432

• 标签轮显（手风琴式标签）：可以被滑动到屏幕外面的标签栏。432

• 导航栏：为当前列表或视图提供导航，通常在顶端，包括返回按钮、当前视图标题、其他动作按钮等。ios常将分享等按钮放在导航栏右端。 434

• 工具栏：如题。434

• 工具板：和桌面应用一致。435

• 交通栏：Transport Bar 音乐播放器底部的工具栏。435

• 工具轮显：使工具栏可以划出屏幕，在有限空间内维持舒适排版，并容纳更多工具。436

• 抽屉：因图标是三横杠，也被称汉堡包菜单。习惯用法，侧面划出一个包含导航元素的垂直列表，类似标签。可释放宝贵的屏幕不动产。可保持屏幕简介，同时容纳大量功能437

• 条目级抽屉：将滑出抽屉的概念应用在列表中的单个条目，如删除聊天。优点：降低UI混乱。缺点：可发现性差，不提示难以察觉，提示则占用空间；抽屉滑出时，条目内容需被记忆；每个条目都可水平滑动意味着阻碍全局抽屉的触发。439

• 要避免的抽屉行为：避免过度使用动画，因为抽屉本身就包含动画了。440

• 抽屉的缺点：将整个导航层级关系隐藏在某个图标按钮后面。补救措施：初始状态设置为打开，让用户看见。441

• 轻拍显示：视频应用，轻拍显示进度条；背单词轻拍显示。范围大，好操作，适合用于隐藏和内容高度相关但显示会影响内容观感的信息。442

• 直接操作控件：点击图片直接拖动，而非用坐标映射。442

• 预见搜索需求：移动app根本需求是浏览，提前准备搜索结果是满足浏览行为的好方法。现在的大数据推送就是预见搜索需求，满足浏览的典型。444

• 构建搜索需求：常见方法有语音搜索、自动填充、预加载自动填充文字、频繁搜索建议、根据输入内容自动推荐（更智能的自动填充）、分类推荐（如输入ins，app分类下出现Instagram，music分类下出现相关歌名）446

• 排序和筛选：如题。446

• 移动设计固有制约：1.有限屏幕限制了元素数量；2.依赖多点触控手势的对应控件无法提供能供性提示，不像pc那样可以放一个快捷键提示；3.无法使用鼠标悬停调出提示内容。欢迎是首次打开时的教程界面，帮助则是有求必应的教程界面。449

• 导览：由一系列带有文本和图片的卡片轮显组成，描述主要功能和操作方法。应允许用户随时调出、退出导览。449

• 覆盖层：覆盖屏幕并显示对应内容的帮助信息。通常用手写字体显示并加上指向对应控件的箭头，或标出该使用何种手势。覆盖层适合展示手势。450

• 工具提示覆盖层：在一个覆盖层界面上显示出当前界面的全部主要功能。450

• 轻触选择、激活或开关：如题。450

• 轻触保持：过时了。450

• 拖滚：常用来拖滚列表。对列表来说，在最上端持续把列表向下拖滚可以刷新列表，在最下端反之则可显示更多项目。拖滚还可控制泳道等。451

• 拖移：移动或复制对象。451

• 拖动控制：拖动滑块、旋钮等。451

• 滑动：包含拖滚，但不限于屏幕内容，如从屏幕底边滑动可退出应用或打开后台管理器。451

• 双指张合：放大或缩小视图，也可执行“语义式”放缩，即在层级中进入下一级等。452

• 双指旋转：可以旋转对象或屏幕。452

• 多点轻触：尚无统一习惯用法，笔记软件中，双指轻触常为撤销，三指为重做。452

• 立体触控：苹果曾推出压感3D Touch，不过后被触感触控取代。（补充）

• 触感触控：Haptic Touch，长按并感受到手机轻颤，呼出更多选项。（补充）

• 多指滑动：因为可发现性差，常用于自定义手势。453

• 集成应用：将多个具有独立功能的应用集成为一个多功能应用，如电话app还包括联系人；如今的支付宝超级app（现在支付宝更像一个接口）。453

• 嵌入式设备交互设计需要特别设计：要特别关注使用情境，因为直接承担着生活和环境中的真实业务需求，他们所处环境可能嘈杂、有干扰；还要考虑硬件局限性如屏幕尺寸、像素、处理器性能。455

• 其它设备的设计原则：

  1. 不要认为产品是计算机：对嵌入系统，不能将计算机术语和习惯照搬。456
  2. 设计时兼顾硬软件间的配合：考虑成本、处理器能力、耗电及外形大小、基于硬件的导航与输入等限制。456
  3. 让使用情境来驱动设计：情境手忙脚乱（广泛地，大脑主线程被占用）就不应增加复杂控制；车载导航不要增加根据情境有不同功能的“软键”；情境是手持，那么握持姿势？什么场合？安静吵闹？457
  4. 模式的运用要明智，如果有的话：限制模式数量，为专用功能的可访问性让道，保持专用功能的易懂性和强势能。458
  5. 限定范围：不要把专用系统变成通用电脑，让用户更有效地做好最重要的事。如果确实需要桌面系统的存在，考虑将手持设备设计为桌面系统的扩展或“卫星设备”，在没有桌面系统的情况下，为之提供信息。458
  6. 根据显示器分辨率来导航：根据显示器条件设计信息架构。458
  7. 简化输入：几乎所有嵌入式设备都比键鼠更难输入，所以要简化。459

• 设计手持设备：考虑握持、携带、使用姿势；避免窗口，追求独占。459

• 交易型信息台：如ATM机、火车站取票机、自动售货机。它应该：不故意吸引使用者、放在显眼位置、进行建筑学上摆放规划、强可访问性、非接触式避免变脏、交互模态要少，反馈要有足够理由如提示取走卡。461

• 探索型信息台：出现在博物馆和展览馆等。它应该：吸引人、引人逗留、周围有空位供围观、提供丰富反馈。461

• 其它设备的输入原则：确保单击对象够大、保守使用屏幕输入、避免拖放。462

• 大屏幕设备（十英寸界面）设计：463

  • 布局清晰让人在中远距离能看到
  • 导航简单以配合五向遥控器
  • 集成操作在一个遥控器上
  • 遥控尽可能简单
  • 重点放在目标和活动而非功能

• 汽车界面设计要点：464

  • 压缩必要操作时间：手离开方向盘时间要短
  • 保持不同界面布局一致：来维持习惯用法形成体化认知
  • 采用直接控制减少认知循环：硬件上贴标签，而非硬件旁放软键
  • 小心选择输入方式：使用旋把和旋钮比按钮更容易
  • 加强硬件外形辨识度：让用户通过触感就能辨别是什么、如何操作
  • 屏幕内容强对比、弱层次：让用户第一眼就能抓取当前界面所有信息
  • 模式和情境转换要简单易懂：提供常驻模式按键是好选择
  • 提供多模态反馈：利用驾车时未被显著占用的模态或非模态内容来提供反馈，如听觉、嗅觉、HUD等，避免干扰驾车

• 语音界面设计要点：465

  • 按心理模型来组织和命名功能：语音界面通常缺乏能供性，以此弥补
  • 明示当前可选功能：每次操作完成后，系统应说出可进行的操作功能，以及如何调用
  • 支持返回到先前任意步骤：每次操作完成后，系统应告诉如何返回先前步骤
  • 任何时候都可转人工
  • 给用户足够时间响应

---

• 一级导航：全局的最重要的内容导航。顶部条幅要求简洁，侧边则可更多。可动态隐藏导航栏；移动设备上可增加菜单按钮调出而非常驻。470
• 二级及以上导航：可以是下拉菜单；可以用侧边层级结构表明（如今大多数说明文档都是如此）。最好将导航层数控制在二级。471
• 胖导航：分列出所有二级导航项的弹框，是模态和临时的，可以多占用屏幕空间。471
• 面包渣：将用户所处界面位置按层级关系列出，并可点击跳转任一上级。它可以强化用户心理模型，将用户所处层级持续反馈。这在win文件管理器和很多网站中实装。有的网站会在点击面包渣阶梯时列出该层级的所有子层级，方便跳转。473
• 内容导航：内容如照片和文章通常数量庞大、常有变化、互有关联但非线性或层级结构。可用列表、画廊、推送、轮显等展示。需要配有搜索和筛选、排序方法。474
• 分面搜索：让用户指定被搜索条目的属性。474
• 去模糊：搜索的词汇在拼写上与另一个更常用的词语相类似（预见用户需求，推测真正想搜索的内容），则替代之并提供保持搜索原先内容的选项。提高有效搜索率。474
• 分类推荐：搜索自动填充按类别被分开。提高搜索效率。474
• 滚动：要让用户在滚动时能被新内容吸引，滚动得有意义。476
• 自适应网页设计：指界面可以自我调整，从而适应任意尺寸的屏幕。476
• 网页视差效果：用户滚动页面时，页面上的元素按不同速度移动。新颖，顺从感，吸引用户。476
• 可扫描性：让人快速轻松阅读的能力，也通常表现为用户匆匆一瞥或快速滚动网页时抓取有效信息的能力。476
• 滚动的要点：增加可扫描性、滚动期间保持吸引力、让用户知道所处位置、不在滚动时改变页面主任务（让用户感到呆在原“房间”）。473
• 页眉和页脚：最显著最重要，是能改善用户流的特殊区域。通常页眉包含导航，页脚包含详细信息和跳转链接供翻阅完网页并想深入探索的用户使用。478
• 分页：分页，上一页下一页。分页适合快速到达信息列表的特定位置如底部，也适合需要反复查看列表的情境。479
• 无限滚动：页面到达底部再显示新内容。这将无法设置页脚，也可能导致屏幕阅读器无法有效工作，也无法记住浏览位置，让人缺乏安全感。适合探索型浏览而非查阅型浏览。479
• 自适应设计：运用了模块化的布局网格、定义了几个关键的屏幕宽度（被称为临界点）。好处是开发者只需面对单一的概念框架，坏处是UI开发复杂，多一个临界点就多一种布局。480
• 单独为移动设备创建移动版本网页：有必要，让自适应成为fallback。480

---

• 控件：控件Control是使用者同数字产品进行交流的屏幕对象，具有自包含性。别名有小组件Widget、小配件Gadget、小零件Gizmos，是创建典型GUI的主要构造模块。可分为命令、选择、输入、显示控件四大类型。482

• 命令控件：产生动作，而且往往是立即执行的动作。菜单命令条目、按钮等都是命令控件。483

  • （文本）按钮：按钮再外观上具有视觉受范性，暗示用户它可被按压；当被按下，按钮视觉上会被改变，动态视觉暗示表示已激活。从拟物化到扁平化，按钮的可学性变差了，但经过几十年的使用，用户已经将“矩形”与按钮牢牢联系了起来，因此矩形按钮具备命令的能供性，使得被去除受范性的扁平按钮仍能被正常使用。483
  • 图标按钮：和工具栏联系紧密，文本变成图标；优点是小，易于记忆，总是可见（用户可依靠空间记忆和模式识别来使用）；缺点是首次使用难以理解、生僻功能需要更多努力才能变为习惯用法。加工具提示！484
  • 组合图标按钮的命令控件：单击按钮执行缺省功能（如回退一级），下拉菜单则提供不常用的命令（如回退到指定位置）。492
  • 文本图标按钮：微软的条带控件。484
  • 超链接：通常以蓝色文本、带下划线的文本、图片形式出现。由于多年使用，已经形成习惯用法，具备示能。有时按钮会作为常用缺省选择，而超链接作为特殊选择出现（缺点是有时按钮会诱导用户不要注意超链接）。485

• 选择控件：允许用户从一组有效选项中选择一个或多个选项。常见的有复选框、列表框、下拉列表、弹出列表等。选择控件与命令控件有交集（如选择字号）486

  • 复选框：有单击视觉暗示，有受范区域，鼠标经过时会突出显示。单击后会出现勾选标记，简单可见优雅。它基于文本，使用户必须认真阅读。最好做成方的。486
  • 开关按钮：图标按钮化的复选框，依靠图标而非文本更节省空间。同样需要工具提示。487
  • 状态切换按钮：容易让人混淆，当前显示的究竟是目标状态，还是当前状态？好在现在用户习惯当前显示状态是目标状态。488
  • 单选按钮：成组的单选按钮间互斥，只能同时开启一个。常见的有圆形按钮阵列、贴近的成组开关按钮。488
  • 开关：由合二为一形态的两个单选按钮组成，具有开关状态提示，点击切换单选状态。490
  • 组合图标按钮的选择控件：包含下拉菜单的图标按钮。单击按钮弹出完整窗口（如格式设置窗口），单击倒三角则弹出下拉菜单供快速选择（如快速选择边框格式），不打断当前流。490
  • 列表控件（枚举选择控件）：用户可在一组有限的对象中进行选择。常见的有下拉选择菜单、滚动选择菜单、滚筒选择控件（ios闹钟）。滚筒将结果和其他选择无模态地提供在界面上，滚筒形还满足概念模型，还可以多条滚筒并列，很好。492
  • 列表拖放（捕获操作）：如果离散的对象集合太大，用户多选时会忘记先前的选择项。此时，在候选框的基础上新增选中框，让选中项更易被浏览。在两框间拖动很直观。494
  • 列表排序：置顶、根据某种属性升降序等。496
  • 不要水平滚动文本：减少字数、换行。497
  • 下拉列表（弹出列表）：可替代单选按钮，让交互元素紧凑有层次。模态的。498
  • 组合框：提供下拉列表选择，也可以直接输入（如字号选择）。本质上是一种按需列表，提供预设命令。498
  • 树形控件（层次树）：每有子集的条目可展开或折叠。文件系统、文档、软件数据库非常适合，也和开发者想象的数据和功能模型匹配。注意要在对象确实有层级关系时采用。500

• 输入控件：允许用户输入新的信息或者设置值。包含为微调器、标尺、滑块、旋钮和输入法条形GUI等。500

  • 有界输入控件和无界输入控件：限制输入值大小的就是有界。滑块强调有界性，而微调器只提供有限的有界性（在blender中步进和拉动改变数值会触达界限，但直接输入则被允许“软出界”，即在程序不出错而仅仅是效果可能出错的情况下，允许出界数值参与应用运转，否则弹错误或自动修正数值）。500
  • 微调器：包含一个编辑字段，字段附近附有两个半宽按钮作为步进控件，通常用户还可在文本上拖动来连续调整数值。它混淆了有界无界，有时甚至允许“软出界”（程序能运行但可能使效果无法落于开发者预测内），而真正出界时会自动修正或弹错误。
  • 刻度盘和滑块：从机械时代借用的习惯用法。刻度盘省空间但鼠标和单指难以描绘圆弧（但经过长期习惯使用，在刻度盘上进行一维拖动也能改变数值，由此刻度盘也衍生出了一维拖动的能供性）。主要用于有界输入控件，外形紧凑，可视化，满足心理模型如音频软件。502
  • 拇指轮：类似鼠标上的滚轮。504
  • 其他有界输入控件：一些实验性的，模拟机械部件的。如音乐软件的二维合成器，钢琴等。多花精力学，也更视觉化手势化。504
  • 无界输入：文本编辑控件。504

• 验证控件：内嵌验证和反馈功能的无界文本输入控件，可以验证很多格式的数据如日期、电话号码、邮编、验证码、密码等。它需要与非验证控件作区分。掌管安全的控件不能完全遵循可用性原则，如密码需要遮挡。505

  • 主动验证：主动实时拒绝某类输入，如在用户名框输入空格，会实时出现红色非模态提示告知用户禁止特殊字符。506
  • 被动验证：直到用户完成输入才能确认数据范围的情况下，控件失去输入焦点，验证步骤才能发生，如用户跳转到下一个对话框输入。506
  • 暗示输入范围：使用悬停工具提示、无模态提示或文本框内无模态占位提示来暗示输入范围。506
  • 处理出界数据：弹出对话框警告，更好一些则自动修正+无模态提示，最好能实现数据免疫，能处理脏数据，如nine也能被识别成9.现在很多应用有有限的数据免疫，如用户输入.9会自动转为0.9。
  • 单位和度量：要能恰当识别单位，在建模软件中，将m识别成米而非百万。507
  • 不要用文本编辑控件输出只读数据：文本编辑控件有着清晰的空白框，给人允许输入的强烈能供性，这给人可以修改只读输出的假象。508

• 显示控件：显示和管理信息的视觉呈现，常见的有滚动条、屏幕分割线、页面计数器、标尺、网格等。508

• 文本控件：在屏幕的某个固定位置显示信息。如果输入内容和输出内容之间的映射关系是浅显的，那就应该让文本控件可以所见即所得地被编辑。509

• 滚动条（进度条）：控制进度，在较小矩形框内显示大量信息。优秀的进度条应该在被滑动时，显示目标位置的概览（如果是悬停，也应展示，或者直接将整体内容概览作为滚动条本体，即文档导航器）。此外，还要有：根据章节、页数、关键词提供向前跳读的按钮、跳到开始或末尾的按钮、快速返回的书签带注释的滚动条（显示被搜索词的位置）。对于可用性，滚动条应可以被轻易唤出，如鼠标停靠侧边唤出；应暗示窗口可滚动、提供精确控制。510

• 文档导航器：进阶滚动条，VSCode内容缩略滚动条。它可以展示窗口当前位置和内容缩略概览。511

• 分割线：将独占应用分为多个窗格的有用工具。应借助光标暗示显示它的受范性。511

• 抽屉和拉动杆：抽屉是独占式应用中可以用一次动作打开或关闭的窗格，常可通过单击或拖动临近抽屉的锁定按钮、图标按钮（通常是横向和倒向三角）、拉动杆（iOS的一根小横杆）等控件打开，该控件必须始终可见。移动设备上水平滑动条目显示选项、屏幕边缘侧滑、菜单按钮显示抽屉已是广泛应用的习惯用法。512

• 对话框：叠加在应用主窗口上的弹出式模态窗口，以对话的方式让使用者参与交互，输入或选择内容，并在完成交互后消失，将主窗口交还给使用者。它会打断流，在必要时再使用。513

• 合理运用对话框：513

  • 主交互流之外：需要将用户从工作流中强制带出来，让他们转而注意某个特殊问题，如某个会造成重大改变的功能。513
  • 单一主题：若某主题不适合集成于主界面，而为其单独设计一个界面又没有必要，则以对话框形式呈现。如打印对话框。514
  • 服务专家用户：提供详细信息，控制更高级、危险的设置。514
  • 服务新手用户：通过对话框学习基础知识。514
  • 对话框的要求：服务对象的二重性要求对话框必须紧凑、功能强大、快速流利、具有自我解释性。514

• 对话框的基本交互：1.覆盖在最上层；2.具有标题，以动词短语阐明当前命令或以名词阐述当前对象；3.提供终止命令，可以是取消按钮也可以是右上角的关闭按钮。514

• 模态对话框：打开后，它所属的应用程序不能继续交互，知道对话框关闭。它的严格定义行为意味着清晰的信息和很少被误解，这是好的，但太多会很添堵。它又分为应用程序模态和系统模态，系统模态对话框是全局的，常和系统问题相关如空间不足。一定要有一个或多个终止按钮！！避免使用“关闭”控件，而是以明确的“取消”终止按钮代替。516

• 非模态对话框：它弹出后无需打断父级应用程序，允许应用内容继续更改。如查找和替换对话框。一定不要使用终止按钮，而是使用关闭控件！516

• 避免修改模态对话框按钮文本：OK和Cancel已经形成习惯用法，它们的严格一致构成了模态对话框的认知力量，替换文本将造成困惑。517

• 非模态对话框的局限：界面内容根据功能而定，但总体形态却是对话框，造成困扰，需要学习。517

• 非模态对话框和撤销：它对内容做出的更改应加入历史记录栈；它必须不激活功能，如果涉及在对话框中激活功能，用模态对话框。518

• 对话框五目的：属性、功能、进度、通知、公告。

• 属性对话框：向用户呈现或让用户改变所选对象或应用程序全局的属性或设置。通常是非模态的。518

• 功能对话框：配置和控制单一功能，常从菜单打开。如打印、插入对象、拼写检查等。它允许用户临时配置功能的细节，并执行之。518

• 进度对话框：它是由应用程序启动的，表明当前应用正忙于某些内部功能。它应该：1.告诉用户一个耗时进程正在进行；2.现在一切正常；3.展示剩余时间；4.还有多少项目没做完；5.如何暂停和取消。必要时提供动画，满足用户心理模型对机械运转的想象，“一切正常”感是本能的，而非理性的。519

• 通知对话框：将一些重要信息报告给用户。通知一般在屏幕边缘以弹出式非模态对话框或抽屉形式出现，还伴随细微动画引起用户注意，会自动关闭。一般还会有通知中心收容未读通知，提供主动访问。521

• 公告对话框：由应用程序直接启动 521

• 选项卡对话框：将一个主题下的多类页面放进同一个对话框，通过选项卡切换。如格式对话框有行间距、字体等选项卡。它遵循用户日常存放东西的单层次深度心理模型。523

• 扩展对话框：对话框中放折展式抽屉，提供高级功能但将他们隐藏，使得对话框同时满足初学者和专家用户的需求。525

• 对话框记忆性：对话框应能记住上次打开时的设置。（补充）525

• 级联对话框：对话框会调出次级对话框，尽量避免！526

• 错误对话框：用户总是会将错误对话框的提示理解为自己的错误，产生自责。528

• 如何消除错误信息：使用更健壮的软件，使程序具有免疫力，接受“脏数据”，并认为它是正确的，因为人类比代码更重要。529

• OK按钮承认错误：错误已经发生，对话框有什么用？还来个OK，是让用户承认？530

• 很多“错误”不是错误：没联网、磁盘没连上，并不是错误。531

• 改进错误消息：礼貌讲解，并提供替代方案。532

• 不必要的警告对话框：告诉用户某件事做完了，这是阿谀奉承。534

• 消除不必要的确认对话框：1.做，不要问；2.让所有动作可撤销；3.提供非模态反馈，减少犯错。536

• 魔鬼在细节里：遵循目标导向设计，吸引信徒一般的用户，让世界变得更美好，哪怕一次只是改善一个像素！