眾所周知，UI設(shè)計(jì)師若只追求靜態(tài)像素的完美呈現(xiàn)，而忽略動(dòng)態(tài)過(guò)程的合理表達(dá)，會(huì)導(dǎo)致用戶不能在視覺(jué)上覺(jué)察元素的連續(xù)變化，進(jìn)而很難對(duì)新舊狀態(tài)的更替有清晰的感知。

所以，UI設(shè)計(jì)師必須通過(guò)「時(shí)間點(diǎn)」和「空間幅度」的設(shè)計(jì)為用戶建立運(yùn)動(dòng)的可信度，即視覺(jué)上的真實(shí)感，當(dāng)用戶意識(shí)到這個(gè)動(dòng)作是合理的，才能更加清晰愉悅地使用產(chǎn)品。

下面就是學(xué)堂君想要跟大家分享的6種最常見(jiàn)的UI界面動(dòng)效展示效果。 同時(shí)附上每一種界面動(dòng)效設(shè)計(jì)的案例給大家欣賞，以便于更加清晰的對(duì)這一種界面動(dòng)效的認(rèn)識(shí)。

1、轉(zhuǎn)場(chǎng)過(guò)渡

人腦灰質(zhì)會(huì)對(duì)動(dòng)態(tài)事物（如：移動(dòng)、形變、色變等）保持敏感。在界面中加入一些平滑舒適的過(guò)渡效果，不僅能讓界面顯得生動(dòng)，更能幫助用戶理解界面前后變化的邏輯關(guān)系。

2、層級(jí)展示

現(xiàn)實(shí)空間里，物體存在近大遠(yuǎn)小原則，運(yùn)動(dòng)則會(huì)近快遠(yuǎn)慢。當(dāng)界面中的元素存在不同層級(jí)時(shí)，恰當(dāng)?shù)膭?dòng)效可以幫助用戶理清前后位置關(guān)系，以動(dòng)效來(lái)體現(xiàn)整個(gè)系統(tǒng)的空間感。

3、空間擴(kuò)展

在移動(dòng)端界面設(shè)計(jì)中，由于有限的屏幕空間難以承載大量的信息內(nèi)容，可以通過(guò)折疊、翻轉(zhuǎn)、縮放等形式拓展附加內(nèi)容的存儲(chǔ)空間，以漸進(jìn)展示的方式來(lái)減輕用戶的認(rèn)知負(fù)擔(dān)。

4、 聚焦關(guān)注

聚焦關(guān)注是通過(guò)元素的動(dòng)作變化，提醒用戶關(guān)注特點(diǎn)的內(nèi)容信息。這種提醒方式不僅可以降低視覺(jué)元素的干擾，使界面更清爽簡(jiǎn)潔，還能在用戶使用過(guò)程中，輕盈自然地吸引用戶注意力。

5、內(nèi)容呈現(xiàn)

界面內(nèi)容元素按照一定的秩序規(guī)律逐級(jí)呈現(xiàn)，引導(dǎo)用戶視覺(jué)焦點(diǎn)走向，幫助用戶更好地感知頁(yè)面布局、層級(jí)結(jié)構(gòu)和重點(diǎn)內(nèi)容，同時(shí)也能讓整個(gè)流程更加豐富流暢，增添了界面的活力。

6、操作反饋

無(wú)論是點(diǎn)擊、長(zhǎng)按、拖拽、滑動(dòng)等交互行為，都應(yīng)該得到系統(tǒng)的即時(shí)反饋，將其以視覺(jué)或動(dòng)效的方式展現(xiàn)，幫助用戶了解當(dāng)前系統(tǒng)對(duì)交互過(guò)程的響應(yīng)情況，為用戶帶來(lái)安全感。

最后，培養(yǎng)UI設(shè)計(jì)師的界面動(dòng)效設(shè)計(jì)能力，可以大大提高UI產(chǎn)品的友好度、也是提升UI設(shè)計(jì)師自身技能和設(shè)計(jì)修養(yǎng)的表現(xiàn)。

通過(guò)友好的UI動(dòng)效設(shè)計(jì)案例可以降低溝通成本和打造核心競(jìng)爭(zhēng)力。