在生活中我們所使用的軟件范圍并不會(huì)很廣，兜兜轉(zhuǎn)轉(zhuǎn)還是一些常用的軟件，用多了也就覺得差異并不是很明顯。作為 UI 設(shè)計(jì)師來說，我們需要刻意體驗(yàn)更多并不常用的軟件，以此打破固化的思維。通過海量的體驗(yàn)我們可以發(fā)現(xiàn)更多設(shè)計(jì)解決方案，也能體驗(yàn)到打破常規(guī)的 UI 設(shè)計(jì)表達(dá)。

本期黑馬哥就帶大家一起體驗(yàn)一下，看看這些產(chǎn)品如何呈現(xiàn)出不一樣的 UI 表達(dá)，提升用戶的感官體驗(yàn)。

一、水墨風(fēng)打造場景代入感

越來越多的產(chǎn)品在滿足底層需求之后，都在追求更好的感官體驗(yàn)，強(qiáng)化視覺感和打造差異化的風(fēng)格至關(guān)重要。

最近體驗(yàn)了長相思 App，以手繪水墨丹青中國畫作為主界面背景，配合宛如清泉流淌的背景音樂。場景人物以絕美國風(fēng)動(dòng)畫形式表達(dá)，將詩詞情景重現(xiàn)，呈現(xiàn)了一場視聽盛宴。

二、收縮式底部標(biāo)簽欄設(shè)計(jì)

底部標(biāo)簽欄除了在圖標(biāo)設(shè)計(jì)層面發(fā)揮以外，在模塊背景、造型和交互方式等層面也可以進(jìn)行設(shè)計(jì)發(fā)揮。

長相思 App 底部標(biāo)簽欄圖標(biāo)設(shè)計(jì)結(jié)合手繪水墨風(fēng)，不僅匹配整體風(fēng)格，也體現(xiàn)出了圖標(biāo)風(fēng)格的差異化。底部標(biāo)簽欄還進(jìn)行收縮式交互設(shè)計(jì)，點(diǎn)擊卷軸可以進(jìn)行展開和隱藏。該設(shè)計(jì)表達(dá)提高了空間利用率，降低用戶瀏覽過程中的干擾，是一個(gè)不錯(cuò)的設(shè)計(jì)解決方案。

三、趣味性的下拉刷新設(shè)計(jì)

通過刷新可以獲得內(nèi)容更新，刷新動(dòng)作的設(shè)計(jì)和延展也越來越豐富，設(shè)計(jì)發(fā)揮的空間很大。

最近在體驗(yàn)豆果美食 App 時(shí)，下拉刷新以不同蔬菜的圖形進(jìn)行動(dòng)效演變，以此來體現(xiàn)刷新反饋過程。表現(xiàn)形式新穎且印象深刻，在符合產(chǎn)品屬性的同時(shí)，也帶給用戶趣味性的感官體驗(yàn)。

四、簽到設(shè)計(jì)的動(dòng)態(tài)演變

簽到是提高用戶黏性的有效形式之一，通過簽到獲取積分或者獎(jiǎng)勵(lì)等，以此提高用戶的參與度。

在得物 App 簽到設(shè)計(jì)中，以動(dòng)態(tài)演變來體現(xiàn)簽到前后的變化，讓用戶直觀地看到簽到天數(shù)和獎(jiǎng)勵(lì)機(jī)制等。以動(dòng)效的形式將簽到前的日歷盒子進(jìn)行演變，提高了用戶對(duì)簽到過程的關(guān)注度。動(dòng)效表達(dá)流暢自然，視覺感知清晰明了，提升了用戶的簽到體驗(yàn)。

五、獨(dú)特的內(nèi)容展示形式

不同的內(nèi)容我們會(huì)思考如何以更有創(chuàng)意的方式進(jìn)行展示，結(jié)合內(nèi)容特征和產(chǎn)品屬性也是一個(gè)方向。

長相思 App 在賞析欄目中，根據(jù)不同詩詞繪制了不同造型的團(tuán)扇和場景，以獨(dú)特和個(gè)性化的方式進(jìn)行內(nèi)容表達(dá)。不僅幫助產(chǎn)品建立鮮明的品牌形象，也吸引了用戶的關(guān)注度。

六、打破常規(guī)的引流設(shè)計(jì)

首頁作為產(chǎn)品功能的聚合地，各類功能都想在首頁強(qiáng)化曝光度，達(dá)到很好的用戶引流。如何在不改變當(dāng)前結(jié)構(gòu)的前提下強(qiáng)化曝光度，是產(chǎn)品設(shè)計(jì)師不斷創(chuàng)新和思考的方向。

