01.  

動效，讓點贊與眾不同 

動態表情為社交場景帶來更活躍的體驗，使得交流過程變得更加趣味性。一個動態的表情不僅活躍了氛圍，也使得通過簡單的一個符號代表了千言萬語。

最近在使用釘釘 APP 進行聊天的過程中，發現輸入框的大拇指圖標在長按的時候結合了動效的變化，對話場景中出現的大拇指表情會隨著長按而增大。結合動效和長按手勢，為點贊的圖標增加了不一樣的趣味性，帶給用戶不一樣的社交體驗。

02.  

動態提醒，增強消息的關注度 

各類通知/消息在產品中隨處可見，紅點提示剛出現的時候還引起了用戶強迫癥，短時間內也增強了消息的閱讀率。隨著紅點效應逐漸淡化，未讀消息的點擊率逐漸降低，大家都在嘗試更多提高關注度的形式。

支付寶在消息模塊的服務提醒中，采用了動態形式提高關注度。當用戶點擊消息進入界面時，小鈴鐺圖標會左右晃動，以此來吸引用戶的目光，達到增加關注度的目的。

 03.  

圖標動效，讓你脫穎而出 

在金剛區眾多的業務模塊中，想要突出重點模塊的關注度，采用動態圖標是比較常用的方式。采用動靜結合的形式，會讓動態表達得到突出。

比如 Keep App 將活動挑戰圖標動效化，在不改變配色規則和圖標設計規范前提下，依然可以達到突出主題的作用。

 04.  

博人眼球的動態懸浮廣告 

在不破壞產品結構的前提下，融入廣告的做法中，懸浮層廣告是較為明顯的形式。通常是靜態異形和動態異形較多，而動態的關注度相對更強一些。

比如 Keep App 將活動的折扣信息以懸浮層的形式表達，既不會占用太多空間（隨著滑動會隱藏顯示），又能吸引用戶的關注度。如果用戶覺得影響操作，也可以直接關閉，就不會反復提醒而形成干擾。

 05.  

內容模塊結合動效替換突出存在感 

在一些內容量比較多的產品中，比如電商產品，很多內容模塊都是百花齊放。都想要突出自己模塊的存在感，帶來更好的流量引入。而動效的結合也是不錯的選擇，但是需要考慮動效的干擾度。

當當 App 在突出今日搶購欄目時，為了不影響臨近板塊的干擾度，利用動效轉場來替換展示的商品信息?？s放替換商品時的動效既能達到差異化，也不會破壞整體的結構，算是一舉兩得的設計解決方案。

 06.  

微弱的動效也能呈現有溫度的設計 

有時候在進行產品設計的時候，動效帶來的關注度并不是需要很強的表現力，一些微弱的動效依然可以提升產品體驗，帶給用戶更有溫度的設計。

自如 App 整體的設計都是做得非常不錯的，在“我的”板塊頭部區域，結合背景插畫視覺感也是非常不錯。插畫中部分元素的微動效增強了生活氣息和真實感，讓用戶感受到這是一款有溫度的產品，提升用戶的好感度。

 07.  

動態感十足的底部標簽欄 

圖標動效運用到底部標簽欄十分普遍，在這個頻繁切換的操作中，動態的形式可以帶來更強的趣味性和關注度。

優酷 App 底部標簽欄采用多種顏色變化轉場，結合路徑動效帶來動感十足的體驗。首頁圖標還結合了刷新的功能，方便用戶進行內容的刷新，增強用戶體驗感。

 08. 

 拓展功能的動態指引設計 

針對一些功能體量較大的產品，會經常結合一些隱藏式設計，拓展出更多功能操作。通常默認為展開狀態，在滑動瀏覽內容時隱藏，通過動效吸引點擊展開，不會造成主內容的干擾。

比如平安口袋銀行底部標簽欄上方的拓展功能區，動態形式的展開與隱藏方便用戶瀏覽主頁內容。個別內容采用動態設計（點我抽獎），突出其點擊欲望。動態設計不僅提高了功能的曝光度，也能引導用戶操作，將繁瑣的操作變得更便利。

 09. 

 結合動態 IP 的下拉刷新 

針對下拉刷新這一常規操作，設計形式也是豐富多樣。結合 IP 形象進行動態演變完成刷新動作，被很多產品設計師所采納。

美團外賣就將品牌 IP 形象結合得恰到好處，下拉刷新時兩只耳朵搖擺非常俏皮可愛，松開后 IP 形象露出，還配合眨眼睛等可愛的表情動效。情感化設計結合動態表現，拉近與用戶之間的親和力，帶給用戶更人性化的使用體驗。

 10. 

 圖標動效帶動局部功能的關注度 

對于一些局部功能或者模塊占比較小的欄目，為了提高曝光度，獲得用戶的關注度，動態的形式是比較常用的方法。通常會在圖標部分、文字部分、裝飾元素部分等進行動效設計，帶來的效果也是顯而易見。

比如 QQ 音樂在“我的”模塊中，將活動中心、會員中心、每日簽到的圖標采用動態設計形式，雖然幾個模塊占比較小，但是依然能夠獲得用戶的關注度。

 小結 

動效表達在產品設計中的應用越發普及，不僅可以強化功能的關注度，也能帶給用戶感官體驗上的升級。優秀案例的積累和分析，有助于我們掌握更多的表現形式，靈活的運用到項目設計中。

原文地址：黑馬家族（公眾號）

作者：黑馬青年

轉載請注明：學UI網》發現了10個非常棒的UI動效案例

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務