編輯導(dǎo)語：品牌視覺傳達其實就是我們都曾聽過的“視覺錘”——將品牌區(qū)別于競爭對手的差異化特性，深入傳遞到消費者心智。本篇文章作者結(jié)合實際經(jīng)驗對定義APP視覺品牌的流程以及有哪些操作方法展開了一系列講述，感興趣的小伙伴們快來一起看看吧。

這一兩年，我們團隊設(shè)計師經(jīng)常會做一些視覺改版的項目并在后期進行復(fù)盤總結(jié)。

我們通常把這些項目簡稱為app視覺改版、風格升級等等，那么今天我們要聊的“視覺品牌”概念是不是一樣的呢？

定義app視覺品牌的流程是怎樣的，有哪些操作方法呢？

一、概念簡述

視覺品牌這一概念，既陌生又熟悉。

大部分ui設(shè)計師都或多或少做過視覺改版或者風格升級，先來看兩個概念：視覺風格&視覺品牌。

▲視覺風格&視覺品牌重點偏向

風格是藝術(shù)概念，是在整體上呈現(xiàn)的有代表性的一種面貌。風格能反映時代、思想、審美等特性。也是設(shè)計師對審美獨特鮮明的理解。

那么視覺品牌呢？它除了要體現(xiàn)產(chǎn)品本身特性，融入產(chǎn)品希望傳達的感受，也要思考什么對用戶有意義。

研究視覺品牌，就是探索如何通過設(shè)計維護用戶對于產(chǎn)品的好感度 ，通過有共鳴的設(shè)計傳遞正能量，讓產(chǎn)品獲得最大的認同。

簡單來說：視覺風格重點是設(shè)計師對審美的傳達；視覺品牌則是通過挖掘產(chǎn)品有價值的特點，創(chuàng)造有共鳴的視覺去打動用戶，助力產(chǎn)品。

▲視覺品牌作用

了解完視覺品牌的概念，我們簡單聊下它的作用。視覺品牌最大作用是建立用戶和產(chǎn)品的關(guān)系。

vivo互聯(lián)網(wǎng)單個產(chǎn)品的視覺品牌也受vivo母品牌影響，不同業(yè)務(wù)被滲透的程度不同。

比如vivo品牌對vivo官網(wǎng)，vivo商城影響比較大，但是對瀏覽器，i視頻，短視頻的影響就比較小。

二、流程

那么，如何定義好產(chǎn)品的視覺品牌？

借企業(yè)文化里的一句話：做正確的事，并把事情做正確。

在設(shè)計工作中，這句話也有一定的指導(dǎo)意義，我們先要確定是否要做視覺品牌，再用合理的流程規(guī)劃好每一步。

結(jié)合過往的業(yè)務(wù)經(jīng)驗來看，對于已有視覺風格的產(chǎn)品來說，需要滿足以下兩個情況之一才是最適合做視覺品牌工作的時候：

1. 產(chǎn)品轉(zhuǎn)型、重大業(yè)務(wù)調(diào)整（包括用戶人群、需求變化等）
2. 與相關(guān)行業(yè)設(shè)計語言水準差距巨大

另外需要考慮的還有時間安排，由于整個流程耗時需要大約12周（3個月），所以設(shè)計師前期就要做好時間規(guī)劃。

確定要做視覺品牌工作后，需要準備哪些資料？項目環(huán)節(jié)和流程如何？

讓我們來看下這12周需要做的事情和基本順序：

▲視覺品牌的流程

我們接下來會重點介紹流程中關(guān)鍵的8個步驟（圖標標藍色的step1～8）：

1. 品牌定位資料熟悉
2. 明確視覺品牌關(guān)鍵詞
3. 關(guān)鍵詞發(fā)散和可視化
4. 提取元素建立視覺符號
5. 完善主要頁面
6. 驗證視覺風格喜好
7. 完成所有頁面的視覺效果
8. 整理成視覺品牌規(guī)范手冊

1. 品牌定位資料熟悉

大部分項目的產(chǎn)品，運營和用研角色會提前做一些品牌定位的工作（品牌屋），品牌屋有助于我們對產(chǎn)品各方面進行解讀。

