interaction-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Interaction Design

交互设计

Design interactions that help real people accomplish real goals with minimum friction and maximum meaning.

设计能够帮助真实用户以最小阻力、最大意义达成真实目标的交互。

The Fundamental Question

核心问题

Before any pattern or timing value, ask: What is the user trying to accomplish, and how does this interaction help or hinder that goal?

Interaction design is not about mechanisms. It is about helping specific people achieve specific purposes while respecting their time, attention, and humanity.

在确定任何模式或时间参数之前，请先问自己：用户想要达成什么目标？这个交互对该目标是起到帮助还是阻碍作用？

交互设计无关乎机制，而是要在尊重用户时间、注意力与人性的前提下，帮助特定人群达成特定目标。

Output Contracts

输出规范

Interaction Specification

交互规范

markdown

undefined

markdown

undefined

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]

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]

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?

How does design prevent errors?
What happens when errors occur?
How does user recover?

Accessibility

Screen reader announcement
Focus management
Reduced motion behavior

undefined

Screen reader announcement
Focus management
Reduced motion behavior

undefined

Flow Analysis

流程分析

markdown

undefined

markdown

undefined

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

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

[Step] → [Interaction] → [User feeling]

[Step] → [Interaction] → [User feeling]

Friction Analysis

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

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

Error Paths

[Error scenario]: [Prevention] → [Recovery]

undefined

[Error scenario]: [Prevention] → [Recovery]

undefined

Core Principles

核心原则

1. Goal-Directed Design

1. 目标导向设计

Users are not "operators" triggering state changes. They are people with purposes.

Ask first:

