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

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

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

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

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

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

對(duì)象對(duì)用戶(hù)的操作作出恰當(dāng)?shù)姆答?，點(diǎn)擊項(xiàng)目-展開(kāi)詳情，切換自然，符合預(yù)期

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

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

下方是兩個(gè)對(duì)比的實(shí)例：

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

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

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

3 過(guò)渡流暢自然（Natural）

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

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

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

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

第一次使用某個(gè)應(yīng)用的用戶(hù)一般并不能預(yù)測(cè)交互何時(shí)何地會(huì)怎么發(fā)生，但是恰當(dāng)?shù)膭?dòng)效能幫助用戶(hù)專(zhuān)注當(dāng)前的目標(biāo)，而不被干擾，感覺(jué)到當(dāng)前顯示對(duì)象的突然變化。

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

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

5 快速靈敏（Quick）

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

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

改進(jìn)后的正確做法如下：

【】

6 簡(jiǎn)明清晰（Clear）

在單次交互動(dòng)效中，不宜發(fā)生太多樣、太多元素的動(dòng)態(tài)變化。交互動(dòng)效應(yīng)當(dāng)清晰、簡(jiǎn)明、一致。“少即是多”的設(shè)計(jì)原理在此同樣適用?？犰挪皇悄康?，幫助功能的實(shí)現(xiàn)，信息的展示，適用的便捷才是目的。

下面這個(gè)交互動(dòng)效中動(dòng)態(tài)的樣式過(guò)多，沒(méi)有邏輯性，看起來(lái)很炫酷，但實(shí)際上干擾視覺(jué)，打斷了體驗(yàn)

“少即是多”的設(shè)計(jì)原理在此同樣適用?？犰挪皇悄康模瑤椭δ艿膶?shí)現(xiàn)，信息的展示，適用的便捷才是目的。改進(jìn)后的效果好了很多，沒(méi)有多余的視覺(jué)噪聲，用戶(hù)可以沉浸在內(nèi)容中。

結(jié)語(yǔ)

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