用超多案例，幫你掌握 UI 動(dòng)效設(shè)計(jì)基礎(chǔ)設(shè)計(jì)知識(shí)

最近梳理了 UI 動(dòng)效設(shè)計(jì)的入門(mén)級(jí)基礎(chǔ)知識(shí)進(jìn)行分享，結(jié)合了主流系統(tǒng)官方指南和自己的理解，附有大量動(dòng)效設(shè)計(jì)動(dòng)圖幫你更好理解，具體往下看吧！

相關(guān)推薦：

UI 動(dòng)效的作用

1. 提供用戶引導(dǎo)

通過(guò)動(dòng)效可以幫助用戶更好的理解如何進(jìn)行操作，引導(dǎo)用戶接下來(lái)的行為。

2. 建立層級(jí)結(jié)構(gòu)

在進(jìn)行導(dǎo)航時(shí)，合適的動(dòng)畫(huà)能夠使用戶明確界面以及元素之間的層級(jí)關(guān)系，幫助用戶在腦海中形成應(yīng)用的層次結(jié)構(gòu)。

3. 加強(qiáng)反饋和理解

在用戶進(jìn)行操作后，動(dòng)效反饋可以告訴用戶操當(dāng)前正處于什么狀態(tài)。

4. 過(guò)渡連續(xù)流暢

對(duì)象在場(chǎng)景與場(chǎng)景之間移動(dòng)或在場(chǎng)景內(nèi)變形時(shí)，通過(guò)動(dòng)效設(shè)計(jì)可以保持過(guò)渡平滑、連續(xù)；避免轉(zhuǎn)場(chǎng)生硬所帶來(lái)的認(rèn)知負(fù)載。

5. 增加趣味活力

借助動(dòng)效可以為常見(jiàn)的交互添加個(gè)性，為體驗(yàn)增加了趣味與活力，在移動(dòng)端應(yīng)用中，還經(jīng)常會(huì)借助動(dòng)效設(shè)計(jì)來(lái)傳達(dá)品牌風(fēng)格。

6. 集中用戶注意力

通過(guò)動(dòng)效使用戶將注意力集中在重要的事情上，而不會(huì)造成不必要的分心。例如應(yīng)用中新增活動(dòng)的入口圖標(biāo)可以通過(guò)微動(dòng)效來(lái)吸引用戶注意。

7. 預(yù)知操作結(jié)果

通過(guò)預(yù)覽行動(dòng)結(jié)果能夠建立用戶信心并減少操作錯(cuò)誤成本。例如，將圖片進(jìn)行移動(dòng)時(shí)，圖片布局隨之變化。

8. 運(yùn)動(dòng)畫(huà)面一致

共享同一 UI 入口點(diǎn)的元素應(yīng)以相同的方法調(diào)用和關(guān)閉，保持運(yùn)動(dòng)行為統(tǒng)一，可以使畫(huà)面感覺(jué)一致。例如：PC 端的任務(wù)欄調(diào)用時(shí)，任務(wù)欄的所有窗口出現(xiàn)時(shí)向上滑出，關(guān)閉時(shí)向下滑出；以及移動(dòng)端的底欄 icon 動(dòng)效設(shè)計(jì)。

UI 動(dòng)效的基本要素

1. 變化屬性

設(shè)計(jì)師在制作動(dòng)效時(shí)可以通過(guò)對(duì)元素的透明度、位置、大小、旋轉(zhuǎn)、形狀、顏色等屬性進(jìn)行變化，將一個(gè)或幾個(gè)屬性組合，進(jìn)行動(dòng)效編排。

2. 動(dòng)畫(huà)時(shí)間

在進(jìn)行動(dòng)畫(huà)制作時(shí)，持續(xù)時(shí)間的快慢直接影響用戶的感受，過(guò)快的動(dòng)畫(huà)會(huì)讓用戶感知不到變化，過(guò)慢的動(dòng)畫(huà)則可能會(huì)造成電腦卡頓、響應(yīng)速度慢的錯(cuò)覺(jué)，使用戶不耐煩；合理的規(guī)定一個(gè)標(biāo)準(zhǔn)動(dòng)畫(huà)持續(xù)時(shí)間值很有必要。下面給出了一些 UI 過(guò)渡動(dòng)效的最佳動(dòng)效持續(xù)時(shí)間（有參考自 Material 和 Windows 官方動(dòng)效指南相關(guān)理論）

Tip：規(guī)范只是用來(lái)做設(shè)計(jì)時(shí)的一個(gè)合理值參考，我們作為設(shè)計(jì)師不必嚴(yán)格遵守，還是根據(jù)自己的應(yīng)用需求和品牌調(diào)性，靈活設(shè)計(jì)。

元素面積、變化大小和過(guò)渡區(qū)域影響持續(xù)時(shí)間

