每一帧都完美

# 每一帧都完美 来源：https://tonsky.me/blog/every-frame-perfect/ 不久前我在读关于 Wayland 的文章，这句话让我印象深刻： > Wayland 的一个既定目标是“每一帧都完美 (https://wayland-book.com/protocol-design/design-patterns.html)”。 我认为这是我们都应该追求的目标。Wayland 谈论的是技术层面（现代 GPU 栈非常复杂，Wayland 试图夺回控制权），但这个理念也能应用于 UI。 经验法则是： 如果在任意时刻截取你的应用的屏幕截图，它必须看起来合理 为什么要关心每一帧？它建立信任。用户看不到代码，因此 UI 是判断应用质量的唯一途径。如果 UI 看起来很好，说明开发者有时间打磨它，也就意味着他们很可能花了相当的时间来优化代码。这是个启发式判断，但相当合理。 那么，在实践中这意味着什么？我可以想到几点： - 屏幕之间没有白色闪烁。 - 没有部分加载的内容。 - 内容加载时没有重布局。 - 内部一致。如果 UI 的一部分显示“有 1 个更新可用”，另一部分不应显示“正在检查更新……” - 精确的动画。 动画经常被遗忘。一个 UI 在起始和结束状态可能看起来很棒，但中间过程却很生硬。就像这样： 如果你觉得那里有些奇怪，确实有！看慢放版本： 现在应用我们的规则，在动画中间截取截图。这张看起来不对： 这张也不对： 这两帧都不是完美的。 让我们看另一个例子。Safari： 这里的占位符文本从中间移动，但光标从左位置开始动画： 这绝不是世界末日，但它确实让人感觉这两个组件彼此不同步。接下来会想：也许它们不是一起设计的？如果是这样，那么它们可能无法很好地协同工作。信任就是这样失去的。 这种不同步可能导致很多困惑。例如，在“照片”中，当在裁剪和调整模式之间切换时，图片立即就位，但裁剪边框是动画的： 这造成了一种*虚假*的感觉，让人觉得切换模式时某些东西在微妙地变化。你知道吗？我不希望我的 UI 给我虚假的感觉。我希望它是一个精确的工具，而不是一个动画玩具。 有时动画本应帮助你理解过渡，所以当它们反而让事情变得更难时就更加令人遗憾。跟随放大镜： YouTube 也是。他们有一个世界上最简单的任务：将一个矩形从一个位置移动到另一个位置！然而他们决定做一些非常奇怪的事情： 你能解释这个吗？这合理吗？ 可能是他们之前决定的 DOM 架构的技术限制。我把这种情况称为“技术超越了程序员”。但无论原因是什么，结果都是一帧不完美的画面。 有时动画被当作事后才考虑。顺其自然。然后我们得到这个： 观察细节很有趣： 所以，没错。请不仅关注起始和结束状态，还要关注中间的一切。*每一帧都很重要。* 最后，这是来自“预览”应用的一个毫无来由的缩放动画。保重！