（圖片來源：ZURB University）
功能性的動效是指一種微妙且具有清晰合理目的的動畫效果。它能減少認知負荷，防止對(界面)變化的忽視、還能幫助用戶在界面的空間關系之中建立慣性回憶。更重要的是，動效給用戶界面賦予了生命。
通過對界面元素進行組合、拆分、改變他們的形狀和大小，動效可以讓界面更加生動。你應當使用功能性動效流暢地在上下文間引導用戶，解釋屏幕上元素排列的變化，以及加強元素層次結構。
成功的動效設計具有以下六大特點。
1、響應
視覺反饋在用戶界面設計中是非常重要的，因為渴望得到確認反饋信息是用戶的一種天性。在現(xiàn)實生活中，按鈕、控制鍵和其它物體會因我們的操作而產(chǎn)生相應的反饋，這已經(jīng)是人們習以為常的交互方式。
用戶界面應該在用戶點擊輸入框時，就準確及時地給予響應，表現(xiàn)出上一界面和當前界面的關系，以及哪些元素和操作導致了當前界面的出現(xiàn)。用戶通過點擊應用程序總是能知道發(fā)生了什么，這感覺很好。
（元素對用戶的操作意圖給出了合適的回應）
2、關聯(lián)
新出現(xiàn)的界面需要和那些導致它出現(xiàn)的元素或操作聯(lián)系起來。這種聯(lián)想式關系所隱含的邏輯，能幫助用戶理解剛剛在視圖的布局中發(fā)生的變化和什么觸發(fā)了變化。
下面你能看到兩個導航菜單的動效案例。第一個案例中，菜單從用戶點擊點以外很遠的地方開始浮現(xiàn)，這就打破了點擊行為和菜單動效的聯(lián)系。
在第二個例子中菜單從接觸點出現(xiàn)，這就將元素關聯(lián)在了接觸點上。
另一個例子是在特定條件下操作按鈕功能的變化。“播放”和“停止”按鈕可能是切換開關最常見的例子。將播放按鈕轉換為暫停按鈕意味著這兩個動作是相連的，并且點擊一個按鈕后另一個按鈕才會出現(xiàn)。你應該提供按鈕動效讓這兩種狀態(tài)轉換地更為流暢且避免間斷感。
（平滑地過渡到一個播放控件并告知用戶按鈕的功能，同時增加了一個驚喜的交互元素。圖片來源：Material Design）
3、自然
避免令人詫異的過渡，每一個運動都應該遵循現(xiàn)實世界中的作用力。在現(xiàn)實世界中，一個物體加速或減速的能力受重量和摩擦力的影響。同樣的，好的界面設計中，動效的啟動和停止也不能過于突兀。
下面你可以看到一個很好的例子，用戶選擇列表中的一項放大到詳細視圖。在擴展過程中，小卡片沿著弧線移動到它的目的地，擴展成一個更大的卡。
（正確方式。在屏幕上向上移動的元素應該在運動過程中出現(xiàn)加速的力）
4、有意圖的
操作指南關注的是如何在合適的地點、合適的時間給出引導提示。而動態(tài)效果，因為其特性，則擁有界面上最高的可見性（譯者補充：運動中的東西最易被人眼察覺）。無論是文本段落，還是靜態(tài)圖像都無法超越它。好的過渡有助于引導用戶下一步的交互。
第一次使用時用戶無法真正預測即將發(fā)生的交互，但適當?shù)膭有Э梢詭椭脩粢龑Х较颍粫X得內(nèi)容突然發(fā)生變化。
Mac OS最小化窗口時使用的功能性動效，這個動效將第一個狀態(tài)和第二個狀態(tài)連接起來。
（Mac OS最小化窗口動效）
層級跳轉間使用的過渡動效，用戶在列表中選擇一個項目或卡片元素，并放大到詳細視圖。這個交互動效能夠讓用戶保持維持對界面情景的認知。
（層級跳轉間的過渡動效）
5、快速
當元素在位置或狀態(tài)之間移動時，運動應該足夠簡潔快速，不要造成用戶的等待，同時又能保證過渡動效能夠被用戶所察覺并理解。
避免過慢的動畫，因為它會造成不必要的遲緩并增加完成操作的耗時。
（錯誤方式）
錯開和放慢過多元素的運動會延長持續(xù)時間。
（錯誤方式。圖片來源：MaterialDesign）
快速的動效，讓用戶不必等待動效完成。
（正確方式）
用戶會經(jīng)常看到它們，所以應保持過渡時間短，保持動效持續(xù)時間在300毫秒內(nèi)。
（正確方式）
6、清晰
避免在一次動效中做多件事情，因為當多個項目需要在不同的方向或交叉路徑移動時，它們就會變得很混亂，讓用戶暈頭轉向。
（錯誤方式）
過渡應該是清晰的，簡潔的，連貫的。關于動效，請記住少即是多。因此，我們應該只關注動效對用戶的實際價值。
（正確方式）
結論
總之，運動不是隨意的，每個動作都是有目的的。運動原理是動效設計的基礎原則，運動也能突出重點讓你不會淹沒在界面元素里。無論您的應用程序是有趣好玩或嚴肅直接的，使用運動原理能幫你建立一種清晰又具有凝聚力的界面體驗。
謹慎設計。關注每一個細節(jié)是使人機交互易于使用的關鍵。
注： 本文圖片來源MaterialDesign等設計網(wǎng)站
英文原文：Nick Babich, Functional Animation In UX Design: What Makes a Good Transition?
平面設計
工業(yè)設計
CG插畫
UI交互
室內(nèi)設計
建筑環(huán)境
