每一帧都完美：UI细节如何决定用户信任

翻译：俄语

前段时间我在读关于 Wayland 的文章，有一句话让我印象深刻：

Wayland 的一个明确目标是“每一帧都完美无缺”。

我认为这也是我们每个人都应该追求的目标。Wayland 谈的是技术层面——现代 GPU 的软件栈非常复杂，而 Wayland 正在试图重新掌控它——但这一理念同样可以应用于用户界面。

一个简单的经验法则就是：

如果我在任何时候截取你的应用的屏幕截图，你都应该能清楚地解释我看到的内容。

编辑：之前这里写的是“……它必须说得通”，但这无法涵盖一些高级的动画技巧，比如拖影帧之类的情况。

为什么要关注每一帧？因为这能建立信任。用户看不到代码，所以用户界面是他们判断应用质量的唯一依据。如果界面看起来很精致，就意味着开发者花时间打磨过它，也意味着他们很可能投入了相当的时间来完善代码。

这是一种启发式方法，但也是合理的。

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

屏幕切换时没有白色闪烁。

没有部分内容加载不完整的情况。

内容加载过程中不会发生布局重排。

内部一致性。如果界面的一部分显示“有 1 个更新可用”，另一部分就不应显示“正在检查更新……”。

精确的动画效果。

动画常常被忽视。界面在起始和结束状态可能都很出色，但在过渡过程中却显得很卡顿。比如这样：

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

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

这样也不行：

这两帧都称不上完美。

再看一个例子：Safari：

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

这当然不算什么大问题，但它会让人感觉这两个元素之间不同步。进一步想：也许它们并不是一起设计的？如果是这样，那它们在一起时的表现可能也不会太好。

信任就是这样一点点流失的。

这种不同步还会带来很多困惑。比如在“照片”应用中，当你在裁剪和调整模式之间切换时，图片会立刻跳到新位置，而裁剪边框却是通过动画呈现的：

这就给人一种错觉——在两种模式切换时，画面似乎发生了细微的变化。可你知道吗？我不希望我的界面给我这种错觉。我希望它是一台精密的仪器，而不是一个会动的玩具。

有时候，动画本该帮助用户理解过渡，但如果反而让过渡更难懂，那就更令人遗憾了。跟着放大镜看：

YouTube 也是如此。他们的任务简单得不能再简单：把一个矩形从一个位置移到另一个位置！但他们却偏偏做得很奇怪：

你能解释这是怎么回事吗？这合理吗？

大概是因为他们早期就选择了某种 DOM 架构，而这种架构带来了技术上的限制吧。我把这类情况称为“技术反客为主”。但无论原因是什么，结果都是出现了不够完美的画面。

有时，动画干脆被当作事后才想到的东西，能怎么样就怎么样。于是我们就看到了这样的效果：

其中的细节甚至让人看得津津有味：

所以，是的。请不要只关注起始和结束状态，也要留意中间的每一个瞬间。每一帧都很重要。

最后留给大家一个来自“预览”应用的、毫无理由的缩放动画。保重！