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