轉載自 UI中國 文中的動效就是動畫效果的意思，我們程序員還是喜歡直接點的翻譯。

一、真實的動效

（如有錯誤請指正）

首先，需要充分理解物質是有形的，繼而才能從容處理物體的運動。觀察物體的運動，我們可以估量出物體的輕重、靈活性、大小尺寸。在Material Design的世界中，動效不僅僅因為美學意義而存才，同時是為了構建有意義的空間關系、凸顯功能、維系整個系統的一致性。

 

質量和重量

 

物理形體具有質量，當受到外力驅使時能夠運動。因此，物體不能突然開始或結束運動。突然開始運動或突然結束運動的動效是生硬的，顯得不自然，無法符合用戶的預期，也無法取悅用戶。

 

最佳案例

 

Material Design中動效設計的關鍵是保證物體運動的物理感，同時不犧牲物體運動的優雅感、簡約感、美感，讓物體的運動充滿魔力，打造無縫式的用戶體驗。下面是一些動效設計規范，通過這些規范，可以理解如何用動效展示理念。

 

應該：

 

靈活的加速、溫和的減速，這樣的動效讓用戶感到自然且愉悅。

 

不應該:

 

線性的運動讓人感到機械生硬。觀察運動曲線，我們可以看到在運動開始和結尾處，運動速率突然的改變，這讓人感到非常的突兀、不真實。

 

特殊案例：進場、退場

 

當物體進場時，確保物體進場時處于最大速率。這樣的運動便顯得非常自然：因為物體在進場前便開始了運動，而不是進場時才開始運動。同樣的，當物體退場時，要確保物體處于最大速率，而不是減速。在進場時緩入，在退場時緩出，這樣用戶的注意力會集中在動效上。然而，大多數情況下，這不是設計者想要的結果。

 

應該：

 

進場和退場時的速率為最大速率，能夠營造出自信感十足的動效。

 

不應該：

在進場時加速，退場時減速。這樣用戶就會因速率的變化而分心。

 

適當調整

 

不是所有的物體都以同樣的方式運動。輕量化/小型物體可以很快的完成加速和減速，以為內他們質量很小，很小的外力就可以產生加速度的變化。大型/較重的物體需要更多的時間加速，才能到達最大速度。我們需要思考一下這些物理規律應該如何應用到UI元素上，并思考用何種運動方式表達設計。

 

二、迅捷響應交互行為

動效的迅捷反饋，可以讓用戶充滿信任感和愉悅感。當用戶與應用交互時，所反饋的動效不但極具美感，符合物理邏輯，而且能夠愉悅用戶。反饋動效的設計必須深思熟慮且具有目的性，而不能隨性設計，反饋動效應溫和 ，不讓用戶分心。鼓勵用戶進一步探索應用：那么，我再點點這里試試呢

在material design中，應用應該具備迅捷反饋的動效，讓用戶充滿期待：

• 觸控、語音輸入、鍵盤、鼠標是首要考慮的輸入模式

• 盡管UI元素是有形的，但是在物理上被限制在了設備屏幕之內。視覺線索和動效提供的線索能夠在用戶和設備之間建立溝通的巧玲，讓用戶確認自己的輸入有效，繼而指引用戶操作。

能夠迅捷反饋交互行為的動效，可以將應用帶到新的高度：原來是根據用戶請求來呈遞信息，而現在，動效的加入，賦予了人機溝通以真實感。

案例

表面層反饋

物體本身的反饋

徑向效果

表面層反饋

根據所接收的輸入時間，系統立即在人機交互的“接觸點”做出視覺反饋，以告知用戶已經確認輸入：例如，指尖觸控的接觸點，語音輸入時的麥克風圖標中心，以及鍵盤輸入時的恰當區域。這一設計理念來自墨水隱喻：用筆在紙張上寫字時，筆與紙的接觸點立即出現墨跡。

 

能夠闡釋接觸點的核心視覺機制是：觸控漣漪效果。設備會根據觸摸事件，立即在接觸點做出視覺表達。可以很好地闡釋按壓效果和語音輸入時音量變化。

最佳案例

視覺反饋在特定的輸入點出現：例如手指與屏幕的接觸點，或是麥克風圖標處。

觸控漣漪-按壓/釋放

觸控漣漪-拉進/拉出

物體本身的反饋

除了表面墨水式的動效反饋，物體本身也可以根據交互行為做出反應。物體可以因觸控或點擊而上升，上升用來闡釋物體的激活狀態。用戶可以通過觸控或點擊來生成新物體或者變換已經存在的物體，或者通過拖動和撥動來直接處理物體。

最佳案例

以觸控點為原點的動效反饋

當因為用戶直接交互而生成新物體時，物體表面層的擴張動效應該從接觸點開始：

應該：

物體從觸控點開始出現，視覺上將這一元素和觸控點聯系到一起

不應該：

類似紙質的卡片從屏幕中央擴張，破壞了輸入和反饋的關系。

觸控導致物體上升

當一張卡片或一個單獨的元素被激活時，卡片應該上升，來暗示其激活狀態

