最近整理了UI 動效的入門級基礎知識進行分享,結合了主流系統官方指南和自己的理解,附有大量動圖幫你更好理解,具體往下看吧!

相關推薦:

用超多案例,幫你掌握UI 動效基礎設計知識

1. 提供用戶引導

通過動效可以幫助用戶更好的理解如何進行操作,引導用戶接下來的行為。

用超多案例,幫你掌握UI 動效基礎設計知識

2. 建立層級結構

在進行導航時,合適的動畫能夠使用戶明確界面以及元素之間的層級關係,幫助用戶在腦海中形成應用的層次結構。

用超多案例,幫你掌握UI 動效基礎設計知識

3. 加強反饋和理解

在用戶進行操作後,動效反饋可以告訴用戶操當前正處於什麼狀態。

用超多案例,幫你掌握UI 動效基礎設計知識

4. 過渡連續流暢

對像在場景與場景之間移動或在場景內變形時,通過動效設計可以保持過渡平滑、連續;避免轉場生硬所帶來的認知負載。

用超多案例,幫你掌握UI 動效基礎設計知識

5. 增加趣味活力

借助動效可以為常見的交互添加個性,為體驗增加了趣味與活力,在移動端應用中,還經常會藉助動效設計來傳達品牌風格。

用超多案例,幫你掌握UI 動效基礎設計知識

6. 集中用戶注意力

通過動效使用戶將注意力集中在重要的事情上,而不會造成不必要的分心。例如應用中新增活動的入口圖標可以通過微動效來吸引用戶注意。

用超多案例,幫你掌握UI 動效基礎設計知識

7. 預知操作結果

通過預覽行動結果能夠建立用戶信心並減少操作錯誤成本。例如,將圖片進行移動時,圖片佈局隨之變化。

用超多案例,幫你掌握UI 動效基礎設計知識

8. 運動畫面一致

共享同一UI 入口點的元素應以相同的方法調用和關閉,保持運動行為統一,可以使畫面感覺一致。例如:PC 端的任務欄調用時,任務欄的所有窗口出現時向上滑出,關閉時向下滑出;以及移動端的底欄icon 動效設計。

用超多案例,幫你掌握UI 動效基礎設計知識

1. 變化屬性

設計師在製作動效時可以通過對元素的透明度、位置、大小、旋轉、形狀、顏色等屬性進行變化,將一個或幾個屬性組合,進行動效編排。

用超多案例,幫你掌握UI 動效基礎設計知識

2. 動畫時間

在進行動畫製作時,持續時間的快慢直接影響用戶的感受,過快的動畫會讓用戶感知不到變化,過慢的動畫則可能會造成電腦卡頓、響應速度慢的錯覺,使用戶不耐煩;合理的規定一個標準動畫持續時間值很有必要。下面給出了一些UI 過渡動效的最佳動效持續時間(有參考自Material 和Windows 官方動效指南相關理論)

Tip:規範只是用來做設計時的一個合理值參考,我們作為設計師不必嚴格遵守,還是根據自己的應用需求和品牌調性,靈活設計。

元素面積、變化大小和過渡區域影響持續時間

通常來說,較小的過渡區域或較簡單的過渡編排,動畫的持續時間更短;反之,較大的過渡區域或較複雜的過渡編排,動效的持續時間則更長。例如:相同大小的兩個物體,移動距離越長,持續時間越長。

用超多案例,幫你掌握UI 動效基礎設計知識

移動端UI 動效的最佳持續時間在200ms-300ms

移動端UI 動效的持續時間可以控制在:小區域過渡100ms-150ms,中區域過渡200ms-250ms,大區域過渡250ms-300ms。

用超多案例,幫你掌握UI 動效基礎設計知識

平板UI 動效的最佳持續時間在:250ms-400ms

平板的動畫持續時間因為設備尺寸的原因,過渡範圍比移動端更大,可以在移動端的基礎上將動效持續時間增加30%左右:小區域過渡150ms-2000ms,中區域過渡250ms-350ms,大區域過渡350ms-400ms。

用超多案例,幫你掌握UI 動效基礎設計知識

PC 端UI 動效的最佳持續時間在150ms-250ms

一般來說,pc 端的動畫持續時間要比移動端更快、更簡單;綜合windows 官方指南的標準動畫持續時間值,我們可以將動畫設定在150ms-250ms 最佳,相對複雜或變化稍大的動畫可延伸至300ms。

用超多案例,幫你掌握UI 動效基礎設計知識

3. 緩動曲線

加速曲線

用於正在退出場景的元素;這種動效在剛開始時變化緩慢,速度隨時間逐漸增加,這意味著元素在做加速度運動;由此產生的感覺是,對象快速離開,並為新內容的進入騰出空間。

用超多案例,幫你掌握UI 動效基礎設計知識

減速曲線

用於正在進入場景的元素;這種動效在剛開始時變化較快,速度隨時間逐漸降低,直到元素最終停止;由此產生的感覺是,對像從遠方行進,以極快的速度進入,再逐漸恢復到靜止狀態。

