当动画不止炫技：无障碍特效让设计被所有人看见

　　跟人吵架。上周三，客户在会议室里把平板倒扣在桌上——“你们加那个‘渐隐入场’，我妈说她点不进去，我就试了，真点不进去。”我盯着他拇指在屏上划了三次，没抬起来。当时空调滴水，嗒、嗒、嗒，打在机柜散热格栅上，像秒针卡顿。他左手边那盒黄焖鸡还没拆封，汤汁从塑料盒缝里渗出来，在会议桌贴膜上晕开一小片油亮的椭圆。

文章配图，仅供参考

　　优胜劣汰？对。不是道德筛选，是物理筛选。动画一加，不兼容的系统直接不触发状态变更；用户没点中，页面就停在loading态；加载失败不报错，只留个空div在那儿喘气。去年我们上线一个轮播图组件，带视差滚动+自动播放+暂停hover——结果上线第四天，某残联合作方发来一份纯文本截图：八张图，全是“图片加载中”。我翻commit记录，发现是@keyframes里用了will-change: transform，而某个Android车机系统的WebView根本没实现该属性，直接跳过整个animation block。那个版本号？我说不准。但那个车机厂商的UI组长，姓陈，戴黑框眼镜，说话时总爱用食指戳自己左眉骨，戳一下，眨一次眼。

　　那天下午四点十七分，窗外开始下雨。不是那种淅淅沥沥的，是突然砸下来的，玻璃上立刻爬满水痕，把对面写字楼LED屏的字全揉成光斑。我们三个蹲在测试间门口，一人盯一台设备：小张用JAWS读导航栏，老周连着Xcode跑VoiceOver模拟器，我拿台Pixel手动切高对比度模式。没人说话。只有机房通风口嗡嗡响，低频，持续，震得不锈钢窗框微颤。我摸出手机想查MDN兼容性表，屏幕刚亮，弹出一条微信——是我妈发来的，一张照片，她手写的字：“你爸昨天按错三次关机键，说那个圈圈转太快，他手跟不上。”

　　所以现在我把所有动效都写两遍。一遍给GPU，一遍给DOM。.animate()？先判断window.matchMedia('(prefers-reduced-motion: reduce)').matches。JS里起timer？得包一层requestIdleCallback兜底。但这不是重点。重点是——我敢打包票：只要动效逻辑里出现“同步触发动画”这个念头，你就已经输了。因为真实世界里没有“同步”，只有先后、卡顿、跳帧、降级、静音、跳过、忽略、重置。有个项目，我们给按钮加了300ms的scale-in，结果某国产学习机固件里，CSS transition-duration会被截断成“30ms”，整套交互动画压缩成半帧——用户点下去，按钮只抖了一下，像被蚊子叮了。

　　上周五验收，客户又来了。这次带了她妈。老太太坐我右手边，布鞋踩着地板发出闷响，每走一步，鞋后跟就翘起一点，磨出细小的白粉。她拿平板的手有点抖，但点得极准。我们演示新方案：悬停消失→改为点击展开；自动轮播→改为人手滑动+大间距+语音播报当前项；缩放过渡→改成离散的step-end切换。她试到第三页，突然抬头问：“这个字变大，是不是要按住不放？”我说不是，轻点就行。她点点头，又点了两次，然后笑了：“比我那个扫地机器人听话。”她笑的时候，左耳助听器的指示灯一闪一闪，绿的，很慢。

　　我桌上还摆着去年做的那份“无障碍动效规范V1.2”，封面底下压着张发票——打印机租赁费，日期是一年前。其实V2.0草案早就写完了，但一直没走完评审流程。因为市场部同事说“客户看不懂‘reduced motion’这个词”，法务又卡在一句“本规范不构成法律义务”的措辞上。今天早上我撕掉了前两页。撕得挺用力，纸边毛了。现在它就躺在碎纸机旁边，和半块冷掉的提拉米苏一起。奶油糊在纸角上，像一小片沼泽。

　　哦对，刚才说到那个车机项目——后来我们放弃了动画，改用静态卡片+箭头按钮+语音反馈。但测试时发现，语音播报延迟太高，用户等两秒才听到“第一页”，手已经划到第三张了。最后解决方案？在每张卡片右下角加了两个固定位置的SVG小图标：一个喇叭，一个暂停。点击喇叭，立刻播；长按暂停，整组卡片冻结。没动画，但有反馈。这个，我敢打包票，管用。

　　明早九点，我要去教设计组新人怎么用Chrome的Animation Inspector拖慢动画速度——但不许用“减速”这个词，得说“拆帧”。得让他们亲眼看见，那些自以为流畅的500ms淡入，在某些机器上就是一顿一顿地吐像素。要不要顺便把楼下咖啡机修一下？它最近出杯时总卡三秒，然后哗啦一声全倒出来。也不知道算不算一种无障碍提醒。

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!