01.  

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

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

最近在使用釘釘 APP 進(jìn)行聊天的過(guò)程中，發(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)品中隨處可見(jià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)，以此來(lái)吸引用戶的目光，達(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)注度。如果用戶覺(jué)得影響操作，也可以直接關(guān)閉，就不會(huì)反復(fù)提醒而形成干擾。

 05.  

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

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

當(dāng)當(dāng) App 在突出今日搶購(gòu)欄目時(shí)，為了不影響臨近板塊的干擾度，利用動(dòng)效轉(zhuǎn)場(chǎng)來(lái)替換展示的商品信息。縮放替換商品時(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)效帶來(lái)的關(guān)注度并不是需要很強(qiáng)的表現(xiàn)力，一些微弱的動(dòng)效依然可以提升產(chǎn)品體驗(yàn)，帶給用戶更有溫度的設(shè)計(jì)。

自如 App 整體的設(shè)計(jì)都是做得非常不錯(cuò)的，在“我的”板塊頭部區(qū)域，結(jié)合背景插畫視覺(jué)感也是非常不錯(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)的形式可以帶來(lái)更強(qiáng)的趣味性和關(guān)注度。

優(yōu)酷 App 底部標(biāo)簽欄采用多種顏色變化轉(zhuǎn)場(chǎng)，結(jié)合路徑動(dòng)效帶來(lái)動(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)為展開(kāi)狀態(tài)，在滑動(dòng)瀏覽內(nèi)容時(shí)隱藏，通過(guò)動(dòng)效吸引點(diǎn)擊展開(kāi)，不會(huì)造成主內(nèi)容的干擾。

比如平安口袋銀行底部標(biāo)簽欄上方的拓展功能區(qū)，動(dòng)態(tài)形式的展開(kā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í)兩只耳朵搖擺非常俏皮可愛(ài)，松開(kāi)后 IP 形象露出，還配合眨眼睛等可愛(ài)的表情動(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ì)，帶來(lái)的效果也是顯而易見(jiàn)。

比如 QQ 音樂(lè)在“我的”模塊中，將活動(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ì)中。

原文地址：黑馬家族（公眾號(hào)）

作者：黑馬青年

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》發(fā)現(xiàn)了10個(gè)非常棒的UI動(dòng)效案例

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)