如何將品牌基因融入到產(chǎn)品設(shè)計(jì)中？這是高級(jí)設(shè)計(jì)師的方法！ ... ... ...

@蘇大牙牙牙 ：日常工作中你有沒有碰到，本身做的設(shè)計(jì)很難跟競(jìng)品產(chǎn)生差異？只能盲目追逐趨勢(shì)缺少本身的自力思考？做不出吻合本身產(chǎn)品品牌調(diào)性且獨(dú)一無二的設(shè)計(jì)方案？

在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)越來越同質(zhì)化的今天，做出有本身品牌調(diào)性和差異化的產(chǎn)品，是每個(gè)設(shè)計(jì)師要面對(duì)的挑釁。

今天大牙就跟你一路分析下，如何將品牌基因融入到產(chǎn)品設(shè)計(jì)中，從而提拔產(chǎn)品的識(shí)別度。

一、什么是品牌基因

品牌基因也就是品牌的 DNA，它包括品牌核心價(jià)值和品牌個(gè)性，不同的品牌基因，是各品牌之間形成差異化的根本緣故原由。

成功的延用品牌基因在產(chǎn)品不同場(chǎng)景中，能讓用戶一眼就能看出這是你的產(chǎn)品。

下面舉幾個(gè)傳統(tǒng)行業(yè)比較經(jīng)典的案例來感受一下。比如：當(dāng)你看到下面這塊格子紋理時(shí)，你會(huì)想到什么品牌？

對(duì)，棕色格子讓你想到了 burbrry，這就是品牌基因的力量。同時(shí)在每年的新款，賡續(xù)把品牌基因連續(xù)到產(chǎn)品中，能夠加強(qiáng)品牌感知，強(qiáng)化本身的定位。

再比如，保時(shí)捷前車燈的設(shè)計(jì)（青蛙眼）。這種比較有差異性的表面設(shè)計(jì)，被嚴(yán)酷的應(yīng)用到所有保時(shí)捷的汽車產(chǎn)品中，就算你遮住它車上的 logo，也能一眼看出它的品牌。

再舉個(gè)互聯(lián)網(wǎng)產(chǎn)品的例子吧，看下圖雖然都是二維碼網(wǎng)頁，但是大面積的顏色，就能讓你很直觀的分辨出是誰家的產(chǎn)品。

由于藍(lán)色屬于付出寶的品牌基因，綠色屬于微信的品牌基因。同時(shí)這兩種顏色，在付出過程中，也會(huì)給用戶帶來安全的品牌感知。

當(dāng)然，品牌基因是一門比較廣的學(xué)問，在不同領(lǐng)域包含的維度也不同。

比如：在傳統(tǒng)行業(yè)里，甚至某種服務(wù)（海底撈），某種說話語氣（優(yōu)衣庫導(dǎo)購抑揚(yáng)頓挫地說，迎接光臨，隨意遴選～ ），都是品牌基因的一部分。

因?yàn)槲覀兌际窃O(shè)計(jì)師，所以今天重點(diǎn)圍繞的是品牌基因里「視覺」這個(gè)維度。

二、如何定義品牌基因

說了那么多別人家的品牌基因如何厲害，那么如何定義本身家產(chǎn)品的品牌基因呢？

通過分析發(fā)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品中，有兩種常用來定義品牌基因的方法：LOGO提取法、品牌故事提取法。

1. LOGO 提取法

LOGO，通常是奠定品牌基因的基礎(chǔ)，通過提取 LOGO 中的基因，相沿到產(chǎn)品的不同場(chǎng)景中，從而提拔品牌的識(shí)別性。

一樣平常情況下可以從兩個(gè)維度提取： LOGO 的「形」、 LOGO 的「色」。

LOGO 的「形」：把 LOGO 的外形當(dāng)作視覺符號(hào)，提掏出來，進(jìn)行連續(xù)和拓展。比如：美團(tuán)外賣的袋鼠形象，在圖標(biāo)的設(shè)計(jì)和下拉刷新上都進(jìn)行連續(xù)性的處理，品牌感知更強(qiáng)。

LOGO 的「色」：從 LOGO 中提取比較有特色或代表性的顏色，當(dāng)作品牌基因，也是常見的一種體例。

