每一帧都完美#

你有没有过这种体验：某个 App 用起来总觉得哪里不对，说不上来，但就是”不踏实”。

按钮点下去了，页面闪了一下白屏，内容才缓缓浮现。弹窗关闭时，背景模糊效果比弹窗本身慢了半拍。导航栏的占位文字从中间滑向左边，而光标却从左边开始动画。两支舞各自为政，谁也不等谁。

你未必会退出去给一星差评，但心里那根弦松了：这个产品，不太靠谱。

Niklaus Tonsky 把它叫做”每一帧都完美”,一个从 Wayland 设计理念里借来的标准。Wayland 说的是图形栈的技术控制权，Tonsky 把它搬到了 UI 设计里。规则只有一句话：

在你 App 运行的任意时刻截图，这张截图必须说得通。

信任是从每一个像素里长出来的#

用户看不到你的代码。他们怎么判断一个 App 的质量？UI 几乎是唯一的窗口。

如果界面看起来精致、顺滑、没有毛刺，用户会默认背后的代码也同样经过了打磨。这是一种粗糙的启发式判断，但人类每天都在用它。反过来说，如果动画中间帧出现了莫名其妙的错位，用户不会去责怪”那个动画没写好”。他们会直接觉得”这个 App 不靠谱”。

Tonsky 举了一个例子：Safari 的搜索栏。当你点进去准备输入时，占位文字从中间滑向左上角，而光标却从左上角的最左端开始闪烁。两样东西在同时运动，但显然不属于同一个系统。不是世界末日，但这种微妙的脱节感在用户脑子里种下一颗种子：这些组件可能不是一起设计的。既然不是一起设计的，那它们会不会一起出问题？

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

动画不是装饰，是语言的语法#

很多人把动画当作锦上添花的东西，有时间就做，没时间就拉倒。但 Tonsky 觉得，动画是界面语言的语法。语法错了，语义再准确也传达不出正确的意思。

Photos App 里有个让人纠结的例子：在裁剪和调整模式之间切换时，图片内容瞬间到位，但裁剪边框却慢慢悠悠地动画过去。结果就是中间那几帧里，边框还在路上，图片已经定格了，给人一种”画面有哪里变了”的错觉。

Tonsky 的评论很克制，但很有力：

我不希望我的 UI 给我虚假的感觉。我要它是一件精密的工具，不是一个会动的玩具。

YouTube 的迷你播放器动画更离谱。它只是要把一个矩形从屏幕底部移到角落，最基础的任务，结果中间帧里的矩形走了一条匪夷所思的路径：先是突然跳到屏幕中间，再缩小，再滑到角落。Tonsky 的推测是 DOM 架构的某种早期决策导致了这个问题，属于”技术反过来把程序员绕进去了”的经典案例。

但不管原因是什么，最终呈现给用户的，是一个让人困惑的中间帧。

每一帧都是承诺#

Tonsky 自己写了一个 ClojureScript UI 库，他对”帧”的敏感来自底层。他展示了一段非常细致的慢放视频：某个 App 的”保存”按钮被点击后，弹窗的各个元素以完全不同的节奏出现：图标先到，文字后到，背板的模糊效果又慢半拍。慢速播放时能看到元素在逐个”挤”出来，像是一群人从窄门里争先恐后地往外跑。

这种细节大多数用户不会注意到。但”注意到”和”被影响”是两回事。研究表明，即使意识层面没有捕捉到卡顿，人的生理反应，瞳孔变化、微表情，已经记录了不流畅。这种微妙的负面积累，最终会转化为”不知道为什么不爽”的离开。

反过来说，每一个完美的中间帧，都是一次无言的承诺：这个产品在意你。

精确是一种态度#

Tonsky 在文章结尾放了一个 Preview App 的缩放动画。没有解释，没有评论，就是那个动画本身。画面干净，过渡平滑，每一帧都经得起截图。

你盯着它看，会感受到一种安静的自洽。

这不是什么惊天动地的技术创新，也不是什么大版本的里程碑。这只是一个人在写代码的时候，停下来想了想：用户在这一秒看到的是什么？它合理吗？它能让人安心吗？

这种”停下来想想”的能力，也许就是好产品和还行产品之间那道看不见的线。

来源：Hacker News