01.  磨砂玻璃式的金剛區(qū)圖標(biāo)設(shè)計(jì) 

輕質(zhì)感在 UI 設(shè)計(jì)場(chǎng)景中的運(yùn)用近些年比較明顯，以磨砂效果為代表的無(wú)論是在圖標(biāo)設(shè)計(jì)還是界面表現(xiàn)上面都較為常見，特別是在金剛區(qū)的圖標(biāo)設(shè)計(jì)上面。

喜馬拉雅 App 首頁(yè)金剛區(qū)圖標(biāo)結(jié)合磨砂效果呈現(xiàn)，材質(zhì)感和舒適度都較為突出。實(shí)現(xiàn)難度也比較小，通過(guò) Sketch 軟件的背景模糊很容易實(shí)現(xiàn)。突出業(yè)務(wù)以微動(dòng)效的形式表達(dá)，這也是較為常見的差異化設(shè)計(jì)解決方案之一。 

02.  多種模式滿足用戶不同喜好 

不同用戶的操作習(xí)慣和感官標(biāo)準(zhǔn)各不相同，越來(lái)越多的產(chǎn)品為了滿足用戶的不同喜好，設(shè)計(jì)多種模式進(jìn)行設(shè)置切換。最早的就是主題皮膚，逐步延展到更多的功能模塊中，比如音樂播放頁(yè)的布局設(shè)置。

MOO 音樂為用戶提供了以專輯封面和背景大圖來(lái)進(jìn)行播放頁(yè)的模式設(shè)置，用戶可以根據(jù)自己的喜好進(jìn)行設(shè)置。在進(jìn)行 UI 設(shè)計(jì)的時(shí)候無(wú)法判斷用戶的唯一喜好，多種模式的自定義設(shè)置更能帶給用戶良好的體驗(yàn)。

03.  獨(dú)一無(wú)二的個(gè)性化首頁(yè)定制 

隨著用戶喜好的變化，自定義模式可以滿足各自不同的需求，網(wǎng)易云音樂推出了獨(dú)一無(wú)二的個(gè)性化首頁(yè)定制設(shè)計(jì)。用戶可以通過(guò)預(yù)設(shè)的默認(rèn)模式、歌單模式、視頻模式進(jìn)行選擇，為了方便用戶判斷定制后的效果，可以通過(guò)“功能說(shuō)明”觀看預(yù)設(shè)后的樣式，直觀的展示提高用戶的判斷體驗(yàn)。

自定義模式打破了千篇一律的設(shè)計(jì)，根據(jù)用戶的喜好呈現(xiàn)內(nèi)容，提高了用戶粘性和使用體驗(yàn)。

04.  App Banner 呈現(xiàn)的裸眼 3D 效果 

突然有一天在使用自如 App 的時(shí)候發(fā)現(xiàn)了這個(gè)隱藏的“彩蛋”，模擬裸眼 3D 效果的呈現(xiàn)方式在 Banner 上面，是一次全新的嘗試。通過(guò)借助移動(dòng)設(shè)備上的傳感器等將 2D 影像轉(zhuǎn)化為景深效果，以呈現(xiàn)出不用 3D 眼鏡就可看到的 3D 效果。

自如

05.  簡(jiǎn)單的動(dòng)效不一樣的場(chǎng)景代入感 

微動(dòng)效在產(chǎn)品設(shè)計(jì)中的運(yùn)用已經(jīng)非常普及，特別是在圖標(biāo)中的運(yùn)用，既能提高圖標(biāo)的關(guān)注度，也能體現(xiàn)圖標(biāo)的差異化。就像一個(gè)掃一掃的功能圖標(biāo)，加上簡(jiǎn)單的動(dòng)效呈現(xiàn)，提高了場(chǎng)景代入感。

將現(xiàn)實(shí)中的掃描動(dòng)作運(yùn)用到圖標(biāo)動(dòng)效的表達(dá)上面，既增加了該功能的關(guān)注度，也能讓主題表達(dá)更清晰。

06.  視頻引導(dǎo)關(guān)注度更強(qiáng) 

引導(dǎo)頁(yè)是 UI 設(shè)計(jì)中較為普遍的存在，而動(dòng)效的引導(dǎo)和視頻形式的引導(dǎo)相較于靜態(tài)圖文形式來(lái)說(shuō)，更能吸引用戶的關(guān)注度。特別是隨著 C4D 等三維軟件的普及，結(jié)合立體感和動(dòng)效形式形成視頻引導(dǎo)，也是一種全新的體驗(yàn)。

