對(duì)于更優(yōu)秀的動(dòng)效設(shè)計(jì)師來說，需要的不是教程，也不是規(guī)范，而是對(duì)優(yōu)秀動(dòng)效的深度思考方法。這部分內(nèi)容超越了教程和規(guī)范，更有價(jià)值，不能錯(cuò)過這樣的洞察。

在上一篇文章中已經(jīng)講了幾個(gè)關(guān)鍵的點(diǎn)：隱喻、物理運(yùn)動(dòng)、滑動(dòng)手勢、響應(yīng)手勢、空間一致性、流體變形。今天這篇接著講其他一些關(guān)鍵點(diǎn)，包括：動(dòng)效頻率、趣味性、快速定位、避免遮擋、關(guān)聯(lián)動(dòng)作、菲茨定律、滾動(dòng)交互。

一、動(dòng)效頻率

作為一個(gè)設(shè)計(jì)師，我喜歡把一切東西都加上動(dòng)效，為了讓物體耐看、創(chuàng)造視覺焦點(diǎn)和帶來愉悅感。但什么時(shí)候不該加動(dòng)效，思考的卻不太多。

有時(shí)候，我們不給鼠標(biāo)或鍵盤操作加動(dòng)畫效果，用戶也不會(huì)覺得別扭。這是因?yàn)橥獠吭O(shè)備的輸入和屏幕上發(fā)生的事情本來就有點(diǎn)"脫節(jié)"。按鍵盤或點(diǎn)擊鼠標(biāo)，感覺上沒那么直觀，更像是在操作機(jī)器。但是直接用手指觸摸屏幕就不一樣了,那感覺更加直接和自然。

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

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

同理，看同一個(gè)動(dòng)畫效果看多了，反而會(huì)讓你的大腦覺得累。它不再是幫助，反而成了負(fù)擔(dān)。（在高頻場景上，交互動(dòng)效應(yīng)該盡量簡單）

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

舉個(gè)例子：我在做一個(gè)書簽工具的時(shí)候，直覺上覺得給激活列表和添加、刪除列表元素加上動(dòng)畫效果會(huì)很棒。

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

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

有趣的是，菜單消失時(shí)會(huì)有一個(gè)輕微的淡出效果。如果仔細(xì)觀察，選中的項(xiàng)目會(huì)短暫地閃爍一下強(qiáng)調(diào)色（粉紅色），這給用戶一種元素成功被選中的確認(rèn)感。我猜測菜單淡出的效果讓這一過程顯得更加優(yōu)雅和有意圖，而不是在閃爍后突然消失。（當(dāng)有意圖時(shí)，需要?jiǎng)赢嬨暯?，打開則不用，不用刻意告訴用戶已經(jīng)打開了，因?yàn)閷?shí)際上右鍵后的菜單就已經(jīng)出現(xiàn)了。）

另一個(gè)很好的例子是 macOS 上的應(yīng)用切換器，這個(gè)功能對(duì)那些經(jīng)常用鍵盤的人來說簡直是神器。它一點(diǎn)花哨的動(dòng)畫都沒有。你按快捷鍵,它立馬就出現(xiàn)，顯示所有正在運(yùn)行的程序。簡單來說，就是"按下就動(dòng)，想到就到"。

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

二、趣味性

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

"無意識(shí)小動(dòng)作"也可能是事后想到的，或者是一個(gè)意外的好處。然而，AirPods 的充電盒讓人玩起來特別有趣。如果認(rèn)為這是一個(gè)巧合，那就太過寬容了。

蘋果鉛筆顯然是有意設(shè)計(jì)成可動(dòng)的。鉛筆的尖端是不可擰的，這意味著它可以更換。奇怪的是，轉(zhuǎn)動(dòng)筆尖和轉(zhuǎn)動(dòng)筆身可以提供令人滿意的摩擦力，讓你在思考時(shí)隨意玩耍。

有一個(gè)非常神奇的例子，不知道是不是有意設(shè)計(jì)的，確實(shí)很酷的動(dòng)畫。

三、快速定位

在 macOS 系統(tǒng)上，你可以通過搖動(dòng)鼠標(biāo)來快速找到指針。這種交互設(shè)計(jì)非常棒，因?yàn)樗鉀Q了人們在找不到鼠標(biāo)指針時(shí)的挫敗感和自然反應(yīng)，讓人感到貼心和方便。

在手機(jī)上瀏覽長篇內(nèi)容時(shí)，我經(jīng)常遇到類似的情況。我已經(jīng)滾動(dòng)到一半，突然想回去看看上面的內(nèi)容，但又不太想往上滑，因?yàn)檫@樣會(huì)失去我現(xiàn)在的滾動(dòng)位置和閱讀進(jìn)度，這讓我感到有些不方便。

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

這樣用起來就會(huì)比較自然，因?yàn)闈L動(dòng)條本來就可以交互。如果你不知道的話，長按滾動(dòng)條可以讓它變得可拖動(dòng)，這樣可以更快地滾動(dòng)頁面。