比如：抖音的 LOGO，比較吻合年輕化的用戶群體，產(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 提取法，通過對(duì)形和色的提取及運(yùn)用，加深用戶對(duì)產(chǎn)品定位的感知，強(qiáng)化品牌識(shí)別性，是比較常用的一種體例。

2. 品牌故事提取法

另一種體例，是品牌故事提取法，通過對(duì)品牌的定位梳理出品牌故事，從而推導(dǎo)出品牌性格，最后提掏出視覺語言，輔助圖形。

比如：網(wǎng)易嚴(yán)選，是網(wǎng)易自營類家居生活品牌 App，秉承嚴(yán)謹(jǐn)?shù)膽B(tài)度甄選天下優(yōu)品（品牌定位）。

使用場(chǎng)景是，用戶躺在懶人沙發(fā)上清閑的看著書，坐在窗邊滿意的喝著茶，抑或是靠在陽臺(tái)上享受午后的陽光。他們不緊不慢，尋求品質(zhì)，享受寧靜（品牌故事）。所以，品牌關(guān)鍵字是品質(zhì)、生活、寧靜（品牌性格）。

從品牌關(guān)鍵字提取到的設(shè)計(jì)語言是細(xì)節(jié)化、場(chǎng)景化、簡(jiǎn)約化（品牌基因）。

那么，網(wǎng)易嚴(yán)選底欄的 icon設(shè)計(jì)，都是以家具為原型衍化而來，給人以場(chǎng)景感，真實(shí)且生活化的感受，傳達(dá)出品牌的基因。

包括登錄網(wǎng)頁的設(shè)計(jì)，運(yùn)用大面積留白空間的商品圖，加上天然的投影，給人營造簡(jiǎn)約中帶著場(chǎng)景感，細(xì)節(jié)感，無形中吐露著品質(zhì)，生活，寧靜的基因。

以上是品牌故事提取法，相比 LOGO 提取法來說，它更為抽象，是圍繞著品牌基因關(guān)鍵詞，進(jìn)行拓展和連續(xù)在產(chǎn)品不同場(chǎng)景，達(dá)到視覺感官的同等性。

三、哪些環(huán)節(jié)適合融入

上面分析了什么是品牌基因，如何定義品牌基因，下面要說一下產(chǎn)品中哪些環(huán)節(jié)適合融入品牌基因，來提拔產(chǎn)品的識(shí)別度。

通過分析市面上產(chǎn)品，可以大致分為四個(gè)維度進(jìn)行融入：ICON、板式、缺省網(wǎng)頁、動(dòng)效。

1. ICON

ICON，是最能夠讓用戶產(chǎn)生品牌感知的地方，也是設(shè)計(jì)師發(fā)揮空間較大的地方。

比如：陌陌的 ICON 設(shè)計(jì)，是提取了 LOGO「形」和「色」，進(jìn)行基因連續(xù)（ LOGO 提取法），形成本身獨(dú)特且具有識(shí)別性的設(shè)計(jì)語言。

「更多」網(wǎng)頁 ICON 的繪制，也是連續(xù) LOGO 的處理手法。

就連照片編輯網(wǎng)頁的筆刷顏色，也是運(yùn)用品牌同等的配色，使品牌感知更強(qiáng)烈 。

好好住，也是通過對(duì) LOGO 的「色」進(jìn)行提取，運(yùn)用到本身的 ICON 設(shè)計(jì)上。

有道精品課，底部的 ICON 風(fēng)格，提取了 LOGO 的綠色和半透明的基因，在未選中的灰色 ICON 上也進(jìn)行這種處理手法的連續(xù)。

愛奇藝的「泡泡」，是品牌做的比較好的模塊，由于它既連續(xù)了愛奇藝的主色「綠色」，同時(shí)，針對(duì)泡泡的用戶群體，又做了跟愛奇藝差異化，吻合定位的趣味化處理，對(duì)母品牌基因，做了很好的連續(xù)和差異。

2. 排版

一個(gè)界面的排版體例，是給用戶的第一感受。如何作出吻合產(chǎn)品定位且具有識(shí)別性的排版設(shè)計(jì)，是許多設(shè)計(jì)師面臨的挑釁。它不能像 ICON 一樣運(yùn)用 LOGO 提取法就可以搞定，更適合的是采用品牌故事提取法。

比如：輕芒，一款碎片化高品質(zhì)的閱讀 APP，定位風(fēng)趣味有品味又小眾的用戶，營造出一種雜志捧在手內(nèi)心的感受。因此它的品牌基因就是：高品質(zhì)、小清新、生活。

下圖可以看出，整個(gè)排版體例跳脫常規(guī)的設(shè)計(jì)規(guī)范，更貼近紙質(zhì)雜志的感受，而且大面積的留白及高端的配圖，也表現(xiàn)了它高品質(zhì)的品牌基因。

