功能型動畫是一種清晰有邏輯性的微妙動畫，它能減少認知負擔，防止盲目修改，在空間關系上建立更好的回饋。值得一提的是，動畫把用戶界面帶到了生活中。
?運動能讓界面看起來生動，通過乘法或除法，改變它們的形狀和大小。你應該使用功能型動畫在導航上下文流暢地傳遞給用戶，解釋屏幕上元素的有序變化，強化元素間的層次結構。成功的動畫設計過程遵循以下6個特性：
?1、響應式
?在用戶界面設計中，視覺反饋是非常重要的。它之所以會起作用，是因為它吸引了用戶對認知的原始訴求。在現(xiàn)實生活中，按鈕、控制器和物體對我們的交互做出反饋，這就是為什么用戶期望事物能起作用。
?
?
?
?
?
圖片來源:material design
?用戶界面應該在被觸發(fā)輸入的地方快速響應用戶進行精確輸入，并展示新界面和構成界面的元素或動作之間的聯(lián)系。點擊APP的感覺很棒，總覺得你知道發(fā)生了什么。
?
?
?
?
對象恰當?shù)鼗貞脩舻囊鈭D
?2.組合
?將新創(chuàng)建的界面和構成界面的元素或動作連接起來。組合聯(lián)系背后的邏輯是幫助用戶理解剛剛在可視布局里發(fā)生的變化，是什么觸發(fā)了這個變化。下面你會看到兩個過渡菜單動畫的例子，在第一個示例中，菜單出現(xiàn)得離觸發(fā)點很遠，這打破了它和輸入方法的聯(lián)系。
?
?
?
?
不正確
?在第二個示例中，菜單是從觸發(fā)點右側出現(xiàn)的，建立了元素間的聯(lián)系。
?
?
?
?
正確
?還有一個示例是關于動作按鈕，在特定環(huán)境下它的功能發(fā)生了改變。播放和暫停按鈕可能是最常見的轉換按鈕，從播放按鈕變成暫停按鈕，意味著這兩個動作是相連的，按下一個意味著另一個操作將會出現(xiàn)。你應該讓狀態(tài)之間的過渡充滿生氣，讓它看起來很平滑流暢，而不是間斷的。
?
?
?
?
控制器平滑的過渡，告訴了用戶按鈕的功能，也在交互中增加了有驚喜的元素
?3.自然
?避免出現(xiàn)讓人驚訝的過渡，每個運動都應該是被現(xiàn)實世界的作用力激發(fā)的。在現(xiàn)實世界，物體迅速加速或減速是受重力和摩擦力的影響；類似的，在好的用戶界面設計中，開始或停止也不是突然出現(xiàn)的。
?下面你會看到一個范例，用戶在一個列表中選擇一個條目，放大看它的詳細內(nèi)容。在擴大的過程中，隨著擴張為一個大卡片，這個小卡片是以某種弧線運動到終點的。
?
?
?
?
屏幕上元素的上移要同時描述向上的加速運動效果
?4.有意圖
?在恰當?shù)臅r機指引到恰當?shù)狞c，運動，根據(jù)它的天性，在用戶界面中能最顯著的突出來。不論是文字段落，還是靜態(tài)圖片，都能通過運動完成，一個好的過渡能幫助用戶引導到交互操作的下一步。
?第一次進入的用戶可能不能預知一個將要發(fā)生的交互動作，但是合理的動畫能幫助用戶保持方向性，不會覺得內(nèi)容圖突然發(fā)生了變化。當把窗口縮小時，Mac OS使用了一個功能性的動畫，這個動畫連接了第一個狀態(tài)和下一個狀態(tài)。
?
?
?
?
Mac OS縮小窗口的動畫
?另一個好的示例是一個繼承性過渡，當用戶在列表中或卡片元素中選擇某一項，放大看它的細節(jié)內(nèi)容，這個交互允許用戶保持上下文的一致。
?
?
?
?
繼承性過渡動畫
?
5、快速
?當元素在位置或狀態(tài)上運動，這個運動要足夠快，不會引起等待，但是適當慢，過渡能更被理解。動畫不要太慢，因為會導致不必要的延遲，會延長持續(xù)時間。
?
?
?
?
不正確
?許多元素驚人而緩慢的運動會延長時間。
?
?
?
?
不正確
?快速運動的話，讓用戶不必等到動畫結束。
?
?
?
?
正確
?保持過渡時間足夠短，因為用戶會頻繁地看到他們，保持動畫的過渡間隔低于300ms。
?
?
?
?
正確
?6、清晰
?過渡應該避免一次做太多事情，因為當眾多的條目需要在不同的方向或路徑運動時，它們會讓人困惑。
?
?
?
?
不正確
?過渡應該清晰、簡單而連貫。記住，在動畫設計時，少即是多。所以我們應該只關注動畫為用戶做的實際事情。
?
?
?
?
結論
?綜上，運動不是隨機的，每一個運動背后都有目的。運動引導并讓你不錯過最重要的信息，無論你的app是好玩有趣的，還是嚴肅直接的，使用動畫原理能幫你提供一個清晰快速連貫的體驗。用心設計，注意每一個細節(jié)都是成功的關鍵，讓人機交互更容易使用。
?
?
?
