01.  內(nèi)容與手勢(shì)的聯(lián)動(dòng)設(shè)計(jì) 

交互手勢(shì)在移動(dòng)端設(shè)計(jì)場(chǎng)景中至關(guān)重要，手勢(shì)的變化和內(nèi)容的聯(lián)動(dòng)關(guān)系，決定了是否可以獲得更高的用戶體驗(yàn)。 比如抖音的短視頻播放設(shè)計(jì)中，進(jìn)度條拖動(dòng)過(guò)程中除了時(shí)間數(shù)字變化以外，數(shù)字的位置會(huì)隨著手勢(shì)的方向位移。聯(lián)動(dòng)效果的設(shè)計(jì)感官體驗(yàn)明顯，內(nèi)容傳播的關(guān)注度更強(qiáng)。

抖音

02.  內(nèi)容切換的場(chǎng)景模擬化設(shè)計(jì) 

以真實(shí)場(chǎng)景模擬設(shè)計(jì)表現(xiàn)，在 UI 設(shè)計(jì)中比較常用，帶給用戶更強(qiáng)的場(chǎng)景代入感。 比如千聊 App 首頁(yè)的免費(fèi)聽(tīng)直播欄目，直播預(yù)告的時(shí)間切換就像頻道調(diào)頻一樣，切換到自己感興趣的內(nèi)容。自然流暢的動(dòng)效滑動(dòng)，兩條點(diǎn)綴的紅色線條，把頻道切換的場(chǎng)景代入感體現(xiàn)給用戶，帶來(lái)新穎的感官體驗(yàn)。

千聊

03.  通過(guò)文字角標(biāo)設(shè)計(jì)表達(dá)切換差異 

頂部?jī)?nèi)容的分類切換較為常見(jiàn)，特別是電商產(chǎn)品中。一般體現(xiàn)點(diǎn)擊和默認(rèn)通常有字體大小區(qū)分、顏色深淺區(qū)分、下劃線區(qū)分、圖形裝飾區(qū)分等。 除此以外也有下劃線的變異用法，通過(guò)角標(biāo)線段來(lái)體現(xiàn)差異。通常是右下角位置，伴隨著動(dòng)效表達(dá)。比如京東 App 首頁(yè)，聯(lián)想到京東吉祥物，也有一種品牌呼應(yīng)的感覺(jué)。

京東

04.  更貼近真實(shí)場(chǎng)景的設(shè)計(jì)引導(dǎo) 

通過(guò)設(shè)計(jì)還原真實(shí)場(chǎng)景，帶給用戶更強(qiáng)的代入感，從陌生轉(zhuǎn)換到熟悉的場(chǎng)景觸感。 高德地圖通過(guò)模擬真實(shí)的道路狀況，呈現(xiàn)出更加真實(shí)的行車引導(dǎo)，就像自己駕駛的車輛行走在手機(jī)屏幕上一樣。真實(shí)感的路況引導(dǎo)增加了駕駛的代入感，降低了復(fù)雜路口選錯(cuò)方向的可能性，從視覺(jué)感上面也提高了感官體驗(yàn)。

05.  人性化的城市點(diǎn)亮設(shè)計(jì) 

好的產(chǎn)品體驗(yàn)，就是在無(wú)意間帶給用戶驚喜。在小長(zhǎng)假期間，自駕游沿途經(jīng)過(guò)不一樣的城市地點(diǎn)時(shí)，會(huì)彈出“歡迎到來(lái)”的點(diǎn)亮提示，第一次看到還有種驚喜感，算是一種旅行足跡的記錄。 在這個(gè)彈窗廣告滿天飛的互聯(lián)網(wǎng)環(huán)境中，能把這種驚喜帶給用戶才能抓住用戶的黏性，通過(guò)情感化的設(shè)計(jì)提升用戶對(duì)于產(chǎn)品的認(rèn)可度。

06.  被人忽略的上滑交互探索 

