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

 

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

 

 

 

 

01. 動(dòng)效，讓點(diǎn)贊與眾不同

 

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

 

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

 

 

 

 

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

 

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

 

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

 

 

 

 

03. 圖標(biāo)動(dòng)效，讓你脫穎而出

 

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

 

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

 

 

 

 

04. 博人眼球的動(dòng)態(tài)懸浮廣告

 

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

 

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

 

 

 

 

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

 

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

 

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

 

 

 

 

06. 微弱的動(dòng)效也能呈現(xiàn)有溫度的設(shè)計(jì)

 

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

 

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

 

 

 

 

07. 動(dòng)態(tài)感十足的底部標(biāo)簽欄

 

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

 

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

 

 

 

 

08. 拓展功能的動(dòng)態(tài)指引設(shè)計(jì)

 

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

 

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

 

 

 

 

09. 結(jié)合動(dòng)態(tài) IP 的下拉刷新

 

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

 

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

 

 

 

 

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

 

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

 

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

 

 

 

 

小結(jié)

 

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

 

 

作者：黑馬青年（vx: heimaux）

本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。

作者：黑馬青年
鏈接：https://www.zcool.com.cn/article/ZMTMzMTI5Mg==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。