毋庸置疑動(dòng)效現(xiàn)在已經(jīng)成了生活中不可或缺的一部分，它給生活中帶來了很多樂趣和功能性的指引作用，就連現(xiàn)在馬路上奔馳的汽車后尾燈都是帶動(dòng)效的，比方說汽車要右轉(zhuǎn)了，汽車不會(huì)是像之前的車一樣，只是右邊的車尾燈亮了就行，它的燈帶是一個(gè)不斷向右運(yùn)動(dòng)的循環(huán)動(dòng)效，它的提示效果更加的醒目；其實(shí)，動(dòng)效除了在硬件產(chǎn)品上應(yīng)用外，他在我們?nèi)粘５能浖a(chǎn)品上也在被廣泛應(yīng)用，下面是我日常觀察到的有趣有料的動(dòng)效設(shè)計(jì)，分享出來希望給大家?guī)砀嗟膯l(fā)和思考。

一、動(dòng)效在積分頁中的應(yīng)用

積分用一種比較形象的動(dòng)效方式展現(xiàn)出來，大大提升了產(chǎn)品的趣味性。

斑馬英語的積分頁用存錢罐投放金幣的動(dòng)效來表達(dá)每一次積分的查詢，非常的形象，游戲味道很足，趣味感滿滿，提升了用戶體驗(yàn)的體感。

二、動(dòng)效在按鈕中的應(yīng)用

當(dāng)點(diǎn)擊按鈕，很久沒有反應(yīng)，在按鈕中添加加載的動(dòng)效樣式，很好的展示了當(dāng)前的一個(gè)程序運(yùn)作情況。

中國電信在充值完話費(fèi)后，會(huì)彈出一個(gè)當(dāng)前的話費(fèi)查詢?nèi)肟?，但是每次查詢他都不?huì)秒出結(jié)果，它巧妙的應(yīng)用了加載的旋轉(zhuǎn)動(dòng)效圖標(biāo)，既展示了產(chǎn)品當(dāng)前的一個(gè)運(yùn)作狀況，也給用戶做了一個(gè)明確的提示，小小動(dòng)效也有大大的作用。

三、動(dòng)效在加載頁中中的運(yùn)用

動(dòng)效運(yùn)用在加載頁中能很好的緩解用戶等待的焦慮，而且還可以在用戶等待的過程中帶來意外的樂趣。

咕比啟蒙 APP 在每個(gè)需要加載的頁面中都加入了兩個(gè)飛翔的萌寵動(dòng)效，非常的有趣，然后上面還配帶了加載的進(jìn)度條展示，讓用戶很明確的知道還要等待多久，為用戶考慮了很多，體驗(yàn)感比較好。

CSDN 這個(gè)產(chǎn)品的加載動(dòng)效也非常的有趣，加載動(dòng)效運(yùn)用的是一個(gè)在滑著滑板車的小小少年，給這個(gè)知識(shí)性這么強(qiáng)的平臺(tái)帶來了一絲輕松愉悅的氛圍。

四、動(dòng)效在啟動(dòng)頁中的應(yīng)用

動(dòng)效在產(chǎn)品傳遞信息過程中是一個(gè)屢試不爽的好辦法，它可以給用戶帶來很好的情感化體驗(yàn)。

咕比啟蒙它是一個(gè)少兒才藝啟蒙的平臺(tái)，他的啟動(dòng)頁就是用了一個(gè) IP 形象運(yùn)動(dòng)的動(dòng)畫演示，非常的生動(dòng)、形象、可愛，給用戶留下了很深刻的印象，讓人很容易記住這個(gè)品牌。

五、通過動(dòng)效增加曝光的機(jī)會(huì)

對(duì)于產(chǎn)品中新開發(fā)的功能，動(dòng)效是一個(gè)很好的引起人們注意的方式。

微博在人們的印象中，它是一個(gè)基于用戶關(guān)系的信息分享、傳播以及獲取的平臺(tái)，如果這個(gè)微博漁場(chǎng)的功能就是用一張靜態(tài)的圖片，很大的可能性用戶也就是一滑而過，那這個(gè)功能就不能得到很好的推廣。

六、添加手勢(shì)引導(dǎo)增加產(chǎn)品點(diǎn)擊率

按鈕的作用本來就是讓人去點(diǎn)的，但是添加手勢(shì)動(dòng)效后，點(diǎn)擊欲會(huì)翻倍增加。

