現(xiàn)如今,優(yōu)秀的界面動(dòng)效很能讓人產(chǎn)生深刻印象,甚至是帶來驚喜。它一方面表達(dá)了界面之間的交互過程,解釋說明如何使用應(yīng)用,另一方面也能正確引導(dǎo)用戶的注意力。本文將界面動(dòng)效的主要原則和規(guī)范做一個(gè)收集歸納,便于設(shè)計(jì)師進(jìn)行快速?zèng)Q策。
動(dòng)效與用戶體驗(yàn)的結(jié)合相對較新,其根源是迪士尼動(dòng)畫設(shè)計(jì)的十二個(gè)條基本原理。迪士尼動(dòng)畫原理是為了講故事而提煉出的基本的物理運(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ì)中。
·簡單與復(fù)雜
圖標(biāo)動(dòng)效可以根據(jù)選項(xiàng)重要級別使用簡單或復(fù)雜的動(dòng)效
簡單:級別低的圖標(biāo)使用簡單一致的動(dòng)效
復(fù)雜:可以通過復(fù)雜動(dòng)動(dòng)效來強(qiáng)調(diào)應(yīng)用中重要的圖標(biāo)
·圖標(biāo)動(dòng)效的持續(xù)時(shí)間
圖標(biāo)動(dòng)效越復(fù)雜需要的時(shí)間就越長以免顯得倉促為了保持應(yīng)用的一致性對具有相似度的圖標(biāo)使用相同的持續(xù)時(shí)間
·動(dòng)效的速度和持續(xù)時(shí)間
當(dāng)界面元素改變他們的狀態(tài)和位置時(shí),動(dòng)畫的持續(xù)時(shí)間應(yīng)該以用戶能注意到又不用等待為標(biāo)準(zhǔn)。
大量的研究發(fā)現(xiàn)在界面中最 優(yōu)的時(shí)間是200-500ms。這個(gè)數(shù)字是根據(jù)人類大腦的認(rèn)知水平得出來的。任何小于100ms的動(dòng)畫是人類很難感知到的,而其他大于1秒的動(dòng)畫又會(huì)讓用戶覺得有些延遲,不夠流暢。
還需要記住的一點(diǎn)就是,無論在什么平臺,動(dòng)畫的持續(xù)時(shí)間不僅跟它的移動(dòng)距離有關(guān),還跟它本身的大小有關(guān)系。小的元素或者變化不大的動(dòng)畫應(yīng)該要移動(dòng)的更快,而大的元素或者復(fù)雜的元素持續(xù)時(shí)間稍長一些看起來會(huì)更好。