2025-3-5 杰睿
對于設(shè)計(jì)師來說，遇到設(shè)計(jì)瓶頸期很正常，入行一段時(shí)間后所具備的能力就會達(dá)到峰值，無法突破峰值就會遇到瓶頸。主要在設(shè)計(jì)思維和設(shè)計(jì)技法層面受限，打開設(shè)計(jì)思維才能突破瓶頸期，通過積累優(yōu)秀的案例并進(jìn)行總結(jié)分析，可以更快的打破思維限制。
分享目錄
一、趣味性的登錄設(shè)計(jì)
二、瓷片區(qū)的趣味性手勢交互
三、營造懷舊感的溫馨體驗(yàn)
四、趣味性的進(jìn)度提示設(shè)計(jì)
五、場景感的點(diǎn)擊操作
六、動效引導(dǎo)用戶發(fā)帖
七、卡通形象強(qiáng)化瓷片區(qū)視覺感
八、不改變布局的曝光強(qiáng)化
九、可以晃動的 Banner 圖
十、場景感的底部標(biāo)簽欄設(shè)計(jì)
一、趣味性的登錄設(shè)計(jì)
登錄是進(jìn)入產(chǎn)品的第一道防線，也容易讓用戶產(chǎn)生排斥感，降低用戶的防備心理才能提高登錄的意愿度。
盯潮 App 在登錄界面中，以潮流元素和商品等內(nèi)容進(jìn)行設(shè)計(jì)，使得頁面視覺感豐富。晃動手機(jī)時(shí)元素也會移動，在掉落或者碰撞手機(jī)邊緣時(shí)配合震動感，讓體驗(yàn)變得非常有趣。趣味性的設(shè)計(jì)降低了用戶的排斥感，提升了登錄的意愿度和體驗(yàn)感。
二、瓷片區(qū)的趣味性手勢交互
瓷片區(qū)、Banner、金剛區(qū)是產(chǎn)品中的三大運(yùn)營模塊，起到提高曝光度達(dá)到引流的目的。瓷片區(qū)在頁面中的布局比較靈活，設(shè)計(jì)表現(xiàn)也非常豐富。
盯潮 App 在首頁瓷片區(qū)設(shè)計(jì)中，以柵格式布局進(jìn)行區(qū)塊劃分，占比較大的模塊類似于 Banner 式表現(xiàn)。通過手勢可以任意拖動實(shí)現(xiàn)切換，趣味性和互動性相結(jié)合，提高了用戶的使用樂趣。
三、營造懷舊感的溫馨體驗(yàn)
童年的記憶是我們逝去的青春，每每看到小時(shí)候的畫面，總能勾起我們童年的回憶。最近發(fā)現(xiàn)一款結(jié)合懷舊感營造設(shè)計(jì)風(fēng)格的產(chǎn)品，名字叫“軟眠眠”。
這是一款拯救失眠者的治愈系睡眠 App，以一幅小時(shí)候生活的環(huán)境插畫填充界面背景，圖標(biāo)設(shè)計(jì)也是提取小時(shí)候的玩物或者生活用品，視覺風(fēng)格營造極強(qiáng)的懷舊感。無論是畫風(fēng)還是配色、配樂等，都勾起了我們滿滿的回憶，帶給用戶溫馨的體驗(yàn)。
四、趣味性的進(jìn)度提示設(shè)計(jì)
在完成步驟化和消耗數(shù)據(jù)等內(nèi)容表達(dá)層面會選擇進(jìn)度條，通過可視化的表達(dá)提高用戶的理解，減輕信息認(rèn)知負(fù)擔(dān)。
軟眠眠 App 在定制睡眠計(jì)劃的過程中，完成選項(xiàng)時(shí)的進(jìn)度條設(shè)計(jì)非常有意思，是一個(gè)小孩通過拉動繩子移動。拉動過程中結(jié)合動態(tài)表達(dá)，配合手繪風(fēng)的表現(xiàn)讓人感覺輕松愉快，趣味性的設(shè)計(jì)也提高了完成選項(xiàng)任務(wù)的意愿度。
五、場景感的點(diǎn)擊操作
在保障底層操作體驗(yàn)的基礎(chǔ)上，設(shè)計(jì)會越來越講究細(xì)節(jié)的體驗(yàn)，逐步強(qiáng)化情感化的融入和場景感的體驗(yàn)。
最近在體驗(yàn)小雞上工 App 時(shí)，在找工作的列表設(shè)計(jì)中加入了“搶”按鈕，在點(diǎn)擊列表時(shí)按鈕會有按壓的動效過程。模擬搶拍按鈕獲得機(jī)會的體驗(yàn)，營造場景氛圍感，提高了設(shè)計(jì)表達(dá)的趣味性。
六、動效引導(dǎo)用戶發(fā)帖
微動效可以提高功能的吸引力，也能讓互動體驗(yàn)變得更有趣，可以通過動效引導(dǎo)功能操作和提高關(guān)注度。
騰訊動漫 App 在圈子欄目中，以 IP 形象結(jié)合動效強(qiáng)化發(fā)帖按鈕，以此引導(dǎo)用戶參與發(fā)帖。動效不僅突出了發(fā)帖的關(guān)注度，也讓發(fā)帖按鈕設(shè)計(jì)更有親和力，進(jìn)而提升用戶的點(diǎn)擊欲。
七、卡通形象強(qiáng)化瓷片區(qū)視覺感
瓷片區(qū)起到強(qiáng)化曝光達(dá)到流量引導(dǎo)的作用，提高該模塊的吸引力至關(guān)重要，視覺感的突出也尤為重要。
會玩 App 在首頁“一起玩”的瓷片區(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ǔ)上，如何提高局部內(nèi)容或者主推內(nèi)容的曝光度，是產(chǎn)品設(shè)計(jì)師不斷探索的方向。
愛奇藝 App 首頁推薦欄目 Banner 圖下方，默認(rèn)情況下以宮格布局推薦影片。前段時(shí)間在打開時(shí)發(fā)現(xiàn)了一個(gè)臨時(shí)設(shè)計(jì)表達(dá)，保持當(dāng)前結(jié)構(gòu)布局不變，放大了圖片填充和推薦影片，整張畫面填充宮格，視覺張力十足。該設(shè)計(jì)表達(dá)既不會干擾當(dāng)前布局，也能強(qiáng)化推薦影片的曝光度，解決方案值得探索。
九、可以晃動的 Banner 圖
Banner 可以在創(chuà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)用戶左右晃動手機(jī)時(shí)，Banner 圖背景層不動，而文案和產(chǎn)品等元素層會跟著晃動的頻率左右移動。可以晃動的 Banner 圖非常有意思，成功地吸引了用戶的關(guān)注度和點(diǎn)擊欲。
十、場景感的底部標(biāo)簽欄設(shè)計(jì)
底部標(biāo)簽欄設(shè)計(jì)可以在背景、造型、圖標(biāo)等元素中發(fā)揮，其中圖標(biāo)設(shè)計(jì)中的發(fā)揮相對更多一些，在背景和造型層面的案例較少，不過最近也發(fā)現(xiàn)了一個(gè)解決方案。
在體驗(yàn)云游萬里長城小程序時(shí)，進(jìn)入之后的小程序底部標(biāo)簽欄設(shè)計(jì)結(jié)合了長城墻面和結(jié)構(gòu)，非常有場景代入感。設(shè)計(jì)了深色版和淺色版，圖標(biāo)造型設(shè)計(jì)也融入了長城元素，不失為一種優(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)步。
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gerard.com.cn