2025-3-7 杰睿
動效在 UI 場景中的運用已經非常普遍，帶給用戶的體驗升級也是很直觀的。無論是一個圖標動效到界面間的轉場動效，還是聊天場景中的表情動效等，都證明了動效已經是無處不在。
最近黑馬哥在體驗產品的過程中，發現了很多優秀的動效案例，今天選擇其中的 10 個和大家一起交流學習，希望能夠帶給大家一些靈感啟發。
01. 動效，讓點贊與眾不同
動態表情為社交場景帶來更活躍的體驗，使得交流過程變得更加趣味性。一個動態的表情不僅活躍了氛圍，也使得通過簡單的一個符號代表了千言萬語。
最近在使用釘釘 APP 進行聊天的過程中，發現輸入框的大拇指圖標在長按的時候結合了動效的變化，對話場景中出現的大拇指表情會隨著長按而增大。結合動效和長按手勢，為點贊的圖標增加了不一樣的趣味性，帶給用戶不一樣的社交體驗。
02. 動態提醒，增強消息的關注度
各類通知/消息在產品中隨處可見，紅點提示剛出現的時候還引起了用戶強迫癥，短時間內也增強了消息的閱讀率。隨著紅點效應逐漸淡化，未讀消息的點擊率逐漸降低，大家都在嘗試更多提高關注度的形式。
支付寶在消息模塊的服務提醒中，采用了動態形式提高關注度。當用戶點擊消息進入界面時，小鈴鐺圖標會左右晃動，以此來吸引用戶的目光，達到增加關注度的目的。
03. 圖標動效，讓你脫穎而出
在金剛區眾多的業務模塊中，想要突出重點模塊的關注度，采用動態圖標是比較常用的方式。采用動靜結合的形式，會讓動態表達得到突出。
比如 Keep App 將活動挑戰圖標動效化，在不改變配色規則和圖標設計規范前提下，依然可以達到突出主題的作用。
04. 博人眼球的動態懸浮廣告
在不破壞產品結構的前提下，融入廣告的做法中，懸浮層廣告是較為明顯的形式。通常是靜態異形和動態異形較多，而動態的關注度相對更強一些。
比如 Keep App 將活動的折扣信息以懸浮層的形式表達，既不會占用太多空間（隨著滑動會隱藏顯示），又能吸引用戶的關注度。如果用戶覺得影響操作，也可以直接關閉，就不會反復提醒而形成干擾。
05. 內容模塊結合動效替換突出存在感
在一些內容量比較多的產品中，比如電商產品，很多內容模塊都是百花齊放。都想要突出自己模塊的存在感，帶來更好的流量引入。而動效的結合也是不錯的選擇，但是需要考慮動效的干擾度。
當當 App 在突出今日搶購欄目時，為了不影響臨近板塊的干擾度，利用動效轉場來替換展示的商品信息。縮放替換商品時的動效既能達到差異化，也不會破壞整體的結構，算是一舉兩得的設計解決方案。
06. 微弱的動效也能呈現有溫度的設計
有時候在進行產品設計的時候，動效帶來的關注度并不是需要很強的表現力，一些微弱的動效依然可以提升產品體驗，帶給用戶更有溫度的設計。
自如 App 整體的設計都是做得非常不錯的，在“我的”板塊頭部區域，結合背景插畫視覺感也是非常不錯。插畫中部分元素的微動效增強了生活氣息和真實感，讓用戶感受到這是一款有溫度的產品，提升用戶的好感度。
07. 動態感十足的底部標簽欄
圖標動效運用到底部標簽欄十分普遍，在這個頻繁切換的操作中，動態的形式可以帶來更強的趣味性和關注度。
優酷 App 底部標簽欄采用多種顏色變化轉場，結合路徑動效帶來動感十足的體驗。首頁圖標還結合了刷新的功能，方便用戶進行內容的刷新，增強用戶體驗感。
08. 拓展功能的動態指引設計
針對一些功能體量較大的產品，會經常結合一些隱藏式設計，拓展出更多功能操作。通常默認為展開狀態，在滑動瀏覽內容時隱藏，通過動效吸引點擊展開，不會造成主內容的干擾。
比如平安口袋銀行底部標簽欄上方的拓展功能區，動態形式的展開與隱藏方便用戶瀏覽主頁內容。個別內容采用動態設計（點我抽獎），突出其點擊欲望。動態設計不僅提高了功能的曝光度，也能引導用戶操作，將繁瑣的操作變得更便利。
09. 結合動態 IP 的下拉刷新
針對下拉刷新這一常規操作，設計形式也是豐富多樣。結合 IP 形象進行動態演變完成刷新動作，被很多產品設計師所采納。
美團外賣就將品牌 IP 形象結合得恰到好處，下拉刷新時兩只耳朵搖擺非常俏皮可愛，松開后 IP 形象露出，還配合眨眼睛等可愛的表情動效。情感化設計結合動態表現，拉近與用戶之間的親和力，帶給用戶更人性化的使用體驗。
10. 圖標動效帶動局部功能的關注度
對于一些局部功能或者模塊占比較小的欄目，為了提高曝光度，獲得用戶的關注度，動態的形式是比較常用的方法。通常會在圖標部分、文字部分、裝飾元素部分等進行動效設計，帶來的效果也是顯而易見。
比如 QQ 音樂在“我的”模塊中，將活動中心、會員中心、每日簽到的圖標采用動態設計形式，雖然幾個模塊占比較小，但是依然能夠獲得用戶的關注度。
小結
動效表達在產品設計中的應用越發普及，不僅可以強化功能的關注度，也能帶給用戶感官體驗上的升級。優秀案例的積累和分析，有助于我們掌握更多的表現形式，靈活的運用到項目設計中。
作者：黑馬青年（vx: heimaux）
本文由 @黑馬青年 原創發布。未經許可，禁止轉載。