這類資料一般我們都可以獲得，設(shè)計師可以從中了解到目前我們產(chǎn)品全面信息，包括：產(chǎn)品形象、調(diào)性、核心價值觀等。

我們需要的關(guān)鍵信息：產(chǎn)品關(guān)鍵詞就可以從中找到。

如果品牌屋資料不夠明確或者設(shè)計師對確定的詞匯抱有疑問，我們還可以通過工作坊形式，邀請項目核心成員進行腦暴會議，討論出合適的詞語。

▲案例：vivo瀏覽器品牌屋

圖中為瀏覽器品牌屋資料案例，經(jīng)過項目成員討論，瀏覽器產(chǎn)品最終關(guān)鍵詞：智慧、有趣、默契、可靠、年輕。

2. 明確視覺品牌關(guān)鍵詞

然后，從產(chǎn)品關(guān)鍵詞里，我們需要選出符合產(chǎn)品定位又能達到受眾心理預(yù)期的視覺品牌關(guān)鍵詞，聚焦產(chǎn)品的視覺調(diào)性。

視覺關(guān)鍵詞一般有2～5個，需要視覺專業(yè)團隊、項目相關(guān)人員、核心用戶一起來挑選，用戶的選擇可以放在問卷里進行，通過快速測試了解用戶對產(chǎn)品的視覺感受和期待。

如果確定的視覺品牌關(guān)鍵詞比較多，可以適當確立1～2個核心視覺詞匯，便于聚焦后期的風格指導(dǎo)。

▲明確視覺品牌關(guān)鍵詞

選擇標準有兩條：

1. 延展性高，有一定視覺可視化潛力：詞匯要抽象化，不能過于具體，一般都是描述情緒，氣氛，氛圍或者感受之類的
2. 貼合公司品牌文化：追求樂趣、充滿活力、專業(yè)音質(zhì)、極致影像、愉悅體驗、敢于追求極致、持續(xù)創(chuàng)造驚喜

3. 關(guān)鍵詞發(fā)散和可視化

（1）發(fā)散

視覺品牌關(guān)鍵詞選定后，在繪制可視化的情緒版之前，還差一步，就是針對選出來的詞進行發(fā)散。

做這一步的目的是希望設(shè)計師的思維能夠盡可能打開，收獲更大范圍的靈感和思考。

我們通過三層映射方式，分別對2~5個視覺品牌關(guān)鍵詞進行發(fā)散收獲大量衍生詞。（圖中以詞語“友好”為案例，分別進行物化、心境、視覺映射出大量衍生詞語。）

▲三層映射案例：詞語友好

在大量衍生詞里，我們還要經(jīng)過一輪討論篩選，去掉不合適的詞語。

主要看衍生詞和我們的視覺關(guān)鍵詞的關(guān)聯(lián)度是否足夠高，以及是否適合用視覺語言表達等。

如果項目沒有做品牌相關(guān)的工作，沒有產(chǎn)品關(guān)鍵詞，那我們前3步驟怎么辦？

遇到這種情況，我們要怎么深入下去？

當然，你可以嘗試推進項目去做一下品牌屋，這對各個角色在產(chǎn)品認知上有很大的幫助。

其實還有一個工具方法能夠幫助我們較好的完成各類關(guān)鍵詞提取。(Design O to O主要是察覺用戶情感化的一個工具，工具里得出該類別情感相關(guān)詞匯和我們想要得出的視覺品牌關(guān)鍵詞概念非常接近，所以推薦作為遇到這類情況的解決方法。)

▲Design O to O方法

這套工具方法的核心步驟分別是：收集，組織，反應(yīng)，評估。每一步都有一些工具模型可以套用，能夠較準的幫助大家達到目標，找出合適的關(guān)鍵詞。

（2）可視化

前面我們得出篩選后的衍生詞，是為了之后可以做出更全面、精準的可視化情緒版。很多設(shè)計師在情緒版制作上比較隨意，這里也給大家一些我們團隊常用來搭建情緒版的方式。

一般我們將收集的圖片依照3個維度（人物、場景、物體）進行歸納整理，這樣共性的東西更容易被發(fā)現(xiàn)。

當然，拼貼整理的方式很多種，也包括常見的任意拼貼、參考式拼貼和精致化拼貼。

