interaction-design

交互设计

设计交互，帮助真实的人以最少的阻碍、最有意义的方式实现真实目标。

核心问题

在考虑任何模式或时间参数之前，先问：用户想要实现什么？这种交互如何帮助或阻碍他们实现目标？

交互设计不是设计机制，而是帮助特定的人实现特定目的，同时尊重他们的时间、注意力和人性。

输出约定

交互规范

## Interaction Spec: [Component Name]

### User Goal
What is the user trying to accomplish? What are the stakes?

### Conceptual Model
How should users understand this interaction? What mental model should they form?

### States & Transitions
| State | Appearance | Transition | Emotional Tone |
|-------|------------|------------|----------------|
| Default | [appearance] | — | [calm/ready/inviting] |
| Hover | [changes] | 150ms ease-out | [responsive/acknowledged] |
| Active | [pressed] | 50ms | [committed/engaged] |
| Loading | [feedback] | — | [progressing/patient] |
| Success | [confirmation] | 200ms | [accomplished/closure] |
| Error | [clear indication] | — | [recoverable/guided] |

### Keyboard & Input
- Tab: [focus behavior]
- Enter/Space: [activation]
- Escape: [reversal/dismissal]
- Touch: [gesture, target size]

### Error Prevention & Recovery
- How does design prevent errors?
- What happens when errors occur?
- How does user recover?

### Accessibility
- Screen reader announcement
- Focus management
- Reduced motion behavior

流程分析

## Flow Analysis: [Journey Name]

### User Goal & Stakes
What does success mean? What does failure cost?

### Dramatic Arc
- Setup: How does user enter this flow?
- Rising action: What builds toward the goal?
- Climax: The moment of commitment/completion
- Resolution: Confirmation and next steps

### Steps
1. [Step] → [Interaction] → [User feeling]