蝦米音樂，最近剛更新的新版本7.0。也是在前幾個(gè)月在線音樂平臺(tái)版權(quán)歸屬調(diào)整后，一個(gè)比較大的動(dòng)作。這次改版也能看出來蝦米音樂在找本身全新的定位，從「小而美」到「美而潮」。

改版后，將全新品牌定位也融入到了網(wǎng)頁排版中，更加勇敢。同時(shí)頂部分類導(dǎo)航的處理，更吻合音樂產(chǎn)品的調(diào)性，從而加強(qiáng)了品牌的識(shí)別性。

下面這個(gè)網(wǎng)頁的版式，不僅相沿了品牌色，同時(shí)「三角形」的元素也是相沿 LOGO 的基因，進(jìn)而加強(qiáng)品牌感知。

好好住，一款室內(nèi)裝修的 app。因?yàn)樽罱匾b修房子，所以同伙保舉給我這個(gè) APP。下載之前覺得一個(gè)裝修的產(chǎn)品嘛，應(yīng)該帶有濃濃的施工隊(duì)兒風(fēng)。但是，等我下載后，忍不住說了感嘆。

由于一個(gè)裝修 APP 做的如此清新脫俗，可以說很有靈魂了，特別很是吻合本屌絲的氣質(zhì)。

它的定位是針對(duì)年輕人，有了本身的小房子后，來這里找一些家居設(shè)計(jì)的方案，以及交流社區(qū)。因此這種簡(jiǎn)潔且具有情感化的排版體例，加上趣味化圖標(biāo)和插畫點(diǎn)綴，很吻合它的品牌調(diào)性。

3. 缺省網(wǎng)頁

缺省網(wǎng)頁也是我們常說的空網(wǎng)頁，一樣平常會(huì)有一些功能的指導(dǎo)，或者因?yàn)榉浅Ｇ闆r，消弭用戶焦慮感的設(shè)計(jì)。

它的特點(diǎn)是空間比較大，因此里面的插畫配圖，很適合對(duì)品牌基因進(jìn)行連續(xù)，來強(qiáng)化用戶對(duì)品牌的心智。

比如：TIM，是騰訊出的一款專注辦公，多人協(xié)作以及溝通的軟件。整個(gè)產(chǎn)品的視覺基因是比較尖銳表現(xiàn)服從的切角，因此在空網(wǎng)頁上也做了視覺連續(xù)。

企鵝 FM，騰訊出的電臺(tái)產(chǎn)品。它的空網(wǎng)頁插畫設(shè)計(jì)，是提取了 LOGO 和界面內(nèi) ICON 的基因，從圓角的處理到顏色，雖然很簡(jiǎn)潔，但很有本身的品牌調(diào)性。

Google photos 的空網(wǎng)頁，是以場(chǎng)景化進(jìn)行指導(dǎo)。插畫的風(fēng)格相沿 Google「面」?fàn)畹奶幚硎址?，采用不同明度的灰色進(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)該只尋求外觀的酷炫結(jié)果，而是能夠知足功能表達(dá)，連續(xù)品牌基因。

比如：開眼的加載動(dòng)效，就是對(duì) logo 的一種連續(xù)。

馬蜂窩的下拉刷新動(dòng)畫結(jié)果，也是提取 LOGO 的基因。

airbnb 的空網(wǎng)頁指導(dǎo)動(dòng)效，每一個(gè)元素都是說明 airbnb 所包含的內(nèi)容，比如：飲食，戶外運(yùn)動(dòng)，旅行，居住……同時(shí)在用色上也保持跟主色同等，具有明確的品牌識(shí)別性。

五、總結(jié)

總的來說，學(xué)會(huì)定義本身產(chǎn)品的品牌基因，合理的將其融入在產(chǎn)品中的點(diǎn)點(diǎn)滴滴，從而提拔產(chǎn)品的品牌調(diào)性和識(shí)別性，是身為設(shè)計(jì)師最應(yīng)該努力去做的。

而不是盲目的跟著設(shè)計(jì)趨勢(shì)走，由于只有吻合本身品牌定位的設(shè)計(jì)語言才是經(jīng)典的、具有識(shí)別性的、具有說服力的，而跟趨勢(shì)的你，終將被趨勢(shì)所拋棄。

迎接關(guān)注作者的微信公眾號(hào)：「大牙的設(shè)計(jì)筆記」