從感官體驗的角度發(fā)現(xiàn)優(yōu)秀產(chǎn)品的設(shè)計解決方案，積累不一樣的設(shè)計表達，靈感來源于日常的積累和反復磨練后的沉淀。通過看，提升我們的眼界；通過寫，提升我們的轉(zhuǎn)化；通過練，提升我們的效率。

希望本欄目的總結(jié)可以帶給大家拋磚引玉的作用，引導大家堅持體驗產(chǎn)品，養(yǎng)成體驗和記錄的習慣，沉淀更多的設(shè)計思考。

內(nèi)容與手勢的聯(lián)動設(shè)計

交互手勢在移動端設(shè)計場景中至關(guān)重要，手勢的變化和內(nèi)容的聯(lián)動關(guān)系，決定了是否可以獲得更高的用戶體驗。

比如抖音的短視頻播放設(shè)計中，進度條拖動過程中除了時間數(shù)字變化以外，數(shù)字的位置會隨著手勢的方向位移。聯(lián)動效果的設(shè)計感官體驗明顯，內(nèi)容傳播的關(guān)注度更強。

內(nèi)容切換的場景模擬化設(shè)計

以真實場景模擬設(shè)計表現(xiàn)，在 UI 設(shè)計中比較常用，帶給用戶更強的場景代入感。

比如千聊 App 首頁的免費聽直播欄目，直播預告的時間切換就像頻道調(diào)頻一樣，切換到自己感興趣的內(nèi)容。自然流暢的動效滑動，兩條點綴的紅色線條，把頻道切換的場景代入感體現(xiàn)給用戶，帶來新穎的感官體驗。

通過文字角標設(shè)計表達切換差異

頂部內(nèi)容的分類切換較為常見，特別是電商產(chǎn)品中。一般體現(xiàn)點擊和默認通常有字體大小區(qū)分、顏色深淺區(qū)分、下劃線區(qū)分、圖形裝飾區(qū)分等。

除此以外也有下劃線的變異用法，通過角標線段來體現(xiàn)差異。通常是右下角位置，伴隨著動效表達。比如京東 App 首頁，聯(lián)想到京東吉祥物，也有一種品牌呼應(yīng)的感覺。

更貼近真實場景的設(shè)計引導

通過設(shè)計還原真實場景，帶給用戶更強的代入感，從陌生轉(zhuǎn)換到熟悉的場景觸感。

高德地圖通過模擬真實的道路狀況，呈現(xiàn)出更加真實的行車引導，就像自己駕駛的車輛行走在手機屏幕上一樣。真實感的路況引導增加了駕駛的代入感，降低了復雜路口選錯方向的可能性，從視覺感上面也提高了感官體驗。

人性化的城市點亮設(shè)計

好的產(chǎn)品體驗，就是在無意間帶給用戶驚喜。在小長假期間，自駕游沿途經(jīng)過不一樣的城市地點時，會彈出“歡迎到來”的點亮提示，第一次看到還有種驚喜感，算是一種旅行足跡的記錄。

在這個彈窗廣告滿天飛的互聯(lián)網(wǎng)環(huán)境中，能把這種驚喜帶給用戶才能抓住用戶的黏性，通過情感化的設(shè)計提升用戶對于產(chǎn)品的認可度。

被人忽略的上滑交互探索

大家經(jīng)常使用下拉刷新這個功能，而且在該功能上的設(shè)計探索已經(jīng)呈現(xiàn)出非常多的案例，而下滑到底部之后的設(shè)計探索卻被設(shè)計師所忽略。

在支付寶的首頁中，下滑到底部之后進行了新的設(shè)計探索。繼續(xù)上滑將會解鎖一項新玩法，以游戲化的設(shè)計帶給用戶新的探索體驗，也許這一嘗試將會帶來頁面底部新的挖掘點。這個新的挖掘點會像下拉刷新一樣，在底層功能需求的基礎(chǔ)上被深度開發(fā)，呈現(xiàn)出更多營銷玩法。

列表式設(shè)計中的左右滑動交互

在列表式設(shè)計中，比較隱藏式的交互就是左滑和右滑，通常左滑刪除較為常見。而大部分的列表設(shè)計中都沒有探索過右滑交互，除非是右滑返回或者退出等操作。

在小宇宙 App 的訂閱欄目中，對于關(guān)注的內(nèi)容列表左滑為刪除（不喜歡），右滑則是添加到播放列表中。充分運用了左右滑動的手勢交互，不僅操作便利也帶給用戶不一樣的使用體驗。

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

同樣的東西放在不同的環(huán)境中，通過不一樣的展示形式，帶來的品質(zhì)感也是相差甚遠。就像放進櫥窗的飾品或者展品，給人的品質(zhì)感就會更高。

得物（毒）在購買欄目將精選推薦、福利專區(qū)、潮流榜單、補貼專區(qū)等內(nèi)容，通過類似于玻璃罩的展示模型來呈現(xiàn)，不僅突出了視覺焦點，也帶給用戶一種品質(zhì)感的認知。配合動效的運用，增強了該區(qū)域的關(guān)注度，是一種展示商品或者內(nèi)容的不錯方式。

通過 AR 科技帶你感受虛擬試穿

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

更直觀的設(shè)計帶來更人性化的體驗

想要看一場電影，在選擇影片的時候為了讓用戶更直觀的了解影片內(nèi)容，做出最快捷的選擇。淘票票將精彩片段作為背景層，影片展示作為前景層，點擊不同的影片背景層就會播放對應(yīng)的精彩片段。直觀的設(shè)計帶給用戶更便利的選擇，減少了抵達目標的操作步驟。

從視覺形式感的角度使得畫面更豐富，空間感更強。相較于單調(diào)的平鋪式設(shè)計，帶給用戶更好的感官體驗和操作便利。

小結(jié)

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

歡迎關(guān)注作者的微信公眾號：「黑馬家族」