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