Who is using this? (Not abstract "users"—specific archetypes)
What are they trying to accomplish?
What excise can we eliminate? (Work that doesn't serve their goal)
How should they feel during and after?

The perpetual intermediate: Most users are neither novices learning nor experts optimizing. They learned enough to work and won't learn more. Design for them—make the common path fast while keeping advanced options discoverable but unobtrusive.

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

首先要问：

谁在使用这个产品？（不是抽象的“用户”，而是具体的用户画像）
他们想要达成什么目标？
我们可以消除哪些无用功？（对目标达成没有帮助的工作）
他们在使用过程中和使用后应该有怎样的感受？

永久中间用户： 大多数用户既不是正在学习的新手，也不是追求优化的专家。他们掌握了足够完成工作的技能，不会再去学习更多内容。为这类用户设计——让常用路径更快捷，同时将高级选项设计为可发现但不突兀的形式。

2. Conceptual Models

2. 概念模型

Users must form accurate mental models of how the system works. The gap between the designer's model and the user's model is where confusion lives.

The system image (what users see and interact with) must accurately convey the designer's model. When users are confused, the system image has failed—not the user.

Signifiers communicate where action is possible and how to perform it. A drag handle icon is a signifier; the ability to drag is the affordance. Design signifiers that make affordances discoverable.

用户必须形成对系统工作方式的准确心智模型。设计师的模型与用户的模型之间的差距，就是困惑产生的根源。

系统呈现（用户看到并交互的内容）必须准确传达设计师的模型。当用户感到困惑时，是系统呈现出了问题，而非用户的问题。

指示符用于传达可操作的区域及操作方式。拖拽手柄图标就是一种指示符；而可拖拽的能力则是可供性。设计清晰的指示符，让可供性易于被发现。

3. Direct Manipulation

3. 直接操作

Make the computer disappear so users concentrate on their task.

Core properties:

Visible objects of interest, always accessible
Rapid, incremental, reversible actions
Immediate feedback—action and result visibly connected
Operations in the problem domain, not command syntax

The syntactic/semantic insight: Direct manipulation works because it operates at the semantic level (the problem domain) rather than requiring translation into syntactic commands. This reduces cognitive load by eliminating the translation step.

When direct manipulation is inappropriate:

Precise specification (typing "24pt" may be better than dragging)
Batch operations across many objects
Abstract operations without spatial metaphor
Expert users who prefer keyboard efficiency

让“计算机”隐去，使用户能够专注于他们的任务。

核心特性：

始终可见且可访问的目标对象
快速、渐进、可撤销的操作
即时反馈——操作与结果可见地关联
以问题域而非命令语法进行操作

语法/语义洞察： 直接操作之所以有效，是因为它在语义层面（问题域）运作，无需转换为语法命令。这通过消除转换步骤降低了认知负荷。

直接操作不适用的场景：

精确指定（输入“24pt”可能比拖拽更高效）
跨多个对象的批量操作
无空间隐喻的抽象操作
偏好键盘效率的专家用户

4. Reversibility Enables Exploration

4. 可撤销性激发探索欲

Reversibility is not a feature—it is a psychological safety mechanism that transforms a system from intimidating to inviting.

Undo depth: Support multi-step undo, not just single-step
Congruent inverses: If Cmd+B bolds, Cmd+B unbolds (same action reverses)
State visibility: Show that undo is available
Graceful degradation: When true undo isn't possible, confirm before destructive actions

可撤销性不是一个功能——它是一种心理安全机制，能将系统从令人畏惧转变为引人探索。

撤销深度： 支持多步撤销，而非仅单步撤销
一致的逆操作： 如果Cmd+B是加粗，那么Cmd+B也应该是取消加粗（同一操作实现撤销）
状态可见性： 显示撤销功能可用
优雅降级： 当无法实现真正的撤销时，在执行破坏性操作前进行确认

5. Error Prevention Over Error Handling

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

Errors are usually design failures, not user failures.

Slips (execution errors): User intends correctly but acts wrong

Prevent with constraints, defaults, confirmation for destructive actions

Mistakes (intention errors): User forms wrong goal or plan

Prevent with clear conceptual models, visible system state

Design forcing functions:

Interlocks: Require prerequisite actions
Lockins: Prevent stopping mid-action when dangerous
Lockouts: Prevent entering dangerous states

See references/cognitive-foundations.md for error psychology and prevention patterns.

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

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

通过约束、默认值、破坏性操作确认来预防

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

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

设计强制手段：

互锁：要求先执行前置操作
锁定：在危险场景下阻止中途停止操作
锁定：阻止进入危险状态

如需了解错误心理学和预防模式，请参阅 references/cognitive-foundations.md。

6. Feedback & System Status

6. 反馈与系统状态

Every action deserves acknowledgment. Users should never wonder "Did that work?"

Response Time	Perception	Design Response
<100ms	Instant	Direct result, no indicator
100ms–1s	Brief delay	Subtle state change (cursor, opacity)
1–10s	Noticeable wait	Spinner or determinate progress
>10s	Long operation	Progress bar, estimate, allow cancel

Optimistic UI: Update immediately, reconcile errors gracefully. But be honest—don't show success before confirming it for important actions.

每一次操作都应得到回应。用户永远不应该疑惑“刚才的操作生效了吗？”

响应时间	用户感知	设计响应
<100ms	即时	直接呈现结果，无需指示器
100ms–1s	短暂延迟	细微的状态变化（光标、透明度）
1–10s	明显等待	加载动画或确定进度条
>10s	长时间操作	进度条、预计时间、允许取消

乐观UI： 立即更新界面，优雅地调和错误。但要诚实——对于重要操作，不要在确认成功前就显示成功状态。

7. Modality: A Necessary Evil

7. 模态：必要之恶

Modes cause errors when users forget which mode they're in. But modes also isolate cognitive scope and can reduce errors when users would otherwise forget context.

Use modeless design (inspectors, inline editing) when:

User needs to see results while adjusting
Trial-and-error is expected
Context switching is frequent

Accept modality when:

Isolating scope reduces errors (complex multi-step wizards)
Action is destructive and confirmation prevents accidents
System needs exclusive attention (authentication)

If you must use modes:

Make current mode highly visible (not just status bar)
Ensure mode indicators are near the locus of attention
Provide quick escape (Escape key, clear exit path)

当用户忘记当前所处模式时，模态会引发错误。但模态也能隔离认知范围，在用户可能忘记上下文时减少错误。

使用非模态设计（检查器、内联编辑）的场景：

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

接受模态设计的场景：

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

如果必须使用模态：

让当前模式高度可见（不只是在状态栏）
确保模式指示器位于用户注意力的焦点区域
提供快速退出方式（Esc键、清晰的退出路径）

8. Meaning and Emotional Design

8. 意义与情感化设计

Interactions are not just efficient or inefficient—they carry meaning.

Visceral level: Immediate emotional response to appearance Behavioral level: Pleasure or frustration from use Reflective level: What the experience means, how it's remembered

A loading state that builds anticipation differs from one that frustrates—same mechanism, different meaning. Consider:

What should the user feel during this interaction?
What story does this interaction tell?
How does completing this action transform the user's situation?

See references/goals-and-context.md for dramatic structure and emotional design.

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

本能层： 对外观的即时情感反应 行为层： 使用过程中的愉悦或挫败感 反思层： 体验的意义，以及用户如何记忆这段体验

一个能引发期待的加载状态，与一个令人沮丧的加载状态截然不同——机制相同，但意义不同。请思考：

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

如需了解戏剧结构和情感化设计，请参阅 references/goals-and-context.md。

Decision Frameworks

决策框架

Activation Type

激活方式

Use Frequency	Recommended Activation	Rationale
Constant	Always visible (spatial)	Zero activation cost
Frequent	Keyboard shortcut + visible control	Fast for regulars, discoverable for others
Occasional	Menu or command palette	Saves space, still findable
Rare/Dangerous	Menu only, possibly nested	Prevents accidents

使用频率	推荐激活方式	理由
持续使用	始终可见（空间化）	零激活成本
频繁使用	键盘快捷键 + 可见控件	对常客快速，对新用户可发现
偶尔使用	菜单或命令面板	节省空间，仍可找到
极少使用/危险操作	仅菜单，可能嵌套	防止意外

When to Animate

何时使用动画

Animation serves purposes—it is not decoration.

Animate when:

Maintaining object constancy during transitions
Communicating causality (this caused that)
Reducing change blindness
Conveying emotional tone appropriate to context

Don't animate when:

User performs action habitually (animation becomes excise)
Speed is critical (expert workflows)
User has indicated reduced motion preference
Animation would obscure rather than clarify

See references/animation-timing.md for timing, curves, and emotional qualities.

动画是为了实现特定目的——而非装饰。

使用动画的场景：

在过渡过程中保持对象恒常性
传达因果关系（这个操作导致了那个结果）
减少变化盲视
传达符合上下文的情感基调

不使用动画的场景：

用户习惯性执行操作（动画成为无用功）
速度至关重要（专家工作流）
用户已开启减少动效偏好
动画会模糊而非澄清信息

如需了解动画的时间、曲线和情感特质，请参阅 references/animation-timing.md。

Friction: Eliminate or Leverage?

摩擦：消除还是利用？

Not all friction is bad. Distinguish:

Excise (eliminate): Work that doesn't serve user's goal

Navigating to buried menus
Re-entering information the system knows
Waiting for unnecessary animations
Confirming non-destructive actions

Productive friction (consider keeping):

Confirmation before irreversible actions
Deliberate pacing that prevents rushed errors
Moments that build anticipation or mark significance
Resistance that indicates "this matters"

并非所有摩擦都是坏事。区分以下两种摩擦：

无用功（消除）： 对用户目标达成无帮助的工作

导航到深层菜单
重新输入系统已有的信息
等待不必要的动画
确认非破坏性操作

有益摩擦（考虑保留）：

不可逆操作前的确认
防止仓促出错的刻意节奏
引发期待或凸显重要性的时刻
表明“此事重要”的阻力

Input & Physicality

输入与物理特性

The device shapes the interaction. A finger on glass is not a stylus is not a mouse.

设备会塑造交互方式。玻璃上的手指、手写笔和鼠标的交互体验截然不同。

Touch Targets

触摸目标

Platform	Minimum	Comfortable
iOS	44×44pt	48pt+
Android	48×48dp	56dp+
Web (touch)	44×44px	48px+

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

Gesture Vocabulary

手势词汇

Gesture	Use	Considerations
Tap	Primary action	Clear affordance required
Long-press	Secondary/context	Needs discoverability hint
Swipe	Reveal, delete, navigate	Always provide undo; don't hide primary actions
Pinch	Zoom	Maintain focus under fingers

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

Two-Handed Interaction

双手交互

When designing for tablets or considering desktop power users:

Non-dominant hand: coarse positioning, context setting
Dominant hand: fine manipulation, action
Consider: Can both hands be usefully engaged?

See references/input-and-physicality.md for device-specific patterns and haptics.

在为平板设计或考虑桌面高级用户时：

非惯用手：粗略定位、设置上下文
惯用手：精细操作、执行动作
思考：双手能否都被有效利用？

如需了解设备特定模式和触觉反馈，请参阅 references/input-and-physicality.md。

Platform Considerations

平台考量

Web

Focus management in SPAs (trap in modals, restore on close)
Respect
```
prefers-reduced-motion
```
Design for touch AND mouse—avoid hover-only interactions
Keyboard navigation for all interactive elements

SPA中的焦点管理（模态框中锁定焦点，关闭后恢复）
尊重
```
prefers-reduced-motion
```
设置
为触摸和鼠标设计——避免仅悬停的交互
所有交互元素支持键盘导航

iOS

Respect system gestures and scroll physics
Support Dynamic Type (test at largest sizes)
Haptic feedback for significant moments
VoiceOver with proper traits

尊重系统手势和滚动物理特性
支持动态字体（在最大尺寸下测试）
重要时刻提供触觉反馈
配合VoiceOver设置正确的特性

Android

Material motion principles
Predictive back gesture (Android 14+)
Edge-to-edge with proper insets
TalkBack support

Material动效原则
预测性返回手势（Android 14+）
全屏显示并设置正确的内边距
支持TalkBack

Desktop

桌面

Keyboard shortcuts with discoverability
Multi-window state management
Trackpad gestures where appropriate
High information density options for power users

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

Anti-Patterns

反模式

Breaking Direct Manipulation

打破直接操作

❌ Modal dialog with Preview button ✓ Live preview as user adjusts

❌ Must click Apply to see changes ✓ Changes visible immediately, undo available

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

❌ 必须点击应用才能查看更改 ✓ 更改即时可见，支持撤销

Hidden State

隐藏状态

❌ Current mode only in status bar ✓ Mode visible at locus of attention

❌ Unsaved changes with no indicator ✓ Clear dirty state (title, dot, changed button)

❌ 当前模式仅在状态栏显示 ✓ 模式在用户注意力焦点区域可见

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

Excise Accumulation

无用功累积

❌ Confirmation for every action ✓ Undo support; confirm only destructive/irreversible

❌ Animation that user must wait through ✓ Animation user can interrupt or that doesn't block

❌ 每次操作都需要确认 ✓ 支持撤销；仅对破坏性/不可逆操作进行确认

❌ 用户必须等待的动画 ✓ 用户可中断或不阻塞操作的动画

Cognitive Overload

认知过载

❌ All options visible at once ✓ Progressive disclosure based on task stage

❌ Error messages that blame user ✓ Clear explanation + recovery path

❌ 所有选项同时可见 ✓ 根据任务阶段逐步展示

❌ 指责用户的错误提示 ✓ 清晰的解释 + 恢复路径

Reference Files

参考文件

Load these as needed for detailed guidance:

references/goals-and-context.md — User goals, personas, dramatic structure, emotional design
references/cognitive-foundations.md — Mental models, error psychology, measurement approaches
references/input-and-physicality.md — Input devices, haptics, two-handed interaction, sketching
references/component-patterns.md — Detailed patterns for forms, modals, menus, etc.
references/animation-timing.md — Timing, easing, springs, emotional qualities
references/accessibility-patterns.md — ARIA, focus management, screen readers

按需加载以下文件获取详细指导：

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、焦点管理、屏幕阅读器

Theoretical Foundations

理论基础

Direct Manipulation (Shneiderman): Visibility, reversibility, immediate feedback. See references/direct-manipulation.md
Instrumental Interaction (Beaudouin-Lafon): Tools mediating user-object relationship; degrees of indirection, integration, compatibility. See references/instrumental-interaction.md
Goal-Directed Design (Cooper): Personas, perpetual intermediates, eliminating excise
Emotional Design (Norman): Visceral, behavioral, reflective levels
Computers as Theatre (Laurel): Dramatic structure, meaning, engagement

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