今天分享的題目是從品牌到UI，用設計的思想與這個世界和解；這里的我說的和解比較寬泛，大家可以理解成與客戶和解，也可與產品經理和解，也可以是與自己和解；

為什么選這個主題呢，原因是之前在網上聽一群人總是說互聯網走到了下半場，我和好奇，就去查這個下半場到底是什么，后來總算知道了，互聯網行業走到現在，已經從增量時代轉為存量時代，這個存量時代就是下半場，人口、流量、資本的紅利都逐漸收緊。

在這種情況下我的產品如何從同類產品中脫穎而出，或許增加品牌屬性是種方法，希望大家在聽完這個分享后，會有一些啟發。

在互聯網的增量時代，品牌設計與UI設計是兩條平行線，幾乎沒有交集，你做你的畫冊、slogan、包裝，我做我的網站、app、微信小程序，偶爾互相模仿，但也不是主流，畢竟兩者載體不同，目的不同，用戶也不同；

但是到了存量時代，影響用戶選擇的一個重要因素是「品牌」，一個產品要想從同類產品中區別出來，需要有個性，UI+品牌成為產品生命周期中重要的一環，下面我們看看如何在用戶心中植入產品品牌； 

 

 

在在品牌植入方便，國外很多產品已經走在了我們前面，我們來看看谷歌，谷歌開發者大會上對 Material（ Design做了更新，我印象特別深刻的是Google對圖形語言單獨拿出來做一個模塊解釋它，它提取了圓形作為視覺DNA，并沿用到產品的每一個控件；

當然，如果我們想傳達我們產品的品牌理念，只在圖標組件里運用是遠遠不夠的。

誕生于1886年的可口可樂，每年都做產品運營推廣，不斷大量的重復它logo的弧線元素和瓶子的外形；

還有剛剛過去的雙11，從2012年11月11日開始的天貓節，現在是全球最大的B2C平臺，天貓貓頭運用也是滲透到全產品線里面去了，問大家個問題，大家有沒有人知道這個貓頭品牌是誰創立的？其實就是馬云的繼任者，現任阿里巴巴集團董事局主席張勇；講的有點遠了，我們再回到我們的主題；

這個圖很好的解釋了品牌與產品與用戶的關系，產品需要品牌牽引、支撐，現在互聯網產品越來越趨于同質化，UI 設計師已經不能局限于界面的表現層，更要了解產品背后的邏輯，然后以業務為依據設計品牌，以品牌為基準去設計產品。

  

第一章意義Significance，這個章節我們講講從品牌到UI的意義

 

第一個意義是對內：可以規范統一，協作

品牌本身就可以作為設計規范的一個重要指導原則，通過對配色、文字、圖標、控件等建立設計規范，可以有效減少設計決策時間，傳達一致的品牌調性。

 

 

 

第二個意義是對外：可以提高認知，溢價增值

如果一個產品失去了個性，不看 logo，單純看界面的話，很多時候根本分不清是到底是哪一家公司的產品。如果能夠關注設計細節對品牌的影響，肯定能更好地提高用戶對產品的認知，當你對一件產品注入了感情，同時也就為產品提供了營銷推廣的立足點；也可以這么說，設計師創造的情感性價值，直接實現了產品的溢價增值；

第二章感知Perception

有位設計界的前輩講過，品牌知名度其實就是信任度的體現，他說世界上最成功的品牌就是宗教，這里沒有詆毀任何宗教的意思，但是宗教建立的品牌信任度，遠遠超過了任何商品；

這里我們從用戶的角度出發，看下用戶是如何從產品感知品牌的；

在設計產品的時候常常會發現我們覺得理所當然的地方，用戶往往沒按我們想的方式去使用。那是因為設計師通常有整體觀，站在金字塔頂端去規劃一個產品的設計，而用戶則恰恰相反，在金字塔底端往上爬，他們不知道這個金字塔多高，也不知道從哪一面開始最好爬，所以會遇到各種問題。

同樣，用戶對品牌的感知由低向高的，用戶通過各種場景接觸到產品，再通過產品的視覺呈現、功能體驗、信息內容等感知品牌，最后在心中形成印象，構建品牌信念，從而影響下次產生相應需求時對產品的選擇；

可以聯想下我們的購物體驗，是不是總是從同一個地方shopping，這就是購物APP品牌價值已經使你已經形成了習慣選擇；

作為設計師，我們需要充分理解品牌內核，由內向外將抽象的品牌內核轉化為具象的視覺符號，再延伸到用戶與產品的各個接觸點，從而將品牌理念植入用戶內心。

第三章融合Integration既然上面我們講品牌和UI最終要走的一起，這一章我們講他們如何在工作融合

 第一步，明確定位，提取關鍵詞，建立情緒板

當代廣告教皇，美國奧美廣告創始人大衛.奧格威說，“最重要的決定是如何定位你的產品。”

在大師的指引下，我們發現首先找到品牌定位，定位自己的細分市場和目標用戶；

2.圍繞品牌定位提取關鍵詞；

3.建立情緒版，將抽象的概念轉化為可感知的視覺；

第二步，提取視覺表現元素，并設計融入品牌定位。我們重點從顏色、圖形、紋理、字體四個方面講一下。

有時甚至不需要任何圖形，單憑顏色就能產生對某一事物的聯想。

