譯文：俄文

前陣子我在讀關於 Wayland 的文章，有一句話讓我印象深刻：

Wayland 明言的目標之一是「每一幀都要完美」。

我認為這是我們都應該追求的目標。Wayland 談的是技術層面的事（現代的 GPU 堆疊非常複雜，Wayland 正試圖把主導權拿回來），但這個理念同樣可以套用到 UI 上。

經驗法則是：

如果我在任何時刻擷取你 App 的畫面，你都應該能解釋我看到的是什麼

編按：這裡原本寫的是「……，畫面必須合理」，但那樣的說法沒有涵蓋像 smear frames 這類進階的動畫手法。

為什麼要在乎每一幀？因為它能建立信任。使用者看不到程式碼，所以 UI 是他們判斷 App 品質的唯一方式。如果 UI 看起來很棒，就代表開發者有時間好好打磨它，也就代表他們很可能花了差不多的時間把程式碼整理好。這是一種捷思，但算是合理的捷思。

那麼，在實務上這代表什麼？我可以想到幾點：

• 畫面切換時不會出現白屏閃爍。
• 不會看到只載入一半的內容。
• 載入內容時版面不會重新排版跳動。
• 內部保持一致。如果 UI 的某個地方寫著「1 update available」，另一個地方就不該同時顯示「Checking for updates...」
• 動畫精準。

動畫常常被遺忘。UI 在起始與結束狀態看起來可能都很棒，但中間的過程卻非常卡頓。就像這樣：

如果你覺得這裡面有些怪怪的地方，的確就是有！來看看慢動作版本：

現在來套用我們的法則，在動畫中途截圖。這看起來就不對勁：

這張也不對：

這兩幀都不完美。

來看看另一個例子。Safari：

這裡的提示文字是從中間移過來，但游標卻是從左側的位置開始動畫：

雖然不是什麼天大的問題，但確實會讓人覺得這兩個元件彼此不同步。接著就會想：或許它們本來就不是一起設計的？如果是這樣，那它們可能也無法好好協作。信任感就是這樣流失的。

這種不同步會帶來很多困惑。舉例來說，在 Photos 裡，從裁切模式切換到調整模式時，照片會立刻定位完成，但裁切外框卻是用動畫移動的：

這會產生一種錯誤的感覺，好像在切換模式時有什麼東西微妙地改變了。而你知道嗎？我不希望我的 UI 給我錯誤的感覺。我希望它是精準的工具，而不是會動的玩具。

有時候動畫本來應該要幫助你理解轉場，結果反而讓它更難理解，就更令人遺憾了。跟著放大鏡看：

YouTube 也是一樣。他們有全世界最簡單的任務：把一個矩形從一個位置移到另一個位置！結果卻做出了非常奇怪的效果：

你能解釋這是什麼嗎？這合理嗎？

大概是他們早期決定的 DOM 架構所造成的技術限制。我把這種情況稱為「技術反過來耍了程式設計師」。但無論原因是什麼，結果就是出現了不完美的一幀。

有時候動畫只是事後才隨手補上。會變怎樣就怎樣，於是就變成這樣：

細節很值得細看：

總之，請不只留意起始與結束狀態，也要關注中間的每一刻。每一幀都很重要。

最後，送上 Preview App 裡這個無來由的縮放動畫。保重！