2025-3-3 藍藍設(shè)計的小編
對于產(chǎn)品設(shè)計師來說，在同質(zhì)化的環(huán)境中我們需要具備突破創(chuàng)意的思維，這樣才能輸出差異化的設(shè)計方案。而創(chuàng)意離不開優(yōu)秀作品的靈感啟發(fā)，發(fā)現(xiàn)有意思的設(shè)計細節(jié)也能提高我們的設(shè)計思維。
今天黑馬哥將會繼續(xù)為大家?guī)硪恍﹥?yōu)秀的設(shè)計細節(jié)，我們一起來反思一下，這樣的設(shè)計想法為啥自己沒有想到呢？
分享目錄
一、營造頂部區(qū)域視覺感與情感化
二、主題化配圖增強視覺感
三、彈幕式標(biāo)簽提高關(guān)注度
四、IP 強化底部標(biāo)簽欄圖標(biāo)設(shè)計
五、強化動態(tài)發(fā)布的引導(dǎo)設(shè)計
六、連貫性的插畫突出卡片特色
七、動態(tài)表情化的評價設(shè)計
八、場景化的推薦設(shè)計
九、上下輪播的 Banner 設(shè)計
十、情感化的氛圍營造
一、營造頂部區(qū)域視覺感與情感化
產(chǎn)品頂部區(qū)域的視覺感是吸引用戶的關(guān)鍵，在一些功能單一的產(chǎn)品中，強化視覺表現(xiàn)力也是提升產(chǎn)品豐富度的有效形式。
比如麥當(dāng)勞 App 首頁的設(shè)計中，頂部區(qū)域結(jié)合溫馨的場景插畫進行表達，讓你早上打開麥當(dāng)勞就有種心情愉悅感。動態(tài)的太陽微笑畫面給你一天好心情，情感化的設(shè)計不僅增強了視覺感，也帶給用戶美好的產(chǎn)品使用體驗。
二、主題化配圖增強視覺感
封面圖在產(chǎn)品規(guī)范中相對比較難約束，通過構(gòu)圖、比例、固定元素和配圖質(zhì)量等，在一定程度上可以提高感官體驗。如果是在重點突出的內(nèi)容上面，結(jié)合主題化配圖也可以增強視覺感。
之前在使用優(yōu)酷 App 時，當(dāng)時在重點突出熱劇的設(shè)計中，就將主題化的內(nèi)容融入到宮格的配圖中。以統(tǒng)一的畫面風(fēng)格和設(shè)計表現(xiàn)形式填充封面，增強了視覺表現(xiàn)力，以此突出熱劇的吸引力。
三、彈幕式標(biāo)簽提高關(guān)注度
在固定的結(jié)構(gòu)布局中如何提高局部內(nèi)容的關(guān)注度，我們需要在不改變結(jié)構(gòu)的前提下進行創(chuàng)意融入。比如動態(tài)畫面、突出視覺感、內(nèi)容特異化等等，而最近發(fā)現(xiàn)彈幕式標(biāo)簽也是一個不錯的選擇。
在體驗優(yōu)酷 App 時，在動漫欄目中針對推薦的熱播新番，想要突出的動漫結(jié)合了彈幕式標(biāo)簽進行強化。動感的節(jié)奏會提高用戶的關(guān)注度，在不改變當(dāng)前結(jié)構(gòu)的基礎(chǔ)上，不失為一種有效的解決方案。
四、IP 強化底部標(biāo)簽欄圖標(biāo)設(shè)計
底部標(biāo)簽欄圖標(biāo)是產(chǎn)品設(shè)計師經(jīng)常發(fā)揮的場景，在一些節(jié)慶主題或者活動中都會定制設(shè)計。
優(yōu)酷 App 在元旦促銷活動期間，就將底部標(biāo)簽欄圖標(biāo)設(shè)計與 IP 形象結(jié)合，默認以促銷主題文字展示，點擊狀態(tài)以 IP 形象顯示。圖標(biāo)與活動相結(jié)合，不僅突出圖標(biāo)視覺表現(xiàn)，也營造了活動氛圍感。
五、強化動態(tài)發(fā)布的引導(dǎo)設(shè)計
對于靠內(nèi)容吸引用戶參與度的產(chǎn)品來說，提高用戶發(fā)布動態(tài)的意愿度至關(guān)重要，突出動態(tài)發(fā)布的吸引力也能起到促進作用。
會玩 App 在動態(tài)發(fā)布的引導(dǎo)設(shè)計中給出了不錯的思路，未發(fā)布動態(tài)時會以形象化的空狀態(tài)設(shè)計進行引導(dǎo)。動態(tài)發(fā)布的按鈕旁以俏皮可愛的形象進行引導(dǎo)設(shè)計，提高了按鈕的吸引力，讓用戶有種參與的沖動。情感化設(shè)計的引導(dǎo)不僅可以增強感官體驗，也更容易攻破用戶的防備心理。
六、連貫性的插畫突出卡片特色
卡片式設(shè)計已經(jīng)成為主流的產(chǎn)品設(shè)計趨勢，信息的歸納感可以提高識別效率。探索卡片設(shè)計的表現(xiàn)特色尤為重要，重點在于卡片造型和內(nèi)部視覺表現(xiàn)力的發(fā)揮層面。
麥當(dāng)勞 App 在主內(nèi)容的卡片設(shè)計上運用了配送場景插畫，連貫性的插畫突出了卡片特色。插畫場景結(jié)合了品牌圖形，增強了麥當(dāng)勞的品牌曝光度；白天和晚上還以不同配色風(fēng)格和細節(jié)進行差異表現(xiàn)，無論是想法還是設(shè)計細節(jié)都非常不錯，是一個挺有創(chuàng)意的案例表現(xiàn)。
七、動態(tài)表情化的評價設(shè)計
用戶評價可以反饋服務(wù)的質(zhì)量，進而做出產(chǎn)品迭代或者服務(wù)調(diào)整的思路。如何提高用戶參與評價的積極性，需要產(chǎn)品設(shè)計師多多探索啦！
最近在使用順豐速運小程序時，完成快遞業(yè)務(wù)之后進行評價，表情化的星級評價非常有意思。不同等級以不同的表情呈現(xiàn)，動態(tài)表達非常形象生動，讓人不由的挨個體驗。動態(tài)表情的形式提高了評價的關(guān)注度，情感化的表達讓用戶更愿意參與評價，提高了評價的體驗度。
八、場景化的推薦設(shè)計
針對電商類產(chǎn)品來說，商品/店鋪推薦模塊出現(xiàn)頻次較高，吸引用戶關(guān)注度自然成為了設(shè)計的首要目標(biāo)。
在體驗 Mars App 時，在生活超市推薦的設(shè)計中，模擬了便利店的場景形象。真實感的場景表達帶給用戶親切自然的購物體驗，同時也提高了用戶對于該模塊的關(guān)注度。
九、上下輪播的 Banner 設(shè)計
輪播 Banner 圖算是產(chǎn)品設(shè)計中最常見的模塊，在移動端的設(shè)計中通常左右輪播為主，最近體驗到上下輪播的案例，打破常規(guī)也不失為一種新的設(shè)計思路。
在 Mars App 的首頁 Banner 圖以上下輪播進行交互，左側(cè)固定展示定位城市的天氣等信息，提高了 Banner 位置的利用率。Banner 與金剛區(qū)懸浮在特定的背景上，帶給用戶沉浸式的感官體驗。
十、情感化的氛圍營造
情感化的設(shè)計可以讓產(chǎn)品更有溫度，增加用戶對產(chǎn)品的好感度。配合傳統(tǒng)節(jié)日或者節(jié)氣主題進行表達是相對比較普遍的形式，會在產(chǎn)品主題和視覺區(qū)域進行氛圍營造。
在清明節(jié)期間體驗飛豬旅行 App 時，頂部區(qū)域以踏春的場景營造氛圍感，還在搜索區(qū)域以青團（青團是江南人家在清明節(jié)吃的一道傳統(tǒng)點心）替代搜索按鈕。情感化的設(shè)計營造不僅體現(xiàn)了產(chǎn)品的溫度，也帶給用戶對于節(jié)日的場景體驗。
小結(jié)
禁錮我們思維的不是我們的技術(shù)，而是我們的眼界和設(shè)計感知。發(fā)現(xiàn)優(yōu)秀的設(shè)計并總結(jié)和轉(zhuǎn)化，才能讓我們打開禁錮的思維，在優(yōu)秀的基礎(chǔ)上輸出更好的設(shè)計解決方案。
本文對于設(shè)計的理解闡述屬于個人見解，不足之處歡迎大家留言補充，我們互相進步。
作者：黑馬青年（vx: heimaux）
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(www.gyxygd.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan。
藍藍設(shè)計的小編 http://www.gyxygd.cn