从键盘输入开始检查
在按钮示例中,Tab 聚焦按钮后,使用空格或 Enter 按下与松开,检查状态变化是否与指针操作一致。
局部字符扰动预览可以聚焦后使用 Enter 或空格观察局部变化。其他动效应按各自的触发规则检查,不应要求悬停效果在触屏上也依赖鼠标位置。
减少动态效果后,保留可理解的状态
TuneShape 的预览会响应系统 prefers-reduced-motion 偏好。按钮仍然切换按压状态,但可以直接到达对应状态;字符扰动示例会保留原文。
打开系统的减少动态效果设置后,再操作一次交互。检查内容是否仍可读、状态是否清楚、控件是否仍可用,而不只是确认动画消失。
检查结束方式与连续输入
一次按压可能通过松开、指针取消、失去焦点或切换窗口结束。检查按钮是否能回到正确状态,避免停留在一直按住的外观。
快速重复操作时,观察动画如何转向新的目标。导出实现后,还要在自己的组件生命周期、页面切换与内容加载条件下检查这些过程。
区分播放控制和配置参数
使用播放、暂停和复位观察过程。暂停后应能看清当前状态;复位帮助重新从同一份配置开始比较。
观察倍速用于观看,不属于保存的配置。需要保留修改时,导出 JSON;需要在另一个环境验收时,导出离线 HTML 或独立复刻工程。
放进项目后再走一次流程
检查真实内容
换成实际标题、图片和文案,在窄屏下检查换行、裁切与触控目标。
检查焦点与输入
用键盘完成操作,再测试真实设备的指针或触控输入,确认焦点有去处。
检查动态偏好
在系统减少动态效果开关的两种状态下分别操作,保留清楚的终态。