京東金融在新人理財(cái)產(chǎn)品中，就運(yùn)用了手勢(shì)動(dòng)效的強(qiáng)引導(dǎo)設(shè)計(jì)，對(duì)于理財(cái)新人來說，理財(cái)是一個(gè)很新鮮陌生的東西，看到這樣一個(gè)陌生的產(chǎn)品難免會(huì)猶豫要不要點(diǎn)進(jìn)去看看，但是增加了強(qiáng)引導(dǎo)的手勢(shì)動(dòng)效后，人們出于好奇也會(huì)進(jìn)去看看的，增加了產(chǎn)品出售的概率。

中信銀行也是的，在可以點(diǎn)擊的，需要強(qiáng)調(diào)的入口處，也增加了手勢(shì)指引的動(dòng)效。

七、卡片的反轉(zhuǎn)動(dòng)效增加了界面的趣味性

卡片的反轉(zhuǎn)動(dòng)效讓頁面更好玩，很大程度上增加了產(chǎn)品的趣味性。

京東金融在一個(gè)理財(cái)問卷的卡片設(shè)計(jì)中運(yùn)用了反轉(zhuǎn)動(dòng)效，讓枯燥的答題變得沒有那么枯燥，增加了用戶體驗(yàn)產(chǎn)品的愉悅性和輕松感，極大的增加了用戶愿意參與的意愿。

八、動(dòng)效增加了信息傳達(dá)的密度

動(dòng)效可以讓小小的圖也能秒變廣告位，他增加界面的使用效率，增加了界面信息傳達(dá)的密度。

在錢包 APP 中，首頁有一個(gè)很亮眼的設(shè)計(jì)，他把一個(gè)小小的圖標(biāo)變成的廣告位，一個(gè)小圖標(biāo)通過動(dòng)效的方式就把借錢的效率和大小都表達(dá)出來了，信息傳達(dá)的密度真的很高，而且用戶還很喜歡看，讓人不抗拒這樣的廣告。

58 同城也是在主控制圖標(biāo)里面打了好多廣告，告訴人們當(dāng)前的紅色按鈕入口里面既能招人，發(fā)帖又能賣房，信息密度超級(jí)高，大大提升了頁面利用效率。

九、別出心裁的客服頁設(shè)計(jì)

通過多個(gè)卡片插畫的方式，把客戶可以做的每一個(gè)事情都分別寫在卡片上，并且配以動(dòng)畫，有效降低用戶尋找答案的成本。

百度網(wǎng)盤就很好的運(yùn)用了這一原理，既然豐富了視覺，又簡(jiǎn)化了了用戶尋求幫助的難度，通過插畫卡片方式配以簡(jiǎn)潔明了的標(biāo)題，客戶理解的成本著實(shí)降低不少。

十、通過吉祥物動(dòng)效增加產(chǎn)品的情感化

現(xiàn)在產(chǎn)品中的情感化設(shè)計(jì)被越來越重視，IP 設(shè)計(jì)被廣泛應(yīng)用在各大產(chǎn)品設(shè)計(jì)中。

央視財(cái)經(jīng)這樣的產(chǎn)品也開始在產(chǎn)品中加入了 IP 形象的設(shè)計(jì)，整個(gè)風(fēng)格特別有政府氣息，后面還帶著個(gè)飄揚(yáng)的旗幟，設(shè)計(jì)的很符合產(chǎn)品的定位，并且還帶著呆萌的動(dòng)效，很有親和力。

中信銀行在財(cái)富節(jié)中，設(shè)計(jì)了一個(gè)財(cái)神爺?shù)?IP 形象，然后還配合了一點(diǎn)微動(dòng)效，增加了人們對(duì)財(cái)富節(jié)這個(gè)節(jié)日的關(guān)注度。

產(chǎn)品體驗(yàn)總結(jié)：

通過大量的體驗(yàn)，感受到了動(dòng)效在各個(gè)場(chǎng)景都發(fā)揮了很大的作用，它兼具功能和美感，不僅能夠提升用戶體驗(yàn)，增強(qiáng)界面表達(dá)，還能吸引用戶注意力，傳達(dá)界面層級(jí)關(guān)系，增加品牌特色，提供情感化體驗(yàn)，同時(shí)也提升了設(shè)計(jì)的專業(yè)性。

本文觀點(diǎn)都為個(gè)人理解和總結(jié)，不足之處也歡迎大家留言區(qū)多多點(diǎn)評(píng)指正，大家共同進(jìn)步！

姝斐suphie