design-everyday-things

日常用品设计框架

打造直观、易于发现且易于理解的产品的基础设计原则。它被誉为“UX 圣经”，适用于实体产品、软件以及任何由人设计的系统。

核心原则

糟糕的设计很容易被注意到，而好的设计往往更难被注意到，部分原因是好的设计如此贴合我们的需求，以至于设计本身隐于无形。 出现问题时，用户会责怪自己，但过错几乎总在设计。卓越的设计能弥合人们想做的事与产品允许做的事之间的差距：它易于发现（你能弄清楚该做什么），也易于理解（你能弄清楚发生了什么）。

评分

目标：10/10。 快速诊断表每满足一行得 2 分（共 5 行＝可发现性、评估、错误恢复、映射、限制）。分数区间：9-10＝用户无需说明即可操作，理解每一种结果，并能从任何错误中恢复；5-6＝有一个鸿沟或错误处理路径存在问题；<=3＝用户必须查阅手册，或经常责怪自己。报告当前分数以及未通过的诊断项。

两个鸿沟

与产品的每次交互都需要跨越两个鸿沟：

USER                                    PRODUCT
  │                                        │
  ├──── Gulf of Execution ────────────────→│
  │     "How do I do what I want?"         │
  │                                        │
  │←──── Gulf of Evaluation ──────────────┤
  │     "What happened? Did it work?"      │

执行鸿沟

用户想做的事与产品允许他们做的事之间的差距。 用户会问：我在这里能做什么？该用哪个控件？

弥合方式： 清晰的指示，自然的映射，限制，以及熟悉的概念模型。

评估鸿沟

产品执行的操作与用户理解到的结果之间的差距。 用户会问：发生了什么？操作成功了吗？系统处于什么状态？

弥合方式： 及时且清晰的反馈，明确的系统状态指示器，有意义的错误消息，以及进度指示器。

设计目标： 尽可能缩小这两个鸿沟，让操作与理解都即时发生。

另请参阅：references/two-gulfs.md，了解鸿沟分析练习。

七项基础设计原则

1. 可发现性

定义： 用户能否弄清楚有哪些可能的操作，以及如何执行？它的五个组成部分——可供性、指示、限制、映射和反馈——将在下文详述。

测试： 让一位新用户使用你的产品。如果他们在 10 秒内还弄不清楚该做什么，可发现性就存在问题。

反模式：“用户手册里有说明。”如果用户需要手册，就说明设计失败了。

2. 可供性

定义： 物体的属性与用户能力之间的关系，这种关系决定了物体可以如何使用。

关键见解： 无论是否被感知，可供性都客观存在——对设计而言，重要的是感知到的可供性。

类型	定义	示例
真实可供性	存在实际的物理能力	按钮可以按下
感知可供性	用户认为某种能力存在	凸起的区域看起来可以点击
隐藏可供性	实际存在但不明显	右键上下文菜单
虚假可供性	看起来可以执行操作，实际却不行	看起来可以点击的装饰元素
反可供性	阻止操作	阻挡移动的障碍物

数字应用：

元素	可供性	如何传达
按钮	点击/轻触	凸起、着色、阴影、悬停状态
文本框	输入文本	边框、占位文本、标签
滚动区域	滚动	滚动条、边缘渐隐、部分内容

常见问题： 扁平化设计抹去了感知可供性（按钮还是标签？）；触控目标过小；交互元素与装饰元素看起来一模一样。

另请参阅：references/affordances.md，了解可供性设计模式。

3. 指示符

定义： 指示操作应该在哪里进行的信号。可供性决定你能做什么；指示符告诉你在哪里以及如何操作。

类型	定义	示例
刻意设计	专为传达信息而设计	门上的“推”标签、占位文本
意外出现	无意形成，但能提供信息	草地上被踩出的小径（人们会从这里走）
社交	他人的行为	排队的人群表明入口所在

数字指示符：

指示符	传达的信息	示例
光标变化 + 悬停状态	这是可交互的	链接上的指针变成手形；按钮颜色变化
图标 + 标签	元素的功能	放大镜 = 搜索；“提交”、“取消”
颜色 + 位置	状态、类别、层级	红色 = 错误，绿色 = 成功；关闭按钮位于右上角

设计规则： 不确定时，就添加指示符——宁可多传达一些，也不要让用户猜测。

