動效在 UI 場景中的運(yùn)用已經(jīng)非常普遍，帶給用戶的體驗升級也是很直觀的。無論是一個圖標(biāo)動效到界面間的轉(zhuǎn)場動效，還是聊天場景中的表情動效等，都證明了動效已經(jīng)是無處不在。

最近黑馬哥在體驗產(chǎn)品的過程中，發(fā)現(xiàn)了很多優(yōu)秀的動效案例，今天選擇其中的 10 個和大家一起交流學(xué)習(xí)，希望能夠帶給大家一些靈感啟發(fā)。

更多動效細(xì)節(jié) ?? https://www.uisdc.com/hunter

動效，讓點贊與眾不同

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

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

動態(tài)提醒，增強(qiáng)消息的關(guān)注度

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

支付寶在消息模塊的服務(wù)提醒中，采用了動態(tài)形式提高關(guān)注度。當(dāng)用戶點擊消息進(jìn)入界面時，小鈴鐺圖標(biāo)會左右晃動，以此來吸引用戶的目光，達(dá)到增加關(guān)注度的目的。

圖標(biāo)動效，讓你脫穎而出

在金剛區(qū)眾多的業(yè)務(wù)模塊中，想要突出重點模塊的關(guān)注度，采用動態(tài)圖標(biāo)是比較常用的方式。采用動靜結(jié)合的形式，會讓動態(tài)表達(dá)得到突出。

比如 Keep App 將活動挑戰(zhàn)圖標(biāo)動效化，在不改變配色規(guī)則和圖標(biāo)設(shè)計規(guī)范前提下，依然可以達(dá)到突出主題的作用。

博人眼球的動態(tài)懸浮廣告

在不破壞產(chǎn)品結(jié)構(gòu)的前提下，融入廣告的做法中，懸浮層廣告是較為明顯的形式。通常是靜態(tài)異形和動態(tài)異形較多，而動態(tài)的關(guān)注度相對更強(qiáng)一些。

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

內(nèi)容模塊結(jié)合動效替換突出存在感

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

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

微弱的動效也能呈現(xiàn)有溫度的設(shè)計

有時候在進(jìn)行產(chǎn)品設(shè)計的時候，動效帶來的關(guān)注度并不是需要很強(qiáng)的表現(xiàn)力，一些微弱的動效依然可以提升產(chǎn)品體驗，帶給用戶更有溫度的設(shè)計。

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

動態(tài)感十足的底部標(biāo)簽欄

圖標(biāo)動效運(yùn)用到底部標(biāo)簽欄十分普遍，在這個頻繁切換的操作中，動態(tài)的形式可以帶來更強(qiáng)的趣味性和關(guān)注度。

優(yōu)酷 App 底部標(biāo)簽欄采用多種顏色變化轉(zhuǎn)場，結(jié)合路徑動效帶來動感十足的體驗。首頁圖標(biāo)還結(jié)合了刷新的功能，方便用戶進(jìn)行內(nèi)容的刷新，增強(qiáng)用戶體驗感。

拓展功能的動態(tài)指引設(shè)計

針對一些功能體量較大的產(chǎn)品，會經(jīng)常結(jié)合一些隱藏式設(shè)計，拓展出更多功能操作。通常默認(rèn)為展開狀態(tài)，在滑動瀏覽內(nèi)容時隱藏，通過動效吸引點擊展開，不會造成主內(nèi)容的干擾。

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

結(jié)合動態(tài) IP 的下拉刷新

針對下拉刷新這一常規(guī)操作，設(shè)計形式也是豐富多樣。結(jié)合 IP 形象進(jìn)行動態(tài)演變完成刷新動作，被很多產(chǎn)品設(shè)計師所采納。

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

圖標(biāo)動效帶動局部功能的關(guān)注度

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

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

小結(jié)

動效表達(dá)在產(chǎn)品設(shè)計中的應(yīng)用越發(fā)普及，不僅可以強(qiáng)化功能的關(guān)注度，也能帶給用戶感官體驗上的升級。優(yōu)秀案例的積累和分析，有助于我們掌握更多的表現(xiàn)形式，靈活的運(yùn)用到項目設(shè)計中。