現在UI設計流行的極簡風，我們發現這些應用采用極簡化設計的同時，圖標也變得更鮮艷，更引人注目，說明這些產品也在尋求一個平衡，在 UI 設計變得極簡趨同的同時，仍然能保留核心的品牌基因。

顏色在 UI 中的表現有 logo、導航欄底色、圖標、文字、可視化圖表、插圖、按鈕等等。 

現在UI設計流行的極簡風，我們發現這些應用采用極簡化設計的同時，圖標也變得更鮮艷，更引人注目，說明這些產品也在尋求一個平衡，在 UI 設計變得極簡趨同的同時，仍然能保留核心的品牌基因。 

圖形

我們知道顏色是抽象感知，圖形是相對具象的表現方式。

一旦某個特有的圖形在用戶心中形成烙印，用戶見到相似的圖形組合都能往該圖形聯想，從而關系到圖形背后所代表的品牌，這也是很多企業做品牌升級的時候 logo 都越來越簡潔的原因，因為這樣能有效降低用戶的認知負擔，提高品牌認知。

圖形通常從 logo 本身提取，并在 UI 中延伸應用。比如馬蜂窩、百度網盤、京東做品牌升級的時候都不約而同地從 logo 中提取了一個代表微笑的弧度，傳遞友好、溫暖的品牌形象。

 

飛豬提取了 logo 中「豬的發型」用于搜索框，韓國的電商品牌11街也將 logo 延長作為界面中的搜索框。

紋理

在 UI 設計或者運營推廣運用中，通過提取品牌圖形元素，再運用分形、排列、重復、平鋪等設計手法形成品牌紋理。

我們看看京東的啟動頁用 Joy 的外形旋轉做成的紋理背景；

國外著名的聊天應用 Whatsapp，在聊天頁的背景用涂鴉插圖紋理做背景；

還有騰訊文檔的啟動頁、登錄頁用了漸變的菱形作為紋理，輔助品牌的視覺表現。

我們還在聊圖形復制變形的時候，國外的UI設計已經細化到了十分驚人的程度

例如UBER 在做的品牌升級，設計師出來將每個國家富有代表性的圖形提煉， 然后重復運?平鋪，形成帶有地域特色的?何紋理，運?到閃屏和線上線下的產品當中。

 

 

字體

字體是最容易被忽視的設計元素，很多人會認為 UI 中的字體用系統默認的就行。其實字體對于產品氣質的體現著很大的作用，很多品牌都把字體設計當成品牌基因中重要一部分。

字體的選擇需要契合產品功能特點與品牌調性。

 

微信讀書使用了方正宋三，讓人閱讀起來有種文字秀麗的浸入感；每日故宮使用了方正清刻悅宋體，字里行間隱含著歷史古韻，滲透著文化氣息；澎湃新聞使用方正準雅宋體，體現其作為新聞產品「專注時政與思想」的嚴肅一面。

英文字體也可以使用契合產品氣質的英文字體。比如常被用作數字字體的 Din、經典的襯線字體 Playfair Display、?歌御用的 Roboto 等。

 

第三步，融入品牌觸點

這里我解釋下品牌觸點這概念，是指一款產品中品牌信息接觸點，是決定用戶對產品品牌印象的關鍵；

我們看幾個案例，

啟動頁：知乎的啟動頁采用 slogan 加 logo 的方式來體現品牌，這也是絕大多數應用的做法；每日故宮啟動的時候伴隨著一聲鐘聲，頁面會有一個光線流動的動畫，極具儀式感，一下子就把用戶帶入故宮莊嚴的氛圍當中。

圖標：東家的每一個圖標都融入了印刷式字體的元素，體現其匠人的品牌基因；mono 則直接把產品名稱「 M O N O」用于導航欄。

插圖：Dropbox 的兒童風格的插畫與 B站 的二次元插畫都非常契合品牌特征。

 

品牌觸點式多樣的，除了上面的啟動頁、圖標、插圖之外，還有預加載圖、loading、動效、新手引導等等都能體現品牌觸點，這些品牌觸點，都是講述品牌故事的關鍵載體，幫助產品從同行業中脫穎而出，這里由于時間的關系我們就不展開講了，有興趣的同學，我們可以單獨交流哦

 

互聯網行業已經過了拓荒時代，行業沉淀下了許多有價值的知識，也有許多非常好的 UI 組件和規范文檔可以直接使用；

另一方面，很多公司對于 UI 設計在整個產品生命周期中的價值，普遍覺得不是非常重要，UI 設計部門只是一個業務支持部門，起不到主導作用。而如果 UI 設計師做的工作還是停留在把產品的原型文檔變漂亮，肯定是不行了。

設計師不僅需要對產品業務和商業有深入了解，更重要的是對于品牌在整個產品鏈路中的應用與把控。

我們需要走出舒適圈，主動去挖掘更深層次的設計價值，提升自我價值。

 

誠然改變一個大的設計生存環境是非常漫長的過程。要不停的嘗試，就像不停的迭代做新產品一樣，不能因為一兩次的失敗打消掉設計的積極性。

設計的終極最后就是和解 Compromise

 

 

 

開篇我提到了與世界和解，分享下我是怎么和這個世界和解的，我相信三句話，可以跟這個世界和解 

再次謝謝大家聽我叨叨，如果大家喜歡，下次我們可以叨叨點關于設計的更有意思的事，謝謝

文章來源：tob.design        作者：無名大師29aef85c40

藍藍設計( www.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務