起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何將品牌基因融入到產品設計中？
成功的運用品牌基因在產品不同場景中，可以讓用戶一眼就能看出這是你的產品。本文主要分析如何將品牌基因融入到產品設計中，從而提升產品的識別度。
日常工作中你有沒有遇到，自己做的設計很難跟競品產生差異？只能盲目追逐趨勢缺少自己獨立思考？做不出符合自己產品品牌調性且獨一無二的設計方案？
在互聯網產品設計越來越同質化的今天，做出有自己品牌調性和差異化的產品，是每個設計需要去面對的挑戰。
今天大牙就跟你一起分析下，如何將品牌基因融入到產品設計中，從而提升產品的識別度。
?什么是品牌基因？
品牌基因也就是品牌的DNA，它包括品牌核心價值和品牌個性。不同的品牌基因，是各品牌之間形成差異化的根本原因。成功的延用品牌基因在產品不同場景中，能讓用戶一眼就能看出這是你的產品。
下面舉幾個傳統行業比較經典的案例來感受一下。比如：當你看到下面這塊格子紋理時，你會想到什么品牌？
對，棕色格子讓你想到了burbrry，這就是品牌基因的力量。同時在每年的新款，不斷把品牌基因延續到產品中，能夠增強品牌感知，強化自己的定位。
再比如：保時捷前車燈的設計（青蛙眼）。這種比較有差異性的外觀設計，被嚴格的應用到所有保時捷的汽車產品中，就算你遮住它車上的logo，也能一眼看出它的品牌（內心彈幕：看出又怎樣，反正也買不起，微笑）。
再舉個互聯網產品的例子吧，看下圖雖然都是二維碼頁面，但是大面積的顏色，就能讓你很直觀的分辨出是誰家的產品。
因為藍色屬于支付寶的品牌基因，綠色屬于微信的品牌基因。同時這兩種顏色，在支付過程中，也會給用戶帶來安全的品牌感知。
當然，品牌基因是一門比較廣的學問，在不同領域包含的維度也不同。
比如：在傳統行業里，甚至某種服務（海底撈），某種說話語氣（優衣庫導購抑揚頓挫的說：歡迎光臨，隨意挑選～ ），都是品牌基因的一部分。
由于我們都是設計師，所以今天重點圍繞的是品牌基因里“視覺”這個維度。
二、如何定義品牌基因？
說了那么多別人家的品牌基因如何牛逼，那么如何定義自己家產品的品牌基因呢？
通過分析發現互聯網產品中，有兩種常用來定義品牌基因的方法：
- LOGO提取法；
- 品牌故事提取法。
1. LOGO提取法
LOGO，通常是奠定品牌基因的基礎，通過提取LOGO中的基因，沿用到產品的不同場景中，從而提升品牌的識別性。
一般情況下可以從兩個維度提取：
- LOGO的“形”；
- LOGO的“色”。
（1）LOGO的“形”? ?
把LOGO的形狀當作視覺符號，提取出來，進行延續和拓展。比如：美團外賣的袋鼠形象，在圖標的設計和下拉刷新上都進行延續性的處理，品牌感知更強。
（2）LOGO的“色”
從LOGO中提取比較有特色或代表性的顏色，當作品牌基因，也是常見的一種方式。比如：抖音的LOGO，比較符合年輕化的用戶群體，產品的定位。
提取LOGO的顏色，結合著“抖”的主題，運用在產品不同環節，建立與品牌的聯想，讓人看到這些設計就會知道是抖音的。
以上是LOGO提取法，通過對形和色的提取及運用，加深用戶對產品定位的感知，強化品牌識別性，是比較常用的一種方式。
2. 品牌故事提取法
另一種方式，是品牌故事提取法，通過對品牌的定位梳理出品牌故事，從而推導出品牌性格，最后提取出視覺語言，輔助圖形（有點繞哈，聰明的你可以耐心捋一捋）。
比如：網易嚴選，是網易自營類家居生活品牌App，秉承嚴謹的態度甄選天下優品（品牌定位）。
使用場景是：用戶躺在懶人沙發上悠閑的看著書，坐在窗邊愜意的喝著茶，抑或是靠在陽臺上享受午后的陽光。他們不緊不慢，追求品質，享受寧靜（品牌故事）。所以，品牌關鍵字是品質、生活、寧靜（品牌性格）。
從品牌關鍵字提取到的設計語言是細節化、場景化、簡約化（品牌基因）。
那么，網易嚴選底欄的icon設計，都是以家具為原型衍化而來，給人以場景感，真是且生活化的感受，傳達出品牌的基因。
包括登錄頁面的設計，運用大面積留白空間的商品圖，加上自然的投影，給人營造簡約中帶著場景感，細節感，無形中透露著品質，生活，寧靜的基因。
以上是品牌故事提取法，相比LOGO提取法來說，它更為抽象，是圍繞著品牌基因關鍵詞，進行拓展和延續在產品不同場景，達到視覺感官的一致性。
三、哪些環節適合融入？??
上面分析了什么是品牌基因？如何定義品牌基因？下面要說一下產品中哪些環節適合融入品牌基因，來提升產品的識別度。
通過分析市面上產品，可以大致分為四個維度進行融入：
- ICON;
- 版式；
- 缺省頁面；
- 動效。
1. ICON
ICON，是最能夠讓用戶產生品牌感知的地方，也是設計師發揮空間較大的地方。
比如：陌陌的ICON設計，是提取了LOGO“形”和“色”，進行基因延續（LOGO提取法），形成自己獨特且具有識別性的設計語言。
“更多”頁面ICON的繪制，也是延續LOGO的處理手法。
就連照片編輯頁面的筆刷顏色，也是運用品牌一致的配色，使品牌感知更強烈（打著體驗產品的旗號來張自拍 / 濾鏡是個好東西） 。
好好住，也是通過對LOGO的“色”進行提取，運用到自己的ICON設計上。
有道精品課，底部的ICON風格，提取了LOGO的綠色和半透明的基因，在未選中的灰色ICON上也進行這種處理手法的延續。
愛奇藝的“泡泡”，是品牌做的比較好的模塊，因為它既延續了愛奇藝的主色“綠色”。同時，針對泡泡的用戶群體，又做了跟愛奇藝差異化，符合定位的趣味化處理，對母品牌基因，做了很好的延續和差異。
2. 版式
一個界面的排版方式，是給用戶的第一感受。如何作出符合產品定位且具有識別性的排版設計，是很多設計師的面臨的挑戰。它不能像ICON一樣運用LOGO提取法就可以搞定，更適合的是采用品牌故事提取法。
比如：輕芒，一款碎片化高品質的閱讀APP。定位有趣味有品味又小眾的用戶，營造出一種雜志捧在手心里的感受。因此它的品牌基因就是：高品質、小清新、生活。
下圖可以看出：整個排版方式跳脫常規的設計規范，更貼近紙質雜志的感受，而且大面積的留白及高逼格的配圖，也體現了它高品質的品牌基因。
蝦米音樂，最近剛更新的新版本7.0。也是在前幾個月在線音樂平臺版權歸屬調整后，一個比較大的動作。這次改版也能看出來蝦米音樂在找自己全新的定位，從“小而美”到“美而潮”。
改版后，將全新品牌定位也融入到了頁面排版中，更加大膽。同時頂部分類導航的處理，更符合音樂產品的調性，從而增強了品牌的識別性。
下面這個頁面的板式，不僅沿用了品牌色，同時“三角形”的元素也是沿用LOGO的基因，進而增強品牌感知。
好好住，一款室內裝修的app。由于最近需要裝修房子，所以朋友推薦給我這個APP。下載之前覺得一個裝修的產品嘛，應該帶有濃濃的施工隊兒風。但是，等我下載后，忍不住說了一句“臥槽”。
因為一個裝修APP做的如此清新脫俗，可以說很有靈魂了，非常符合本屌絲的氣質（挖鼻孔.gif）。
它的定位是針對年輕人，有了自己的小房子后，來這里找一些家居設計的方案，以及交流社區。因此這種簡潔且具有情感化的排版方式，加上趣味化圖標和插畫點綴，很符合它的品牌調性。
3. 缺省頁面
缺省頁面也是我們常說的空頁面，一般會有一些功能的引導，或者由于異常情況，消除用戶焦慮感的設計。
它的特點是：空間比較大，因此里面的插畫配圖，很適合對品牌基因進行延續，來強化用戶對品牌的心智。
比如：TIM，是騰訊出的一款專注辦公，多人協作以及溝通的軟件。整個產品的視覺基因是比較尖銳體現效率的切角，因此在空頁面上也做了視覺延續。
企鵝FM，騰訊出的電臺產品。它的空頁面插畫設計，是提取了LOGO和界面內ICON的基因，從圓角的處理到顏色，雖然很簡潔，但很有自己的品牌調性。
Google photos的空頁面，是以場景化進行引導。插畫的風格沿用Google“面”狀的處理手法，采用不同明度的灰色進行處理，形成自己獨特的設計風格，同時又符合Google整體的母品牌基因。
4. 動效
除了靜態的圖形設計，動效也是品牌基因延續的關鍵要素。一個好的動效，不應該只追求表面的酷炫效果，而是能夠滿足功能表達，延續品牌基因。
比如：開眼的加載動效，就是對logo的一種延續。
馬蜂窩的下拉刷新動畫效果，也是提取LOGO的基因。
airbnb的空頁面引導動效，每一個元素都是說明airbnb所包含的內容。比如：飲食、戶外運動、旅行、居住…同時在用色上也保持跟主色一致，具有明確的品牌識別性。
四、總結
總的來說，學會定義自己產品的品牌基因，合理的將其融入在產品中的點點滴滴，從而提升產品的品牌調性和識別性，是身為設計師最應該努力去做的。
而不是盲目的跟著設計趨勢走，因為只有符合自己品牌定位的設計語言才是經典的、具有識別性的、具有說服力的，而跟趨勢的你，終將被趨勢所拋棄。
希望這篇文章對你有所幫助。
＃專欄作家＃
大牙，微信公眾號：大牙的設計筆記，人人都是產品經理專欄作家。百度資深UI設計師。一個對生活充滿好奇心，擅長用直白的語言去分析產品、交互、視覺的同學。
本文原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖作者提供
好大一顆牙
蝦米最近的視覺改版，還是不錯滴，調性十足~