找了30天找到的優秀動效靈感,不看虧大了
毋庸置疑動效現在已經成了生活中不可或缺的一部分,它給生活中帶來了很多樂趣和功能性的指引作用,就連現在馬路上奔馳的汽車后尾燈都是帶動效的,比方說汽車要右轉了,汽車不會是像之前的車一樣,只是右邊的車尾燈亮了就行,它的燈帶是一個不斷向右運動的循環動效,它的提示效果更加的醒目;其實,動效除了在硬件產品上應用外,他在我們日常的軟件產品上也在被廣泛應用,下面是我日常觀察到的有趣有料的動效設計,分享出來希望給大家帶來更多的啟發和思考。
一、動效在積分頁中的應用
積分用一種比較形象的動效方式展現出來,大大提升了產品的趣味性。
斑馬英語的積分頁用存錢罐投放金幣的動效來表達每一次積分的查詢,非常的形象,游戲味道很足,趣味感滿滿,提升了用戶體驗的體感。
二、動效在按鈕中的應用
當點擊按鈕,很久沒有反應,在按鈕中添加加載的動效樣式,很好的展示了當前的一個程序運作情況。
中國電信在充值完話費后,會彈出一個當前的話費查詢入口,但是每次查詢他都不會秒出結果,它巧妙的應用了加載的旋轉動效圖標,既展示了產品當前的一個運作狀況,也給用戶做了一個明確的提示,小小動效也有大大的作用。
三、動效在加載頁中的運用
動效運用在加載頁中能很好的緩解用戶等待的焦慮,而且還可以在用戶等待的過程中帶來意外的樂趣。
咕比啟蒙APP在每個需要加載的頁面中都加入了兩個飛翔的萌寵動效,非常的有趣,然后上面還配帶了加載的進度條展示,讓用戶很明確的知道還要等待多久,為用戶考慮了很多,體驗感比較好。
CSDN這個產品的加載動效也非常的有趣,加載動效運用的是一個在滑著滑板車的小小少年,給這個知識性這么強的平臺帶來了一絲輕松愉悅的氛圍。
四、動效在啟動頁中的應用
動效在產品傳遞信息過程中是一個屢試不爽的好辦法,它可以給用戶帶來很好的情感化體驗。
咕比啟蒙它是一個少兒才藝啟蒙的平臺,他的啟動頁就是用了一個IP形象運動的動畫演示,非常的生動、形象、可愛,給用戶留下了很深刻的印象,讓人很容易記住這個品牌。
五、通過動效增加曝光的機會
對于產品中新開發的功能,動效是一個很好的引起人們注意的方式。
微博在人們的印象中,它是一個基于用戶關系的信息分享、傳播以及獲取的平臺,如果這個微博漁場的功能就是用一張靜態的圖片,很大的可能性用戶也就是一滑而過,那這個功能就不能得到很好的推廣。
六、添加手勢引導增加產品點擊率
按鈕的作用本來就是讓人去點的,但是添加手勢動效后,點擊欲會翻倍增加。
京東金融在新人理財產品中,就運用了手勢動效的強引導設計,對于理財新人來說,理財是一個很新鮮陌生的東西,看到這樣一個陌生的產品難免會猶豫要不要點進去看看,但是增加了強引導的手勢動效后,人們出于好奇也會進去看看的,增加了產品出售的概率。
中信銀行也是的,在可以點擊的,需要強調的入口處,也增加了手勢指引的動效。
七、卡片的反轉動效增加了界面的趣味性
卡片的反轉動效讓頁面更好玩,很大程度上增加了產品的趣味性。
京東金融在一個理財問卷的卡片設計中運用了反轉動效,讓枯燥的答題變得沒有那么枯燥,增加了用戶體驗產品的愉悅性和輕松感,極大的增加了用戶愿意參與的意愿。
八、動效增加了信息傳達的密度
動效可以讓小小的圖也能秒變廣告位,他增加界面的使用效率,增加了界面信息傳達的密度。
在錢包APP中,首頁有一個很亮眼的設計,他把一個小小的圖標變成的廣告位,一個小圖標通過動效的方式就把借錢的效率和大小都表達出來了,信息傳達的密度真的很高,而且用戶還很喜歡看,讓人不抗拒這樣的廣告。
58同城也是在主控制圖標里面打了好多廣告,告訴人們當前的紅色按鈕入口里面既能招人,發帖又能賣房,信息密度超級高,大大提升了頁面利用效率。
九、別出心裁的客服頁設計
通過多個卡片插畫的方式,把客戶可以做的每一個事情都分別寫在卡片上,并且配以動畫,有效降低用戶尋找答案的成本。
百度網盤就很好的運用了這一原理,既然豐富了視覺,又簡化了了用戶尋求幫助的難度,通過插畫卡片方式配以簡潔明了的標題,客戶理解的成本著實降低不少。
十、物動效增加產品的情感化
現在產品中的情感化設計被越來越重視,IP設計被廣泛應用在各大產品設計中。
央視財經這樣的產品也開始在產品中加入了IP形象的設計,整個風格特別有政府氣息,后面還帶著個飄揚的旗幟,設計的很符合產品的定位,并且還帶著呆萌的動效,很有親和力。
中信銀行在財富節中,設計了一個財神爺的IP形象,然后還配合了一點微動效,增加了人們對財富節這個節日的關注度。
產品體驗總結:
通過大量的體驗,感受到了動效在各個場景都發揮了很大的作用,它兼具功能和美感,不僅能夠提升用戶體驗,增強界面表達,還能吸引用戶注意力,傳達界面層級關系,增加品牌特色,提供情感化體驗,同時也提升了設計的專業性。
本文觀點都為個人理解和總結,不足之處也歡迎大家留言區多多點評指正,大家共同進步!
作者:姝斐suphie,公眾號:姝斐
本文由 @姝斐suphie 原創發布于人人都是產品經理。未經作者許可,禁止轉載
題圖由作者提供
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
看了幾個下來,我只想說,你還是見得太少了。
比如第一個效果,比它更好的多得是,你舉例微信支付的金幣罐我都會覺得比你現在這個例子好。
第三個第四個,不是很常見嗎?你這30天,估計都在摸魚吧。