每一帧都应当完美
文章摘要
作者借鉴 Wayland 的设计理念,提出了一条衡量界面动画质量的原则:界面的每一帧都应当是可以解释、自洽的。换句话说,如果有人在任意时刻对你的应用截一张图,你都应该能说清楚屏幕上每个元素为什么在那里。中间帧和起始帧、结束帧一样值得认真对待,不应被当作可以糊弄过去的过渡。
作者认为,「帧帧完美」之所以重要,是因为它直接关系到用户对产品的信任。人们是透过界面来判断一款软件的品质的,精致连贯的视觉效果会让人相信背后的代码同样经过了细致的打磨;反之,错位、突兀、自相矛盾的动画会让人怀疑各个组件是否由互不协调的团队拼凑而成。
文章列举了若干常见问题:屏幕切换时的白屏闪烁、内容半加载状态、加载过程中的布局跳动、组件间状态不一致(例如 Safari 中光标与占位文字不同步),以及受 DOM 限制而产生的别扭动作(如 YouTube 中矩形的生硬位移)。作者的结论是:应当把界面当作一件精密仪器来对待,而不是一个随意摆弄的动画玩具。
HN 评论精华
- fasterik(866 赞):质疑文章前提,认为人眼对运动状态和静止状态的感知本就不同。电影刻意使用运动模糊和光学畸变,说明孤立看上去「不完美」的帧在实时动态语境中其实是有艺术价值的。
- mrandish:一方面认同运动模糊在感知上的合理性,另一方面批评当下 UX 设计滥用动画,认为很多动画只是赶时髦的噱头,并没有带来真正的体验改善。
- jchw:反驳电影类比,指出软件不同于电影,每个像素都是被刻意放置的;动画片用的是精心绘制的中间帧,而非偶然的错误,因此有 bug 的界面过渡和电影完全是两码事。
- ikesau:更进一步质疑很多场景下是否需要动画。认为不少过渡其实直接瞬时切换状态,体验同样好甚至更好。
- hamburglar:为 YouTube 的动画例子辩护,认为暂停逐帧分析没有意义,就像把音频切成片段单独听一样——中间状态本就不必在孤立时也说得通。
- mrob:认为动画会拖慢工具的效率,主张瞬时切换在熟练之后会变得「无感」,就像顺手的手工工具一样。