如何將品牌基因融入到產(chǎn)品設(shè)計(jì)中?
在產(chǎn)品設(shè)計(jì)中,哪些環(huán)節(jié)適合融入品牌基因,來提升產(chǎn)品的識(shí)別度?
通過分析市面上產(chǎn)品,可以大致分為四個(gè)維度進(jìn)行融入:ICON、板式、缺省頁(yè)面、動(dòng)效。
1. ICON
ICON,是最能夠讓用戶產(chǎn)生品牌感知的地方,也是設(shè)計(jì)師發(fā)揮空間較大的地方。
比如:陌陌的 ICON 設(shè)計(jì),是提取了 LOGO「形」和「色」,進(jìn)行基因延續(xù)( LOGO 提取法),形成自己獨(dú)特且具有識(shí)別性的設(shè)計(jì)語(yǔ)言。「更多」頁(yè)面 ICON 的繪制,也是延續(xù) LOGO 的處理手法。就連照片編輯頁(yè)面的筆刷顏色,也是運(yùn)用品牌一致的配色,使品牌感知更強(qiáng)烈 。
還有好好住,也是通過對(duì) LOGO 的「色」進(jìn)行提取,運(yùn)用到自己的 ICON 設(shè)計(jì)上。有道精品課,底部的 ICON 風(fēng)格,提取了 LOGO 的綠色和半透明的基因,在未選中的灰色 ICON 上也進(jìn)行這種處理手法的延續(xù)。愛奇藝的「泡泡」,是品牌做的比較好的模塊,因?yàn)樗妊永m(xù)了愛奇藝的主色「綠色」,同時(shí),針對(duì)泡泡的用戶群體,又做了跟愛奇藝差異化,符合定位的趣味化處理,對(duì)母品牌基因,做了很好的延續(xù)和差異。
2. 排版
一個(gè)界面的排版方式,是給用戶的第一感受。如何作出符合產(chǎn)品定位且具有識(shí)別性的排版設(shè)計(jì),是很多設(shè)計(jì)師面臨的挑戰(zhàn)。它不能像 ICON 一樣運(yùn)用 LOGO 提取法就可以搞定,更適合的是采用品牌故事提取法。
比如:輕芒,一款碎片化高品質(zhì)的閱讀 APP,定位有趣味有品味又小眾的用戶,營(yíng)造出一種雜志捧在手心里的感受。因此它的品牌基因就是:高品質(zhì)、小清新、生活。
下圖可以看出,整個(gè)排版方式跳脫常規(guī)的設(shè)計(jì)規(guī)范,更貼近紙質(zhì)雜志的感受,而且大面積的留白及高端的配圖,也體現(xiàn)了它高品質(zhì)的品牌基因。
蝦米音樂,最近剛更新的新版本7.0。也是在前幾個(gè)月在線音樂平臺(tái)版權(quán)歸屬調(diào)整后,一個(gè)比較大的動(dòng)作。這次改版也能看出來蝦米音樂在找自己全新的定位,從「小而美」到「美而潮」。改版后,將全新品牌定位也融入到了頁(yè)面排版中,更加大膽。同時(shí)頂部分類導(dǎo)航的處理,更符合音樂產(chǎn)品的調(diào)性,從而增強(qiáng)了品牌的識(shí)別性。頁(yè)面的版式,不僅沿用了品牌色,同時(shí)「三角形」的元素也是沿用 LOGO 的基因,進(jìn)而增強(qiáng)品牌感知。
好好住,一款室內(nèi)裝修的 app。由于最近需要裝修房子,所以朋友推薦給我這個(gè) APP。下載之前覺得一個(gè)裝修的產(chǎn)品嘛,應(yīng)該帶有濃濃的施工隊(duì)兒風(fēng)。但是,等我下載后,忍不住說了感嘆。因?yàn)橐粋€(gè)裝修 APP 做的如此清新脫俗,可以說很有靈魂了,非常符合本屌絲的氣質(zhì)。
它的定位是針對(duì)年輕人,有了自己的小房子后,來這里找一些家居設(shè)計(jì)的方案,以及交流社區(qū)。因此這種簡(jiǎn)潔且具有情感化的排版方式,加上趣味化圖標(biāo)和插畫點(diǎn)綴,很符合它的品牌調(diào)性。
3. 缺省頁(yè)面
缺省頁(yè)面也是我們常說的空頁(yè)面,一般會(huì)有一些功能的引導(dǎo),或者由于異常情況,消除用戶焦慮感的設(shè)計(jì)。
它的特點(diǎn)是空間比較大,因此里面的插畫配圖,很適合對(duì)品牌基因進(jìn)行延續(xù),來強(qiáng)化用戶對(duì)品牌的心智。
比如:TIM,是騰訊出的一款專注辦公,多人協(xié)作以及溝通的軟件。整個(gè)產(chǎn)品的視覺基因是比較尖銳體現(xiàn)效率的切角,因此在空頁(yè)面上也做了視覺延續(xù)。
企鵝 FM,騰訊出的電臺(tái)產(chǎn)品。它的空頁(yè)面插畫設(shè)計(jì),是提取了 LOGO 和界面內(nèi) ICON 的基因,從圓角的處理到顏色,雖然很簡(jiǎn)潔,但很有自己的品牌調(diào)性。
Google photos 的空頁(yè)面,是以場(chǎng)景化進(jìn)行引導(dǎo)。插畫的風(fēng)格沿用 Google「面」?fàn)畹奶幚硎址?,采用不同明度的灰色進(jìn)行處理,形成自己獨(dú)特的設(shè)計(jì)風(fēng)格。同時(shí)又符合 Google 整體的母品牌基因。
4. 動(dòng)效
除了靜態(tài)的圖形設(shè)計(jì),動(dòng)效也是品牌基因延續(xù)的關(guān)鍵要素。一個(gè)好的動(dòng)效,不應(yīng)該只追求表面的酷炫效果,而是能夠滿足功能表達(dá),延續(xù)品牌基因。
airbnb 的空頁(yè)面引導(dǎo)動(dòng)效,每一個(gè)元素都是說明 airbnb 所包含的內(nèi)容,比如:飲食,戶外運(yùn)動(dòng),旅行,居住……同時(shí)在用色上也保持跟主色一致,具有明確的品牌識(shí)別性。
學(xué)會(huì)定義自己產(chǎn)品的品牌基因,合理的將其融入在產(chǎn)品中,從而提升產(chǎn)品的品牌調(diào)性和識(shí)別性,是身為設(shè)計(jì)師最應(yīng)該努力去做的。