10個(gè)大廠產(chǎn)品細(xì)節(jié)剖析,看看高手是如何做設(shè)計(jì)的!
軟件技法的突破是強(qiáng)化設(shè)計(jì)的基礎(chǔ),阻礙設(shè)計(jì)能力的提升不只是軟件而已,設(shè)計(jì)思維的改變更為重要。通過優(yōu)秀案例的分析總結(jié)才能不斷改變固化的思維,眼界的提升也離不開海量的存儲(chǔ)。
今天黑馬哥將會(huì)繼續(xù)延續(xù)往期的分享,給大家?guī)砀啻髲S設(shè)計(jì)細(xì)節(jié)的解析,希望通過每一次的總結(jié)帶給大家更多設(shè)計(jì)思維。
一、結(jié)合熱度打造品牌情感化
為了提高用戶對(duì)產(chǎn)品的忠誠(chéng)度,除了打造品牌效應(yīng)之外,讓品牌或者體驗(yàn)更具情感化也是至關(guān)重要的。
最近在體驗(yàn)夸克 App 時(shí),首頁(yè)的品牌 LOGO 會(huì)經(jīng)常結(jié)合熱度打造情感化設(shè)計(jì)。比如高考到填寫志愿都會(huì)分別進(jìn)行設(shè)計(jì)結(jié)合,配合動(dòng)效設(shè)計(jì)提高用戶的關(guān)注度,夸克高考的大數(shù)據(jù)分析,也給填寫志愿帶來了非常強(qiáng)的助力。運(yùn)用情感化的設(shè)計(jì)和人性化的功能,讓產(chǎn)品變得更有溫度,提高了用戶的使用體驗(yàn)。
二、會(huì)變色的背景更吸引人
通過豐富的色彩、動(dòng)態(tài)的變化、創(chuàng)意的圖形等提高設(shè)計(jì)表達(dá),是增強(qiáng)頁(yè)面視覺感和關(guān)注度的有效形式,特別是在界面背景的設(shè)計(jì)中。
最近在體驗(yàn)騰訊動(dòng)漫 App 時(shí),個(gè)人中心頂部視覺區(qū)背景的設(shè)計(jì)表達(dá)中,不僅圖形會(huì)有微動(dòng)效,背景配色也會(huì)進(jìn)行動(dòng)態(tài)變化。清新自然的配色風(fēng)格結(jié)合微動(dòng)效,帶給用戶感官體驗(yàn)的同時(shí),也能吸引用戶的關(guān)注度。
三、趣味性的情緒日記
隨著職場(chǎng)壓力和生活瑣事的影響,很多年輕人都容易爆發(fā)情緒,發(fā)泄情緒和管理心情變得尤為重要。也因此出現(xiàn)了很多冥想、情緒日記和記錄等產(chǎn)品,幫助大家發(fā)泄情緒調(diào)整心態(tài)。
最近在體驗(yàn)罐頭冥想 App 時(shí),設(shè)計(jì)風(fēng)格非常有意思,結(jié)合罐頭的 IP 形象提高情感化體驗(yàn)。利用不同表情的罐頭記錄情緒日記,不同情緒的選擇也會(huì)配合對(duì)應(yīng)的訓(xùn)練,以此來緩解哪些不愉悅的心情。設(shè)計(jì)風(fēng)格個(gè)性有趣,交互體驗(yàn)也不錯(cuò),值得體驗(yàn)。
四、彈幕式搜索設(shè)計(jì)
搜索已經(jīng)成為產(chǎn)品的標(biāo)配功能,搜索區(qū)域的設(shè)計(jì)也是引導(dǎo)用戶探索更多內(nèi)容的關(guān)鍵,熱門關(guān)鍵詞和一些推薦內(nèi)容也是因此而存在。
搜索設(shè)計(jì)的探索也至關(guān)重要,最近通過餓了么 App 搜索時(shí),發(fā)現(xiàn)結(jié)合了彈幕式的樣式,以此來強(qiáng)化熱門搜索內(nèi)容和推薦詞匯等。下拉或者點(diǎn)擊 IP 形象即可出現(xiàn),以滾動(dòng)的形式提高內(nèi)容輸出量和吸引用戶關(guān)注度。IP 形象也會(huì)以打招呼的形式輸出內(nèi)容,提高局部?jī)?nèi)容的吸引力,強(qiáng)化了搜索設(shè)計(jì)的使用體驗(yàn)。
五、靈活的瓷片區(qū)布局
瓷片區(qū)是提高商品或者活動(dòng)曝光度的運(yùn)營(yíng)位,瓷片區(qū)的設(shè)計(jì)也是豐富多樣,靜態(tài)、微動(dòng)效和結(jié)合手勢(shì)交互等均可。
餓了么 App 首頁(yè)的瓷片區(qū)設(shè)計(jì)非常靈活,配合手勢(shì)交互對(duì)商品布局進(jìn)行延續(xù),自動(dòng)輪播和手動(dòng)滑動(dòng)結(jié)合。充分展示主推商品時(shí)也會(huì)小圖形式曝光更多商品,切換時(shí)商品移動(dòng)到展開的卡片中,轉(zhuǎn)場(chǎng)流暢自然。靈活的瓷片區(qū)布局不僅提高了商品的曝光度,也增強(qiáng)了該區(qū)域的感官體驗(yàn)。
六、隱藏式設(shè)計(jì)提高頁(yè)面利用率
在功能業(yè)務(wù)較多的產(chǎn)品設(shè)計(jì)中,如何利用隱藏式設(shè)計(jì)提高頁(yè)面利用率尤為重要,可以給更多業(yè)務(wù)提供曝光度。
飛豬旅行 App 首頁(yè) Banner 便采用了隱藏式設(shè)計(jì),減少高度占比給下方功能提供了更多的曝光度。上滑頁(yè)面時(shí)再展開 Banner 隱藏的內(nèi)容,方便用戶進(jìn)一步了解賣點(diǎn),提高用戶的點(diǎn)擊率。隱藏式設(shè)計(jì)配合手勢(shì)交互的呈現(xiàn),可以讓頁(yè)面布局更為靈活,便于內(nèi)容的呈現(xiàn)和版面利用率的提升。
七、個(gè)性化的底部標(biāo)簽欄設(shè)計(jì)
底部標(biāo)簽欄的設(shè)計(jì)風(fēng)格主要集中在圖標(biāo)設(shè)計(jì)的發(fā)揮層面,背景層面的裝飾也會(huì)帶來一些風(fēng)格變化,優(yōu)秀的案例也是層出不窮。
騰訊動(dòng)漫 App 底部標(biāo)簽欄圖標(biāo)風(fēng)格比較個(gè)性化,結(jié)合手繪風(fēng)插畫進(jìn)行表現(xiàn),視覺張力尤為明顯。點(diǎn)擊狀態(tài)還結(jié)合了 IP 形象進(jìn)行創(chuàng)作,進(jìn)一步強(qiáng)化了表現(xiàn)形式的差異和品牌感。更多風(fēng)格的嘗試可以打破固化的思維,帶給用戶眼前一亮的感官體驗(yàn)。
八、品牌化的金剛區(qū)圖標(biāo)設(shè)計(jì)
金剛區(qū)是非常靈活多變的功能模塊,圖標(biāo)設(shè)計(jì)風(fēng)格也非常豐富,隨著主題活動(dòng)也可以進(jìn)行特殊創(chuàng)意。
結(jié)合品牌營(yíng)造圖標(biāo)氛圍也是打造金剛區(qū)模塊差異的方向,比如麥德龍 App 在金剛區(qū)圖標(biāo)設(shè)計(jì)中,便以 IP 形象作為圖標(biāo)背景輪廓,以此突出品牌基因。不僅可以統(tǒng)一零散的元素,使其顯得更為聚焦,也能突出品牌的曝光度,強(qiáng)化用戶對(duì)品牌的感知。
九、人性化的提示設(shè)計(jì)
以用戶體驗(yàn)為主導(dǎo)打造產(chǎn)品設(shè)計(jì),才能讓用戶更依賴產(chǎn)品所提供的服務(wù),要在每一個(gè)細(xì)節(jié)上設(shè)計(jì)得更人性化。
高德地圖在高考期間,導(dǎo)航時(shí)會(huì)特意提示高考封路路段,防止用戶選擇錯(cuò)誤的路線。人性化的提示設(shè)計(jì)可以讓用戶少走彎路,盡早對(duì)出行做出合理的安排。
十、圖標(biāo)設(shè)計(jì)的場(chǎng)景思維
圖標(biāo)設(shè)計(jì)除了在風(fēng)格和質(zhì)感層面打造差異,場(chǎng)景思維下的圖標(biāo)會(huì)更人性化。根據(jù)現(xiàn)實(shí)場(chǎng)景思考圖標(biāo)設(shè)計(jì),結(jié)合用戶操作行為進(jìn)行顯示,更能提高用戶的情感化體驗(yàn)。
比如全民 K 歌 App 底部標(biāo)簽欄圖標(biāo)設(shè)計(jì)中,默認(rèn)狀態(tài)下的點(diǎn)唱圖標(biāo)話筒是傾斜的,當(dāng)點(diǎn)擊時(shí)會(huì)動(dòng)效形式豎起來。模擬拿起話筒唱歌時(shí)的動(dòng)作過程,讓用戶對(duì)場(chǎng)景更有代入感,提升操作過程中的體驗(yàn)感,場(chǎng)景思維下的圖標(biāo)設(shè)計(jì)讓服務(wù)過程變得更情感化。
小結(jié)
阻礙我們進(jìn)步的不是技法而是設(shè)計(jì)思維,而設(shè)計(jì)思維的提升離不開海量的積累和總結(jié)。通過對(duì)優(yōu)秀產(chǎn)品的體驗(yàn)、分析和總結(jié),我們可以學(xué)習(xí)案例的表現(xiàn)思路和技巧,有助于積累更多的設(shè)計(jì)靈感。
本文描述思路僅代表個(gè)人思考過程,不足之處歡迎大家留言補(bǔ)充。
作者:黑馬家族
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問:網(wǎng)站技術(shù)