通常來(lái)說(shuō)，較小的過(guò)渡區(qū)域或較簡(jiǎn)單的過(guò)渡編排，動(dòng)畫(huà)的持續(xù)時(shí)間更短；反之，較大的過(guò)渡區(qū)域或較復(fù)雜的過(guò)渡編排，動(dòng)效的持續(xù)時(shí)間則更長(zhǎng)。例如：相同大小的兩個(gè)物體，移動(dòng)距離越長(zhǎng)，持續(xù)時(shí)間越長(zhǎng)。

移動(dòng)端 UI 動(dòng)效的最佳持續(xù)時(shí)間在 200ms-300ms

移動(dòng)端 UI 動(dòng)效的持續(xù)時(shí)間可以控制在：小區(qū)域過(guò)渡 100ms-150ms，中區(qū)域過(guò)渡 200ms-250ms，大區(qū)域過(guò)渡 250ms-300ms。

平板 UI 動(dòng)效的最佳持續(xù)時(shí)間在：250ms-400ms

平板的動(dòng)畫(huà)持續(xù)時(shí)間因?yàn)樵O(shè)備尺寸的原因，過(guò)渡范圍比移動(dòng)端更大，可以在移動(dòng)端的基礎(chǔ)上將動(dòng)效持續(xù)時(shí)間增加 30%左右：小區(qū)域過(guò)渡 150ms-2000ms，中區(qū)域過(guò)渡 250ms-350ms，大區(qū)域過(guò)渡 350ms-400ms。

PC 端 UI 動(dòng)效的最佳持續(xù)時(shí)間在 150ms-250ms

一般來(lái)說(shuō)，pc 端的動(dòng)畫(huà)持續(xù)時(shí)間要比移動(dòng)端更快、更簡(jiǎn)單；綜合 windows 官方指南的標(biāo)準(zhǔn)動(dòng)畫(huà)持續(xù)時(shí)間值，我們可以將動(dòng)畫(huà)設(shè)定在 150ms-250ms 最佳，相對(duì)復(fù)雜或變化稍大的動(dòng)畫(huà)可延伸至 300ms。

3. 緩動(dòng)曲線

加速曲線

用于正在退出場(chǎng)景的元素；這種動(dòng)效在剛開(kāi)始時(shí)變化緩慢，速度隨時(shí)間逐漸增加，這意味著元素在做加速度運(yùn)動(dòng)；由此產(chǎn)生的感覺(jué)是，對(duì)象快速離開(kāi)，并為新內(nèi)容的進(jìn)入騰出空間。

減速曲線

用于正在進(jìn)入場(chǎng)景的元素；這種動(dòng)效在剛開(kāi)始時(shí)變化較快，速度隨時(shí)間逐漸降低，直到元素最終停止；由此產(chǎn)生的感覺(jué)是，對(duì)象從遠(yuǎn)方行進(jìn)，以極快的速度進(jìn)入，再逐漸恢復(fù)到靜止?fàn)顟B(tài)。

標(biāo)準(zhǔn)緩動(dòng)曲線（緩入緩出）

這是最常見(jiàn)的緩動(dòng)曲線，同時(shí)具備緩入和緩出，適用于很多動(dòng)效場(chǎng)景，例如增加或減少界面元素。

彈性曲線

彈性曲線模擬的是現(xiàn)實(shí)生活中的彈簧效果，元素經(jīng)歷多次回彈后恢復(fù)靜止；例如圖標(biāo)點(diǎn)擊前后的狀態(tài)變化、對(duì)話框的出現(xiàn)會(huì)使用到這種效果。

UI 動(dòng)效的過(guò)渡類(lèi)型

1. 共享過(guò)渡軸

共享軸模式用于具有空間或?qū)Ш疥P(guān)系的 UI 元素之間的轉(zhuǎn)換。此模式通過(guò)在 x、y 或 z 軸上過(guò)渡來(lái)加強(qiáng)元素之間的關(guān)系。例如，在頂部標(biāo)簽欄想要切換標(biāo)簽板塊時(shí)，可以通過(guò)在同一水平方向的移動(dòng)來(lái)表現(xiàn)其關(guān)聯(lián)性和層級(jí)關(guān)系。

x 軸

X 軸過(guò)渡加強(qiáng)了 UI 元素之間的水平布局或?qū)蛹?jí)導(dǎo)航關(guān)系；元素沿 x 軸一致變換。

y 軸

Y 軸過(guò)渡加強(qiáng)了 UI 元素之間的垂直布局或?qū)蛹?jí)導(dǎo)航關(guān)系；元素沿 y 軸一致變換。

z 軸

Z 軸過(guò)渡表示在應(yīng)用的層次結(jié)構(gòu)中向上或向下移動(dòng)一級(jí)；元素沿 z 軸向前或向后變換。

2. 淡入淡出

淡入淡出模式大多用于相互之間沒(méi)有強(qiáng)關(guān)系的 UI 元素之間的過(guò)渡。

單向淡入或淡出

在同一轉(zhuǎn)場(chǎng)中，進(jìn)場(chǎng)元素淡入或退場(chǎng)元素淡出，不影響當(dāng)前頁(yè)面的布局；例如對(duì)話框、菜單的出現(xiàn)或消失。