最近淘寶為了給“夜淘寶”引流，在首頁右上角進(jìn)行了打破常規(guī)的設(shè)計(jì)表達(dá)，沒有改變功能結(jié)構(gòu)，通過背景造型變化提高該模塊的曝光度。白天和夜間以不同的天氣圖標(biāo)進(jìn)行設(shè)計(jì)表達(dá)，結(jié)合微動(dòng)效視覺效果非常突出。點(diǎn)擊進(jìn)入詳情頁也會(huì)根據(jù)晝夜差別展示不同的場景，帶給用戶更好的感官體驗(yàn)，也讓信息準(zhǔn)確地得到了傳遞。

七、有禮貌的瓷片區(qū)設(shè)計(jì)

瓷片區(qū)作為非常重要的運(yùn)營模塊，通過視覺的沖擊力吸引關(guān)注度至關(guān)重要，而動(dòng)效的表達(dá)也是不錯(cuò)的方向選擇。

好輕 App 在首頁瓷片區(qū)的設(shè)計(jì)表達(dá)中，融入了三維人物形象，進(jìn)入時(shí)還會(huì)有打招呼的動(dòng)作。有禮貌的行為表現(xiàn)不僅吸引了用戶的注意力，也能感受到產(chǎn)品的情感化體驗(yàn)，進(jìn)而提高用戶的點(diǎn)擊欲。

八、趣味性的個(gè)人中心設(shè)計(jì)

個(gè)人中心的設(shè)計(jì)已不再是簡單的功能聚合，更好玩的趣味性設(shè)計(jì)逐步普及，帶給用戶更有溫度的體驗(yàn)感應(yīng)運(yùn)而來。

個(gè)人中心設(shè)計(jì)在頂部區(qū)域會(huì)結(jié)合豐富的視覺表達(dá)，比如精美圖片、插畫、動(dòng)效等，而會(huì)玩 App 的個(gè)人中心根據(jù)性別設(shè)計(jì)了人偶形象。以動(dòng)態(tài)的形式展示形象青春活潑的性格特征，設(shè)計(jì)表達(dá)新穎獨(dú)特，呈現(xiàn)了差異化的視覺感知。

九、互動(dòng)性的語音搜索設(shè)計(jì)

搜索已經(jīng)不只是文字搜索范圍了，可以語音搜索、圖片搜索、色彩搜索等，搜索形式變得更為豐富，而提高搜索的體驗(yàn)度至關(guān)重要。

Wonder App 在通過語音搜索內(nèi)容時(shí)，俏皮可愛的人偶形象增強(qiáng)了搜索的互動(dòng)性。未開啟麥克風(fēng)時(shí)會(huì)比著可愛的手勢(shì)進(jìn)行功能引導(dǎo)，開啟后便會(huì)比劃著非常開心的動(dòng)作等待用戶的語音，也會(huì)配合情感化的文案進(jìn)行提示。這種互動(dòng)性的設(shè)計(jì)不僅提高了語音搜索的體驗(yàn)度，也帶給用戶更為情感化的感官體驗(yàn)。

十、好玩的動(dòng)態(tài)界面設(shè)計(jì)

產(chǎn)品在滿足底層需求之后，便會(huì)不斷追求更具娛樂性的體驗(yàn)表達(dá)，好玩的設(shè)計(jì)往往會(huì)讓用戶更愿意停留和傳播。

騰訊手機(jī)管家 App 在電池管理界面設(shè)計(jì)中，一只小鴨子在藍(lán)色的海洋中游蕩著，隨著手機(jī)的傾斜旋轉(zhuǎn)水面也會(huì)傾斜。仿佛手機(jī)就像一個(gè)水缸，小鴨子就是養(yǎng)在水缸里面的寵物，而電量的多少?zèng)Q定了水的深淺，有一種暗示就是如果你再不充電小鴨子就沒有水可以游泳啦！好玩的動(dòng)態(tài)界面設(shè)計(jì)體驗(yàn)感很棒，以娛樂性的形式表達(dá)了功能含義，也帶給了用戶趣味性的使用體驗(yàn)。

小結(jié)

好的設(shè)計(jì)創(chuàng)新就隱藏在我們身邊，善于發(fā)現(xiàn)優(yōu)秀的設(shè)計(jì)表達(dá)，才能積累豐富的設(shè)計(jì)靈感。優(yōu)秀的產(chǎn)品設(shè)計(jì)師需要具備一雙發(fā)現(xiàn)的眼睛，也要養(yǎng)成體驗(yàn)分析的習(xí)慣，基于優(yōu)秀案例之上才能創(chuàng)作出更好的設(shè)計(jì)解決方案。

本期的分享到此結(jié)束，不足之處我們繼續(xù)努力改進(jìn)，我們下一期繼續(xù)相約。

作者：黑馬家族