UI設(shè)計(jì)中的動(dòng)效設(shè)計(jì)標(biāo)準(zhǔn)與規(guī)范

現(xiàn)如今，優(yōu)秀的界面動(dòng)效很能讓人產(chǎn)生深刻印象，甚至是帶來(lái)驚喜。它一方面表達(dá)了界面之間的交互過(guò)程，解釋說(shuō)明如何使用應(yīng)用，另一方面也能正確引導(dǎo)用戶的注意力。本文將界面動(dòng)效的主要原則和規(guī)范做一個(gè)收集歸納，便于設(shè)計(jì)師進(jìn)行快速?zèng)Q策。

動(dòng)效與用戶體驗(yàn)的結(jié)合相對(duì)較新，其根源是迪士尼動(dòng)畫(huà)設(shè)計(jì)的十二個(gè)條基本原理。迪士尼動(dòng)畫(huà)原理是為了講故事而提煉出的基本的物理運(yùn)動(dòng)規(guī)律。這些原理能讓繪制的卡通角色移動(dòng)和表演，但不能充分滿足現(xiàn)代UI界面的交互需求。為了彌合這個(gè)差距，動(dòng)效專家CanedoEstrada改編的《動(dòng)效設(shè)計(jì)的10條原理》更適合應(yīng)用到數(shù)字產(chǎn)品設(shè)計(jì)中。

·簡(jiǎn)單與復(fù)雜

圖標(biāo)動(dòng)效可以根據(jù)選項(xiàng)重要級(jí)別使用簡(jiǎn)單或復(fù)雜的動(dòng)效

簡(jiǎn)單：級(jí)別低的圖標(biāo)使用簡(jiǎn)單一致的動(dòng)效

復(fù)雜：可以通過(guò)復(fù)雜動(dòng)動(dòng)效來(lái)強(qiáng)調(diào)應(yīng)用中重要的圖標(biāo)

·圖標(biāo)動(dòng)效的持續(xù)時(shí)間

圖標(biāo)動(dòng)效越復(fù)雜需要的時(shí)間就越長(zhǎng)以免顯得倉(cāng)促為了保持應(yīng)用的一致性對(duì)具有相似度的圖標(biāo)使用相同的持續(xù)時(shí)間

·動(dòng)效的速度和持續(xù)時(shí)間 

當(dāng)界面元素改變他們的狀態(tài)和位置時(shí)，動(dòng)畫(huà)的持續(xù)時(shí)間應(yīng)該以用戶能注意到又不用等待為標(biāo)準(zhǔn)。

大量的研究發(fā)現(xiàn)在界面中最 優(yōu)的時(shí)間是200-500ms。這個(gè)數(shù)字是根據(jù)人類大腦的認(rèn)知水平得出來(lái)的。任何小于100ms的動(dòng)畫(huà)是人類很難感知到的，而其他大于1秒的動(dòng)畫(huà)又會(huì)讓用戶覺(jué)得有些延遲，不夠流暢。

還需要記住的一點(diǎn)就是，無(wú)論在什么平臺(tái)，動(dòng)畫(huà)的持續(xù)時(shí)間不僅跟它的移動(dòng)距離有關(guān)，還跟它本身的大小有關(guān)系。小的元素或者變化不大的動(dòng)畫(huà)應(yīng)該要移動(dòng)的更快，而大的元素或者復(fù)雜的元素持續(xù)時(shí)間稍長(zhǎng)一些看起來(lái)會(huì)更好。