07.  底部手勢(shì)區(qū)的充分運(yùn)用 

對(duì)于移動(dòng)端來(lái)說(shuō)，隨著大屏手機(jī)的普及，手勢(shì)操作舒適區(qū)的研究至關(guān)重要。底部操作范圍算是手勢(shì)的最佳區(qū)域之一，充分的利用好有利的位置進(jìn)行更多功能的設(shè)計(jì)，提高功能的曝光度。

將一些重點(diǎn)功能通過(guò)懸浮層的形式設(shè)計(jì)在底部，隨著交互的變化進(jìn)行隱藏和顯示，也是一種非常不錯(cuò)的設(shè)計(jì)解決方案。比如平安口袋銀行將我的余額、積分兌換、簽到、抽獎(jiǎng)、領(lǐng)取紅包等設(shè)計(jì)在底部標(biāo)簽欄之上，通過(guò)懸浮層的形式呈現(xiàn)，讓這些原本隱藏的功能得到了曝光，增加了用戶的關(guān)注度。

平安口袋銀行

08.  首頁(yè)導(dǎo)航位置的合理運(yùn)用 

頂部導(dǎo)航欄通常是提示當(dāng)前頁(yè)面的位置，對(duì)于首頁(yè)來(lái)說(shuō)一般會(huì)設(shè)計(jì)搜索、品牌曝光、功能操作、當(dāng)前位置提示等內(nèi)容。也有一些直接展示 Banner 圖，隱藏導(dǎo)航的存在。

一些產(chǎn)品想要弱化活動(dòng) Banner 的空間占比，除了縮小 Banner 高度尺寸以外，最近也發(fā)現(xiàn)了一種新的設(shè)計(jì)解決方案。安居客將活動(dòng)主題設(shè)計(jì)到導(dǎo)航位置，單擊和下拉刷新到一定程度都會(huì)喚起活動(dòng)詳情。該設(shè)計(jì)解決方案不僅充分利用了導(dǎo)航位置，在達(dá)到曝光度的同時(shí)也不會(huì)過(guò)度占用首頁(yè)版面，合理的運(yùn)用了有限的資源。

09.  背景的變化讓等級(jí)區(qū)分更直觀 

很多產(chǎn)品都會(huì)涉及到會(huì)員中心和會(huì)員等級(jí)區(qū)分，不同的等級(jí)如何在設(shè)計(jì)上面體現(xiàn)出差異，除了圖標(biāo)的區(qū)分以外，背景的差異也是一個(gè)設(shè)計(jì)方向。

自如通過(guò)不同漸變色的過(guò)度來(lái)體現(xiàn)會(huì)員等級(jí)的差異，在滑動(dòng)預(yù)覽的時(shí)候 UI 界面也會(huì)隨著色彩的過(guò)度發(fā)生變化，視覺效果非常突出。色彩的變化過(guò)度自然，動(dòng)效的轉(zhuǎn)場(chǎng)伴隨著內(nèi)容的更換，直觀的體現(xiàn)了會(huì)員等級(jí)的權(quán)益區(qū)分。

自如

10.  個(gè)人中心設(shè)計(jì)的場(chǎng)景變化 

個(gè)人中心的設(shè)計(jì)對(duì)于很多產(chǎn)品來(lái)說(shuō)都比較常規(guī)，隨著感官體驗(yàn)的升級(jí)，個(gè)人中心設(shè)計(jì)的差異也有待深入思考。而場(chǎng)景化的情感表達(dá)是提高個(gè)人中心設(shè)計(jì)差異的方向之一，結(jié)合插畫和微動(dòng)效的表達(dá)較為普遍。

自如的個(gè)人中心除了以場(chǎng)景插畫的形式來(lái)提升情感化體驗(yàn)以外，晝夜變化采用了不同的插畫場(chǎng)景來(lái)表現(xiàn)，代入感非常到位。場(chǎng)景插畫還融合了微動(dòng)效，微妙的變化提高了產(chǎn)品的精細(xì)化設(shè)計(jì)，增強(qiáng)了產(chǎn)品的體驗(yàn)感。

自如

小結(jié)