“每一帧都完美”‘Every Frame Perfect’

翻译：俄语

前段时间我在阅读关于 Wayland 的资料，这句话让我印象深刻：

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

我认为这也是我们都应该追求的目标。Wayland 谈论的是技术层面的事情（现代 GPU 技术栈非常复杂，Wayland 正试图夺回控制权），但这同样适用于 UI。

经验法则是：

如果我在任意时刻对你的应用截图，你应该能解释我所看到的内容

编辑：这里原本写的是“……，它必须有意义”，但这没有考虑到诸如拖影帧等高级动画技术。

为什么要关注每一帧？因为这能建立信任。用户看不到代码，所以 UI 是他们判断应用质量的唯一途径。如果 UI 看起来很好，说明开发者有时间去打磨它，这也意味着他们可能花了同样多的时间去完善代码。这是一种启发式方法，但很合理。

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

动画往往最终被遗忘。一个 UI 可能在开始和结束状态都看起来很棒，但中间过程却非常卡顿。就像这样：

如果你觉得那里有些奇怪的地方，确实如此！看看放慢的版本：

现在让我们应用我们的规则，在动画中间截个图。这看起来不对劲：

这个也不对：

这两帧都不完美。

让我们看另一个例子。Safari：

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

这绝不是什么大不了的事，但它确实给人一种这两个组件彼此不同步的感觉。接下来的想法是：也许它们不是一起设计的？如果是这样，那它们可能无法很好地协同工作。信任就是这样流失的。

这种不同步会导致很多困惑。例如，在“照片”中，在“裁剪”和“调整”模式之间切换时，图片会立即就位，但裁剪边框却有动画效果：

这会造成一种错觉，让你觉得在模式之间切换时有什么微妙的东西发生了变化。你知道吗？我不希望我的 UI 给我带来错觉。我希望它是一个精确的工具，而不是一个动画玩具。

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

Youtube 也是如此。他们有着世界上最简单的任务：把一个矩形从一个位置移动到另一个位置！然而他们却决定做一些非常奇怪的事情：

你能解释一下这个吗？这合理吗？

这可能是他们早期决定的 DOM 架构的技术限制。我把这些情况称为“技术反噬了程序员”。但无论原因是什么，结果都是一帧不完美的画面。

有时候动画被当作事后补充而被忽略了。发生什么就是什么。然后我们得到了这个：

这些细节看起来很耐人寻味：

所以就是这样。请注意不仅关注开始和结束状态，还要关注中间的所有过程。每一帧都很重要。

最后，我留给你这个来自 Preview 应用的无端缩放动画。保重！