无障碍体验

移动端触控目标:取消、全屏和关闭按钮不能小到点不中

为小图标按钮提供至少 44×44 CSS px 命中区、合理间距、安全区和按压反馈,处理缩放观看与边缘手势冲突。

工程上最危险的不是完全不可用,而是在理想环境里正常、进入真实网络和真实数据量后悄悄失去边界。 视觉图标可以 16 px,但交互 hit box 应更大且不与相邻危险操作重叠。移动端边缘和刘海还需 env(safe-area-inset-*)。

无障碍不是发布前补一组 aria 属性,而是让键盘、屏幕阅读器、缩放、减弱动态和高对比度用户完成同一任务闭环,并在错误后找得到下一步。

工程边界与取舍

实现之前先列出不可违反的不变量,再为性能与体验留出调节参数。参数可以灰度,身份、权限和终态规则不能在运行时随意漂移。

  • 按钮用 padding 扩大真实元素而非伪元素,取消与重试保持间距,观看工具栏在缩放后仍固定于屏幕坐标并可单手操作。
  • 为状态写出唯一所有者、版本号和终态;任何回调只能修改自己创建的版本。
  • 资源释放是协议的一部分:定时器、句柄、队列和临时数据都要在终态中可重复清理。

“移动端触控目标:取消、全屏和关闭按钮不能小到点不中”的交付标准是正常路径可用、异常路径收敛、资源有界,并且用户能理解系统为何采用当前状态。 这样得到的不是演示代码,而是能解释、能降级、能回滚的生产能力。

生产环境会怎样出错

生产问题往往发生在两个正确动作同时到达时。需要逐条检查迟到消息、重复执行、资源耗尽和版本交叉,而不是只补当前堆栈显示的那一行。

  • 透明伪元素命中区可能覆盖旁边控件;缩放容器 transform 会让按钮跟视频一起变小或移出可视区。
  • 只修正界面状态而没有清理底层资源,下一次操作继承队列、锁或过期凭据并再次失败。
  • 没有背压或配额时,慢消费者会把内存、队列长度与尾延迟一起推高,最后拖累无关用户。

把测试跑成闭环

用已知输入和可控故障建立金样本,然后把线上低基数指标与测试结果对齐。只有指标能提前识别同类退化,验证才真正延伸到生产。

  1. 在 320 px 视口、刘海安全区、200% 系统字体和 4 倍视频缩放下用触点网格验证命中、重叠与误触率。
  2. 用乱序、重复和延迟消息驱动状态机,确认旧版本被丢弃且显式停止不会被自动恢复覆盖。
  3. 对日志和埋点做字段白名单检查,证明内容载荷、密钥、完整 IP 与用户可识别信息不会离开设备。

最终结果应同时满足正确性、可恢复性和可解释性。任何一项只能依赖刷新页面或工程师猜测,都说明协议闭环仍不完整。

把方法变成一次真实连接

打开 uCopy,让两台设备在浏览器里安全连接并开始传输。

开始免费使用