高手洞察！為什么蘋果的動效設計每一幀都讓人愛不釋手（下篇）

對于更優秀的動效設計師來說，需要的不是教程，也不是規范，而是對優秀動效的深度思考方法。這部分內容超越了教程和規范，更有價值，不能錯過這樣的洞察。

在上一篇文章中已經講了幾個關鍵的點：隱喻、物理運動、滑動手勢、響應手勢、空間一致性、流體變形。今天這篇接著講其他一些關鍵點，包括：動效頻率、趣味性、快速定位、避免遮擋、關聯動作、菲茨定律、滾動交互。

一、動效頻率

作為一個設計師，我喜歡把一切東西都加上動效，為了讓物體耐看、創造視覺焦點和帶來愉悅感。但什么時候不該加動效，思考的卻不太多。

有時候，我們不給鼠標或鍵盤操作加動畫效果，用戶也不會覺得別扭。這是因為外部設備的輸入和屏幕上發生的事情本來就有點"脫節"。按鍵盤或點擊鼠標，感覺上沒那么直觀，更像是在操作機器。但是直接用手指觸摸屏幕就不一樣了,那感覺更加直接和自然。

命令菜單其實就是一個比較有代表性的例子。很多人會想給菜單加個淡入淡出的效果，讓它慢慢變清晰或者放大。這樣看起來挺酷的，對吧？

但如果你每天要用上百次這個菜單呢？剛開始可能覺得很炫，但用多了就煩了。就像你聽一首特別喜歡的歌，循環播放 100 遍后，可能就不那么喜歡了。

同理，看同一個動畫效果看多了，反而會讓你的大腦覺得累。它不再是幫助，反而成了負擔。（在高頻場景上，交互動效應該盡量簡單）

常用的東西，簡單點好。花哨的效果留給特殊場合更合適。

舉個例子：我在做一個書簽工具的時候，直覺上覺得給激活列表和添加、刪除列表元素加上動畫效果會很棒。

過了幾天，這些動畫開始讓我覺得有點拖沓。盡管我已經把動畫做得更快了，但在用鍵盤操作時，我還是覺得反應速度變慢了，好像要等很久。我最后去掉了核心交互中的動畫，頓時感覺操作速度快了很多。

在 macOS 上，右鍵菜單也是直接出現的，沒有任何動畫。這種操作每天要使用成千上萬次，幾乎沒有新鮮感，但頻率非常高。即使是鼠標操作，菜單直接出現也感覺非常合適，沒有動畫反而更好。

有趣的是，菜單消失時會有一個輕微的淡出效果。如果仔細觀察，選中的項目會短暫地閃爍一下強調色（粉紅色），這給用戶一種元素成功被選中的確認感。我猜測菜單淡出的效果讓這一過程顯得更加優雅和有意圖，而不是在閃爍后突然消失。（當有意圖時，需要動畫銜接，打開則不用，不用刻意告訴用戶已經打開了，因為實際上右鍵后的菜單就已經出現了。）

另一個很好的例子是 macOS 上的應用切換器，這個功能對那些經常用鍵盤的人來說簡直是神器。它一點花哨的動畫都沒有。你按快捷鍵,它立馬就出現，顯示所有正在運行的程序。簡單來說，就是"按下就動，想到就到"。

此外，如果按下 Command 和 Tab 鍵之間的時間間隔足夠短，之前的活動窗口會立即獲得焦點，而不會顯示菜單。按得快，跳得快，菜單都不用看，直接就到了!

二、趣味性

優秀的動效不一定非得完全實用。我們都上過數學課，要么咬著嘴唇，要么不停地按動鉛筆，計算著數字。這些行為被認為是“無意識小動作”，也就是那些看似可以幫助緩解壓力或提高注意力的重復性動作。盡管沒有科學研究支持這種說法，但無意識小動作確實感覺像是有意設計的一部分。

“無意識小動作”也可能是事后想到的，或者是一個意外的好處。然而，AirPods 的充電盒讓人玩起來特別有趣。如果認為這是一個巧合，那就太過寬容了。

蘋果鉛筆顯然是有意設計成可動的。鉛筆的尖端是不可擰的，這意味著它可以更換。奇怪的是，轉動筆尖和轉動筆身可以提供令人滿意的摩擦力，讓你在思考時隨意玩耍。

有一個非常神奇的例子，不知道是不是有意設計的，確實很酷的動畫。

三、快速定位

在 macOS 系統上，你可以通過搖動鼠標來快速找到指針。這種交互設計非常棒，因為它解決了人們在找不到鼠標指針時的挫敗感和自然反應，讓人感到貼心和方便。

在手機上瀏覽長篇內容時，我經常遇到類似的情況。我已經滾動到一半，突然想回去看看上面的內容，但又不太想往上滑，因為這樣會失去我現在的滾動位置和閱讀進度，這讓我感到有些不方便。