用超多案例,幫你掌握UI 動效基礎設計知識

標準緩動曲線(緩入緩出)

這是最常見的緩動曲線,同時具備緩入和緩出,適用於很多動效場景,例如增加或減少界面元素。

用超多案例,幫你掌握UI 動效基礎設計知識

彈性曲線

彈性曲線模擬的是現實生活中的彈簧效果,元素經歷多次回彈後恢復靜止;例如圖標點擊前後的狀態變化、對話框的出現會使用到這種效果。

用超多案例,幫你掌握UI 動效基礎設計知識

1. 共享過渡軸

共享軸模式用於具有空間或導航關係的UI 元素之間的轉換。此模式通過在x、y 或z 軸上過渡來加強元素之間的關係。例如,在頂部標籤欄想要切換標籤板塊時,可以通過在同一水平方向的移動來表現其關聯性和層級關係。

x 軸

X 軸過渡加強了UI 元素之間的水平佈局或層級導航關係;元素沿x 軸一致變換。

用超多案例,幫你掌握UI 動效基礎設計知識

y 軸

Y 軸過渡加強了UI 元素之間的垂直佈局或層級導航關係;元素沿y 軸一致變換。

用超多案例,幫你掌握UI 動效基礎設計知識

z 軸

Z 軸過渡表示在應用的層次結構中向上或向下移動一級;元素沿z 軸向前或向後變換。

用超多案例,幫你掌握UI 動效基礎設計知識

2. 淡入淡出

淡入淡出模式大多用於相互之間沒有強關係的UI 元素之間的過渡。

單向淡入或淡出

在同一轉場中,進場元素淡入或退場元素淡出,不影響當前頁面的佈局;例如對話框、菜單的出現或消失。

用超多案例,幫你掌握UI 動效基礎設計知識

交叉淡入淡出

在同一轉場中,進場元素淡入和退場元素淡出同時交錯進行,從當前頁面轉換到另一個頁面;這種方式常用於兩個不同頁面間的過渡。

用超多案例,幫你掌握UI 動效基礎設計知識

3. 容器轉換

容器是用來表示封閉區域的形狀,例如按鈕、列表、卡片表面。

容器轉換是在包含容器的UI 元素之間的轉換,在兩個UI 元素之間創建可見的連接。通過將一個元素無縫過渡到另一個元素,使兩個元素的關係得到了加強。

用超多案例,幫你掌握UI 動效基礎設計知識

4. 共享元素轉場

在轉場時,被選中的UI 元素在轉場前後的視圖中進行可視化的移動或縮放等,這樣做可以鞏固用戶的空間心理模型、強調轉場前後的空間關係。

用超多案例,幫你掌握UI 動效基礎設計知識

1. 時序

退場元素要比進場元素的動效開始時間早

通常,這樣的時間排序可以避免視覺上的紊亂,更加有序的呈現動畫效果。

退場元素持續時間相對短,進場元素相對長

退場元素一般比進場元素持續時間更短,這樣可以使退場元素快速消失,使用戶更多聚焦在即將出現的新內容上。

進場元素一般比退場元素持續時間更長,這樣能給用戶一種新的內容逐漸出現在眼前的感受。

用超多案例,幫你掌握UI 動效基礎設計知識

2. 時差

時差就是利用UI 元素的時間延遲差實現一種有層次感的過渡效果,也可以用於強調UI 元素。

用超多案例,幫你掌握UI 動效基礎設計知識

3. 視差

在UI 滾動或平移時,通過不同的速率移動不同的對象可以創建視差效果,而速度的調整由持續時間(過渡持續多長時間)和運動曲線決定。

用超多案例,幫你掌握UI 動效基礎設計知識

4. 路徑

如果過渡中的元素沿對角線移動,則它們所遵循的路徑可以是線性的或弧形的。線性運動路徑具有簡單而實用的風格,而弧形運動路徑則創造了更加強調和個性的風格。可以根據自己的應用調性來選擇使用哪種運動路徑。

用超多案例,幫你掌握UI 動效基礎設計知識

5. 引力

重力通常會在對象需要從一個場景跳轉到另一個場景時發生作用。當一個物體脫離場景,重力會拉下該物體,在其移動時產生一條更自然的物體軌跡曲線。因此,有元素連接的動畫會使用重力的概念。

用超多案例,幫你掌握UI 動效基礎設計知識

6. 振盪

默認情況下,動效在到達終點時會結束,但添加振盪時,過渡路徑至少超過其端點一次,然後反向返回端點。振盪可以用來表達一種更加俏皮和充滿活力的過渡風格。

用超多案例,幫你掌握UI 動效基礎設計知識

7. 觸底反彈

觸底反彈是當我們在滾動應用到達最底部或最頂部時,會出現回彈效果,這種通常還可以跟功能進行結合,例如下滑刷新或進入新的頁面,上滑出現彩蛋等。

用超多案例,幫你掌握UI 動效基礎設計知識