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

分享目錄

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

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

三、營造懷舊感的溫馨體驗

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

五、場景感的點擊操作

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

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

八、不改變布局的曝光強化

九、可以晃動的 Banner 圖

十、場景感的底部標簽欄設(shè)計

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

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

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

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

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

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

三、營造懷舊感的溫馨體驗

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

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

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

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

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

五、場景感的點擊操作

在保障底層操作體驗的基礎(chǔ)上，設(shè)計會越來越講究細節(jié)的體驗，逐步強化情感化的融入和場景感的體驗。

最近在體驗小雞上工 App 時，在找工作的列表設(shè)計中加入了“搶”按鈕，在點擊列表時按鈕會有按壓的動效過程。模擬搶拍按鈕獲得機會的體驗，營造場景氛圍感，提高了設(shè)計表達的趣味性。

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

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

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

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

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

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

八、不改變布局的曝光強化

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

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

九、可以晃動的 Banner 圖

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

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

十、場景感的底部標簽欄設(shè)計

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

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

小結(jié)

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