交互设计技能（Interaction Design）
交互是一种承诺。每个按钮都在说“点击我，会有事情发生”。每个加载指示器都在说“请稍等，马上就好”。该技能确保这些承诺对每个人都能兑现，无论他们以何种方式与界面交互。
何时使用
设计组件状态（默认、悬停、激活、聚焦、禁用、错误） 创建过渡或动画 处理错误、空状态或边缘情况 设计加载和进度模式 定义反馈机制（成功、警告、错误确认） 设计手势或触摸交互
流程
步骤 1：映射所有状态
对于每个交互元素，定义：
状态、视觉、屏幕阅读器、键盘、触摸
默认：外观、播报、行为、行为 悬停：外观、不适用、不适用、不适用 聚焦：外观 + 聚焦环、播报、如何到达、不适用 激活/按下：外观、播报、触发键、手势 禁用：外观（不只是变灰）、播报 + 原因、是否跳过 Tab 顺序、行为 错误：外观 + 消息、播报 + 指引、焦点是否移动、行为 加载：外观、实时区域更新、交互是否被阻止、行为 成功：外观、播报、下一个焦点目标、行为
步骤 2：设计反馈模式
每个用户操作都值得一个响应。映射反馈：
即时反馈（< 100ms）： 交互时的视觉状态变化（按钮按下、开关翻转） 必须在不依赖颜色的情况下可感知
短等待反馈（100ms - 1s）： 加载指示器或骨架屏 ARIA 实时区域播报：“加载中……”
长等待反馈（> 1s）： 带预估时间或进度百分比的进度指示器 能够取消或离开 ARIA 实时区域按间隔更新
完成反馈： 清晰的成或错误状态 屏幕阅读器播报结果 逻辑上的下一个焦点目标
步骤 3：错误处理
错误不是边缘情况——它们是必然状态。为它们做设计：
预防优先——内联验证、清晰约束、合理默认值 清晰识别——用平实语言说明出了什么问题 具体指引——用户接下来应该做什么 可访问的传达——错误播报给屏幕阅读器，焦点移动到错误处，而不仅仅是颜色变化 恢复路径——保留用户输入，允许更正而无需从头开始
错误消息格式：[发生了什么] + [该怎么办]
正确：“该邮箱地址已被注册。请尝试登录，或使用其他邮箱。” 错误：“错误：无效输入”
步骤 4：动画与动效
动画要么服务于目的，要么不服务于任何人：
何时动画： 展示元素之间的关系（面板从其触发器滑入） 保持空间方向感（页面过渡显示方向） 提供反馈（成功操作上的轻微弹跳）
何时不动画： 无功能的装饰 任何延迟用户完成任务的动画 任何无限循环的动画
包容性动效： 尊重 prefers-reduced-motion——始终提供减少或无动效的替代方案 保持短时长：微交互 150-300ms，过渡 300-500ms 避免视差、自动播放视频、闪烁内容（根据 WCAG，每秒最多闪烁 3 次） 为任何超过 5 秒的动画提供暂停/停止控制
步骤 5：手势与输入设计
如果设计包含手势交互：
每个手势都必须有非手势替代方案（按钮、键盘快捷键） 滑动操作必须无需试错即可发现 拖放必须有键盘可访问的替代方案 触摸目标：最小 44x44px，目标之间有足够间距
步骤 6：记录交互规格
对于每个交互，记录：
触发（什么发起交互） 行为（逐步发生什么） 状态（元素经过的所有状态） 反馈（用户在每个阶段感知到什么） 可访问性（屏幕阅读器播报、键盘行为、动效减少）
集成
被调用：writing-design-plans（作为计划执行的一部分） 配对：ui-composition（视觉状态）、cognitive-accessibility（交互复杂度）、accessible-content（错误消息） 审查：designpowers-critique
危险信号
危险信号与响应：
组件只有默认和悬停状态 → 映射所有状态，包括聚焦、错误、加载、禁用 动画不支持 prefers-reduced-motion → 添加动效减少。这不是可选项 错误状态只改变颜色 → 添加文本、图标和屏幕阅读器播报 手势没有替代输入方式 → 添加键盘和/或按钮替代方案