對(duì)于設(shè)計(jì)師來(lái)說(shuō)，遇到設(shè)計(jì)瓶頸期很正常，入行一段時(shí)間后所具備的能力就會(huì)達(dá)到峰值，無(wú)法突破峰值就會(huì)遇到瓶頸。主要在設(shè)計(jì)思維和設(shè)計(jì)技法層面受限，打開設(shè)計(jì)思維才能突破瓶頸期，通過(guò)積累優(yōu)秀的案例并進(jìn)行總結(jié)分析，可以更快的打破思維限制。

分享目錄

一、趣味性的登錄設(shè)計(jì)

二、瓷片區(qū)的趣味性手勢(shì)交互

三、營(yíng)造懷舊感的溫馨體驗(yàn)

四、趣味性的進(jìn)度提示設(shè)計(jì)

五、場(chǎng)景感的點(diǎn)擊操作

六、動(dòng)效引導(dǎo)用戶發(fā)帖

七、卡通形象強(qiáng)化瓷片區(qū)視覺感

八、不改變布局的曝光強(qiáng)化

九、可以晃動(dòng)的 Banner 圖

十、場(chǎng)景感的底部標(biāo)簽欄設(shè)計(jì)

一、趣味性的登錄設(shè)計(jì)

登錄是進(jìn)入產(chǎn)品的第一道防線，也容易讓用戶產(chǎn)生排斥感，降低用戶的防備心理才能提高登錄的意愿度。

盯潮 App 在登錄界面中，以潮流元素和商品等內(nèi)容進(jìn)行設(shè)計(jì)，使得頁(yè)面視覺感豐富?；蝿?dòng)手機(jī)時(shí)元素也會(huì)移動(dòng)，在掉落或者碰撞手機(jī)邊緣時(shí)配合震動(dòng)感，讓體驗(yàn)變得非常有趣。趣味性的設(shè)計(jì)降低了用戶的排斥感，提升了登錄的意愿度和體驗(yàn)感。

二、瓷片區(qū)的趣味性手勢(shì)交互

瓷片區(qū)、Banner、金剛區(qū)是產(chǎn)品中的三大運(yùn)營(yíng)模塊，起到提高曝光度達(dá)到引流的目的。瓷片區(qū)在頁(yè)面中的布局比較靈活，設(shè)計(jì)表現(xiàn)也非常豐富。

盯潮 App 在首頁(yè)瓷片區(qū)設(shè)計(jì)中，以柵格式布局進(jìn)行區(qū)塊劃分，占比較大的模塊類似于 Banner 式表現(xiàn)。通過(guò)手勢(shì)可以任意拖動(dòng)實(shí)現(xiàn)切換，趣味性和互動(dòng)性相結(jié)合，提高了用戶的使用樂(lè)趣。

三、營(yíng)造懷舊感的溫馨體驗(yàn)

童年的記憶是我們逝去的青春，每每看到小時(shí)候的畫面，總能勾起我們童年的回憶。最近發(fā)現(xiàn)一款結(jié)合懷舊感營(yíng)造設(shè)計(jì)風(fēng)格的產(chǎn)品，名字叫“軟眠眠”。

這是一款拯救失眠者的治愈系睡眠 App，以一幅小時(shí)候生活的環(huán)境插畫填充界面背景，圖標(biāo)設(shè)計(jì)也是提取小時(shí)候的玩物或者生活用品，視覺風(fēng)格營(yíng)造極強(qiáng)的懷舊感。無(wú)論是畫風(fēng)還是配色、配樂(lè)等，都勾起了我們滿滿的回憶，帶給用戶溫馨的體驗(yàn)。

四、趣味性的進(jìn)度提示設(shè)計(jì)

在完成步驟化和消耗數(shù)據(jù)等內(nèi)容表達(dá)層面會(huì)選擇進(jìn)度條，通過(guò)可視化的表達(dá)提高用戶的理解，減輕信息認(rèn)知負(fù)擔(dān)。

軟眠眠 App 在定制睡眠計(jì)劃的過(guò)程中，完成選項(xiàng)時(shí)的進(jìn)度條設(shè)計(jì)非常有意思，是一個(gè)小孩通過(guò)拉動(dòng)繩子移動(dòng)。拉動(dòng)過(guò)程中結(jié)合動(dòng)態(tài)表達(dá)，配合手繪風(fēng)的表現(xiàn)讓人感覺輕松愉快，趣味性的設(shè)計(jì)也提高了完成選項(xiàng)任務(wù)的意愿度。

五、場(chǎng)景感的點(diǎn)擊操作

在保障底層操作體驗(yàn)的基礎(chǔ)上，設(shè)計(jì)會(huì)越來(lái)越講究細(xì)節(jié)的體驗(yàn)，逐步強(qiáng)化情感化的融入和場(chǎng)景感的體驗(yàn)。