在决定为含义不明确的控件添加哪种指示符时，请参阅：references/signifiers.md。

4. 映射关系

定义： 控件与其效果之间的关系。自然映射是指控件的空间布局与其所控制对象的布局相匹配。

映射质量	示例	成功/失败的原因
自然	音量滑块（向上 = 更响）	符合心理模型
较差	灯光开关面板	与灯的位置没有空间对应关系
较差	一排炉灶旋钮	布局与炉盘位置不匹配

数字设计原则： 控件靠近其影响对象；布局与内容对应；方向符合预期（向下滚动 = 内容向上移动）；将相关控件分组。

技巧	工作原理	示例
邻近	控件靠近目标	编辑按钮位于内容旁边
空间	布局与现实世界相对应	地图控件与指南针方向相匹配
文化	遵循惯例	红色 = 停止/危险，绿色 = 通行/安全
顺序	遵循自然顺序	步骤从左到右（或从上到下）排列为 1、2、3

如需映射分析练习，请参阅：references/mappings.md。

5. 约束

定义： 限制可能的操作，以防止错误。

类型	机制	示例
物理	形状/尺寸阻止错误操作	USB 插头只能以一种方向插入
文化	社会规范引导行为	红色表示停止，绿色表示通行
语义	含义限制选项	后视镜只有朝后时才有意义
逻辑	逻辑限制选择	最后一颗螺丝只剩下一个孔位

数字约束：

约束	实现方式	示例
输入验证	限制可输入的内容	日期选择器，而非自由文本
禁用状态	将不可用选项显示为灰色	表单有效前，“提交”按钮处于禁用状态
强制顺序 + 撤销	按顺序执行步骤；允许回退	步骤锁定的向导；Gmail 的“撤销发送”

设计规则： 每增加一项约束，用户就少一种可能犯错的方式——应让错误操作无法发生，而不是在发生后惩罚用户。

如需了解约束设计模式，请参阅：references/constraints.md。

6. 反馈

定义： 将操作结果传达给用户。反馈必须及时（直接操作时在 0.1s 内）、信息明确、分寸适当且不打扰用户。

类型	适用场景	示例
视觉	大多数操作	按钮按下动画、颜色变化、勾号
听觉	重要事件、确认操作	成功提示音、错误提示音
触觉	触控设备、确认操作	按键时振动
进度	耗时较长的操作	进度条、旋转指示器、骨架屏

数字产品中的反馈模式：

情况	所需反馈	示例
提交表单	成功／错误消息	“已保存！”提示，或行内错误
加载中	进度指示器	旋转指示器、骨架屏、百分比
错误	出错原因及解决方法	“电子邮件地址无效。请检查格式。”

响应时间： 0.1s 会让人感觉即时；1s 会让人察觉到延迟（更改光标）；10s 会让人失去耐心（显示进度条）；超过 10s 用户就会离开（显示百分比，允许在后台运行）。

常见问题： 没有反馈（我的点击生效了吗？）、反馈延迟（感觉像是坏了）、反馈不明确、警报过多。

参见：references/feedback.md，当操作没有明确结果，需要选择恰当的反馈类型和时机时。

7. 概念模型

定义： 用户对产品工作方式的心理模型。

模型	持有者	描述
设计模型	设计师	设计师认为产品的工作方式
用户模型	用户	用户认为产品的工作方式
系统形象	产品	产品实际传达的信息

目标： 用户模型应与设计模型一致；系统形象是两者之间唯一的桥梁。模型一致能让用户预测结果并从错误中恢复；模型不一致则会引发困惑、自责和支持请求。

示例（恒温器）： 设计模型——设定温度后，系统会维持该温度；常见的用户模型——设定温度越高，升温越快（错误），因此用户会把温度调到 90°F。

通过以下方式建立正确的模型： 使用熟悉的隐喻（桌面、垃圾桶）、显示系统状态、提供清晰反馈、保持行为一致、渐进式披露。

参见：references/conceptual-models.md，当用户模型偏离产品的实际工作方式时。有关完整的拆解分析（门把手、恒温器、数字产品），请参见 references/case-studies.md。

人为错误

Norman 的关键见解：不存在所谓的“人为错误”——只有糟糕的设计。 当有人犯错时，应寻找设计缺陷，而不是人的问题。

