如何將品牌基因融入到產(chǎn)品設(shè)計(jì)中?這是高級(jí)設(shè)計(jì)師的方法! ... ... ...
@蘇大牙牙牙 :日常工作中你有沒(méi)有碰到,本身做的設(shè)計(jì)很難跟競(jìng)品產(chǎn)生差異?只能盲目追逐趨勢(shì)缺少本身的自力思考?做不出吻合本身產(chǎn)品品牌調(diào)性且獨(dú)一無(wú)二的設(shè)計(jì)方案?
在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)越來(lái)越同質(zhì)化的今天,做出有本身品牌調(diào)性和差異化的產(chǎn)品,是每個(gè)設(shè)計(jì)師要面對(duì)的挑釁。
今天大牙就跟你一路分析下,如何將品牌基因融入到產(chǎn)品設(shè)計(jì)中,從而提拔產(chǎn)品的識(shí)別度。
一、什么是品牌基因
品牌基因也就是品牌的 DNA,它包括品牌核心價(jià)值和品牌個(gè)性,不同的品牌基因,是各品牌之間形成差異化的根本緣故原由。
成功的延用品牌基因在產(chǎn)品不同場(chǎng)景中,能讓用戶(hù)一眼就能看出這是你的產(chǎn)品。
下面舉幾個(gè)傳統(tǒng)行業(yè)比較經(jīng)典的案例來(lái)感受一下。比如:當(dāng)你看到下面這塊格子紋理時(shí),你會(huì)想到什么品牌?
對(duì),棕色格子讓你想到了 burbrry,這就是品牌基因的力量。同時(shí)在每年的新款,賡續(xù)把品牌基因連續(xù)到產(chǎn)品中,能夠加強(qiáng)品牌感知,強(qiáng)化本身的定位。
再比如,保時(shí)捷前車(chē)燈的設(shè)計(jì)(青蛙眼)。這種比較有差異性的表面設(shè)計(jì),被嚴(yán)酷的應(yīng)用到所有保時(shí)捷的汽車(chē)產(chǎn)品中,就算你遮住它車(chē)上的 logo,也能一眼看出它的品牌。
再舉個(gè)互聯(lián)網(wǎng)產(chǎn)品的例子吧,看下圖雖然都是二維碼網(wǎng)頁(yè),但是大面積的顏色,就能讓你很直觀(guān)的分辨出是誰(shuí)家的產(chǎn)品。
由于藍(lán)色屬于付出寶的品牌基因,綠色屬于微信的品牌基因。同時(shí)這兩種顏色,在付出過(guò)程中,也會(huì)給用戶(hù)帶來(lái)安全的品牌感知。
當(dāng)然,品牌基因是一門(mén)比較廣的學(xué)問(wèn),在不同領(lǐng)域包含的維度也不同。
比如:在傳統(tǒng)行業(yè)里,甚至某種服務(wù)(海底撈),某種說(shuō)話(huà)語(yǔ)氣(優(yōu)衣庫(kù)導(dǎo)購(gòu)抑揚(yáng)頓挫地說(shuō),迎接光臨,隨意遴選~ ),都是品牌基因的一部分。
因?yàn)槲覀兌际窃O(shè)計(jì)師,所以今天重點(diǎn)圍繞的是品牌基因里「視覺(jué)」這個(gè)維度。
二、如何定義品牌基因
說(shuō)了那么多別人家的品牌基因如何厲害,那么如何定義本身家產(chǎn)品的品牌基因呢?
通過(guò)分析發(fā)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品中,有兩種常用來(lái)定義品牌基因的方法:LOGO提取法、品牌故事提取法。
1. LOGO 提取法
LOGO,通常是奠定品牌基因的基礎(chǔ),通過(guò)提取 LOGO 中的基因,相沿到產(chǎn)品的不同場(chǎng)景中,從而提拔品牌的識(shí)別性。
一樣平常情況下可以從兩個(gè)維度提?。?LOGO 的「形」、 LOGO 的「色」。
LOGO 的「形」:把 LOGO 的外形當(dāng)作視覺(jué)符號(hào),提掏出來(lái),進(jìn)行連續(xù)和拓展。比如:美團(tuán)外賣(mài)的袋鼠形象,在圖標(biāo)的設(shè)計(jì)和下拉刷新上都進(jìn)行連續(xù)性的處理,品牌感知更強(qiáng)。
LOGO 的「色」:從 LOGO 中提取比較有特色或代表性的顏色,當(dāng)作品牌基因,也是常見(jiàn)的一種體例。
比如:抖音的 LOGO,比較吻合年輕化的用戶(hù)群體,產(chǎn)品的定位。
提取 LOGO 的顏色,結(jié)合著「抖」的主題,運(yùn)用在產(chǎn)品不同環(huán)節(jié),建立與品牌的聯(lián)想,讓人看到這些設(shè)計(jì)就會(huì)知道是抖音的。
包括下面視頻中女生的眼妝,都是抖音的品牌基因配色。
視頻地址:http://v.youku.com/v_show/id_XMzQyODk4NTM5Ng==.html
以上是 LOGO 提取法,通過(guò)對(duì)形和色的提取及運(yùn)用,加深用戶(hù)對(duì)產(chǎn)品定位的感知,強(qiáng)化品牌識(shí)別性,是比較常用的一種體例。
2. 品牌故事提取法
另一種體例,是品牌故事提取法,通過(guò)對(duì)品牌的定位梳理出品牌故事,從而推導(dǎo)出品牌性格,最后提掏出視覺(jué)語(yǔ)言,輔助圖形。
比如:網(wǎng)易嚴(yán)選,是網(wǎng)易自營(yíng)類(lèi)家居生活品牌 App,秉承嚴(yán)謹(jǐn)?shù)膽B(tài)度甄選天下優(yōu)品(品牌定位)。
使用場(chǎng)景是,用戶(hù)躺在懶人沙發(fā)上清閑的看著書(shū),坐在窗邊滿(mǎn)意的喝著茶,抑或是靠在陽(yáng)臺(tái)上享受午后的陽(yáng)光。他們不緊不慢,尋求品質(zhì),享受寧?kù)o(品牌故事)。所以,品牌關(guān)鍵字是品質(zhì)、生活、寧?kù)o(品牌性格)。
從品牌關(guān)鍵字提取到的設(shè)計(jì)語(yǔ)言是細(xì)節(jié)化、場(chǎng)景化、簡(jiǎn)約化(品牌基因)。
那么,網(wǎng)易嚴(yán)選底欄的 icon設(shè)計(jì),都是以家具為原型衍化而來(lái),給人以場(chǎng)景感,真實(shí)且生活化的感受,傳達(dá)出品牌的基因。
包括登錄網(wǎng)頁(yè)的設(shè)計(jì),運(yùn)用大面積留白空間的商品圖,加上天然的投影,給人營(yíng)造簡(jiǎn)約中帶著場(chǎng)景感,細(xì)節(jié)感,無(wú)形中吐露著品質(zhì),生活,寧?kù)o的基因。
以上是品牌故事提取法,相比 LOGO 提取法來(lái)說(shuō),它更為抽象,是圍繞著品牌基因關(guān)鍵詞,進(jìn)行拓展和連續(xù)在產(chǎn)品不同場(chǎng)景,達(dá)到視覺(jué)感官的同等性。
三、哪些環(huán)節(jié)適合融入
上面分析了什么是品牌基因,如何定義品牌基因,下面要說(shuō)一下產(chǎn)品中哪些環(huán)節(jié)適合融入品牌基因,來(lái)提拔產(chǎn)品的識(shí)別度。
通過(guò)分析市面上產(chǎn)品,可以大致分為四個(gè)維度進(jìn)行融入:ICON、板式、缺省網(wǎng)頁(yè)、動(dòng)效。
1. ICON
ICON,是最能夠讓用戶(hù)產(chǎn)生品牌感知的地方,也是設(shè)計(jì)師發(fā)揮空間較大的地方。
比如:陌陌的 ICON 設(shè)計(jì),是提取了 LOGO「形」和「色」,進(jìn)行基因連續(xù)( LOGO 提取法),形成本身獨(dú)特且具有識(shí)別性的設(shè)計(jì)語(yǔ)言。
「更多」網(wǎng)頁(yè) ICON 的繪制,也是連續(xù) LOGO 的處理手法。
就連照片編輯網(wǎng)頁(yè)的筆刷顏色,也是運(yùn)用品牌同等的配色,使品牌感知更強(qiáng)烈 。
好好住,也是通過(guò)對(duì) LOGO 的「色」進(jìn)行提取,運(yùn)用到本身的 ICON 設(shè)計(jì)上。
有道精品課,底部的 ICON 風(fēng)格,提取了 LOGO 的綠色和半透明的基因,在未選中的灰色 ICON 上也進(jìn)行這種處理手法的連續(xù)。
愛(ài)奇藝的「泡泡」,是品牌做的比較好的模塊,由于它既連續(xù)了愛(ài)奇藝的主色「綠色」,同時(shí),針對(duì)泡泡的用戶(hù)群體,又做了跟愛(ài)奇藝差異化,吻合定位的趣味化處理,對(duì)母品牌基因,做了很好的連續(xù)和差異。
2. 排版
一個(gè)界面的排版體例,是給用戶(hù)的第一感受。如何作出吻合產(chǎn)品定位且具有識(shí)別性的排版設(shè)計(jì),是許多設(shè)計(jì)師面臨的挑釁。它不能像 ICON 一樣運(yùn)用 LOGO 提取法就可以搞定,更適合的是采用品牌故事提取法。
比如:輕芒,一款碎片化高品質(zhì)的閱讀 APP,定位風(fēng)趣味有品味又小眾的用戶(hù),營(yíng)造出一種雜志捧在手內(nèi)心的感受。因此它的品牌基因就是:高品質(zhì)、小清新、生活。
下圖可以看出,整個(gè)排版體例跳脫常規(guī)的設(shè)計(jì)規(guī)范,更貼近紙質(zhì)雜志的感受,而且大面積的留白及高端的配圖,也表現(xiàn)了它高品質(zhì)的品牌基因。
蝦米音樂(lè),最近剛更新的新版本7.0。也是在前幾個(gè)月在線(xiàn)音樂(lè)平臺(tái)版權(quán)歸屬調(diào)整后,一個(gè)比較大的動(dòng)作。這次改版也能看出來(lái)蝦米音樂(lè)在找本身全新的定位,從「小而美」到「美而潮」。
改版后,將全新品牌定位也融入到了網(wǎng)頁(yè)排版中,更加勇敢。同時(shí)頂部分類(lèi)導(dǎo)航的處理,更吻合音樂(lè)產(chǎn)品的調(diào)性,從而加強(qiáng)了品牌的識(shí)別性。
下面這個(gè)網(wǎng)頁(yè)的版式,不僅相沿了品牌色,同時(shí)「三角形」的元素也是相沿 LOGO 的基因,進(jìn)而加強(qiáng)品牌感知。
好好住,一款室內(nèi)裝修的 app。因?yàn)樽罱匾b修房子,所以同伙保舉給我這個(gè) APP。下載之前覺(jué)得一個(gè)裝修的產(chǎn)品嘛,應(yīng)該帶有濃濃的施工隊(duì)兒風(fēng)。但是,等我下載后,忍不住說(shuō)了感嘆。
由于一個(gè)裝修 APP 做的如此清新脫俗,可以說(shuō)很有靈魂了,特別很是吻合本屌絲的氣質(zhì)。
它的定位是針對(duì)年輕人,有了本身的小房子后,來(lái)這里找一些家居設(shè)計(jì)的方案,以及交流社區(qū)。因此這種簡(jiǎn)潔且具有情感化的排版體例,加上趣味化圖標(biāo)和插畫(huà)點(diǎn)綴,很吻合它的品牌調(diào)性。
3. 缺省網(wǎng)頁(yè)
缺省網(wǎng)頁(yè)也是我們常說(shuō)的空網(wǎng)頁(yè),一樣平常會(huì)有一些功能的指導(dǎo),或者因?yàn)榉浅G闆r,消弭用戶(hù)焦慮感的設(shè)計(jì)。
它的特點(diǎn)是空間比較大,因此里面的插畫(huà)配圖,很適合對(duì)品牌基因進(jìn)行連續(xù),來(lái)強(qiáng)化用戶(hù)對(duì)品牌的心智。
比如:TIM,是騰訊出的一款專(zhuān)注辦公,多人協(xié)作以及溝通的軟件。整個(gè)產(chǎn)品的視覺(jué)基因是比較尖銳表現(xiàn)服從的切角,因此在空網(wǎng)頁(yè)上也做了視覺(jué)連續(xù)。
企鵝 FM,騰訊出的電臺(tái)產(chǎn)品。它的空網(wǎng)頁(yè)插畫(huà)設(shè)計(jì),是提取了 LOGO 和界面內(nèi) ICON 的基因,從圓角的處理到顏色,雖然很簡(jiǎn)潔,但很有本身的品牌調(diào)性。
Google photos 的空網(wǎng)頁(yè),是以場(chǎng)景化進(jìn)行指導(dǎo)。插畫(huà)的風(fēng)格相沿 Google「面」?fàn)畹奶幚硎址ǎ捎貌煌鞫鹊幕疑M(jìn)行處理,形成本身獨(dú)特的設(shè)計(jì)風(fēng)格。同時(shí)又吻合 Google 團(tuán)體的母品牌基因。
4. 動(dòng)效
除了靜態(tài)的圖形設(shè)計(jì),動(dòng)效也是品牌基因連續(xù)的關(guān)鍵要素。一個(gè)好的動(dòng)效,不應(yīng)該只尋求外觀(guān)的酷炫結(jié)果,而是能夠知足功能表達(dá),連續(xù)品牌基因。
比如:開(kāi)眼的加載動(dòng)效,就是對(duì) logo 的一種連續(xù)。
馬蜂窩的下拉刷新動(dòng)畫(huà)結(jié)果,也是提取 LOGO 的基因。
airbnb 的空網(wǎng)頁(yè)指導(dǎo)動(dòng)效,每一個(gè)元素都是說(shuō)明 airbnb 所包含的內(nèi)容,比如:飲食,戶(hù)外運(yùn)動(dòng),旅行,居住……同時(shí)在用色上也保持跟主色同等,具有明確的品牌識(shí)別性。
五、總結(jié)
總的來(lái)說(shuō),學(xué)會(huì)定義本身產(chǎn)品的品牌基因,合理的將其融入在產(chǎn)品中的點(diǎn)點(diǎn)滴滴,從而提拔產(chǎn)品的品牌調(diào)性和識(shí)別性,是身為設(shè)計(jì)師最應(yīng)該努力去做的。
而不是盲目的跟著設(shè)計(jì)趨勢(shì)走,由于只有吻合本身品牌定位的設(shè)計(jì)語(yǔ)言才是經(jīng)典的、具有識(shí)別性的、具有說(shuō)服力的,而跟趨勢(shì)的你,終將被趨勢(shì)所拋棄。
迎接關(guān)注作者的微信公眾號(hào):「大牙的設(shè)計(jì)筆記」
本文地址:http://pkvc.cn/tutorial/di4010.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門(mén)正道:好好玩耍的點(diǎn)線(xiàn)面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專(zhuān)題頁(yè)面設(shè)計(jì)篇
- 專(zhuān)訪(fǎng):石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