最近在體驗(yàn)小雞上工 App 時(shí)，在找工作的列表設(shè)計(jì)中加入了“搶”按鈕，在點(diǎn)擊列表時(shí)按鈕會(huì)有按壓的動(dòng)效過(guò)程。模擬搶拍按鈕獲得機(jī)會(huì)的體驗(yàn)，營(yíng)造場(chǎng)景氛圍感，提高了設(shè)計(jì)表達(dá)的趣味性。

六、動(dòng)效引導(dǎo)用戶發(fā)帖

微動(dòng)效可以提高功能的吸引力，也能讓互動(dòng)體驗(yàn)變得更有趣，可以通過(guò)動(dòng)效引導(dǎo)功能操作和提高關(guān)注度。

騰訊動(dòng)漫 App 在圈子欄目中，以 IP 形象結(jié)合動(dòng)效強(qiáng)化發(fā)帖按鈕，以此引導(dǎo)用戶參與發(fā)帖。動(dòng)效不僅突出了發(fā)帖的關(guān)注度，也讓發(fā)帖按鈕設(shè)計(jì)更有親和力，進(jìn)而提升用戶的點(diǎn)擊欲。

七、卡通形象強(qiáng)化瓷片區(qū)視覺感

瓷片區(qū)起到強(qiáng)化曝光達(dá)到流量引導(dǎo)的作用，提高該模塊的吸引力至關(guān)重要，視覺感的突出也尤為重要。

會(huì)玩 App 在首頁(yè)“一起玩”的瓷片區(qū)設(shè)計(jì)中，以卡通形象結(jié)合豐富的色彩進(jìn)行表現(xiàn)，各種裝扮的形象豐富視覺感。卡通形象設(shè)計(jì)風(fēng)格統(tǒng)一，卡片色彩豐富且協(xié)調(diào)，整體瓷片區(qū)視覺沖擊力十足。

八、不改變布局的曝光強(qiáng)化

在當(dāng)前產(chǎn)品結(jié)構(gòu)不變的基礎(chǔ)上，如何提高局部?jī)?nèi)容或者主推內(nèi)容的曝光度，是產(chǎn)品設(shè)計(jì)師不斷探索的方向。

愛奇藝 App 首頁(yè)推薦欄目 Banner 圖下方，默認(rèn)情況下以宮格布局推薦影片。前段時(shí)間在打開時(shí)發(fā)現(xiàn)了一個(gè)臨時(shí)設(shè)計(jì)表達(dá)，保持當(dāng)前結(jié)構(gòu)布局不變，放大了圖片填充和推薦影片，整張畫面填充宮格，視覺張力十足。該設(shè)計(jì)表達(dá)既不會(huì)干擾當(dāng)前布局，也能強(qiáng)化推薦影片的曝光度，解決方案值得探索。

九、可以晃動(dòng)的 Banner 圖

Banner 可以在創(chuàng)意、造型、互動(dòng)形式等方面進(jìn)行設(shè)計(jì)發(fā)揮，也呈現(xiàn)了許多優(yōu)秀的方案，產(chǎn)品設(shè)計(jì)師也在不斷嘗試更多的可能性。

最近在體驗(yàn)盯潮 App 時(shí)，發(fā)售欄目頂部 Banner 圖設(shè)計(jì)引人關(guān)注。當(dāng)用戶左右晃動(dòng)手機(jī)時(shí)，Banner 圖背景層不動(dòng)，而文案和產(chǎn)品等元素層會(huì)跟著晃動(dòng)的頻率左右移動(dòng)?？梢曰蝿?dòng)的 Banner 圖非常有意思，成功地吸引了用戶的關(guān)注度和點(diǎn)擊欲。

十、場(chǎng)景感的底部標(biāo)簽欄設(shè)計(jì)

底部標(biāo)簽欄設(shè)計(jì)可以在背景、造型、圖標(biāo)等元素中發(fā)揮，其中圖標(biāo)設(shè)計(jì)中的發(fā)揮相對(duì)更多一些，在背景和造型層面的案例較少，不過(guò)最近也發(fā)現(xiàn)了一個(gè)解決方案。

在體驗(yàn)云游萬(wàn)里長(zhǎng)城小程序時(shí)，進(jìn)入之后的小程序底部標(biāo)簽欄設(shè)計(jì)結(jié)合了長(zhǎng)城墻面和結(jié)構(gòu)，非常有場(chǎng)景代入感。設(shè)計(jì)了深色版和淺色版，圖標(biāo)造型設(shè)計(jì)也融入了長(zhǎng)城元素，不失為一種優(yōu)秀的差異化設(shè)計(jì)探索。

小結(jié)

希望本期的分享可以開啟大家更多設(shè)計(jì)思維，從優(yōu)秀的設(shè)計(jì)方案中發(fā)現(xiàn)設(shè)計(jì)的軌跡，復(fù)用到后期的項(xiàng)目設(shè)計(jì)中。本文描述屬于個(gè)人理解和總結(jié)，不足之處歡迎大家留言補(bǔ)充，我們互相進(jìn)步。