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

推薦閱讀

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

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

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

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

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

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

三、動效在加載頁中中的運用

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

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

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

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

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

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

五、通過動效增加曝光的機(jī)會

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

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

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

按鈕的作用本來就是讓人去點的，但是添加手勢動效后，點擊欲會翻倍增加。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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