大家可以多試一些平時不怎么用的維度進行拼接，也許會帶來不一樣的靈感。

▲情緒板拼貼常用方法

4. 提取元素建立視覺符號

每個情緒版帶來的設(shè)計靈感都不相同，所以最終會有多個視覺符號方案。

第四個step就是來解說如何從單個的情緒版里提取視覺符號的特征。

▲組成視覺語言最基本的五個維度

“形色字構(gòu)質(zhì)”是組成視覺語言最基本的五個維度，當你描繪一個東西的樣子時，你通常會從這五個維度去闡述。

所以，我們也從5個維度來提取視覺符號的特征。

需要注意：五個維度不一定需要全部進行提煉，有時候遇到前期已經(jīng)確定的就可以直接拿來用，也有的不涉及的，比如字體可能在部分圖標里沒有出現(xiàn)也就不需要提煉。

讓我們來對色彩、圖形、字體、質(zhì)感、構(gòu)成這5個維度來細細展開：

(1) 色彩

▲快捷工具Dopelycolor對圖片進行色彩分析

色彩提取常規(guī)是可以從情緒版里找出的，最簡單的辦法就是找出占比高的色彩并判斷選擇。

這里分享一個快捷工具Dopelycolor ，能快速讓你提取圖片中顏色，以及占比，讓你清晰的了解圖片用色情況。

▲提煉色彩需要重要關(guān)注4點

需要注意的有以下幾點：

1. 已有的品牌色是否要延續(xù)使用
2. 選中顏色需要后期調(diào)整三元素，達到最好的視覺效果
3. 如果有輔色，主輔色多結(jié)合色環(huán)考慮合理性
4. 你選的顏色是不是和市面競品太過雷同，是否要做點差異化？

(2) 圖形

對于我們大多數(shù)產(chǎn)品目前現(xiàn)狀，符號基礎(chǔ)圖形是不宜變動的。

大環(huán)境也是如此，例如很大一部分視頻類應(yīng)用圖標都圍繞播放三角展開。

因為變化會引起用戶新的理解，可能會帶來識別和理解的成本，所以項目設(shè)計師在方案的設(shè)計階段，會多做幾個保守的常用圖形相關(guān)方案。

另外，在沒有基礎(chǔ)圖形的產(chǎn)品品牌中，通常需要通過腦暴會去討論出適合產(chǎn)品的符號基礎(chǔ)形態(tài)。

例如vivo積分商城在視覺品牌探索階段，組織腦暴會議，邀請項目中各個關(guān)鍵角色一起來發(fā)散討論適合積分產(chǎn)品的貨幣符號圖形（這也是積分定義的視覺品牌符號）。

▲vivo積分商城貨幣符號發(fā)散腦暴會現(xiàn)場

基礎(chǔ)圖形獲取方法介紹完了后，圖形的藝術(shù)表達，也就是圖形設(shè)計是需要我們通過情緒版或者常用創(chuàng)意手法來捕捉的。

通過情緒版，我們可以提取出零碎的一些特征，這些通過觀察就可以提取了。

比如下面這張情緒版圖上能得出的共性圖形特征有：描邊圖形、線面結(jié)合等。另一張能看出的有：大圓角、簡單幾何、Q型。

▲情緒板圖片提取共性特征

特征好提取，但是如何去用于輸出我們的視覺品牌符號，這塊就依賴各位設(shè)計師的設(shè)計表達了。

到這一步，建議參與的設(shè)計師們進行視覺比稿。

比稿的設(shè)計師們可以看一看常用的6種創(chuàng)意設(shè)計手法，這些創(chuàng)意手法都是較常見的，在設(shè)計中協(xié)助我們創(chuàng)意的迸發(fā)。

▲6種常見圖形創(chuàng)意手法

(3) 文字

嚴格意義上，符號里的文字也是圖形的一種。

不過，針對用文字來做的符號，可以參考字體創(chuàng)意設(shè)計的10個方法。

這里不一一闡釋含義了，大家可以在網(wǎng)上找到更多每一類圖形的案例和應(yīng)用解說。

▲10種常見字體創(chuàng)意設(shè)計方法