错误类型

失误——意图正确，操作错误：

失误类型	原因	示例	设计改进
操作失误	对正确目标执行了错误操作	点击“删除”而不是“编辑”	将破坏性操作分开
记忆疏漏	忘记流程中的某个步骤	写了“已附上”后忘记添加附件	Gmail 的附件提醒
模式错误	操作正确，但模式错误	在大写锁定状态下输入	清楚显示模式状态
捕获错误	习惯压过了意图	开车时不自觉地驶向旧办公室	在决策点进行干预

错误判断——意图错误，执行正确：

错误判断类型	原因	示例	设计改进
基于规则	应用了错误的规则	在错误的情境下使用公式	提供上下文并确认
基于知识	心理模型不完整或错误	误解系统的工作方式	改进概念模型
记忆疏漏	忘记目标或计划	忘记打开冰箱的原因	提醒、历史记录

面向错误的设计

预防： 通过约束让错误不可能发生，在所有地方提供撤销/重做，为破坏性操作提供确认，设置合理的默认值，并容许输入错误。 恢复： 提供清晰的错误消息，绝不抹掉用户的工作，支持部分保存，并能轻松重置到已知的良好状态。

错误消息检查清单：

• 用通俗易懂的语言说明出了什么问题
• 说明如何修复
• 不责怪用户
• 保留用户的工作
• 提供替代方案

参见：references/human-error.md，了解错误预防模式。

行动的七个阶段

诺曼关于人类如何与产品互动的模型：

1. GOAL      → "I want to adjust the temperature"
2. PLAN      → "I'll use the thermostat"
3. SPECIFY   → "I'll press the up arrow"
4. PERFORM   → (presses button)
   ─── Gulf of Execution ───
5. PERCEIVE  → (sees display change)
6. INTERPRET → "The number went up"
7. COMPARE   → "Is this what I wanted?"
   ─── Gulf of Evaluation ───

设计启示： 通过示能线索、映射和约束支持阶段 1-3；通过良好的可供性支持阶段 4；通过反馈和可见状态支持阶段 5-7。逐个阶段梳理每项交互，找出用户卡住的地方。

参见：references/seven-stages.md，了解逐阶段分析。

以人为中心的设计（HCD）流程

Observation → Idea Generation → Prototyping → Testing → (iterate)

有两点会改变你运行这一循环的方式：在观察阶段，不要问用户想要什么（他们并不知道）——要在真实情境中观察他们采用的变通办法和遇到的挫折。在测试阶段，要让真实用户而非设计师参与——5 名用户就能发现约 85% 的问题，因此要观察行为，而不是听取意见，并不断迭代。

常见错误

错误	失败原因	修正方法
没有示能线索	用户找不到功能	为每个交互元素添加视觉提示
没有反馈	用户不知道操作是否成功	在 0.1s 内响应每项操作
责怪用户	忽视设计缺陷	找出每个“用户错误”背后的设计原因
功能蔓延	复杂性令人不堪重负	运用约束和渐进式披露
不一致	破坏概念模型	相同操作 = 任何地方都得到相同结果
忽视情境	设计仅适用于理想条件	观察真实的使用环境

快速诊断

审查任意设计：

问题	如果否	行动
用户能弄清楚该做什么吗？	可发现性差	添加示能线索，改善可供性
用户明白发生了什么吗？	评估鸿沟过大	添加反馈，显示系统状态
用户能从错误中恢复吗？	缺少错误容忍度	添加撤销、确认和清晰的消息
控件布局与输出相匹配吗？	映射不佳	重新组织控件，使其与空间布局相匹配
不可能或无关的选项是否已隐藏？	缺少约束	禁用、隐藏或移除无效选项

延伸阅读

完整框架请参阅：

• "日常事物的设计"，Don Norman 著（修订增补版，2013）
• "情感化设计"，Don Norman 著（设计与情感）

关于作者

Don Norman 博士是 Nielsen Norman Group 的联合创始人、加州大学圣迭戈分校 Design Lab 的主任，也是 Apple 前高级技术副总裁；他在 Apple 任职期间创造了“用户体验”一词。《日常事物的设计》（1988 年出版，2013 年修订）被广泛认为是有史以来最具影响力的设计书籍，并且是全球各地设计课程的必读书目。