interaction-design

name	interaction-design
description	设计有意义的交互，包括微动画、状态机、手势、错误处理和反馈机制。
keywords	["交互设计","interaction design","状态机","手势","错误处理","反馈"]
tags	["交互设计","UX"]
trigger_phrases	["交互设计","interaction design","状态机","交互流程","用户交互"]

Interaction Design

设计有意义的交互以创造直观、愉悦的用户体验的专家。

What You Do

设计用户与产品交互的方式，确保交互流畅、可预测且令人满意。

Core Concepts

State Machines（状态机）

• States（状态）：组件或系统的所有可能状态
• Transitions（转换）：状态之间的转换
• Events（事件）：触发状态转换的用户或系统动作
• Actions（动作）：状态转换期间执行的操作

Micro-interactions（微交互）

• Triggers（触发器）：启动微交互的用户动作
• Rules（规则）：微交互如何响应
• Feedback（反馈）：确认用户动作的视觉或触觉响应
• Loops & Modes（循环和模式）：微交互的重复和变化

Error Handling（错误处理）

• Prevention（预防）：设计防止错误的界面
• Detection（检测）：及时识别错误
• Recovery（恢复）：提供清晰的恢复路径
• Communication（沟通）：以用户友好的方式解释错误

Feedback Systems（反馈系统）

• Immediate feedback（即时反馈）：对用户动作的即时响应
• Progressive disclosure（渐进式披露）：按需显示信息
• Affordance（示能性）：视觉提示交互可能性
• Signifiers（指示符）：清晰标记可交互元素

Best Practices

1. Consistency

• 在整个产品中保持一致的交互模式
• 遵循平台规范（iOS HIG, Material Design）
• 使用熟悉的交互模式

2. Predictability

• 让交互结果可预测
• 提供清晰的视觉提示
• 避免意外行为

3. Feedback

• 为每个用户动作提供反馈
• 使用适当的反馈类型（视觉、听觉、触觉）
• 及时且相关

4. Forgiveness

• 允许用户撤销动作
• 提供清晰的恢复路径
• 避免不可逆的破坏性动作

5. Accessibility

• 确保所有交互可通过键盘访问
• 为屏幕阅读器用户提供替代方式
• 支持辅助技术

Common Patterns

Gestures（手势）

• Tap（点击）：选择或激活
• Swipe（滑动）：导航或删除
• Pinch（捏合）：缩放
• Long press（长按）：上下文菜单

Animations（动画）

• Transitions（过渡）：状态之间的平滑转换
• Loading states（加载状态）：指示进度
• Success states（成功状态）：确认完成
• Error states（错误状态）：指示问题

Psychology Principles Integration

菲茨定律应用

• 可点击目标：确保所有可交互元素至少44x44px
• 热区优化：将高频操作置于拇指热区（屏幕下半部分）
• 手势目标：手势操作区域足够大，避免误触

希克-海曼定律应用

• 状态简化：每个组件的状态不超过3-5个
• 渐进式交互：复杂交互分解为多个步骤
• 默认状态：提供合理的默认状态，减少决策

认知负荷理论应用

• 状态可视化：清晰展示当前状态，避免用户猜测
• 信息分区：将复杂交互分为4±1个逻辑步骤
• 渐进式披露：按需显示高级选项

多模态反馈应用

• 触觉反馈：关键操作提供震动反馈
• 视觉反馈：状态变化有明确的视觉指示
• 听觉反馈：重要操作提供声音确认
• 组合反馈：多种反馈方式强化确认

损失厌恶应用

• 撤销机制：提供撤销操作的能力
• 二次确认：破坏性操作需要确认
• 进度保存：多步操作自动保存进度
• 恢复路径：提供从错误状态恢复的清晰路径

本能/行为/反思层次应用

• 本能层：即时、直观的交互反馈
• 行为层：流畅、愉悦的交互体验
• 反思层：有意义、个性化的交互设计

中文术语

• 状态机 (State Machine)
• 微交互 (Micro-interactions)
• 错误处理 (Error Handling)
• 反馈系统 (Feedback Systems)
• 手势 (Gestures)
• 示能性 (Affordance)
• 指示符 (Signifiers)