大廠 UI 設計師的進階武器:如何立足於品牌做 UI 設計

2019-09-25     視覺設計工坊

網際網路行業走到今天,早已從增量時代轉為存量時代,人口、流量、資本的紅利都逐漸收緊。在存量時代,影響用戶選擇產品的很重要一個因素就是「品牌」,一個產品要想從同類產品中跳脫出來需要有個性。如何在用戶心智中植入品牌成為產品整個生命周期很重要的一環,而面對網際網路產品越來越趨於同質化的現象,UI 設計師已經不能局限於介面表現層,更要了解產品背後整個商業鏈路,知道產品想在用戶心智中建立怎樣的定位,以業務為依據設計品牌,以品牌為基準去設計產品。

為什麼要立足於品牌做UI?

1. 對內:規範統一,高效協作

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

韓國的 NEVER 公司(相當於國內的BAT),旗下有很多款 APP 滲透到韓國人民日常生活的衣食住行當中,由於一開始沒有一個統一的品牌規範指導,各個 APP 由不同的設計師設計,導致每個 APP 的風格迥異,體驗也不一致,後面通過引入 SQUARE(方形)的設計理念,統一了所有 APP 的設計語言。

圖片來自NAVER設計團隊

2. 對外:提高認知,溢價增值

最近幾年我們發現手機上的 APP 越來越同質化了,同時也在慢慢地失去了產品的個性,不看 logo,單純看介面的話,很多時候根本分不清是誰家的產品。如果能夠立足於品牌的高度去做設計,關注每一個設計細節對品牌的影響,在 UI 中適當融入品牌元素,無疑將能更好地提高用戶對產品的認知,通過創造情感性價值實現產品的溢價增值,同時也能夠為產品的營銷推廣提供立足點。

用戶如何感知品牌?

品牌的根本目的,就是在目標用戶群體的認知中構建品牌信念。所以想要做好品牌設計,首先要了解用戶是如何感知品牌。在設計產品的時候常常會發現我們覺得理所當然的地方,用戶往往沒按我們預想的方式去使用。那是因為設計師通常有整體觀,站在金字塔頂端去規劃一個產品的設計,而用戶恰恰相反,在金字塔底端往上爬,他們不知道這個金字塔多高,也不知道從哪一面開始最好爬,所以會遇到各種問題。同樣,用戶對品牌的感知也是由外向內,由低向高,用戶通過各種場景接觸到產品,再通過產品的視覺呈現、功能體驗、信息內容等感知品牌,然後進一步了解品牌的特性與內核,最後在心智中形成印象,構建品牌信念,從而影響下次產生相應需求時對產品的選擇。

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

如何將品牌融入UI?

1. 明確定位,提取關鍵詞,建立情緒板

首先,需要明確品牌定位,美國的著名品牌學者馬蒂·諾伊邁爾提出了一個品牌快速定位測試的方法:

圖片內容來自徐適《品牌設計法則》

通過品牌定位找到細分市場和目標用戶,再將定位策略作用於品牌識別系統,以此確保每一個品牌觸點都符合產品的品牌定位。

明確定位後,接著圍繞品牌定位提取關鍵詞,一開始可以通過腦暴寫多個關鍵詞,然後再一步步過濾剩下最核心最重要的幾個。

通過上一步確定的關鍵詞來建立品牌情緒板,品牌情緒板旨在營造產品對應的正確的情緒和符合預期的感覺,將比較抽象的概念轉化為可感知的視覺(比如柔軟、溫暖、光滑的線條感、低飽和度色彩等),進而有效指導後面對品牌關鍵元素的提取與設計的融入。

2. 提取表現元素

基於前面的品牌情緒板,圍繞品牌內核,進一步提取視覺表現元素,包括顏色、圖形、紋理、字體、文案、聲音等。

顏色

顏色給人感官帶來的刺激是最直接的,而且顏色不止於視覺,而是與我們全部的感知都相關,人對顏色的感受是一個綜合體。一隻打破的蛋殼中濺出來的深黃色的極度新鮮的蛋液,或是一杯美式咖啡的深褐色都不只是顏色,還有材料性的質感,苦澀的味道與氣味都透過顏色被感知。

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

由此可見,顏色對於品牌的體現至關重要,不容忽視。顏色在 UI 中的體現有 logo、導航欄底色、圖標、文字、可視化圖表、插圖、按鈕等。

近幾年 UI 設計圈掀起了一股極簡風,介面設計強調內容本身,加大留白,去除不必要的顏色和 UI 元素,品牌顏色在介面中被大大弱化,個人覺得這種設計並不適用於所有產品。像 Facebook、Twitter、Instagram、Airbnb 本身就是體量很大的產品,早已在用戶心智中建立品牌信念,所以對於他們來說或許主要的任務在於商業和體驗層面。即便如此,我們也會發現這些應用採用極簡化設計的同時,應用圖標也變得更鮮艷,更引人注目,說明他們也在尋求一個平衡,想在 UI 設計變得極簡趨同的同時,仍然能保留核心的品牌基因。

圖形

圖形對於品牌表現的重要性不亞於顏色,不同於顏色的抽象感知,圖形是一種相對具象的表現方式。

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

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

還有飛豬提取了 logo 中「豬的髮型」用於搜索框,韓國的電商品牌11街也將 logo 延長作為介面中的搜索框。

紋理