這讓我想起我之前做的一個(gè)小地圖原型，靈感來自游戲中總能看到周圍環(huán)境的小地圖。為什么不為頁面導(dǎo)航設(shè)計(jì)一個(gè)類似的顯示界面呢？

四、避免遮擋

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

例如，在 iOS 系統(tǒng)中，當(dāng)你按下并拖動(dòng)以移動(dòng)文本光標(biāo)時(shí)，屏幕上會(huì)出現(xiàn)一個(gè)放大鏡，顯示觸點(diǎn)上方的內(nèi)容。不過，當(dāng)手指移動(dòng)向下，不再遮住光標(biāo)時(shí)，放大鏡就會(huì)消失。

鍵盤上也有類似的細(xì)節(jié)。當(dāng)你按下一個(gè)鍵時(shí)，屏幕上會(huì)出現(xiàn)這個(gè)鍵的放大圖像，這樣可以讓你確認(rèn)已經(jīng)正確識(shí)別了你的輸入。

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

雖然調(diào)整視頻播放位置主要是視覺操作，但當(dāng)你在操作一個(gè)看不見的元素時(shí)，通常會(huì)感到很不舒服。

這是一個(gè)更明顯的例子，在這里了解菜單的內(nèi)容是至關(guān)重要的：

五、關(guān)聯(lián)動(dòng)作

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

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

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

有些定制的 iOS 應(yīng)用在打開應(yīng)用切換器時(shí)會(huì)模糊應(yīng)用的內(nèi)容。起初我以為這只是為了提高性能，但后來發(fā)現(xiàn)這是為了有意保護(hù)可能敏感的數(shù)據(jù)，比如醫(yī)療記錄或銀行對(duì)賬單。

六、費(fèi)茨定律

費(fèi)茨定律指出，點(diǎn)擊一個(gè)目標(biāo)所需的時(shí)間取決于目標(biāo)的距離和大小。目標(biāo)越大，離光標(biāo)越近，點(diǎn)擊就越容易和快速。

操作系統(tǒng)利用屏幕邊緣的"神奇角落"，是因?yàn)檫@些角落的目標(biāo)區(qū)域?qū)嶋H上是無限大的。什么意思呢？讓我舉個(gè)例子解釋一下：

在蘋果電腦的 macOS 系統(tǒng)中，你可以設(shè)置當(dāng)鼠標(biāo)指針移動(dòng)到屏幕某個(gè)角落時(shí)會(huì)發(fā)生什么。比如說，你可以設(shè)置當(dāng)鼠標(biāo)移到屏幕左上角時(shí)，自動(dòng)打開啟動(dòng)臺(tái)（Launchpad，就是顯示所有應(yīng)用程序圖標(biāo)的界面）。

為什么說這個(gè)區(qū)域是"無限大"呢？因?yàn)楫?dāng)你想把鼠標(biāo)移到左上角時(shí)，你只需要往那個(gè)方向快速移動(dòng)鼠標(biāo)就行了。即使你的動(dòng)作不夠精確，鼠標(biāo)最終也一定會(huì)停在那個(gè)角落，不會(huì)滑出屏幕。這就讓用戶很容易精確地觸發(fā)這些角落的功能，哪怕屏幕很大或者用戶操作不夠細(xì)致。

這種設(shè)計(jì)讓使用電腦變得更加方便和高效。

七、滾動(dòng)交互

在大多數(shù)操作系統(tǒng)中，你可以滾動(dòng)任何可滾動(dòng)區(qū)域，即使窗口本身沒有處于活動(dòng)狀態(tài)。這很方便，但有時(shí)會(huì)誤觸滾動(dòng)其他窗口，這就不太理想了。

用蘋果鼠標(biāo)時(shí)，我可以在一個(gè)窗口上滾動(dòng)，然后把鼠標(biāo)指針移動(dòng)到另一個(gè)窗口上點(diǎn)擊或查找東西，而滾動(dòng)操作不會(huì)影響到第二個(gè)窗口。這讓我感覺非常好。

不過，用傳統(tǒng)鼠標(biāo)，第一次窗口的滾動(dòng)會(huì)被第二個(gè)窗口打斷和接管。這種情況每天都發(fā)生，讓人真的很煩惱。

使用蘋果鼠標(biāo)時(shí)，當(dāng)你切換到另一個(gè)窗口時(shí)，滾動(dòng)操作會(huì)被明確地取消。

像蘋果鼠標(biāo)這樣的外接設(shè)備也讓桌面計(jì)算變得更直觀。除了可以像切換應(yīng)用那樣滑動(dòng)，它們還可以通過滾動(dòng)直接調(diào)整滑塊，這一切都只需一個(gè)操作。

總結(jié)

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

雖然憑直覺做出好設(shè)計(jì)比解釋為什么它好要容易，但努力去理解和解釋也很重要，因?yàn)檫@能讓我們在設(shè)計(jì)領(lǐng)域走得更遠(yuǎn)，做出更好的作品。

作者：彩云譯設(shè)計(jì)