功能型動(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ī)交互更容易使用。
?
?
?