通過提取品牌圖形元素,再運用分形、排列、重複、平鋪等設計手法形成品牌紋理,在 UI 設計或者運營推廣設計方面都能有很好的運用。如下圖所示,京東的啟動頁用了 Joy 的外形輪廓做旋轉複製形成的紋理為背景;國外著名的聊天應用 WhatsApp,在聊天頁的背景使用平鋪的塗鴉插圖紋理做為聊天背景,並在應用市場的截圖中也得以應用;還有騰訊文檔的啟動頁、登錄頁也都用了漸變的小菱形作為紋理,輔助品牌視覺表現。

UBER 之前在做品牌升級的時候,設計師將每個國家富有代表性的圖形提煉出來, 然後重複運⽤平鋪,形成⼀種時尚的⼏何紋理,運⽤到閃屏和線上線下的產品當中。

圖片來自UBER設計團隊

字體

字體常常是很容易被忽略的設計要素,通常都會認為 UI 中的字體用系統默認的就行。其實字體對於品牌和產品氣質的體現同樣起著很大的作用,越來越多的品牌都把字體設計當成品牌基因中必不可少的一部分。

字體的選擇需要契合產品功能特點與品牌調性。微信讀書閱讀時用的字體不是常見的黑體,而使用了方正宋三,文本秀麗、閱讀醒目;每日故宮則使用了方正清刻悅宋體,字裡行間隱含著歷史古韻,滲透著文化氣息;澎湃新聞使用方正准雅宋體,體現其作為新聞產品「專注時政與思想」的嚴肅一面。

英文字體的字體包比較小,能夠很方便地嵌入應用當中,所以可以大膽地拋棄系統默認字體,而使用契合產品氣質的英文字體。比如經常被用作數字字體的 Din、優雅經典的襯線字體 Playfair Display、⾕歌御用的 Roboto 同樣非常簡潔實用。

IP形象

越來越多的網際網路產品喜歡直接用 IP 形象來作為產品的品牌符號,比如阿里動物園、京東、考拉海淘等。相較於圖形或文字 logo,IP 形象更具象,更討喜,在情感傳遞層面有著很大的優勢,同時 IP 形象的可拓展性也很高,在線上運營、線下活動、周邊物料等方面都可以很好運用。

在介面當中適當融入 IP 形象,能夠提高產品趣味,愉悅用戶,比如站酷的安卓版刷新時,騎著竹馬的小Z,就很討喜。

大廠 UI 設計師的進階武器:如何立足於品牌做 UI 設計

文案(語氣)

很多人可能認為文案是產品或運營的事,不應該設計師來負責,其實只要影響到用戶對產品品牌的感知就與設計有關。每個人有不同的性格,不同的性格有不同的說話方式,產品也是如此,文案所傳遞出來的語氣是高冷、親切、文藝、俏皮或嚴肅全取決於產品的性格。

除了上面說的這些,品牌的體現還有聲音、動效、質感、柵格等,就不一一舉例說明了。

3. 融入品牌觸點

品牌觸點是指用戶有機會面對一個品牌信息的情景,這些接觸點是品牌信息的主要來源,是決定用戶對產品品牌印象好壞的關鍵。對於網際網路產品而言,我們可以把品牌觸點理解為用戶從產生一個需求,然後通過某一個產品完成需求的過程中品牌信息得以展示的情境。

如何尋找品牌觸點?

為了尋找品牌觸點,我們參照用戶體驗地圖,引入「品牌體驗地圖」的概念。和用戶體驗地圖一樣,品牌體驗地圖需要明確用戶目標,提煉用戶行為,找到用戶完成目標的完整使用流程,不同的是品牌體驗地圖側重點在於各個階段用戶對品牌的感知程度和融入品牌信念的機會點。

如果是線上線下或軟硬體結合的產品還需要進一步把品牌體驗地圖延伸,以確保不遺漏每一個品牌融入的機會點。

網際網路產品常見的品牌觸點

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

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

插圖:Dropbox 的兒童風格的插畫與 bilibili 的二次元插畫都非常契合產品品牌特徵。

除此之外,還有應用於商店截圖介紹、預加載圖、loading、動效、新手引導等。

總結

最近常有聽到 UI 設計工作不好找的聲音。的確,一方面市場對 UI 設計師的需求確實沒那麼高了,網際網路行業已經過了拓荒時代,行業沉澱下了許多有價值的知識,也有許多非常好的 UI 組件和規範文檔可以直接使用;另一方面,很多公司對於 UI 設計在整個產品生命周期中的價值普遍覺得不是非常重要,UI 設計部門只是一個業務支持部門,起不到主導作用。而如果 UI 設計師做的工作僅僅是把產品的原型文檔變漂亮,肯定是不被稀罕了。但是,行業的發展從來都是優勝劣汰,為了不被市場淘汰,我們需要走出舒適圈,主動去挖掘更深層次的設計價值,提升自我價值。

之前看到過一篇文章裡面提到的一個比喻很有意思,大概就是設計師和理髮師一樣。理髮師分三種:一種是只會搞基礎髮型的,比如寸頭、長發、老太太卷頭等;一種是只會剪流行髮型的(告訴你應該改變,剪目前最流行的某款髮型,但實際上可能是他只擅長這款髮型);還有一種是最可遇不可求的,他根據你的臉型、性格等,用最簡單的手法量身設計髮型,讓顧客的氣質度立刻得到提升。設計師大體也分這幾種:只會做基礎設計的初級設計師(工);技藝精湛,能搞定所有流行風格的高級設計師(匠);能根據產品性格、特徵量身打造設計風格的設計大師(師)。而要成為最後一種設計師不僅需要對產品業務和商業有深入了解,更重要的是對於品牌在整個產品鏈路中的應用與把控

文章來源: https://twgreatdaily.com/4irxeW0BJleJMoPMrcLY.html