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