大家經(jīng)常使用下拉刷新這個(gè)功能，而且在該功能上的設(shè)計(jì)探索已經(jīng)呈現(xiàn)出非常多的案例，而下滑到底部之后的設(shè)計(jì)探索卻被設(shè)計(jì)師所忽略。 在支付寶的首頁(yè)中，下滑到底部之后進(jìn)行了新的設(shè)計(jì)探索。繼續(xù)上滑將會(huì)解鎖一項(xiàng)新玩法，以游戲化的設(shè)計(jì)帶給用戶新的探索體驗(yàn)，也許這一嘗試將會(huì)帶來(lái)頁(yè)面底部新的挖掘點(diǎn)。這個(gè)新的挖掘點(diǎn)會(huì)像下拉刷新一樣，在底層功能需求的基礎(chǔ)上被深度開(kāi)發(fā)，呈現(xiàn)出更多營(yíng)銷玩法。

07.  列表式設(shè)計(jì)中的左右滑動(dòng)交互 

在列表式設(shè)計(jì)中，比較隱藏式的交互就是左滑和右滑，通常左滑刪除較為常見(jiàn)。而大部分的列表設(shè)計(jì)中都沒(méi)有探索過(guò)右滑交互，除非是右滑返回或者退出等操作。 在小宇宙 App 的訂閱欄目中，對(duì)于關(guān)注的內(nèi)容列表左滑為刪除（不喜歡），右滑則是添加到播放列表中。充分運(yùn)用了左右滑動(dòng)的手勢(shì)交互，不僅操作便利也帶給用戶不一樣的使用體驗(yàn)。

小宇宙

08.  通過(guò)展示形式增加內(nèi)容的品質(zhì)感 

同樣的東西放在不同的環(huán)境中，通過(guò)不一樣的展示形式，帶來(lái)的品質(zhì)感也是相差甚遠(yuǎn)。就像放進(jìn)櫥窗的飾品或者展品，給人的品質(zhì)感就會(huì)更高。 得物（毒）在購(gòu)買(mǎi)欄目將精選推薦、福利專區(qū)、潮流榜單、補(bǔ)貼專區(qū)等內(nèi)容，通過(guò)類似于玻璃罩的展示模型來(lái)呈現(xiàn)，不僅突出了視覺(jué)焦點(diǎn)，也帶給用戶一種品質(zhì)感的認(rèn)知。配合動(dòng)效的運(yùn)用，增強(qiáng)了該區(qū)域的關(guān)注度，是一種展示商品或者內(nèi)容的不錯(cuò)方式。

得物（毒）

09.  通過(guò)AR科技帶你感受虛擬試穿 

網(wǎng)絡(luò)購(gòu)物存在的問(wèn)題就是質(zhì)量和匹配度等，得物（毒）通過(guò)AR科技帶你感受虛擬試穿，模擬真實(shí)場(chǎng)景中的體驗(yàn)，打破了靜態(tài)選擇的弊端。技術(shù)的突破將會(huì)帶給用戶更便利的生活體驗(yàn)，打破常規(guī)的固有模式才能帶給用戶更好的使用體驗(yàn)。

10.  更直觀的設(shè)計(jì)帶來(lái)更人性化的體驗(yàn) 

想要看一場(chǎng)電影，在選擇影片的時(shí)候?yàn)榱俗層脩舾庇^的了解影片內(nèi)容，做出最快捷的選擇。淘票票將精彩片段作為背景層，影片展示作為前景層，點(diǎn)擊不同的影片背景層就會(huì)播放對(duì)應(yīng)的精彩片段。直觀的設(shè)計(jì)帶給用戶更便利的選擇，減少了抵達(dá)目標(biāo)的操作步驟。 從視覺(jué)形式感的角度使得畫(huà)面更豐富，空間感更強(qiáng)。相較于單調(diào)的平鋪式設(shè)計(jì)，帶給用戶更好的感官體驗(yàn)和操作便利。

淘票票

小結(jié) 

從感官體驗(yàn)的角度體驗(yàn)產(chǎn)品，總結(jié)了在 UI設(shè)計(jì)視覺(jué)層面的解決方案，有助于提高 UI 設(shè)計(jì)師的視覺(jué)表現(xiàn)能力。對(duì)比相同功能的不同視覺(jué)表達(dá)，總結(jié)優(yōu)秀的設(shè)計(jì)呈現(xiàn)方案，希望這個(gè)欄目可以帶給你更多幫助！