Every Frame Perfect
Every Frame Perfect
Every Frame Perfect. A while ago I was reading about Wayland and this quote stuck with me: A stated goal of Wayland is “every frame is perfect”. And I think this is a goal we should all aspire to. “每一帧都完美”。前段时间我在阅读关于 Wayland 的资料时，这句话深深地印在了我的脑海里：Wayland 的既定目标是“每一帧都完美”。我认为这也是我们所有人都应该追求的目标。
Wayland is talking about the technical side of things (modern GPU stacks are very complex and Wayland is trying to take control back) but it could be applied to UI too. The rule of thumb is: If I take a screenshot of your app at any moment, it must make sense. Wayland 讨论的是技术层面（现代 GPU 堆栈非常复杂，而 Wayland 正试图夺回控制权），但这同样适用于用户界面（UI）。经验法则是：如果我在任何时刻对你的应用进行截图，它都必须是合乎逻辑的。
Why care about every frame? It builds trust. Users can’t see the code, so UI is the only way for them to judge the quality of the app. If UI looks good, that means developers had time to polish it, which means that they probably spent a comparable amount of time to iron out the code. It’s a heuristic, but a reasonable one. 为什么要关注每一帧？因为它能建立信任。用户无法看到代码，因此 UI 是他们判断应用质量的唯一途径。如果 UI 看起来很棒，意味着开发者有时间去打磨它，这也意味着他们很可能花费了相当多的时间来完善代码。这是一种启发式判断，但很合理。
Now, what does it mean in practice? I can think of a few things: No white flashes between screens. No partially loaded content. No relayout while content loads. Internally consistent. If one part of the UI says “1 update available”, another part should not say “Checking for updates…” 那么，在实践中这意味着什么呢？我想到了几点：页面切换时没有白屏闪烁；没有未加载完全的内容；内容加载时不会发生重新布局；内部逻辑一致。如果 UI 的一部分显示“有 1 个更新可用”，另一部分就不应该显示“正在检查更新……”。
Precise animations. Animations often end up being forgotten. A UI might look great in both start and end states but very janky in between. Like this: If you feel like there are weird things going on there, there are! Look at slowed down version: Now let’s apply our rule and take screenshots in the middle of the animation. This doesn’t look right: Neither does this: Both of these frames are not perfect. 精确的动画。动画往往容易被忽视。一个 UI 在起始和结束状态下可能看起来很棒，但在中间过程却非常卡顿。就像这样：如果你觉得那里有些奇怪，确实如此！看看放慢后的版本：现在让我们应用我们的规则，在动画中间进行截图。这看起来不对劲：这也不对劲：这两帧都不完美。
Let’s look at another example. Safari: Placeholder text here moves from the center but cursor animates from the left position: Not the end of the world by any means, but it does create a feeling that these two components are not in sync with each other. Next thought: maybe they weren’t designed together? If so, then they might not work well together. That’s how trust is lost. 让我们看另一个例子。Safari：占位符文本从中心移动，但光标却从左侧位置开始动画：这绝不是什么世界末日，但它确实让人感觉这两个组件没有同步。接下来的想法是：也许它们不是一起设计的？如果是这样，它们可能无法很好地协同工作。信任就是这样流失的。
This desynchronization can lead to a lot of confusion. For example, in Photos, when switching between Crop and Adjust mode, picture snaps into place immediately but the crop border is animated: This creates a false feeling that something subtly changes when you switch between modes. And you know what? I don’t want my UI to give me false feelings. I want it to be a precise instrument, not an animated toy. 这种不同步会导致很多困惑。例如，在“照片”应用中，在“裁剪”和“调整”模式之间切换时，图片会立即跳到相应位置，但裁剪边框却带有动画：这会产生一种错误的错觉，让人觉得切换模式时发生了微妙的变化。你知道吗？我不希望我的 UI 给我虚假的感受。我希望它是一个精确的工具，而不是一个动画玩具。
Sometimes animations are supposed to help you understand a transition, so it’s doubly sad when they make it harder. Follow the magnifying glass: Same with Youtube. They had the simplest task in the world: move a rectangle from one position to another! Yet they decided to do something very strange: Can you explain this? Does it make sense? Probably a technical limitation of the DOM architecture they decided earlier on. I call these situations “The technology has outsmarted the programmer”. But no matter the reason, the result is an imperfect frame. 有时动画本应帮助你理解过渡，所以当它们反而增加理解难度时，就更令人难过了。跟随放大镜看看：YouTube 也是如此。他们面临着世界上最简单的任务：将一个矩形从一个位置移动到另一个位置！然而他们却决定做一些非常奇怪的事情：你能解释一下吗？这合理吗？这可能是他们早期决定的 DOM 架构带来的技术限制。我称这种情况为“技术胜过了程序员”。但无论原因如何，结果就是不完美的画面。
Sometimes animations are left out as an afterthought. Whatever happens, happens. Then we get this: The details are fascinating to watch: So yeah. Please pay attention not only to the start and end states, but also to everything in between. Every frame matters. I’ll leave you with this unprovoked zoom animation from Preview app. Take care! 有时动画只是事后才想到的补充。随它去吧。然后我们就得到了这个：这些细节非常值得玩味：所以，是的。请不仅要关注起始和结束状态，还要关注中间的一切。每一帧都很重要。最后，留给大家这个来自“预览”应用的莫名其妙的缩放动画。保重！
June 13, 2026 2026年6月13日