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