交叉淡入淡出

在同一轉(zhuǎn)場(chǎng)中，進(jìn)場(chǎng)元素淡入和退場(chǎng)元素淡出同時(shí)交錯(cuò)進(jìn)行，從當(dāng)前頁(yè)面轉(zhuǎn)換到另一個(gè)頁(yè)面；這種方式常用于兩個(gè)不同頁(yè)面間的過(guò)渡。

3. 容器轉(zhuǎn)換

容器是用來(lái)表示封閉區(qū)域的形狀，例如按鈕、列表、卡片表面。

容器轉(zhuǎn)換是在包含容器的 UI 元素之間的轉(zhuǎn)換，在兩個(gè) UI 元素之間創(chuàng)建可見(jiàn)的連接。通過(guò)將一個(gè)元素?zé)o縫過(guò)渡到另一個(gè)元素，使兩個(gè)元素的關(guān)系得到了加強(qiáng)。

4. 共享元素轉(zhuǎn)場(chǎng)

在轉(zhuǎn)場(chǎng)時(shí)，被選中的 UI 元素在轉(zhuǎn)場(chǎng)前后的視圖中進(jìn)行可視化的移動(dòng)或縮放等，這樣做可以鞏固用戶的空間心理模型、強(qiáng)調(diào)轉(zhuǎn)場(chǎng)前后的空間關(guān)系。

UI 動(dòng)效的編排技巧

1. 時(shí)序

退場(chǎng)元素要比進(jìn)場(chǎng)元素的動(dòng)效開(kāi)始時(shí)間早

通常，這樣的時(shí)間排序可以避免視覺(jué)上的紊亂，更加有序的呈現(xiàn)動(dòng)畫(huà)效果。

退場(chǎng)元素持續(xù)時(shí)間相對(duì)短，進(jìn)場(chǎng)元素相對(duì)長(zhǎng)

退場(chǎng)元素一般比進(jìn)場(chǎng)元素持續(xù)時(shí)間更短，這樣可以使退場(chǎng)元素快速消失，使用戶更多聚焦在即將出現(xiàn)的新內(nèi)容上。

進(jìn)場(chǎng)元素一般比退場(chǎng)元素持續(xù)時(shí)間更長(zhǎng)，這樣能給用戶一種新的內(nèi)容逐漸出現(xiàn)在眼前的感受。

2. 時(shí)差

時(shí)差就是利用 UI 元素的時(shí)間延遲差實(shí)現(xiàn)一種有層次感的過(guò)渡效果，也可以用于強(qiáng)調(diào) UI 元素。

3. 視差

在 UI 滾動(dòng)或平移時(shí)，通過(guò)不同的速率移動(dòng)不同的對(duì)象可以創(chuàng)建視差效果，而速度的調(diào)整由持續(xù)時(shí)間（過(guò)渡持續(xù)多長(zhǎng)時(shí)間）和運(yùn)動(dòng)曲線決定。

4. 路徑

如果過(guò)渡中的元素沿對(duì)角線移動(dòng)，則它們所遵循的路徑可以是線性的或弧形的。線性運(yùn)動(dòng)路徑具有簡(jiǎn)單而實(shí)用的風(fēng)格，而弧形運(yùn)動(dòng)路徑則創(chuàng)造了更加強(qiáng)調(diào)和個(gè)性的風(fēng)格。可以根據(jù)自己的應(yīng)用調(diào)性來(lái)選擇使用哪種運(yùn)動(dòng)路徑。

5. 引力

重力通常會(huì)在對(duì)象需要從一個(gè)場(chǎng)景跳轉(zhuǎn)到另一個(gè)場(chǎng)景時(shí)發(fā)生作用。當(dāng)一個(gè)物體脫離場(chǎng)景，重力會(huì)拉下該物體，在其移動(dòng)時(shí)產(chǎn)生一條更自然的物體軌跡曲線。因此，有元素連接的動(dòng)畫(huà)會(huì)使用重力的概念。

6. 振蕩

默認(rèn)情況下，動(dòng)效在到達(dá)終點(diǎn)時(shí)會(huì)結(jié)束，但添加振蕩時(shí)，過(guò)渡路徑至少超過(guò)其端點(diǎn)一次，然后反向返回端點(diǎn)。振蕩可以用來(lái)表達(dá)一種更加俏皮和充滿活力的過(guò)渡風(fēng)格。

7. 觸底反彈

觸底反彈是當(dāng)我們?cè)跐L動(dòng)應(yīng)用到達(dá)最底部或最頂部時(shí)，會(huì)出現(xiàn)回彈效果，這種通常還可以跟功能進(jìn)行結(jié)合，例如下滑刷新或進(jìn)入新的頁(yè)面，上滑出現(xiàn)彩蛋等。

本文分享暫到這里，點(diǎn)贊加收藏，數(shù)量多的話我會(huì)繼續(xù)出下篇哦