从键盘输入开始检查

在按钮示例中,Tab 聚焦按钮后,使用空格或 Enter 按下与松开,检查状态变化是否与指针操作一致。

局部字符扰动预览可以聚焦后使用 Enter 或空格观察局部变化。其他动效应按各自的触发规则检查,不应要求悬停效果在触屏上也依赖鼠标位置。

减少动态效果后,保留可理解的状态

TuneShape 的预览会响应系统 prefers-reduced-motion 偏好。按钮仍然切换按压状态,但可以直接到达对应状态;字符扰动示例会保留原文。

打开系统的减少动态效果设置后,再操作一次交互。检查内容是否仍可读、状态是否清楚、控件是否仍可用,而不只是确认动画消失。

检查结束方式与连续输入

一次按压可能通过松开、指针取消、失去焦点或切换窗口结束。检查按钮是否能回到正确状态,避免停留在一直按住的外观。

快速重复操作时,观察动画如何转向新的目标。导出实现后,还要在自己的组件生命周期、页面切换与内容加载条件下检查这些过程。

区分播放控制和配置参数

使用播放、暂停和复位观察过程。暂停后应能看清当前状态;复位帮助重新从同一份配置开始比较。

观察倍速用于观看,不属于保存的配置。需要保留修改时,导出 JSON;需要在另一个环境验收时,导出离线 HTML 或独立复刻工程。

放进项目后再走一次流程

  1. 检查真实内容

    换成实际标题、图片和文案,在窄屏下检查换行、裁切与触控目标。

  2. 检查焦点与输入

    用键盘完成操作,再测试真实设备的指针或触控输入,确认焦点有去处。

  3. 检查动态偏好

    在系统减少动态效果开关的两种状态下分别操作,保留清楚的终态。