編者按：本文由負責Material Design 動效設計的谷歌設計師撰寫，幫助大家深入理解動效的作用，才能做出更好的動效設計。

有時候現代科技產物使用起來非常復雜，但是其實「復雜」本身沒有好壞之分：不好是因為沒有處理好這個復雜所以產生了「混亂」，所以應該被批評的不是復雜而是因復雜所產生的混亂。——唐納德·諾曼

△ 上：大眾點評；馬蜂窩 下：IFTTT（個人助手類型應用）；Airbnb（愛彼迎）

一、界面密度高就混亂么？

現在我們都喜歡追求「極簡風格」， 設備/應用看起來越「干凈」越好，但是「干凈」的產品就一定好用嗎？真的未必，有時候反而更不知道該從何開始。盲目追從低密度界面，為了簡潔而簡潔也不是件好事。密集界面就是不好看并且難用么？ 在紐約待了八年，一直在用「干凈」的手機應用，我以為會非常不適應國內的 APP。然而留在北京期間使用國內的應用不但沒有覺得不知道該怎么用反而覺得咱們 APP 的功能強大而且上手很快，界面絕對不比「干凈」的界面差。

CJK（中國，韓國，日本）市場的 UI界面密度相對于歐美 UI界面密度會高很多，之前看過一個針對 CJK用戶的調查，里面有一條：「CJK用戶對密度較高的界面有非常高的忍耐度。」 之后跟一位中國用戶體驗研究員提過這個問題。「為什么中國的普遍 UI界面都如此的密集？」 答說：其實這不僅僅只是一種設計風格/文化上面的不一樣，有非常多的情況都是要滿足商業方面的需要。在相比頁面整潔、有設計感，把好一部分按鈕藏在「漢堡包圖標」里，能把更多的功能放在界面當中往往更為重要。 每一個按鈕的背后也都是一個團隊的努力，他們可不想因為界面的「整潔」而被放到漢堡包圖標或是擠到屏幕下方需要用戶往上滑動才能看見。這往往是一種商業決定，并非設計決定。

Complexity can be tamed, but it requires considerable effort to do it well. （復雜其實可以被駕馭的，但是駕馭復雜則需要用戶一定的努力。）——唐納德·諾曼

我個人覺得界面密度與「對設計重視與否」并沒有那么大的關系。當然絕對不排除 CJK 的用戶確實對于高密度的排版接受程度更高，但設計得要聽從商業要求這是合情合理的。 那我們作為界面/交互/動效設計師的職責則是去降低來自各種密度所產生的「混亂」，使得用戶能夠輕松駕馭界面。

動效設計作為用戶體驗里面一個極為重要但是時常又會被忽略的部分，有時候直到產品快要成型的時候才會被提起，加上動效之后很多交互的漏洞被展現了出來，但是又為時已晚。

很多設計師把動效理解為一種更高層面的設計，即為一個界面內的實體在即時的和非即時的事件之間的一種暫時性的行為。（其實就是過渡）——Isara Willenskomer

早期蘋果Mac 桌面文件夾的打開與關閉，注意在打開和關閉的過程中用戶可以清晰的分辨出窗口從屏幕的哪個位置來的。

動效其實對于用戶體驗這個大專業來講是一種新的學科，隨著我們的設備的硬件條件越來越好，動效才能被支持。動效里有一部分可以歸為傳統動畫，比如說圖標/插畫/載入動畫。 這些可以借鑒迪士尼的十二大動畫原則。但是另外一部分則是扎根于「交互」，Issara Willenskomer 用他在用戶體驗領域15年的經驗總結出了屬于 UX動效的12大原理。

二、動效通過四大塊增強可用性

1. 減少預判誤差

用戶在界面中看到一個組件的時候，他們會產生對這個物體是什么還有它的運動方式的預判。設計師應該減少的是「預判」與「現實」的差距。

2. 增加連貫性

這個可以涉及到單個界面和多個連環界面。 比如在單個界面（在日歷里面建立新的事件）內用戶是否可以毫不費力的導航以及多個連環界面（瀏覽商品 - 加入購物車 - 買單）的用戶體驗。

3. 強調敘述

在一個應用的導航過程中，經過一系列的操作，用戶會在腦海里形成該應用的信息結構框架，動效把這些環節緊緊相扣并幫助用戶加速學習該結構框架。

4. 清晰關系

這個關系可以指的是不同界面之間的以及一個界面內不同組件間的空間，主次關系。清晰的關系可以更有效率的引導用戶。

了解了以上四大塊兒后，下面讓我們來看一些例子。

三、幫助用戶導航，促生思維模式

