交互状态系统
目的
交互状态系统技能提供了一个用于定义UI组件如何响应用户输入的框架。它确保每个交互元素（按钮、链接、输入框、卡片）在鼠标、键盘和触摸等所有交互模式下，都能提供清晰、一致且无障碍的视觉反馈。该系统消除了开发者的歧义，并保证了最终用户获得高质量、响应迅速的体验。
使用场景
- 为设计系统或UI库定义组件行为。
- 审核现有站点是否存在“死”交互或无响应的交互。
- 确保焦点指示器、目标尺寸和交互提示符合WCAG 2.2标准。
- 标准化反馈模式（例如，所有破坏性操作的行为保持一致）。
何时不应使用
- 静态内容： 纯粹的展示性元素，没有点击、触摸或键盘交互。
- 实验性动效设计： 当目标是复杂、非标准的动画，而非功能性的状态反馈时。
- 标准浏览器默认样式： 如果项目严格依赖未定义样式的原生浏览器元素（尽管这在专业网站设计中很少见）。
输入
- 组件清单： 设计中所有交互元素的列表。
- 品牌色彩系统： 现有的主色、辅色和语义色彩阶。
- 无障碍目标： （例如，WCAG A级）决定各状态对比度的标准。
输出
- 状态矩阵： 一张综合映射表，显示每个组件的默认、悬停、聚焦、激活和禁用状态。
- 交互指南： 关于过渡、持续时间和缓动函数的规则。
- 无障碍规范： 对焦点环和纯键盘视觉提示的明确定义。
工作流程
1. 识别交互元素
根据交互类型对元素进行分类：
- 动作： 按钮、链接、菜单项。
- 输入： 文本字段、复选框、单选按钮、下拉选择框。
- 容器： 可点击的卡片、手风琴标题、标签页。
2. 定义状态调色板
确定视觉变量如何随状态变化：
- 悬停（鼠标）： 背景色、边框或高度变化（阴影）的轻微改变。
- 聚焦（键盘）： 高对比度的环或轮廓。必须与悬停状态有明显区别。
- 激活/按下： 视觉上的“压缩”效果（例如，轻微变暗或缩放），表明点击/触摸成功。
- 禁用： 降低不透明度并移除交互提示（光标变化）。
- 已访问（链接）： 已导航链接使用不同的颜色（对于内容丰富的网站至关重要）。
3. 建立聚焦逻辑
设计“全局焦点样式”，确保键盘用户始终知道他们的位置。
- 规则： 焦点指示器必须与背景以及组件的非聚焦状态之间的对比度至少达到3:1。
- 规则（WCAG 2.2 SC 2.4.11）： 焦点指示器绝不能完全被其他内容遮挡（例如，滚动时粘性头部遮盖了聚焦元素）。指示器的至少一部分必须始终保持可见。
4. 针对触摸进行优化（移动端）
由于触摸设备上不存在悬停状态：
- 确保
active状态提供即时反馈。 - 验证触摸目标是否符合WCAG 2.2 SC 2.5.8（最小24x24px），并在布局允许的情况下优先使用44x44px以便于拇指操作。
- 移除依赖悬停的信息（改为使用轻触时的工具提示或持久的标签）。
5. 记录过渡动画
定义状态变化的方式：
- 持续时间： 状态变化的标准时间为150毫秒到250毫秒。
- 缓动函数：
ease-in-out或cubic-bezier(0.4, 0, 0.2, 1)。
决策规则
- 状态持久性： 只要元素保持焦点，焦点指示器就必须保持可见。
- 提示优先： 交互元素在其默认状态下必须看起来“可点击”（例如，按钮应比不可点击的标签具有更强的视觉重量）。
- 避免仅靠颜色： 不要仅依靠颜色来表示状态（例如，错误状态应包含图标或边框粗细变化）。
- 即时反馈： 交互响应应感觉瞬间发生（开始时间小于100毫秒）。
约束条件
- 无障碍： 不能通过CSS
outline: none隐藏焦点指示器，除非提供了健壮的替代方案。 - 响应式： 状态必须在没有鼠标悬停的小屏幕上也能正常工作。
- 性能： 避免在频繁触发的状态（如悬停）上使用过重的盒子阴影或复杂滤镜，以防止布局抖动。
常见失败模式
- “隐形”焦点： 移除了浏览器的默认焦点环但没有替换，使得站点对键盘用户不可用。
- 仅悬停逻辑： 将关键信息或操作放在悬停状态下，导致在移动设备上无法访问。
- 模糊的激活状态： 点击时按钮没有变化，导致用户多次点击。
- 令人困惑的禁用状态： 看起来已禁用但实际可点击的元素，反之亦然。
验证标准
- 每个交互元素都有定义好的悬停、聚焦和激活状态。
- 焦点指示器满足3:1的对比度要求，并且永远不会被其他内容完全遮挡（WCAG 2.2 SC 2.4.11）。
- 触摸目标至少达到24x24px（WCAG 2.2 SC 2.5.8），44x44px为佳。
- 没有关键信息被隐藏在仅悬停的交互之后。
- 禁用状态在视觉上清晰可辨，并应用了
pointer-events: none（或等效逻辑）。 - 系统包含清晰的过渡/动画指南。