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