最近我的同事 Jonas Naimark 在 Medium 上面發表了《Motion Doesn’t Have to Be Hard（動效不該難）》中總結得特別好，這里給大家總結兩點。我獲得他的允許把這個文章翻譯了，有興趣的同學可以戳標題查看全文。

1. 實實在在

大家注意到這兩邊前后大小變化沒有？ 他們是完全按照這個容器的大小而變的，這給予用戶一種「實實在在打開一個界面」的感覺。 這種細節其實對于「促生思維模式」是很有幫助的，因為它把一個容器（界面）里的內容跟容器本身緊密的聯系在了一起。再看下面的例子，這個例子又引出了下一話題。

2. 界面從哪兒來？

界面的來去對用戶熟悉這個應用不同界面的空間關系非常重要，新的界面從哪兒來就該回哪兒去，界面的進入以及出去的方向也直接暗示了激活該界面的按鈕的大概位置。設計這一塊的時候不一定要按照這個套路，可以研究屬于自己的運動模式，但是一定要注意運動模式的一致性。

小結：如果你的動效連幫助用戶導航都沒到位，圖標/過場動畫什么的都得往后排。

四、在設計交互模式的時候

We must design for the way people behave, not for how we would wish them to behave.（我們設計師不能只用我們自己的思維去給用戶設計交互模式，我們必須根據用戶們的行為去設計。）——唐納德·諾曼

1. 動效不只是過渡動畫，得多思考用戶的行為

我們在設計交互的時候往往都會以我們自己的思維出發，想著用戶在執行完一個動作之后就會執行下一個動作，那么在這個動作之后會出現這個過渡，下一個動作之后會出現下一個過渡。可是現實完全不是這樣，用戶到底會不會按照我們設計的交互套路走除非做用戶測試，否則根本沒法知道。

Motiongraphics 里面的過渡跟動效過渡不一樣，我們動畫師畫什么就是什么。 但在設計一個交互動作的同時，設計師需要思考有沒有在動作開始與結束這兩點之間發生其他事件的可能，并且利用動效來教育用戶同一個過渡可以通過不同的動作來激活。用戶手指的擺位，怎樣用起來更加方便，減少手指需要移動的距離等都應該被考慮到。 當然了，不是說每一個交互轉折點都得死磕，但是多思考思考用戶的行為絕對沒有壞處。

△ Safari關閉網頁的移動方向暗指用戶也可以通過向左滑動來關閉網頁

2. 顏色，音效還有震動

動效不只是視覺上的，因為動效其實就是機器跟用戶的溝通方式。 另外一點就是「小輸入，大輸出」。想想在蘋果手機上瀏覽網頁，只要輕輕在網頁往上一劃，就會滑出很長一段距離。在設置日期，調整時間的時候，手機的震動以及音效使得交互變得更加真實。

△ iOS在設定日期時間的時候，來自手機的音效和震動效果增加了這個交互的真實感。

△ 在谷歌Pixel 上面，用戶可以通過擠手機來激活谷歌智能助手，這不但使得交互變得方便，也一定程度上增加了互動的趣味，甚至讓機器「活」了起來。所以交互不是一定要都要在屏幕上發生。

3. 暫停，變向，返回，取消

上面提到了在設計一個交互動作的同時，設計師可以思考有沒有在動作開始到結束這兩點之間發生其他事件的可能，交互動作能不能中途轉向？（打開視頻查看完整操作）

這樣一個動作就可以解決很多問題，執行動作與決定下一步做什么可以同時進行，大大增加了交互效率，反之如果機器不能做到允許用戶在執行當前動作的同時做下一步決定的話，那么用戶在執行一個動作之前就要做出決定，因此降低了互動的效率。

裝置也應該時刻給用戶反應，接下來會發生什么。

當往下拉動照片的同時，白色的背景漸漸變得透明，暗示用戶照片如果這時候放手的話照片會被關閉。

4. 給符合現實的思維方式和運動方式

圖標到全屏和開關動畫所需的時長肯定不一樣，屏幕的大小也需要被考慮到。

Material 基線動效中，從一個從容器部件到全屏的動畫需要300毫秒的時長。

利用彈力友好的提示用戶已經到達了界面的末端。

直接操作，指尖與觸碰內容同時移動。

小結：想著怎樣設計交互模式加上動效能使得裝置與用戶時刻溝通，再通過不同的感官增加輸出，達到人機合一的境界。

五、制作Demo

1. 選擇用適當的參數

根據過渡的「大小」（動畫所占屏幕的大小）和復雜程度選擇適當的速度和時長。

雖然都是圖標動畫，但是左邊因為復雜程度較低，所以動畫時長只有100毫秒。而在右邊較為復雜的圖標動畫時長則是500毫秒。還有文章上面提到的從容器部件到全屏的動效時長為300毫秒。