徑向效果

在所有的用戶的交互行為中，輸入行為往往具備中心點：用戶通過點擊/觸控這一中心點，來表明他們的操作意圖。必須圍繞用戶的輸入中心點構建強有力的視覺聯系，讓用戶確認操作有效，無論是觸摸屏操作時的接觸點，或是語音輸入時的麥克風圖標，這都是輸入的中心點。要圍繞輸入中心點，根據距離，構建出操作的漣漪動效。

輸入都具備中心點，漣漪效果要過應該從觸控時接觸點，語音輸入的麥克風圖標，鍵盤輸入時特定的按鍵而展開。

注意中心點距離因素的影響，離中心點近的操作，操作反饋更明顯。構建操作的“漣漪效果”

 

三、有意義的轉場效果

對于用戶來說，很難弄清楚應該在應用的何處集中注意力，也很難搞清元素是如何從A點運動到B點的。審慎、精心設計的動效能夠高效引導用戶的視覺注意點，讓整體效果循序漸進，避免用戶因為元素重新排列或者布局改變而感到混淆。同時提升整體的美感和使用體驗。動效設計不應該僅僅美麗，而且還應該具備功能性目的。

案例

視覺連貫性

兩種不同視覺狀態的轉場應該平滑、看起來毫不費力，除此之外，要讓用戶感到明晰而不混淆。精心設計的轉場效果能夠讓用戶清楚的知道應用的哪一部分是重點。在轉場效果中，往往具備以下三類元素：

• 進場元素：無論是新生成的元素，或者是變換進入屏幕的元素，設計者需著重筆墨介紹一番新進場的元素。

• 退場元素：指的是在新場景下不復存在的元素，退場元素必須溫和、不突兀的退場。

• 共享元素：指的是從轉場開始到轉場結束都存在的元素，可以是一個圖標，也可以是點擊后放大的圖像。

注意

當需要設計動效時，需要考慮以下：

• 要考慮用戶的視覺聚焦，以及應該如何引導用戶。什么元素和動畫效果可以達成設計目標？怎樣利用進場元素、退場元素、分享元素來強調或者弱化轉場效果？

• 在設計界面時考慮轉場效果，并通過色彩和共享元素，來暗示不同的轉場狀態。

• 審慎添加動效，要讓運動的元素充滿愉悅感和明細感。

案例

應該：在具有層級關系的界面中，可以考慮轉場效果。例如上圖，進場的界面滑入，而點擊后的墨水效果漸隱。雖然全屏幕的滑動效果不是很令人滿意，但是比突兀的切換好。

不應該：不要生硬的切換，要避免突兀感，這種生硬的轉場讓用戶很難理解前一界面和現有界面的轉場關系。

富有層次的時間感。

在構建轉場效果時，要考慮哪些元素需要運動，他們的運動的持續時間又是多久，從何時開始，何時結束？確保動效能夠表達出信息層級。這樣用戶便可知道哪些元素最為重要，并且創建視覺軌跡

最重要的元素最先出現，最次要的最后出現，但是這并不是定式。轉場元素的運動要具備分明的時間感，整體流暢而不雜亂。

案例

 

應該：運動要錯開，富有層次感，來指引用戶的視覺軌跡

不應該：所有元素同時運動，沒有暗示出重點元素。如果所有元素同等重要，那么可以考慮將他們編組，共同構建更大范圍的動畫效果。

編排一致

所有在屏幕中進行轉場動效的元素，都必須要精心編排。所有元素的運動路徑必須富有運動感，并且要有序。雜亂的動效會讓人感到分心。精心編排動效的應用，甚至可以利用動效來指引用戶交互。當轉場效果秩序分明時，用戶能夠加深對應用的理解。他們不會因為動效而感到迷惑。

最佳案例

• 避免線性運動，除非是沿軸線的運動，或者多個元素一致朝某個點運動時

• 確保元素的運動要和整體轉場效果在物理規律上契合。多個元素運動時避免雜亂的運動感和重疊的運動軌跡。

• 考慮深度、層級關系

• 試著畫出屏幕上所有運動元素的運動軌跡，看看軌跡是否是美麗且足有有序的。并觀察運動軌跡是否清晰。

• 要保證進場元素和退場元素空間感的一致性。

案例

應該：通過有序的動效吸引用戶的注意

不應該：物體的進場和退場時運動方向非常隨機。因動效的無序、不一致而混淆用戶。

 

四、細節愉悅用戶

細節愉悅用戶

在應用中大大小小的元素都可以進行動效設計，無論是細膩的圖標小動效，或是整體的關鍵性轉場效果和交互動效。所有的元素緊密合作，一致構建出無縫的使用體驗，讓應用美麗而具功能性。

動效的最基本使用在于轉場動效，除了這種顯而易見的地方，應用還應該在一些小處愉悅用戶。比方說菜單圖標會因為點擊而變成箭頭：除了能夠提示用戶操作，而且能讓用戶感受到驚喜。用戶會關注這些小處的細節。