### Friction Analysis
- Necessary friction (builds engagement/prevents errors)
- Excise to eliminate (work that doesn't serve the goal)

### Error Paths
- [Error scenario]: [Prevention] → [Recovery]

核心原则

1. 目标导向设计

用户不是触发状态变化的“操作者”，而是有目标的人。

首先要问：

• 谁在使用？（不是抽象的“用户”，而是具体的用户类型）
• 他们想要实现什么？
• 我们可以消除哪些繁琐工作？（不服务于目标的工作）
• 我们应当让他们在过程中和结束后有怎样的感受？

**永远处于中间阶段的用户：**大多数用户既不是正在学习的新手，也不是不断优化的专家。他们掌握了足够的知识来完成工作，也不会再进一步学习。为他们设计——让常见路径更快捷，同时让高级选项易于发现但不碍事。

2. 概念模型

用户必须对系统的运作方式形成准确的心理模型。设计者模型与用户模型之间的差距，正是困惑的来源。

系统映像（用户看到并与之交互的内容）必须准确传达设计者的模型。当用户感到困惑时，失败的是系统映像，而不是用户。

示能线索传达哪些地方可以操作以及如何操作。拖动手柄图标就是一种示能线索；可以拖动则是一种可供性。设计示能线索，让可供性易于发现。

3. 直接操纵

让计算机隐于幕后，使用户专注于自己的任务。

核心特性：

• 关注对象始终可见、随时可用
• 快速、渐进、可逆的操作
• 即时反馈——操作与结果之间的联系清晰可见
• 在问题领域中操作，而不是使用命令语法

**语法与语义的洞见：**直接操纵之所以有效，是因为它在语义层面（问题领域）进行操作，而不要求用户将其转换为语法命令。这样就省去了转换步骤，降低了认知负荷。

不适合使用直接操纵的情况：

• 需要精确指定时（输入“24pt”可能比拖动更好）
• 需要对多个对象执行批量操作时
• 缺乏空间隐喻的抽象操作
• 偏好使用键盘提高效率的专家用户

4. 可逆性有助于探索

可逆性不是一项功能，而是一种心理安全机制，能让系统从令人望而生畏变得亲切易用。

• **撤销深度：**支持多步撤销，而不只是撤销一步
• **匹配的反向操作：**如果 Cmd+B 可加粗，那么 Cmd+B 也应可取消加粗（同一操作可反向执行）
• **状态可见性：**让用户知道可以撤销
• **平稳降级：**无法真正撤销时，先确认再执行破坏性操作

5. 预防错误胜于处理错误

错误通常是设计失败，而不是用户失败。

失误（执行错误）：用户的意图正确，但操作有误

• 使用限制条件、默认值，以及对破坏性操作的确认来预防

错误（意图错误）：用户形成了错误的目标或计划

• 通过清晰的概念模型和可见的系统状态来预防

设计强制机制：

• 互锁：要求先完成前置操作
• 锁定：危险时防止用户在操作中途停止
• 锁出：防止用户进入危险状态

有关错误心理学和预防模式，请参阅 references/cognitive-foundations.md。

6. 反馈与系统状态

每个操作都应得到确认。用户不应该疑惑“操作成功了吗？”

响应时间	感知	设计响应
<100ms	即时	直接显示结果，不显示指示器
100ms–1s	短暂延迟	轻微的状态变化（光标、透明度）
1–10s	明显等待	显示旋转指示器或确定进度
>10s	长时间操作	显示进度条和预计时间，并允许取消

乐观 UI： 立即更新，并妥善处理错误。但要诚实——对于重要操作，确认成功之前不要显示成功。

7. 模态：不得已而为之

用户忘记自己处于哪个模式时，模式会导致错误。但模式也能隔离认知范围，并在用户本会忘记上下文时减少错误。

在以下情况下使用非模态设计（检查器、行内编辑）：

• 用户需要在调整时查看结果
• 预期会反复试错
• 需要频繁切换上下文

在以下情况下接受模态设计：

• 隔离范围可以减少错误（复杂的多步向导）
• 操作具有破坏性，确认可以防止意外
• 系统需要用户专注处理（身份验证）

如果必须使用模式：

• 清晰显示当前模式（不只显示在状态栏中）
• 确保模式指示器位于注意力焦点附近
• 提供快速退出方式（Escape 键、明确的退出路径）

8. 意义与情感化设计

交互不只是高效或低效——它们承载着意义。

本能层： 对外观的即时情感反应
行为层： 使用时的愉悦或挫败感
反思层： 体验意味着什么，以及人们会如何铭记它

能够营造期待感的加载状态，与令人沮丧的加载状态截然不同——机制相同，意义不同。请思考：

• 用户在这一交互过程中应该有什么感受？
• 这一交互讲述了怎样的故事？
• 完成这一操作会如何改变用户的处境？

关于戏剧结构和情感化设计，请参阅 references/goals-and-context.md。

决策框架

激活类型

使用频率	建议的激活方式	理由
持续	始终可见（空间布局）	激活成本为零
频繁	键盘快捷键 + 可见控件	熟练用户操作迅速，其他用户也容易发现
偶尔	菜单或命令面板	节省空间，同时仍易于找到
很少/危险	仅通过菜单访问，可考虑嵌套	防止意外操作

何时使用动画

动画应当发挥作用，而不是用于装饰。

在以下情况下使用动画：

• 在过渡期间保持对象恒常性
• 传达因果关系（此事导致彼事）
• 减少变化盲视
• 传达符合情境的情绪基调

在以下情况下不要使用动画：

• 用户习惯性地执行操作（动画会变得多余）
• 速度至关重要（专家工作流）
• 用户已表明偏好减少动态效果
• 动画会掩盖信息，而非让信息更清晰

关于时长、曲线和情绪特征，请参阅 references/animation-timing.md。

阻力：消除还是利用？

并非所有阻力都是坏事。请区分：

多余阻力（消除）： 对实现用户目标没有帮助的操作

• 在层层菜单中寻找选项
• 重新输入系统已知的信息
• 等待不必要的动画
• 为非破坏性操作进行确认

有益阻力（考虑保留）：

• 在不可逆操作前进行确认
• 通过审慎的节奏防止匆忙出错
• 营造期待感或凸显重要性的时刻
• 表明“此事很重要”的阻碍

输入与物理特性

设备会影响交互。手指触碰玻璃不同于使用触控笔，也不同于使用鼠标。

触控目标

平台	最小尺寸	舒适尺寸
iOS	44×44pt	48pt+
Android	48×48dp	56dp+
Web（触控）	44×44px	48px+

手势词汇

手势	用途	注意事项
轻触	主要操作	必须提供清晰的可操作性提示
长按	次要操作／上下文操作	需要提供易发现的提示
滑动	显示、删除、导航	始终提供撤销功能；不要隐藏主要操作
捏合	缩放	保持手指下方的焦点

双手交互

为平板电脑设计，或考虑桌面端高级用户时：

• 非惯用手：粗略定位、设置上下文
• 惯用手：精细操作、执行操作
• 思考：双手能否都发挥作用？

有关特定设备的模式和触觉反馈，请参阅 references/input-and-physicality.md。

平台注意事项

Web

• 在 SPA 中管理焦点（在模态框中锁定，关闭时恢复）
• 尊重 prefers-reduced-motion
• 同时针对触控和鼠标进行设计——避免仅支持悬停的交互
• 为所有交互元素提供键盘导航

iOS

• 尊重系统手势和滚动惯性
• 支持 Dynamic Type（在最大字号下测试）
• 在重要时刻提供触觉反馈
• 为 VoiceOver 设置正确的特征

Android

• 遵循 Material 动效原则
• 支持预测性返回手势（Android 14+）
• 使用全屏到边缘布局并设置正确的内边距
• 支持 TalkBack

桌面端

• 提供易于发现的键盘快捷键
• 管理多窗口状态
• 适当支持触控板手势
• 为高级用户提供高信息密度选项

反模式

破坏直接操作

❌ 带有“预览”按钮的模态对话框 ✓ 用户调整时实时预览

❌ 必须点击“应用”才能看到更改 ✓ 立即显示更改，并提供撤销功能

状态隐藏

❌ 当前模式只显示在状态栏中 ✓ 在注意力焦点处显示模式

❌ 未保存的更改没有任何提示 ✓ 清晰显示未保存状态（标题、圆点、已更改的按钮）

多余操作累积

❌ 每次操作都要求确认 ✓ 支持撤销；仅对具有破坏性或不可逆的操作进行确认

❌ 用户必须等待动画播放完毕 ✓ 动画可被用户中断，或不阻塞操作

认知负荷过重

❌ 一次显示所有选项 ✓ 根据任务阶段渐进式展示

❌ 归咎于用户的错误消息 ✓ 清晰说明原因 + 提供恢复路径

参考文件

根据需要加载以下文件，了解详细指南：

• references/goals-and-context.md — 用户目标、人物角色、戏剧结构、情感化设计
• references/cognitive-foundations.md — 心智模型、错误心理学、测量方法
• references/input-and-physicality.md — 输入设备、触觉反馈、双手交互、绘图
• references/component-patterns.md — 表单、模态框、菜单等的详细模式
• references/animation-timing.md — 时长、缓动、弹簧、情感特质
• references/accessibility-patterns.md — ARIA、焦点管理、屏幕阅读器

理论基础

• 直接操作（Shneiderman）：可见性、可逆性、即时反馈。请参阅 references/direct-manipulation.md
• 工具性交互（Beaudouin-Lafon）：作为用户与对象关系中介的工具；间接性、整合性、兼容性程度。请参阅 references/instrumental-interaction.md
• 目标导向设计（Cooper）：人物角色、永久中间态、消除多余操作
• 情感化设计（Norman）：本能层、行为层、反思层
• 计算机即戏剧（Laurel）：戏剧结构、意义、参与感