2. 選擇正確的緩和效果

緩和效果建議使用非對稱型緩和，比如 Material基線緩和。

3. Demo最有效了，能互動的Demo更能說明問題

動效設計師可以實現來自交互設計師的設想，把靜態的界面變成動態Demo，交互流程一目了然。但是有時候交互設計師們會不自覺受到他們腦海里已經形成的交互模式的影響，所以如果你覺得還有什么要補充的話，應該主動提出。還可以結合不同的手勢，闡述過渡中所涉及到的所有可能的參數，位置，動量，按壓以及按壓面積等多做幾個交互流程方案，然后跟團隊一塊討論，也可以和交互設計師私底下討論（根據你的工作氛圍）。

有條件可以使用 Principle，Framer，Figma，Invision等設計工具直接制作可互動Demo，沒有什么能比真正使用更有說服力。

4. 在設計過渡當中注意尷尬幀的存在

It’s not the frame rate, it is what in the frame!（別只怪幀頻，幀里有啥才是最重要！）——《Design Fluid Interface》Apple WWDC 2018

更高的幀頻當然有幫助，但是當視覺變化太大的時候，人的眼睛一下子就能偵測到這種信息的缺失。

大家可以看到在右邊原型運動過程中很明顯有一處「空缺的地方」。

幀頻變成60幀之后確實有好轉，但是看起來還是有點不舒服，動效設計師應該注意的就是這個「不舒服的瞬間」，這種情況下可以通過調整時長或者利用疊加漸進淡出等來改善過渡。

△ 適當的時候可以直接把中間那個部分去掉。但是要確保這個部件前后的樣式保持一致，否則用戶容易混淆兩者是否是相同的部件。

新的內容會在過渡最快的時候進入界面。

小結：思考過渡模式的時候把腦子思維放開，思考各種用戶場景以及動效參數，制作給力Demo。注意過渡屏幕里面的細節，記住不是幀頻的問題，是幀中內容的問題。

六、與團隊合作的時候

說動效設計師是設計與實現的粘合劑一點也不為過，當我們在看一系列的靜態界面的時候，腦海里浮現的是各種交互流程，我們得理性。看到一個標志，一個人物的時候，得想如何把它們變活并且符合品牌風格，我們得感性。 當我們面對工程師們的時候，不但得有效的讓工程師明白一個過渡界面中發生了什么，還得在技術允許的范圍盡可能說服工程方滿足來自設計方的要求，我們要理性加感性。

時刻記住，你不是動畫師。用你制作的 Demo 來引發并參與交互設計師，界面設計師的討論。 平時也多跟工程師聊聊，了解當前技術上面的局限。因為實現一個動效會受到來自代碼框架的局限，還有產品本身的局限。有一些過渡不能被實現是因為進入的新界面來自第三方產品，這樣第一方沒有辦法控制第三方頁面的結構，所以無法完美的把雙方的界面串聯起來，那這個時候設計只能先屈服現實。有時候設計師跟工程師思維的不同，會導致他們有時候會想不到其他的實現方式。 曾經跟一位工程師聊過，我問實現一個組件的代碼的書寫方式只有一種么？ 答說不是，有很多種，但是最有效率的書寫方式就那么一種。但是思維方式不一樣不代表不好，而且「沒有主意是壞主意」，有時候甚至會因為你的提議工程師們會想到新的實現方式。你制作的 Demo 如果工程師們達不到，并不代表以后達不到，這也成為他們之后的目標。

總結

動效設計先要解決的問題就是增加應用的可用性，幫助用戶輕松駕馭應用。確保可用性之后，在不影響用戶體驗的前提下，天花亂墜的加特效吧。

簡易的導航，有效的過渡以及酷炫的動效最終都是服務用戶。成功的交互能使得「人機合一」，自然的交互往往成敗都在細節上，那么真正了解這些細節光參考網站上玲瑯滿目的素材與案例和學習動畫制做是不夠的，閱讀關于用戶體驗書籍學習理論知識是一大方面，最重要的是了解人本身。所以廣泛閱讀，對比閱讀，用戶體驗知識完全不用從用戶體驗的書中來。

你，是動效設計師，是一個產品的頂梁柱。一定要積極的參與到設計流程中，尤其是在設計產品初期，放開思維張開嘴。

希望以上的內容可以讓大家進一步的了解動效設計，給那些想學習動效設計但又摸不著頭腦的同學一點大方向，也給現在已經在崗位上的動效設計師們一些雞血。

歡迎關注作者的微信公眾號：「魔瓜」

「動效設計全面合集」

• 《超全面的 APP 動效設計必備知識總結》
• 《超全面！產品動效設計全方位科普手冊》
• 《基礎科普！最常見的四種移動端功能性動效全面總結》