我做了一個小原型，雙擊滾動條可以為當前的滾動位置放一個標記。這樣我就能自由瀏覽頁面，并且能通過雙擊標記回到之前的位置。

這樣用起來就會比較自然，因為滾動條本來就可以交互。如果你不知道的話，長按滾動條可以讓它變得可拖動，這樣可以更快地滾動頁面。

這讓我想起我之前做的一個小地圖原型，靈感來自游戲中總能看到周圍環境的小地圖。為什么不為頁面導航設計一個類似的顯示界面呢？

四、避免遮擋

在手機屏上，有時候手指會遮擋屏幕上的內容，這樣就很難進行精確的操作。為了解決這個問題，界面通常會顯示手指下方的臨時視圖，讓你能更清楚地看到手指遮擋的部分。

例如，在 iOS 系統中，當你按下并拖動以移動文本光標時，屏幕上會出現一個放大鏡，顯示觸點上方的內容。不過，當手指移動向下，不再遮住光標時，放大鏡就會消失。

鍵盤上也有類似的細節。當你按下一個鍵時，屏幕上會出現這個鍵的放大圖像，這樣可以讓你確認已經正確識別了你的輸入。

有時候，鏡像模糊區域并不總是合理的。例如，滑塊可能很小，在拇指觸摸下會消失。這樣就保證了在離開滑塊并仍然按下時，拖動手勢不會取消：

雖然調整視頻播放位置主要是視覺操作，但當你在操作一個看不見的元素時，通常會感到很不舒服。

這是一個更明顯的例子，在這里了解菜單的內容是至關重要的：

五、關聯動作

我們一直在不斷打破人類與計算機之間的界限。觸摸輸入通過引入手勢和觸覺提升了這種關系。很快，應用將不再受限于固定的屏幕。

鍵盤、鼠標、觸摸和語音都是明確的輸入方式。當這些方式做到完美時，它們就像是我們自然的延伸。但是，最神奇的輸入方式其實是完全不需要輸入。當界面能根據上下文猜測你的意圖，而無需你明確指示時，這感覺真的很神奇。

例如，當你看向屏幕時，Apple 地圖會在不解鎖的情況下顯示導航路線。Apple 錢包在展示掃描通行證時會自動提高屏幕亮度。Spotify 則會在你開車時調整界面，使其更易于操作。

有些定制的 iOS 應用在打開應用切換器時會模糊應用的內容。起初我以為這只是為了提高性能，但后來發現這是為了有意保護可能敏感的數據，比如醫療記錄或銀行對賬單。

六、費茨定律

費茨定律指出，點擊一個目標所需的時間取決于目標的距離和大小。目標越大，離光標越近，點擊就越容易和快速。

操作系統利用屏幕邊緣的"神奇角落"，是因為這些角落的目標區域實際上是無限大的。什么意思呢？讓我舉個例子解釋一下：

在蘋果電腦的 macOS 系統中，你可以設置當鼠標指針移動到屏幕某個角落時會發生什么。比如說，你可以設置當鼠標移到屏幕左上角時，自動打開啟動臺（Launchpad，就是顯示所有應用程序圖標的界面）。

為什么說這個區域是"無限大"呢？因為當你想把鼠標移到左上角時，你只需要往那個方向快速移動鼠標就行了。即使你的動作不夠精確，鼠標最終也一定會停在那個角落，不會滑出屏幕。這就讓用戶很容易精確地觸發這些角落的功能，哪怕屏幕很大或者用戶操作不夠細致。

這種設計讓使用電腦變得更加方便和高效。

七、滾動交互

在大多數操作系統中，你可以滾動任何可滾動區域，即使窗口本身沒有處于活動狀態。這很方便，但有時會誤觸滾動其他窗口，這就不太理想了。

用蘋果鼠標時，我可以在一個窗口上滾動，然后把鼠標指針移動到另一個窗口上點擊或查找東西，而滾動操作不會影響到第二個窗口。這讓我感覺非常好。

不過，用傳統鼠標，第一次窗口的滾動會被第二個窗口打斷和接管。這種情況每天都發生，讓人真的很煩惱。

使用蘋果鼠標時，當你切換到另一個窗口時，滾動操作會被明確地取消。

像蘋果鼠標這樣的外接設備也讓桌面計算變得更直觀。除了可以像切換應用那樣滑動，它們還可以通過滾動直接調整滑塊，這一切都只需一個操作。

總結

對我來說，理解和表達為什么某個設計感覺對并不像設計一個感覺對的東西那樣直觀。但這兩者是密不可分的。其中一定有原因，可能是一個特定的動效曲線，也可能是更內在的東西，比如隱喻。

雖然憑直覺做出好設計比解釋為什么它好要容易，但努力去理解和解釋也很重要，因為這能讓我們在設計領域走得更遠，做出更好的作品。

歡迎關注作者的微信公眾號：「彩云譯設計」