design-everyday-things
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseDesign of Everyday Things Framework
《设计心理学》框架
Foundational design principles for creating products that are intuitive, discoverable, and understandable. The "bible of UX" — applicable to physical products, software, and any human-designed system.
打造直观、易用且易懂产品的核心设计原则。这本“用户体验圣经”适用于实体产品、软件及所有人为设计的系统。
Core Principle
核心原则
Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible. When something works well, we take it for granted. When it fails, we blame ourselves — but the fault is almost always in the design.
The foundation: Design must bridge the gap between what people want to do and what the product allows them to do. The best designs are discoverable (you can figure out what to do) and understandable (you can figure out what happened).
优秀的设计比糟糕的设计更难被察觉,部分原因是好设计完美契合我们的需求,以至于设计本身“隐身”了。 当事物运转顺畅时,我们视之为理所当然;当它出问题时,我们会责怪自己——但问题几乎总是出在设计上。
核心基础: 设计必须弥合用户需求与产品功能之间的差距。最佳设计具备可探索性(用户能自行摸索操作方法)和可理解性(用户能知晓发生了什么)。
Scoring
评分标准
Goal: 10/10. When reviewing or creating designs, rate 0-10 based on discoverability, understandability, and error prevention. A 10/10 means users can figure out what to do without instructions, understand what happened, and recover from errors easily. Always provide current score and improvements to reach 10/10.
目标:10/10分。 在评审或设计时,从可探索性、可理解性和错误预防三个维度评分(0-10分)。10分意味着用户无需指导即可掌握操作、理解结果,并能轻松从错误中恢复。需始终提供当前得分及达到10分的改进方向。
The Two Gulfs
两大鸿沟
Every interaction with a product requires bridging two gulfs:
USER PRODUCT
│ │
├──── Gulf of Execution ────────────────→│
│ "How do I do what I want?" │
│ │
│←──── Gulf of Evaluation ──────────────┤
│ "What happened? Did it work?" │用户与产品的每一次交互都需要跨越两大鸿沟:
USER PRODUCT
│ │
├──── Gulf of Execution ────────────────→│
│ "How do I do what I want?" │
│ │
│←──── Gulf of Evaluation ──────────────┤
│ "What happened? Did it work?" │Gulf of Execution
执行鸿沟
The gap between what users want to do and what the product lets them do.
Questions users ask:
- What can I do here?
- How do I do it?
- Which control do I use?
- How do I operate this control?
Bridging strategies:
- Clear signifiers showing what's possible
- Natural mappings between controls and outcomes
- Constraints preventing wrong actions
- Familiar conceptual models
用户需求与产品允许操作之间的差距。
用户会问:
- 我在这里能做什么?
- 我该怎么做?
- 我该用哪个控件?
- 这个控件怎么操作?
跨越策略:
- 清晰的意符,展示可行操作
- 控件与结果之间的自然映射
- 防止错误操作的约束条件
- 熟悉的概念模型
Gulf of Evaluation
评估鸿沟
The gap between what the product did and what users understand happened.
Questions users ask:
- What happened?
- Did it work?
- Is this what I wanted?
- What state is the system in now?
Bridging strategies:
- Immediate, visible feedback
- Clear system state indicators
- Meaningful error messages
- Progress indicators
Design goal: Make both gulfs as narrow as possible. The ideal design requires zero bridging — action and understanding are immediate.
See: references/two-gulfs.md for gulf analysis exercises.
产品实际行为与用户理解之间的差距。
用户会问:
- 发生了什么?
- 操作成功了吗?
- 这是我想要的结果吗?
- 系统现在处于什么状态?
跨越策略:
- 即时、可见的反馈
- 清晰的系统状态指示器
- 有意义的错误提示
- 进度指示器
设计目标: 尽可能缩小两大鸿沟。理想的设计无需跨越——操作与理解即时达成。
参考:references/two-gulfs.md 中的鸿沟分析练习。
Seven Fundamental Design Principles
七大核心设计原则
1. Discoverability
1. 可探索性
Definition: Can users figure out what actions are possible and how to perform them?
Five components of discoverability:
- Affordances
- Signifiers
- Constraints
- Mappings
- Feedback
(Each detailed below)
Test: Put a new user in front of your product. Can they figure out what to do within 10 seconds? If not, discoverability is broken.
Anti-pattern: "The user manual explains it." If users need a manual, the design failed.
定义: 用户能否摸索出可行操作及操作方法?
可探索性的五大要素:
- 可供性
- 意符
- 约束条件
- 映射
- 反馈
(下文将详细阐述每个要素)
测试方法: 让新用户接触产品,他们能否在10秒内掌握操作?若不能,说明可探索性存在问题。
反模式: “用户手册里有说明。” 如果用户需要手册,说明设计失败了。
2. Affordances
2. 可供性
Definition: The relationship between the properties of an object and the capabilities of the agent (user) that determine how the object could be used.
Key insight: Affordances exist whether or not they are perceived. A door affords pushing whether or not you know to push it. What matters is perceived affordance.
Types:
| Type | Definition | Example |
|---|---|---|
| Real affordance | Physical capability exists | A button affords pressing |
| Perceived affordance | User believes capability exists | A raised area looks clickable |
| Hidden affordance | Capability exists but isn't obvious | Right-click context menu |
| False affordance | Appears to afford action but doesn't | A decorative element that looks clickable |
| Anti-affordance | Prevents action | A barrier that blocks movement |
Digital applications:
| Element | Affordance | How to Signal |
|---|---|---|
| Button | Affords clicking/tapping | Raised, colored, shadow, hover state |
| Text field | Affords text input | Border, placeholder text, label |
| Link | Affords navigation | Color, underline, cursor change |
| Slider | Affords dragging | Handle, track, visual range |
| Scroll area | Affords scrolling | Scroll bar, fade at edge, partial content |
Common failures:
- Flat design removes perceived affordances (is it a button or a label?)
- Touch targets that are too small (fat finger problem)
- No visual distinction between interactive and decorative elements
See: references/affordances.md for affordance design patterns.
定义: 物体属性与用户能力之间的关系,决定了物体的使用方式。
核心洞察: 可供性是客观存在的,无论用户是否感知到。门的可供性是可推,无论用户是否知道要推。关键在于感知到的可供性。
类型:
| 类型 | 定义 | 示例 |
|---|---|---|
| 真实可供性 | 具备物理操作能力 | 按钮可供按压 |
| 感知可供性 | 用户认为具备操作能力 | 凸起区域看起来可点击 |
| 隐藏可供性 | 具备操作能力但不明显 | 右键上下文菜单 |
| 虚假可供性 | 看似具备操作能力实则没有 | 看似可点击的装饰元素 |
| 反可供性 | 阻止操作 | 阻挡通行的障碍物 |
数字化应用:
| 元素 | 可供性 | 如何标识 |
|---|---|---|
| 按钮 | 可供点击/触摸 | 凸起样式、颜色、阴影、悬停状态 |
| 输入框 | 可供文本输入 | 边框、占位文本、标签 |
| 链接 | 可供导航 | 颜色、下划线、光标变化 |
| 滑块 | 可供拖动 | 手柄、轨道、视觉范围 |
| 滚动区域 | 可供滚动 | 滚动条、边缘渐变、部分显示的内容 |
常见问题:
- 扁平化设计削弱了感知可供性(这是按钮还是标签?)
- 触摸目标过小(“粗手指问题”)
- 交互元素与装饰元素无视觉区分
参考:references/affordances.md 中的可供性设计模式。
3. Signifiers
3. 意符
Definition: Signals that communicate where the action should take place.
Key insight: Affordances determine what's possible. Signifiers communicate where and how.
If affordances are what you CAN do, signifiers show you HOW to do it.
Types:
| Type | Definition | Example |
|---|---|---|
| Deliberate signifier | Designed to communicate | "Push" label on door, placeholder text |
| Accidental signifier | Unintentional but informative | Worn path in grass (people walk here) |
| Social signifier | Other people's behavior | Line of people indicates entrance |
Digital signifiers:
| Signifier | What It Communicates | Example |
|---|---|---|
| Cursor change | This is interactive | Pointer → hand on links |
| Hover state | This responds to interaction | Button color change on hover |
| Placeholder text | What to type here | "Enter your email..." |
| Icons | Function of the element | Magnifying glass = search |
| Labels | What this control does | "Submit", "Cancel", "Next" |
| Color | Status or category | Red = error, green = success |
| Position | Relationship and hierarchy | Close button in top-right corner |
Design rule: When in doubt, add a signifier. It's better to over-communicate than to leave users guessing.
See: references/signifiers.md for signifier patterns and examples.
定义: 指示操作位置与方式的信号。
核心洞察: 可供性决定了可行操作,意符则指示操作的位置与方法。
如果说可供性是“能做什么”,意符就是“怎么做”。
类型:
| 类型 | 定义 | 示例 |
|---|---|---|
| 刻意意符 | 为传递信息而设计 | 门上的“推”标识、占位文本 |
| 意外意符 | 非刻意但具备信息性 | 草地上被踩出的小径(人们常走这里) |
| 社交意符 | 他人的行为暗示 | 排队人群指示入口位置 |
数字化意符:
| 意符 | 传递的信息 | 示例 |
|---|---|---|
| 光标变化 | 此元素可交互 | 指针在链接上变为手型 |
| 悬停状态 | 此元素响应用户交互 | 按钮在悬停时变色 |
| 占位文本 | 此处应输入什么内容 | "输入您的邮箱..." |
| 图标 | 元素的功能 | 放大镜 = 搜索 |
| 标签 | 此控件的功能 | "提交"、"取消"、"下一步" |
| 颜色 | 状态或分类 | 红色 = 错误,绿色 = 成功 |
| 位置 | 关系与层级 | 关闭按钮位于右上角 |
设计准则: 如有疑问,添加意符。过度沟通总比让用户猜测要好。
参考:references/signifiers.md 中的意符模式与示例。
4. Mappings
4. 映射
Definition: The relationship between controls and their effects.
Natural mapping: When the spatial layout of controls matches the layout of the thing being controlled.
Examples:
| Mapping Quality | Example | Why It Works/Fails |
|---|---|---|
| Natural | Steering wheel turns car direction | Direct spatial correspondence |
| Natural | Volume slider (up = louder) | Matches mental model |
| Poor | Light switch panel (which switch = which light?) | No spatial correspondence |
| Poor | Stovetop controls in a row (which knob = which burner?) | Layout doesn't match |
Digital mapping principles:
- Controls should be near what they affect
- Layout of controls should mirror layout of content
- Direction of action should match expectation (scroll down = content moves up)
- Grouping related controls together
Mapping techniques:
| Technique | How It Works | Example |
|---|---|---|
| Proximity | Control near target | Edit button next to content |
| Spatial | Layout mirrors real world | Map controls match compass directions |
| Cultural | Follows conventions | Red = stop/danger, green = go/safe |
| Sequential | Follows natural order | Steps 1, 2, 3 from left to right (or top to bottom) |
See: references/mappings.md for mapping analysis exercises.
定义: 控件与其效果之间的关系。
自然映射: 控件的空间布局与被控制对象的布局匹配。
示例:
| 映射质量 | 示例 | 有效/无效原因 |
|---|---|---|
| 自然映射 | 方向盘转向与车辆转向方向一致 | 直接的空间对应关系 |
| 自然映射 | 音量滑块(上滑=音量增大) | 符合用户心智模型 |
| 糟糕映射 | 电灯开关面板(哪个开关对应哪盏灯?) | 无空间对应关系 |
| 糟糕映射 | 一字排列的炉灶旋钮(哪个旋钮对应哪个炉头?) | 布局不匹配 |
数字化映射原则:
- 控件应靠近其作用对象
- 控件布局应镜像内容布局
- 操作方向应符合预期(向下滚动=内容向上移动)
- 相关控件分组排列
映射技巧:
| 技巧 | 工作原理 | 示例 |
|---|---|---|
| 邻近性 | 控件靠近目标对象 | 编辑按钮紧邻内容 |
| 空间对应 | 布局镜像现实世界 | 地图控件与罗盘方向匹配 |
| 文化习惯 | 遵循通用惯例 | 红色=停止/危险,绿色=通行/安全 |
| 顺序对应 | 遵循自然顺序 | 步骤1、2、3从左到右(或从上到下)排列 |
参考:references/mappings.md 中的映射分析练习。
5. Constraints
5. 约束条件
Definition: Limiting the possible actions to prevent errors.
Four types of constraints:
| Type | Mechanism | Example |
|---|---|---|
| Physical | Shape/size prevents wrong action | USB plug only fits one way (USB-C both ways) |
| Cultural | Social norms guide behavior | Red means stop, green means go |
| Semantic | Meaning restricts options | A rearview mirror only makes sense facing backward |
| Logical | Logic limits choices | Only one hole left for last screw (process of elimination) |
Digital constraints:
| Constraint Type | Implementation | Example |
|---|---|---|
| Input validation | Restrict what can be entered | Date picker vs. free text |
| Disabled states | Gray out unavailable options | "Submit" disabled until form valid |
| Progressive disclosure | Show options only when relevant | Payment fields after selecting "Buy" |
| Forced sequence | Steps must be completed in order | Wizard/stepper with locked steps |
| Undo/redo | Allow reversal | Gmail "Undo send" |
The power of constraints: Every constraint you add is one less error the user can make.
Design rule: Make it impossible to do the wrong thing, rather than punishing users for doing the wrong thing.
See: references/constraints.md for constraint design patterns.
定义: 限制可行操作以预防错误。
四大约束类型:
| 类型 | 机制 | 示例 |
|---|---|---|
| 物理约束 | 形状/尺寸阻止错误操作 | USB插头只能单向插入(USB-C可双向插入) |
| 文化约束 | 社会规范引导行为 | 红色表示停止,绿色表示通行 |
| 语义约束 | 含义限制选项 | 后视镜只有朝向后方才有意义 |
| 逻辑约束 | 逻辑限制选择 | 只剩一个孔用于最后一颗螺丝(排除法) |
数字化约束:
| 约束类型 | 实现方式 | 示例 |
|---|---|---|
| 输入验证 | 限制可输入内容 | 日期选择器而非自由文本输入 |
| 禁用状态 | 灰化不可用选项 | 表单验证通过前“提交”按钮禁用 |
| 渐进式披露 | 仅在相关时显示选项 | 选择“购买”后显示支付字段 |
| 强制顺序 | 步骤必须按顺序完成 | 带锁定步骤的向导/分步流程 |
| 撤销/重做 | 允许操作逆转 | Gmail的“撤销发送”功能 |
约束的力量: 每添加一个约束,用户就少犯一个错误。
设计准则: 让用户无法犯错,而非在用户犯错后惩罚他们。
参考:references/constraints.md 中的约束设计模式。
6. Feedback
6. 反馈
Definition: Communicating the results of an action back to the user.
Feedback must be:
- Immediate: Within 0.1 seconds for direct manipulation
- Informative: Tells user what happened and current state
- Appropriate: Not too much (annoying) or too little (confusing)
- Non-intrusive: Doesn't block the user's workflow
Types of feedback:
| Type | When to Use | Example |
|---|---|---|
| Visual | Most actions | Button press animation, color change, checkmark |
| Auditory | Important events, confirmations | Success chime, error sound, notification |
| Haptic | Touch devices, confirmation | Vibration on key press, force feedback |
| Progress | Long operations | Progress bar, spinner, skeleton screen |
Digital feedback patterns:
| Situation | Feedback Needed | Example |
|---|---|---|
| Button click | Visual state change | Button depresses, color changes |
| Form submission | Success/error message | "Saved!" toast or inline error |
| Loading | Progress indicator | Spinner, skeleton screen, percentage |
| Error | What went wrong + how to fix | "Invalid email. Please check format." |
| Hover | Interactive element indicator | Background color change, underline |
| Drag | Object follows cursor | Element moves with mouse |
Common failures:
- No feedback at all (did my click register?)
- Delayed feedback (makes system feel broken)
- Unclear feedback (something happened but what?)
- Too much feedback (every action triggers alert)
Response time guidelines:
- 0.1s: Feels instantaneous (direct manipulation)
- 1.0s: Noticeable delay (show cursor change)
- 10s: Attention wanders (show progress bar)
-
10s: User leaves (show percentage, allow background)
See: references/feedback.md for feedback design patterns.
定义: 将操作结果反馈给用户。
反馈必须满足:
- 即时性: 直接操作需在0.1秒内响应
- 信息性: 告知用户发生了什么及当前状态
- 适度性: 既不过多(烦人)也不过少(令人困惑)
- 非侵入性: 不干扰用户工作流程
反馈类型:
| 类型 | 使用场景 | 示例 |
|---|---|---|
| 视觉反馈 | 大多数操作 | 按钮按压动画、颜色变化、对勾标识 |
| 听觉反馈 | 重要事件、确认操作 | 成功提示音、错误提示音、通知音 |
| 触觉反馈 | 触控设备、确认操作 | 按键振动、力反馈 |
| 进度反馈 | 长时间操作 | 进度条、加载动画、骨架屏 |
数字化反馈模式:
| 场景 | 需要的反馈 | 示例 |
|---|---|---|
| 按钮点击 | 视觉状态变化 | 按钮凹陷、颜色变化 |
| 表单提交 | 成功/错误提示 | “已保存!”提示框或行内错误提示 |
| 加载中 | 进度指示器 | 加载动画、骨架屏、百分比显示 |
| 错误 | 错误原因+解决方法 | “无效邮箱,请检查格式。” |
| 悬停 | 可交互元素标识 | 背景色变化、下划线 |
| 拖动 | 对象跟随光标 | 元素随鼠标移动 |
常见问题:
- 完全无反馈(我的点击生效了吗?)
- 反馈延迟(让系统看起来故障)
- 反馈不清晰(发生了变化但不知道是什么)
- 反馈过多(每一次操作都触发提示)
响应时间准则:
- 0.1秒:感觉即时(直接操作)
- 1.0秒:可感知延迟(显示光标变化)
- 10秒:用户注意力分散(显示进度条)
-
10秒:用户可能离开(显示百分比,允许后台运行)
参考:references/feedback.md 中的反馈设计模式。
7. Conceptual Models
7. 概念模型
Definition: The user's mental model of how a product works.
Three models:
| Model | Held By | Description |
|---|---|---|
| Design model | Designer | How the designer thinks it works |
| User's model | User | How the user thinks it works |
| System image | Product | What the product actually communicates |
Goal: User's model should match the design model. The system image is the bridge.
When models match:
- Users predict outcomes correctly
- Users recover from errors easily
- Users feel confident and in control
When models mismatch:
- Users are confused and frustrated
- Users blame themselves
- Users give up or call support
Example: Thermostat
- Design model: Set temperature, system maintains it
- Common user model: Higher setting = faster heating (wrong!)
- Result: Users crank thermostat to 90°F hoping for faster warmth
Building correct conceptual models:
- Use familiar metaphors (desktop, folder, trash)
- Make system state visible
- Provide clear feedback
- Use consistent behavior (same action = same result)
- Progressive disclosure (simple model first, details available)
See: references/conceptual-models.md for model design frameworks.
定义: 用户对产品工作原理的心智模型。
三大模型:
| 模型 | 持有者 | 描述 |
|---|---|---|
| 设计模型 | 设计师 | 设计师认为产品的工作方式 |
| 用户模型 | 用户 | 用户认为产品的工作方式 |
| 系统映像 | 产品 | 产品实际传递的信息 |
目标: 用户模型应与设计模型匹配。系统映像是两者之间的桥梁。
模型匹配时:
- 用户能正确预测结果
- 用户能轻松从错误中恢复
- 用户感到自信且掌控一切
模型不匹配时:
- 用户感到困惑和沮丧
- 用户责怪自己
- 用户放弃或寻求支持
示例:恒温器
- 设计模型: 设置温度,系统维持该温度
- 常见用户模型: 设置温度越高,加热速度越快(错误!)
- 结果: 用户将恒温器调到90°F,希望快速升温
构建正确的概念模型:
- 使用熟悉的隐喻(桌面、文件夹、回收站)
- 让系统状态可见
- 提供清晰的反馈
- 保持行为一致性(相同操作=相同结果)
- 渐进式披露(先展示简单模型,再提供详细信息)
参考:references/conceptual-models.md 中的模型设计框架。
Human Error
人为错误
Norman's key insight: There is no such thing as "human error." There is only bad design.
When someone makes an error, look for the design flaw, not the person's flaw.
Norman的核心洞察:不存在所谓的“人为错误”,只有糟糕的设计。
当用户犯错时,要寻找设计缺陷,而非指责用户。
Types of Errors
错误类型
Slips: Correct intention, wrong action
| Slip Type | Cause | Example | Design Fix |
|---|---|---|---|
| Action slip | Wrong action on right target | Click "Delete" instead of "Edit" | Separate destructive actions |
| Memory lapse | Forget step in sequence | Forget attachment after writing "attached" | Gmail's attachment reminder |
| Mode error | Right action, wrong mode | Type in caps lock | Show mode state clearly |
| Capture error | Familiar action overrides intended | Drive to old office on autopilot | Interruptions at decision points |
Mistakes: Wrong intention, executed correctly
| Mistake Type | Cause | Example | Design Fix |
|---|---|---|---|
| Rule-based | Apply wrong rule | Use formula for wrong situation | Provide context, confirm |
| Knowledge-based | Incomplete/wrong mental model | Misunderstand how system works | Better conceptual model |
| Memory lapse | Forget goal or plan | Forget why you opened the fridge | Provide reminders, history |
失误: 意图正确,但操作错误
| 失误类型 | 原因 | 示例 | 设计修正 |
|---|---|---|---|
| 操作失误 | 对正确目标执行错误操作 | 误点“删除”而非“编辑” | 分离破坏性操作 |
| 记忆失误 | 忘记流程中的步骤 | 写了“附件”却忘记添加附件 | Gmail的附件提醒功能 |
| 模式失误 | 操作正确,但模式错误 | 大写锁定状态下输入 | 清晰显示模式状态 |
| 捕获失误 | 熟悉操作覆盖了预期操作 | 自动驾驶时开到旧办公室 | 在决策点设置中断提示 |
错误: 意图错误,但操作正确
| 错误类型 | 原因 | 示例 | 设计修正 |
|---|---|---|---|
| 规则错误 | 应用了错误规则 | 在错误场景使用公式 | 提供上下文,添加确认步骤 |
| 知识错误 | 心智模型不完整/错误 | 误解系统工作原理 | 优化概念模型 |
| 记忆错误 | 忘记目标或计划 | 忘记打开冰箱的原因 | 提供提醒、历史记录 |
Design for Error
容错设计
Error prevention:
- Constraints that make errors impossible
- Undo/redo for all actions
- Confirmation for destructive actions
- Sensible defaults
- Forgiving input (accept variations)
Error recovery:
- Clear error messages (what happened + how to fix)
- Don't erase user's work on error
- Allow partial saves
- Easy reset to known good state
Error message checklist:
- Says what went wrong (in human language)
- Says how to fix it
- Doesn't blame the user
- Preserves user's work
- Provides alternative path
See: references/human-error.md for error prevention patterns.
错误预防:
- 让错误无法发生的约束条件
- 支持所有操作的撤销/重做
- 破坏性操作添加确认步骤
- 合理的默认设置
- 宽容的输入(接受多种格式)
错误恢复:
- 清晰的错误提示(发生了什么+如何修复)
- 错误时不清除用户工作内容
- 允许部分保存
- 轻松重置到已知良好状态
错误提示检查清单:
- 用自然语言说明错误原因
- 说明修复方法
- 不指责用户
- 保留用户工作内容
- 提供替代路径
参考:references/human-error.md 中的错误预防模式。
The Seven Stages of Action
七大行动阶段
Norman's model for how humans interact with products:
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 ───Design implications:
- Stages 1-3 (execution): Support with clear signifiers, mappings, constraints
- Stage 4 (action): Support with good affordances
- Stages 5-7 (evaluation): Support with clear feedback, system state
Use as evaluation tool: Walk through each stage for any interaction. Where does the user get stuck?
See: references/seven-stages.md for stage-by-stage analysis.
Norman提出的人与产品交互模型:
1. 目标 → "我想调节温度"
2. 计划 → "我要用恒温器"
3. 明确操作 → "我要按向上箭头"
4. 执行操作 → (按下按钮)
─── 执行鸿沟 ───
5. 感知结果 → (看到显示屏变化)
6. 解读结果 → "数字变大了"
7. 对比结果 → "这是我想要的温度吗?"
─── 评估鸿沟 ───设计启示:
- 阶段1-3(执行):用清晰的意符、映射、约束条件提供支持
- 阶段4(操作):用良好的可供性提供支持
- 阶段5-7(评估):用清晰的反馈、系统状态展示提供支持
用作评估工具: 针对任意交互,逐一走过每个阶段。用户在哪里遇到障碍?
参考:references/seven-stages.md 中的分阶段分析。
Human-Centered Design (HCD) Process
以人为中心的设计(HCD)流程
Norman's design process:
Observation → Idea Generation → Prototyping → Testing → (iterate)Norman的设计流程:
观察 → 创意生成 → 原型制作 → 测试 → (迭代)1. Observation
1. 观察
- Watch real users in real contexts
- Don't ask what they want (they don't know)
- Look for workarounds, frustrations, adaptations
- Focus on activities, not individual tasks
- 在真实场景中观察真实用户
- 不要问用户想要什么(他们自己也不知道)
- 寻找变通方法、痛点、用户适应性行为
- 关注用户活动,而非单个任务
2. Idea Generation
2. 创意生成
- Generate many ideas (diverge before converge)
- Don't criticize during ideation
- Build on others' ideas
- Defer judgment
- 生成大量创意(先发散后收敛)
- 创意阶段不批评
- 基于他人创意进行拓展
- 暂缓判断
3. Prototyping
3. 原型制作
- Quick, cheap, disposable
- Test concepts, not polish
- Paper prototypes for early ideas
- Interactive prototypes for validation
- 快速、低成本、可丢弃
- 测试概念,而非打磨细节
- 早期创意用纸原型
- 交互式原型用于验证
4. Testing
4. 测试
- Test with real users (not designers)
- 5 users reveal 85% of problems
- Observe behavior, not just opinions
- Iterate based on findings
Key principle: The design process is iterative. You'll go through multiple cycles, each time refining the design based on what you learn.
- 用真实用户测试(而非设计师)
- 5个用户即可发现85%的问题
- 观察行为,而非仅听意见
- 根据测试结果迭代
核心原则: 设计流程是迭代的。你会经历多个循环,每次都基于所学优化设计。
Common Mistakes
常见错误
| Mistake | Why It Fails | Fix |
|---|---|---|
| No signifiers | Users can't find features | Add visual cues for every interactive element |
| No feedback | Users don't know if action worked | Respond to every action within 0.1s |
| Blaming users | Ignores design flaws | Look for design cause of every "user error" |
| Feature creep | Complexity overwhelms | Apply constraints, progressive disclosure |
| Inconsistency | Breaks conceptual model | Same action = same result everywhere |
| Ignoring context | Designed for ideal conditions | Observe real usage environments |
| 错误 | 失败原因 | 修正方法 |
|---|---|---|
| 无意符 | 用户找不到功能 | 为每个交互元素添加视觉提示 |
| 无反馈 | 用户不知道操作是否生效 | 对每个操作在0.1秒内做出响应 |
| 指责用户 | 忽略设计缺陷 | 为每一个“用户错误”寻找设计原因 |
| 功能蔓延 | 复杂性压垮用户 | 应用约束条件、渐进式披露 |
| 不一致性 | 破坏概念模型 | 确保相同操作在所有场景下结果一致 |
| 忽略场景 | 仅针对理想条件设计 | 观察真实使用环境 |
Quick Diagnostic
快速诊断
Audit any design:
| Question | If No | Action |
|---|---|---|
| Can users figure out what to do? | Poor discoverability | Add signifiers, improve affordances |
| Do users understand what happened? | Gulf of evaluation too wide | Add feedback, show system state |
| Can users recover from errors? | No error tolerance | Add undo, confirmation, clear messages |
| Does the control layout match the output? | Poor mapping | Reorganize controls to match spatial layout |
| Are impossible/irrelevant options hidden? | Missing constraints | Disable, hide, or remove invalid options |
审核任意设计:
| 问题 | 如果答案为否 | 改进措施 |
|---|---|---|
| 用户能否摸索出操作方法? | 可探索性差 | 添加意符,优化可供性 |
| 用户能否理解操作结果? | 评估鸿沟过宽 | 添加反馈,展示系统状态 |
| 用户能否从错误中恢复? | 无容错性 | 添加撤销、确认步骤、清晰提示 |
| 控件布局与输出是否匹配? | 映射糟糕 | 重新组织控件以匹配空间布局 |
| 不可能/不相关的选项是否被隐藏? | 缺少约束条件 | 禁用、隐藏或移除无效选项 |
Reference Files
参考文件
- two-gulfs.md: Gulf analysis exercises, bridging strategies
- affordances.md: Affordance types, design patterns
- signifiers.md: Signifier patterns, examples, best practices
- mappings.md: Natural mapping analysis, spatial layout
- constraints.md: Constraint types, digital implementations
- feedback.md: Feedback patterns, timing, modality
- conceptual-models.md: Model design, metaphors, mental models
- human-error.md: Error types, prevention, recovery
- seven-stages.md: Stage analysis, evaluation tool
- case-studies.md: Door handles, thermostats, digital products
- two-gulfs.md: 鸿沟分析练习、跨越策略
- affordances.md: 可供性类型、设计模式
- signifiers.md: 意符模式、示例、最佳实践
- mappings.md: 自然映射分析、空间布局
- constraints.md: 约束类型、数字化实现
- feedback.md: 反馈模式、时机、形式
- conceptual-models.md: 模型设计、隐喻、心智模型
- human-error.md: 错误类型、预防、恢复
- seven-stages.md: 分阶段分析、评估工具
- case-studies.md: 门把手、恒温器、数字化产品案例
Further Reading
延伸阅读
This skill is based on Don Norman's foundational design principles. For the complete framework:
- "The Design of Everyday Things" by Don Norman (Revised & Expanded Edition, 2013)
- "Emotional Design" by Don Norman (design and emotion)
About the Author
关于作者
Don Norman, PhD is co-founder of the Nielsen Norman Group and director of The Design Lab at UC San Diego. He coined the term "user experience" while at Apple in the 1990s. The Design of Everyday Things (originally published in 1988 as "The Psychology of Everyday Things") is considered the most influential design book ever written and is required reading in virtually every design program worldwide. Norman has served as VP of Advanced Technology at Apple and has been a professor at Northwestern, UC San Diego, and KAIST (Korea).
Don Norman 博士是尼尔森诺曼集团联合创始人,加州大学圣地亚哥分校设计实验室主任。他在1990年代于苹果公司任职期间,首次提出了“用户体验”(user experience)一词。《设计心理学》(1988年初版名为《日常事物的心理学》)被认为是最具影响力的设计书籍,几乎所有设计专业的课程都将其列为必读。Norman曾担任苹果公司高级技术副总裁,还曾在西北大学、加州大学圣地亚哥分校和韩国科学技术院(KAIST)担任教授。