微動效在產(chǎn)品設(shè)計中的運用已經(jīng)非常普及了，無論是在圖標還是界面場景中，都運用得很普遍。通過動效的輔助不僅可以提升設(shè)計情感化，也能解決更為復雜的交互場景，讓設(shè)計更驚艷。
最近在體驗一些產(chǎn)品的過程中，黑馬哥也發(fā)現(xiàn)了幾個借助動效表達的設(shè)計方案，效果十分的驚艷，分享出來和大家一起學習一下。
會員中心通常會通過 3D 圖標來助力會員等級設(shè)計，除了靜態(tài)的表達也會通過動效和新穎的交互形式呈現(xiàn)，以此提高會員中心的視覺表現(xiàn)力。
最近在體驗騰訊視頻 APP 時，會員專區(qū)在表現(xiàn)用戶會員等級的設(shè)計中，沒有使用傳統(tǒng)的徽章形式，而是以 3D 數(shù)字結(jié)合動效的形式表達。3D 動效的設(shè)計使得會員等級區(qū)別于常規(guī)形式，更有吸引力。
IP 形象是成就品牌的關(guān)鍵因素之一，被廣泛運用到產(chǎn)品感官體驗的設(shè)計中，帶來的情感化共勉也是顯而易見的。
在使用悟空瀏覽器 APP 時，啟動產(chǎn)品進入首頁后搜索框上方出現(xiàn)悟空的 IP 形象，悟空呈現(xiàn)出左右環(huán)顧、上下打量，最后看向搜索框的系列動作等表現(xiàn)。不僅提高了搜索功能的關(guān)注度，也使得產(chǎn)品設(shè)計更具情感化。
根據(jù)不同的業(yè)務(wù)場景進行設(shè)計表達，可以更好的服務(wù)目標用戶，而情感化的設(shè)計提升，可以拉近產(chǎn)品與用戶之間的親和力。
為了降低用戶等餐過程中出現(xiàn)的負面情緒，餓了么 APP 下單之后在詳情頁中根據(jù)點餐的不同設(shè)計了情感化的動效表達。無論是快餐還是冷飲等，都針對性地設(shè)計了微動效的元素，以此來表現(xiàn)當前狀態(tài)。
通過突出設(shè)計、交互、布局結(jié)構(gòu)等的創(chuàng)意性，可以使得 Banner 具備更強的差異化，以此來突出 Banner 的存在感。
騰訊視頻 APP 首頁的 Banner 布局也會經(jīng)常呈現(xiàn)出一些很有創(chuàng)意的方案，比如之前體驗到一個結(jié)合 3D 空間感營造的設(shè)計案例，就非常有吸引力。通過動態(tài)過度到立體空間，再恢復到默認形式，這個動態(tài)的過程演變就能讓用戶過目不忘。
針對一些使用頻次不高或者過于隱藏的功能，為了提高用戶的操作概率，會通過一些特殊的設(shè)計表達來提升用戶的關(guān)注度，引導用戶進行相關(guān)操作。
比如麥當勞 APP 首頁中，為了吸引用戶下拉進入二層樓，通過動效的形式設(shè)計了一個搖擺的鈴鐺，以此來吸引用戶的注意力。用戶看到像是隨風飄動的鈴鐺，就會忍不住去拉動，這就達到了引導用戶操作的目的，提高了二層樓內(nèi)容的曝光度。
針對一些無法通過占比面積進行突出的元素，運用微動效的形式設(shè)計是常見的設(shè)計手法。
網(wǎng)易云音樂 APP “我的”板塊中，為了突出 VIP 續(xù)費按鈕，黑膠唱片以動效的形式在按鈕中來回滾動，以此強化續(xù)費按鈕的關(guān)注度。
天氣類產(chǎn)品從簡單的靜態(tài)預告升級為動態(tài)實時還原，可以讓用戶更加直觀的判斷天氣變化，也能提高界面設(shè)計的感官體驗。
比如 iPhone 自帶的天氣 APP，以動態(tài)還原實時天氣作為界面背景，不僅便于用戶識別天氣，也使得產(chǎn)品設(shè)計更具情感化體驗。
按鈕設(shè)計樣式可以發(fā)揮的空間很大，除了在造型、配色、空間感等方面突出設(shè)計以外，也能通過按鈕微動效或者動態(tài)引導等形式強化。
比如智行火車票 APP “搶票”板塊中，為了突出“添加搶票”按鈕的存在感，以動效 IP 引導進行設(shè)計。不僅使得按鈕更突出，設(shè)計感也顯得俏皮可愛，凸顯親和力。
立足于品牌做設(shè)計是突出產(chǎn)品差異化的關(guān)鍵，這也是產(chǎn)品設(shè)計未來的演變趨勢之一，如何提高品牌的曝光度和記憶度，成為設(shè)計師不斷探索的方向。
最近在使用夸克 APP 時，微動效賦予品牌 LOGO 的活力感讓人印象深刻。在眾多特殊節(jié)慶等時間段，夸克也會以動效的形式賦予品牌更多變化，不僅使得產(chǎn)品更具年輕化屬性，也能更好的傳遞品牌基因。
動效使得產(chǎn)品具備更多的變化，也能輔助解決更多復雜功能的交互場景，探索動效的場景運用可以提升設(shè)計靈感，希望本期的分享可以帶給大家更多設(shè)計靈感。本文描述屬于個人體驗總結(jié)，不足之處我們努力改進。
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。
作者：黑馬青年
鏈接：https://www.zcool.com.cn/article/ZMTYzOTIyOA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