(4) 質(zhì)感

如果要進行質(zhì)感的提煉和確定，除了從情緒版里能夠找到一些共性的東西以外，也可以多在流行趨勢、設(shè)計網(wǎng)站材質(zhì)圖形相關(guān)專題里，去嘗試獲取思路。

在設(shè)計方案階段，可以多去嘗試不同的設(shè)計質(zhì)感。

▲質(zhì)感素材專題

(5) 構(gòu)成

構(gòu)成通常會用在版式，招貼之類的平面設(shè)計中。

很多產(chǎn)品標志在構(gòu)成上都很講究，圖標的內(nèi)容和留白比例搭配合理，具備設(shè)計舒適感。我們在做符號設(shè)計時候，同樣要非常關(guān)注構(gòu)成，好的構(gòu)成會讓我們的符號更具魅力。

常用的圖形構(gòu)成有9種，我們在做圖形時候可以多去嘗試，也可以疊加嘗試，找到適合的構(gòu)成樣式。

▲9大圖形構(gòu)成

回到視覺符號提煉的5大維度方法，我們來看下vivo瀏覽器是如何提煉視覺品牌符號的。

由于不同設(shè)計師整理的情緒版，方案都不一樣，接下來來看瀏覽器視覺品牌探索眾多方案其中的一個例子。

▲視覺符號提煉的5大維度

首先來看下瀏覽器目前一些背景設(shè)定，去除既定的情況，我們需要在這幾個方面找尋特征（輔色、圖形藝術(shù)、質(zhì)感、構(gòu)成），來完成我們的視覺符號。

▲vivo瀏覽器背景設(shè)定

在這個方案中，設(shè)計師從情緒版提取了想要的特征（圖片中藍色文字）：

（1）顏色

從情緒版提出占比較高的顏色，歸納成色組，在色環(huán)中逐一討論去留，去除對比強烈的黃色（因為瀏覽器作為工具類產(chǎn)品并不想傳達出刺激，沖突，過于活力的感受，故去除。）在鄰近色（青色、皮粉色）里考慮避開性別因素，青色更加適合。然后調(diào)整一下rgb，飽和度提高一些。

（2）圖形藝術(shù)

延續(xù)地球元素，情緒版提煉的：大圓角、簡單幾何、Q型，描邊圖形，線面結(jié)合。

（3）質(zhì)感

瀏覽器在先前資料收集的時候就有傾向，考慮近兩年手機背面AG磨砂玻璃廣泛使用，界面上蘋果和微軟也整體設(shè)計轉(zhuǎn)向毛玻璃風格，關(guān)于這類品質(zhì)感和空間感明顯的處理方式，瀏覽器設(shè)計師也想進行嘗試。

（4）構(gòu)成

結(jié)合情緒版和圖形構(gòu)成9個方法，提取并運用的主要特征是動勢，也是想賦予符號活力感受。

最后，經(jīng)過草稿比稿，評審?fù)ㄟ^的方案和確定的符號5個特征如下：

▲vivo瀏覽器符號的5個特征

5. 完善主要頁面

視覺品牌符號完成以后，接下來需要繼續(xù)繪制與符號強關(guān)聯(lián)的頁面。

這些模塊有：loading、缺省、核心頁面、插畫插圖場景。不是把視覺品牌符號簡單的原封不動放在各個頁面里，而是通過一些設(shè)計手法將它更好的融入在頁面中。

通常，核心頁面模塊的視覺呈現(xiàn)，都是基于已定的視覺品牌符號特征去發(fā)散。

目前我們團隊有兩種不同的思路：一個是從先前符號里提取主要某個特征并結(jié)合場景做出版式布局的延展。

類似我們做vi時候常用取logo的一部分進行圖形組合再創(chuàng)意。另一個是將已定符號的不同特征進行多個組合，創(chuàng)作出符合這些特征的衍生的新視覺。

瀏覽器用的第二種方法，提取出的符號特征和定好繪制要求，其中為了保持整體風格的一致性，需要繪制的模塊特征應(yīng)不少于一半目前特征（滿足1/2)，如果有新增的特征需要保持和諧，不應(yīng)該有其它明顯的風格傾向。

