译文：俄语

前段时间我在看关于 Wayland 的资料，有一句话让我印象深刻：

Wayland 的一个既定目标是“每一帧都完美”。

我觉得这是我们都应该追求的目标。Wayland 说的是技术层面的事（现代 GPU 栈非常复杂，而 Wayland 正试图夺回控制权），但这个理念同样适用于 UI。

经验法则是：

如果我在任意时刻给你的应用截一张图，你都应该能解释我看到了什么

补注：这里原来写的是“……，它必须是有意义的”，但那种说法没有考虑到拖影帧等高级动画技法。

为什么要在意每一帧？因为它能建立信任。用户看不到代码，所以 UI 是他们评判应用质量的唯一途径。如果 UI 看起来很精致，就说明开发者有时间去打磨它，也就意味着他们很可能花了差不多的功夫去打磨代码。这只是一种启发式判断，但合情合理。

那么，在实践中这意味着什么呢？我能想到几点：

• 界面切换时没有白屏闪烁。
• 没有只加载了一半的内容。
• 内容加载时不会重新排版。
• 内部保持一致。如果界面的一部分显示“有 1 个可用更新”，另一部分就不该显示“正在检查更新……”
• 动画精准。

动画常常被遗忘。UI 的起始和结束状态可能看起来都很棒，但中间过程却非常生硬卡顿。就像这样：

如果你觉得里面有些不对劲，那确实不对劲！看看慢放版本：

现在我们来套用刚才的规则，在动画中途截几张图。这张看起来就不对：

这张也不对：

这两帧都不完美。

再来看另一个例子，Safari：

这里的占位文本是从中间移开的，但光标却是从左侧位置开始做动画的：

这当然算不上什么大问题，但确实会让人觉得这两个组件彼此不同步。接着就会想：也许它们本来就不是一起设计的？如果是这样，那它们配合起来可能就不太好。信任就是这样流失的。

这种不同步会带来很多困惑。比如在“照片”应用里，在“裁剪”和“调整”模式之间切换时，图片会立刻跳到目标位置，但裁剪边框却是有动画的：

这会产生一种虚假的感觉，好像在模式切换时有什么东西发生了微妙的变化。可你知道吗？我不希望我的 UI 给我这种虚假的感觉。我希望它是精密的工具，而不是会动的玩具。

有时候动画本该帮助你理解过渡，所以当它们反而让理解变得更困难时，就更让人遗憾了。盯着那个放大镜看：

YouTube 也是如此。他们面对的是世界上最简单的任务：把一个矩形从一个位置移到另一个位置！可他们却做了件非常奇怪的事：

你能解释这是怎么回事吗？这说得通吗？

很可能是他们早期定下的 DOM 架构带来的技术限制。我把这种情况称为“技术把程序员给绕进去了”。但无论原因是什么，结果都是一帧不完美的画面。

有时候动画只是事后随便补上的。怎么动都行，听天由命。于是就有了这样的效果：

其中的细节值得细看：

所以，请不仅要关注起始和结束状态，也要关注中间的每一刻。每一帧都很重要。

最后，送上来自“预览”应用的一段无端缩放动画。保重！