# Interaction Design

> 设计有意义的交互，包括微动画、状态机、手势、错误处理和反馈机制。

- Skill: `wanghaisheng/interaction-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add wanghaisheng/interaction-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wanghaisheng/interaction-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: wanghaisheng (https://skillmd.com/u/wanghaisheng)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wanghaisheng/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)