這個也是用來檢查你做的系列衍生效果是否整體的標準。

經(jīng)常有同學(xué)做了一個很好看的缺省圖，但是風格特征與已定視覺符號風格相差甚遠，最后導(dǎo)致不能使用。

下面是vivo瀏覽器視覺品牌符號延展的圖形或頁面樣式：

▲缺省圖樣式（6/8特征）

▲裝飾icon圖樣式（4/8特征）

▲特殊彈出層樣式（4/8特征）

▲視頻操作引導(dǎo)樣式（4/8特征）

▲應(yīng)用在整體頁面效果

看完瀏覽器的符號延展方法，再來感受下另一個方法：通過符號，延展多個版式視覺的案例——短視頻視覺品牌探索。

項目設(shè)計師主要對視覺品牌符號圖形特征做了延展，局部提煉并創(chuàng)新版式。

下圖是短視頻視覺品牌符號，基于此為基礎(chǔ)型，設(shè)計師根據(jù)總結(jié)的6種手法，用對稱、平移 等方式進行拓展，結(jié)合頁面實際情況完成。

▲短視頻品牌符號以及圖形應(yīng)用解說

▲短視頻品牌符號頁面背景應(yīng)用

▲物料拓展概念

6. 驗證視覺風格喜好

完成主要頁面后，我們會進行風格測試，用來驗證不同的設(shè)計方案在用戶眼里的喜好程度，從而修正設(shè)計師的認知偏差。

我們建議至少完成3個視覺品牌符號方案和對應(yīng)3套頁面來供用戶測試。

關(guān)于風格測試，是將已有的方案通過問卷和簡單的線下訪談，得出用戶的喜好結(jié)論。

因為是敏捷測試，只需要一周就可以出結(jié)論。在這一步，有5條測試重點和對應(yīng)解讀需要設(shè)計師關(guān)注，具體內(nèi)容參考下圖：

▲5條測試重點與解讀

目前vivo瀏覽器和i視頻都在視覺品牌升級時候，運用了這個較為敏捷的測試方法。

▲i視頻視覺品牌3套方案風格測試復(fù)盤

▲vivo瀏覽器視覺品牌升級核心頁面風格測試

7. 完成所有頁面的視覺效果

經(jīng)過用戶的驗證和后期修改，我們確定好了唯一的一套最合適的視覺品牌。在設(shè)計組內(nèi)部評審+項目組核心成員評審效果通過后，接下來工作就是按部就班的去完成后續(xù)頁面的規(guī)劃和落地。

這一環(huán)節(jié)的工作體量較大，需要花時間去梳理替換所有頁面。

整體t替換預(yù)計耗時需要2周左右，建議多些成員參與完成。

8. 整理成視覺品牌規(guī)范手冊

最后一步也是最重要的一步，需要把視覺品牌的設(shè)計指導(dǎo)和規(guī)范進行沉淀。

視覺品牌規(guī)范手冊是需要項目組設(shè)計師一起維護的。

好的設(shè)計語言是第一步，維護和讓其發(fā)揮最大價值（原則、一致性、效率）是視覺品牌規(guī)范手冊的意義。

▲視覺品牌規(guī)范手冊4大模塊

目前我們已經(jīng)梳理出vivo瀏覽器、短視頻的視覺品牌規(guī)范手冊。

內(nèi)容包括4個部分：品牌概述、品牌符號、視覺語言、物料規(guī)范。

對產(chǎn)品的視覺品牌理解和如何應(yīng)用會完整的體現(xiàn)在手冊里，建議每一個參與項目設(shè)計師都應(yīng)該在設(shè)計前先整體看一遍。

三、結(jié)語

視覺品牌的定義流程以及方法，是我們團隊資深ui設(shè)計師第三季度重點研究和探索的產(chǎn)物。

希望能給正在做視覺品牌相關(guān)工作的設(shè)計師帶來一些幫助和啟發(fā)，如果有建議或者疑問，歡迎通過公眾號和我們交流，讓我們一起優(yōu)化好這個視覺品牌定義體系，為用戶創(chuàng)造更好的視覺體驗。

作者：謝寶樹；公眾號：VMIC UED

本文由 @VMIC UED 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于 CC0 協(xié)議