功能性動效（functional animation），是指清晰的、有邏輯、有目的的交互動效。使用得當(dāng)可以有效的降低用戶的認(rèn)知負(fù)擔(dān)，提高對應(yīng)用的空間位置認(rèn)知，避免使用中的盲目性。

動效可以通過靈活變化（形狀、大小、位移、融合、重組等）使應(yīng)用的界面更加充滿活力。在應(yīng)用UI設(shè)計中，我們應(yīng)當(dāng)巧妙的設(shè)計好的功能性動效（functional animation），使用戶切換各個功能模塊/頁面的體驗更加流暢，更好地解釋一個界面里各元素的變化過程，更好地強(qiáng)化各個元素的層級結(jié)構(gòu)關(guān)系。

成功的切換動效設(shè)計包含以下6大要素：

1、處處響應(yīng)，及時反饋 （Responsive）

視覺反饋在UI設(shè)計中極為重要，因為它給了用戶的自然期望以一個及時而符合邏輯的確認(rèn)。比如，生活中，按一個按鈕，就可以點(diǎn)亮一盞燈；按門鈴，門鈴就會響……交互過程中，只要人做出了一個操作，系統(tǒng)就應(yīng)當(dāng)予以及時的反饋，這符合我們的習(xí)慣和對即將發(fā)生的事情的預(yù)期。

用戶界面應(yīng)當(dāng)根據(jù)用戶的觸發(fā)的操作快速給予反饋，同時，應(yīng)當(dāng)表明新的界面和觸發(fā)它產(chǎn)生的UI元素之間的聯(lián)系，讓人總是知道當(dāng)前的操作將會帶來什么變化。

對象對用戶的操作作出恰當(dāng)?shù)姆答仯c(diǎn)擊項目-展開詳情，切換自然，符合預(yù)期

2、關(guān)聯(lián)性（Associative）

觸發(fā)一個動作的UI控件，與即將出現(xiàn)的新面板之間，必須有邏輯上的緊密聯(lián)系。這樣才有助于用戶更好的理解這個操作。

下方是兩個對比的實(shí)例：

第一個例子：觸發(fā)的菜單和觸發(fā)它的UI控件隔了較遠(yuǎn)的距離，打破了觸發(fā)點(diǎn)和被觸發(fā)事件之間的聯(lián)系。

第二個例子：點(diǎn)擊菜單圖標(biāo)，菜單從緊貼它位置出現(xiàn)，從視覺格式塔心理學(xué)上，靠近的對象之間的聯(lián)系密切，而遠(yuǎn)離的對象之間的聯(lián)系薄弱。體現(xiàn)了它們之間的邏輯關(guān)聯(lián)性。

另一個是播放器"播放"按鈕和"暫停"按鈕的例子，這兩個按鈕是緊密關(guān)聯(lián)的，點(diǎn)擊其中一個按鈕則另一個按鈕立馬變?yōu)榭梢?。所以它們之間也需要具有關(guān)聯(lián)性的過渡變換。下圖很好的做到了這一點(diǎn)。

3、過渡流暢自然（Natural）

避免出乎意料的交互動效。任何元素的移動應(yīng)當(dāng)遵循現(xiàn)實(shí)中的物體運(yùn)動規(guī)律。在現(xiàn)實(shí)生活中，一個物體對象的加速或減速一般都受到外力的影響（重力、摩擦力等），而且運(yùn)動速度的變化是連續(xù)而非突變的，所以同樣的，在動效設(shè)計里，突然的/奇怪的運(yùn)動模式都會顯得不自然，喪失愉悅的使用體驗。

下方是一個不錯的實(shí)例：點(diǎn)擊小卡片-> 卡片和圓對象沿著一道平緩的圓弧進(jìn)行緩動，而非突然閃現(xiàn)，或者沿著奇怪的路徑（比如折線），同時卡片平緩的放大，切換自然舒服。

4、帶有目的性，而不是看心情（Intentional）

動效在交互中對視覺體驗有著顯著的影響，界面中的靜態(tài)圖片或者文字內(nèi)容的導(dǎo)向作用都沒有動效搶。因此，好的動效要正確恰當(dāng)?shù)刂敢脩暨M(jìn)行下一步操作。

第一次使用某個應(yīng)用的用戶一般并不能預(yù)測交互何時何地會怎么發(fā)生，但是恰當(dāng)?shù)膭有軒椭脩魧Ｗ?dāng)前的目標(biāo)，而不被干擾，感覺到當(dāng)前顯示對象的突然變化。

Mac OS 的窗口最小化動效，將當(dāng)前窗口如同紙片一樣收納到下方的工作應(yīng)用臺，告訴用戶點(diǎn)擊"最小化"按鈕的直接作用就是將當(dāng)前的窗口隱藏到下方的工作臺上，并且告知了用戶具體的位置，方便他隨時可以重新找到再次打開。這個過程也很流暢，用戶可以專注于他處理的事件，而不是被突然打斷，變得迷茫。

另一個是父子關(guān)系轉(zhuǎn)換的例子，用戶點(diǎn)擊小卡片，小卡片彈開放大顯示詳細(xì)的信息，信息的出現(xiàn)和展示井井有條，一切動效都是為了功能（合理地展示內(nèi)容），讓用戶專注于內(nèi)容本身。

5、快速靈敏（Quick）

界面各個元素在發(fā)生位置或狀態(tài)改變時，變化的速度不能過慢，而導(dǎo)致過長時間的等待。（同樣也不能太快，以致于用戶看不清、不能理解動效的邏輯含義。）

下方的例子中，各元素的緩動接連發(fā)生，且速度過慢，造成了不太必要的延時。是不可取的做法。

6、簡明清晰（Clear）

在單次交互動效中，不宜發(fā)生太多樣、太多元素的動態(tài)變化。交互動效應(yīng)當(dāng)清晰、簡明、一致。"少即是多"的設(shè)計原理在此同樣適用?？犰挪皇悄康模瑤椭δ艿膶?shí)現(xiàn)，信息的展示，適用的便捷才是目的。

下面這個交互動效中動態(tài)的樣式過多，沒有邏輯性，看起來很炫酷，但實(shí)際上干擾視覺，打斷了體驗

"少即是多"的設(shè)計原理在此同樣適用?？犰挪皇悄康?，幫助功能的實(shí)現(xiàn)，信息的展示，適用的便捷才是目的。改進(jìn)后的效果好了很多，沒有多余的視覺噪聲，用戶可以沉浸在內(nèi)容中。

結(jié)語

交互運(yùn)動不應(yīng)該隨機(jī)產(chǎn)生，我們在設(shè)計每一個交互的時候，要記住背后一定需要一個目的/理由來支撐。動效的關(guān)鍵在于引導(dǎo)用戶沿著正確的操作路徑快速高效的達(dá)到目標(biāo)，在任務(wù)過程中不迷失，不被突然打斷。無論你的應(yīng)用是有趣好玩、是嚴(yán)肅、還是簡單商務(wù)風(fēng)格，好的動效設(shè)計確實(shí)可以為用戶提供一個清晰快速的操作體驗。