每一帧都应当完美

查看原文 HN 讨论

文章摘要

作者借鉴 Wayland 的设计理念,提出了一条衡量界面动画质量的原则:界面的每一帧都应当是可以解释、自洽的。换句话说,如果有人在任意时刻对你的应用截一张图,你都应该能说清楚屏幕上每个元素为什么在那里。中间帧和起始帧、结束帧一样值得认真对待,不应被当作可以糊弄过去的过渡。

作者认为,「帧帧完美」之所以重要,是因为它直接关系到用户对产品的信任。人们是透过界面来判断一款软件的品质的,精致连贯的视觉效果会让人相信背后的代码同样经过了细致的打磨;反之,错位、突兀、自相矛盾的动画会让人怀疑各个组件是否由互不协调的团队拼凑而成。

文章列举了若干常见问题:屏幕切换时的白屏闪烁、内容半加载状态、加载过程中的布局跳动、组件间状态不一致(例如 Safari 中光标与占位文字不同步),以及受 DOM 限制而产生的别扭动作(如 YouTube 中矩形的生硬位移)。作者的结论是:应当把界面当作一件精密仪器来对待,而不是一个随意摆弄的动画玩具。

HN 评论精华