2021-12-3 ui設(shè)計(jì)分享達(dá)人
視覺品牌這一概念，既陌生又熟悉。大部分ui設(shè)計(jì)師都或多或少做過視覺改版或者風(fēng)格升級(jí)，先來看兩個(gè)概念：視覺風(fēng)格&視覺品牌。
▲視覺風(fēng)格&視覺品牌重點(diǎn)偏向
風(fēng)格是藝術(shù)概念，是在整體上呈現(xiàn)的有代表性的一種面貌。風(fēng)格能反映時(shí)代、思想、審美等特性。也是設(shè)計(jì)師對(duì)審美獨(dú)特鮮明的理解。那么視覺品牌呢？它除了要體現(xiàn)產(chǎn)品本身特性，融入產(chǎn)品希望傳達(dá)的感受，也要思考什么對(duì)用戶有意義。研究視覺品牌，就是探索如何通過設(shè)計(jì)維護(hù)用戶對(duì)于產(chǎn)品的好感度 ，通過有共鳴的設(shè)計(jì)傳遞正能量，讓產(chǎn)品獲得最大的認(rèn)同。簡(jiǎn)單來說：視覺風(fēng)格重點(diǎn)是設(shè)計(jì)師對(duì)審美的傳達(dá)；視覺品牌則是通過挖掘產(chǎn)品有價(jià)值的特點(diǎn)，創(chuàng)造有共鳴的視覺去打動(dòng)用戶，助力產(chǎn)品。
▲視覺品牌作用
了解完視覺品牌的概念，我們簡(jiǎn)單聊下它的作用。視覺品牌最大作用是建立用戶和產(chǎn)品的關(guān)系。vivo互聯(lián)網(wǎng)單個(gè)產(chǎn)品的視覺品牌也受vivo母品牌影響，不同業(yè)務(wù)被滲透的程度不同。比如vivo品牌對(duì)vivo官網(wǎng)，vivo商城影響比較大，但是對(duì)瀏覽器，i視頻，短視頻的影響就比較小。
那么，如何定義好產(chǎn)品的視覺品牌？借企業(yè)文化里的一句話：做正確的事，并把事情做正確。在設(shè)計(jì)工作中，這句話也有一定的指導(dǎo)意義，我們先要確定是否要做視覺品牌，再用合理的流程規(guī)劃好每一步。
結(jié)合過往的業(yè)務(wù)經(jīng)驗(yàn)來看，對(duì)于已有視覺風(fēng)格的產(chǎn)品來說，需要滿足以下兩個(gè)情況之一才是最適合做視覺品牌工作的時(shí)候：1、產(chǎn)品轉(zhuǎn)型、重大業(yè)務(wù)調(diào)整（包括用戶人群、需求變化等）；2、與相關(guān)行業(yè)設(shè)計(jì)語言水準(zhǔn)差距巨大。另外需要考慮的還有時(shí)間安排，由于整個(gè)流程耗時(shí)需要大約12周（3個(gè)月），所以設(shè)計(jì)師前期就要做好時(shí)間規(guī)劃。
確定要做視覺品牌工作后，需要準(zhǔn)備哪些資料？項(xiàng)目環(huán)節(jié)和流程如何？讓我們來看下這12周需要做的事情和基本順序：
▲視覺品牌的流程
我們接下來會(huì)重點(diǎn)介紹流程中關(guān)鍵的8個(gè)步驟（圖標(biāo)標(biāo)藍(lán)色的step1～8）：1、品牌定位資料熟悉 2、明確視覺品牌關(guān)鍵詞 3、關(guān)鍵詞發(fā)散和可視化 4、提取元素建立視覺符號(hào) 5、完善主要頁面 6、驗(yàn)證視覺風(fēng)格喜好 7、完成所有頁面的視覺效果 8、整理成視覺品牌規(guī)范手冊(cè)。
大部分項(xiàng)目的產(chǎn)品，運(yùn)營和用研角色會(huì)提前做一些品牌定位的工作（品牌屋），品牌屋有助于我們對(duì)產(chǎn)品各方面進(jìn)行解讀。這類資料一般我們都可以獲得，設(shè)計(jì)師可以從中了解到目前我們產(chǎn)品全面信息，包括：產(chǎn)品形象、調(diào)性、核心價(jià)值觀等。我們需要的關(guān)鍵信息：產(chǎn)品關(guān)鍵詞就可以從中找到。如果品牌屋資料不夠明確或者設(shè)計(jì)師對(duì)確定的詞匯抱有疑問，我們還可以通過工作坊形式，邀請(qǐng)項(xiàng)目核心成員進(jìn)行腦暴會(huì)議，討論出合適的詞語。
▲案例：vivo瀏覽器品牌屋
圖中為瀏覽器品牌屋資料案例，經(jīng)過項(xiàng)目成員討論，瀏覽器產(chǎn)品最終關(guān)鍵詞：智慧、有趣、默契、可靠、年輕。
然后，從產(chǎn)品關(guān)鍵詞里，我們需要選出符合產(chǎn)品定位又能達(dá)到受眾心理預(yù)期的視覺品牌關(guān)鍵詞，聚焦產(chǎn)品的視覺調(diào)性。視覺關(guān)鍵詞一般有2～5個(gè)，需要視覺專業(yè)團(tuán)隊(duì)、項(xiàng)目相關(guān)人員、核心用戶一起來挑選，用戶的選擇可以放在問卷里進(jìn)行，通過快速測(cè)試了解用戶對(duì)產(chǎn)品的視覺感受和期待。如果確定的視覺品牌關(guān)鍵詞比較多，可以適當(dāng)確立1～2個(gè)核心視覺詞匯，便于聚焦后期的風(fēng)格指導(dǎo)。
▲明確視覺品牌關(guān)鍵詞
選擇標(biāo)準(zhǔn)有兩條：1、延展性高，有一定視覺可視化潛力：詞匯要抽象化，不能過于具體，一般都是描述情緒，氣氛，氛圍或者感受之類的。2、貼合公司品牌文化：追求樂趣、充滿活力、專業(yè)音質(zhì)、極致影像、愉悅體驗(yàn)、敢于追求極致、持續(xù)創(chuàng)造驚喜。
視覺品牌關(guān)鍵詞選定后，在繪制可視化的情緒版之前，還差一步，就是針對(duì)選出來的詞進(jìn)行發(fā)散。做這一步的目的是希望設(shè)計(jì)師的思維能夠盡可能打開，收獲更大范圍的靈感和思考。我們通過三層映射方式，分別對(duì)2~5個(gè)視覺品牌關(guān)鍵詞進(jìn)行發(fā)散收獲大量衍生詞。（圖中以詞語“友好”為案例，分別進(jìn)行物化、心境、視覺映射出大量衍生詞語。）
▲三層映射案例：詞語友好
在大量衍生詞里，我們還要經(jīng)過一輪討論篩選，去掉不合適的詞語。主要看衍生詞和我們的視覺關(guān)鍵詞的關(guān)聯(lián)度是否足夠高，以及是否適合用視覺語言表達(dá)等。
如果項(xiàng)目沒有做品牌相關(guān)的工作，沒有產(chǎn)品關(guān)鍵詞，那我們前3步驟怎么辦？遇到這種情況，我們要怎么深入下去？當(dāng)然，你可以嘗試推進(jìn)項(xiàng)目去做一下品牌屋，這對(duì)各個(gè)角色在產(chǎn)品認(rèn)知上有很大的幫助。其實(shí)還有一個(gè)工具方法能夠幫助我們較好的完成各類關(guān)鍵詞提取。(Design O to O 主要是察覺用戶情感化的一個(gè)工具，工具里得出該類別情感相關(guān)詞匯和我們想要得出的視覺品牌關(guān)鍵詞概念非常接近，所以推薦作為遇到這類情況的解決方法。)
▲Design OtoO方法
這套工具方法的核心步驟分別是：收集，組織，反應(yīng)，評(píng)估。每一步都有一些工具模型可以套用，能夠較準(zhǔn)的幫助大家達(dá)到目標(biāo)，找出合適的關(guān)鍵詞。
前面我們得出篩選后的衍生詞，是為了之后可以做出更全面、精準(zhǔn)的可視化情緒版。很多設(shè)計(jì)師在情緒版制作上比較隨意，這里也給大家一些我們團(tuán)隊(duì)常用來搭建情緒版的方式。一般我們將收集的圖片依照3個(gè)維度（人物、場(chǎng)景、物體）進(jìn)行歸納整理，這樣共性的東西更容易被發(fā)現(xiàn)。當(dāng)然，拼貼整理的方式很多種，也包括常見的任意拼貼、參考式拼貼和精致化拼貼。大家可以多試一些平時(shí)不怎么用的維度進(jìn)行拼接，也許會(huì)帶來不一樣的靈感。
▲情緒板拼貼常用方法
每個(gè)情緒版帶來的設(shè)計(jì)靈感都不相同，所以最終會(huì)有多個(gè)視覺符號(hào)方案。第四個(gè)step就是來解說如何從單個(gè)的情緒版里提取視覺符號(hào)的特征。
▲組成視覺語言最基本的五個(gè)維度
“形色字構(gòu)質(zhì)”是組成視覺語言最基本的五個(gè)維度，當(dāng)你描繪一個(gè)東西的樣子時(shí)，你通常會(huì)從這五個(gè)維度去闡述。所以，我們也從5個(gè)維度來提取視覺符號(hào)的特征。需要注意：五個(gè)維度不一定需要全部進(jìn)行提煉，有時(shí)候遇到前期已經(jīng)確定的就可以直接拿來用，也有的不涉及的，比如字體可能在部分圖標(biāo)里沒有出現(xiàn)也就不需要提煉。讓我們來對(duì)色彩、圖形、字體、質(zhì)感、構(gòu)成這5個(gè)維度來細(xì)細(xì)展開：
▲快捷工具Dopelycolor對(duì)圖片進(jìn)行色彩分析
色彩提取常規(guī)是可以從情緒版里找出的，最簡(jiǎn)單的辦法就是找出占比高的色彩并判斷選擇。這里分享一個(gè)快捷工具Dopelycolor ，能快速讓你提取圖片中顏色，以及占比，讓你清晰的了解圖片用色情況。
▲提煉色彩需要重要關(guān)注4點(diǎn)
需要注意的有以下幾點(diǎn)：1、已有的品牌色是否要延續(xù)使用 2、選中顏色需要后期調(diào)整三元素，達(dá)到最好的視覺效果 3、如果有輔色，主輔色多結(jié)合色環(huán)考慮合理性 4、你選的顏色是不是和市面競(jìng)品太過雷同，是否要做點(diǎn)差異化？
對(duì)于我們大多數(shù)產(chǎn)品目前現(xiàn)狀，符號(hào)基礎(chǔ)圖形是不宜變動(dòng)的。大環(huán)境也是如此，例如很大一部分視頻類應(yīng)用圖標(biāo)都圍繞播放三角展開。因?yàn)樽兓瘯?huì)引起用戶新的理解，可能會(huì)帶來識(shí)別和理解的成本，所以項(xiàng)目設(shè)計(jì)師在方案的設(shè)計(jì)階段，會(huì)多做幾個(gè)保守的常用圖形相關(guān)方案。
另外，在沒有基礎(chǔ)圖形的產(chǎn)品品牌中，通常需要通過腦暴會(huì)去討論出適合產(chǎn)品的符號(hào)基礎(chǔ)形態(tài)。例如vivo積分商城在視覺品牌探索階段，組織腦暴會(huì)議，邀請(qǐng)項(xiàng)目中各個(gè)關(guān)鍵角色一起來發(fā)散討論適合積分產(chǎn)品的貨幣符號(hào)圖形（這也是積分定義的視覺品牌符號(hào)）
▲vivo積分商城貨幣符號(hào)發(fā)散腦暴會(huì)現(xiàn)場(chǎng)
基礎(chǔ)圖形獲取方法介紹完了后，圖形的藝術(shù)表達(dá)，也就是圖形設(shè)計(jì)是需要我們通過情緒版或者常用創(chuàng)意手法來捕捉的。通過情緒版，我們可以提取出零碎的一些特征，這些通過觀察就可以提取了。比如下面這張情緒版圖上能得出的共性圖形特征有：描邊圖形、線面結(jié)合等。另一張能看出的有：大圓角、簡(jiǎn)單幾何、Q型。
▲情緒板圖片提取共性特征
特征好提取，但是如何去用于輸出我們的視覺品牌符號(hào)，這塊就依賴各位設(shè)計(jì)師的設(shè)計(jì)表達(dá)了。到這一步，建議參與的設(shè)計(jì)師們進(jìn)行視覺比稿。比稿的設(shè)計(jì)師們可以看一看常用的6種創(chuàng)意設(shè)計(jì)手法，這些創(chuàng)意手法都是較常見的，在設(shè)計(jì)中協(xié)助我們創(chuàng)意的迸發(fā)。
▲6種常見圖形創(chuàng)意手法
嚴(yán)格意義上，符號(hào)里的文字也是圖形的一種。不過，針對(duì)用文字來做的符號(hào)，可以參考字體創(chuàng)意設(shè)計(jì)的10個(gè)方法。這里不一一闡釋含義了，大家可以在網(wǎng)上找到更多每一類圖形的案例和應(yīng)用解說。
▲10種常見字體創(chuàng)意設(shè)計(jì)方法
如果要進(jìn)行質(zhì)感的提煉和確定，除了從情緒版里能夠找到一些共性的東西以外，也可以多在流行趨勢(shì)、設(shè)計(jì)網(wǎng)站材質(zhì)圖形相關(guān)專題里，去嘗試獲取思路。在設(shè)計(jì)方案階段，可以多去嘗試不同的設(shè)計(jì)質(zhì)感。
▲質(zhì)感素材專題
構(gòu)成通常會(huì)用在版式，招貼之類的平面設(shè)計(jì)中。很多產(chǎn)品標(biāo)志在構(gòu)成上都很講究，圖標(biāo)的內(nèi)容和留白比例搭配合理，具備設(shè)計(jì)舒適感。我們?cè)谧龇?hào)設(shè)計(jì)時(shí)候，同樣要非常關(guān)注構(gòu)成，好的構(gòu)成會(huì)讓我們的符號(hào)更具魅力。常用的圖形構(gòu)成有9種，我們?cè)谧鰣D形時(shí)候可以多去嘗試，也可以疊加嘗試，找到適合的構(gòu)成樣式。
▲9大圖形構(gòu)成
回到視覺符號(hào)提煉的5大維度方法，我們來看下vivo瀏覽器是如何提煉視覺品牌符號(hào)的。由于不同設(shè)計(jì)師整理的情緒版，方案都不一樣，接下來來看瀏覽器視覺品牌探索眾多方案其中的一個(gè)例子。
▲視覺符號(hào)提煉的5大維度
首先來看下瀏覽器目前一些背景設(shè)定，去除既定的情況，我們需要在這幾個(gè)方面找尋特征（輔色、圖形藝術(shù)、質(zhì)感、構(gòu)成），來完成我們的視覺符號(hào)。
▲vivo瀏覽器背景設(shè)定
在這個(gè)方案中，設(shè)計(jì)師從情緒版提取了想要的特征（圖片中藍(lán)色文字）：
顏色：從情緒版提出占比較高的顏色，歸納成色組，在色環(huán)中逐一討論去留，去除對(duì)比強(qiáng)烈的黃色（因?yàn)闉g覽器作為工具類產(chǎn)品并不想傳達(dá)出刺激，沖突，過于活力的感受，故去除。）在鄰近色（青色、皮粉色）里考慮避開性別因素，青色更加適合。然后調(diào)整一下rgb，飽和度提高一些。
圖形藝術(shù)：延續(xù)地球元素，情緒版提煉的：大圓角、簡(jiǎn)單幾何、Q型，描邊圖形，線面結(jié)合。
質(zhì)感：瀏覽器在先前資料收集的時(shí)候就有傾向，考慮近兩年手機(jī)背面AG磨砂玻璃廣泛使用，界面上蘋果和微軟也整體設(shè)計(jì)轉(zhuǎn)向毛玻璃風(fēng)格，關(guān)于這類品質(zhì)感和空間感明顯的處理方式，瀏覽器設(shè)計(jì)師也想進(jìn)行嘗試。
構(gòu)成：結(jié)合情緒版和圖形構(gòu)成9個(gè)方法，提取并運(yùn)用的主要特征是動(dòng)勢(shì)，也是想賦予符號(hào)活力感受。
最后，經(jīng)過草稿比稿，評(píng)審?fù)ㄟ^的方案和確定的符號(hào)5個(gè)特征如下：
▲vivo瀏覽器符號(hào)的5個(gè)特征
視覺品牌符號(hào)完成以后，接下來需要繼續(xù)繪制與符號(hào)強(qiáng)關(guān)聯(lián)的頁面。這些模塊有：loading、缺省、核心頁面、插畫插圖場(chǎng)景。不是把視覺品牌符號(hào)簡(jiǎn)單的原封不動(dòng)放在各個(gè)頁面里，而是通過一些設(shè)計(jì)手法將它更好的融入在頁面中。
通常，核心頁面模塊的視覺呈現(xiàn)，都是基于已定的視覺品牌符號(hào)特征去發(fā)散。目前我們團(tuán)隊(duì)有兩種不同的思路：一個(gè)是從先前符號(hào)里提取主要某個(gè)特征并結(jié)合場(chǎng)景做出版式布局的延展。類似我們做vi時(shí)候常用取logo的一部分進(jìn)行圖形組合再創(chuàng)意。另一個(gè)是將已定符號(hào)的不同特征進(jìn)行多個(gè)組合，創(chuàng)作出符合這些特征的衍生的新視覺。
瀏覽器用的第二種方法，提取出的符號(hào)特征和定好繪制要求，其中為了保持整體風(fēng)格的一致性，需要繪制的模塊特征應(yīng)不少于一半目前特征（滿足1/2)，如果有新增的特征需要保持和諧，不應(yīng)該有其它明顯的風(fēng)格傾向。這個(gè)也是用來檢查你做的系列衍生效果是否整體的標(biāo)準(zhǔn)。經(jīng)常有同學(xué)做了一個(gè)很好看的缺省圖，但是風(fēng)格特征與已定視覺符號(hào)風(fēng)格相差甚遠(yuǎn)，最后導(dǎo)致不能使用。
下面是vivo瀏覽器視覺品牌符號(hào)延展的圖形或頁面樣式：
▲缺省圖樣式（6/8特征）
▲裝飾icon圖樣式（4/8特征）
▲特殊彈出層樣式（4/8特征）
▲視頻操作引導(dǎo)樣式（4/8特征）
▲應(yīng)用在整體頁面效果
看完瀏覽器的符號(hào)延展方法，再來感受下另一個(gè)方法：通過符號(hào)，延展多個(gè)版式視覺的案例——短視頻視覺品牌探索。項(xiàng)目設(shè)計(jì)師主要對(duì)視覺品牌符號(hào)圖形特征做了延展，局部提煉并創(chuàng)新版式。
下圖是短視頻視覺品牌符號(hào)，基于此為基礎(chǔ)型，設(shè)計(jì)師根據(jù)總結(jié)的6種手法，用對(duì)稱、平移 等方式進(jìn)行拓展，結(jié)合頁面實(shí)際情況完成。
▲短視頻品牌符號(hào)以及圖形應(yīng)用解說
▲短視頻品牌符號(hào)頁面背景應(yīng)用
▲ 物料拓展概念
完成主要頁面后，我們會(huì)進(jìn)行風(fēng)格測(cè)試，用來驗(yàn)證不同的設(shè)計(jì)方案在用戶眼里的喜好程度，從而修正設(shè)計(jì)師的認(rèn)知偏差。我們建議至少完成3個(gè)視覺品牌符號(hào)方案和對(duì)應(yīng)3套頁面來供用戶測(cè)試。
關(guān)于風(fēng)格測(cè)試，是將已有的方案通過問卷和簡(jiǎn)單的線下訪談，得出用戶的喜好結(jié)論。因?yàn)槭敲艚轀y(cè)試，只需要一周就可以出結(jié)論。在這一步，有5條測(cè)試重點(diǎn)和對(duì)應(yīng)解讀需要設(shè)計(jì)師關(guān)注，具體內(nèi)容參考下圖：
▲5條測(cè)試重點(diǎn)與解讀
目前vivo瀏覽器和i視頻都在視覺品牌升級(jí)時(shí)候，運(yùn)用了這個(gè)較為敏捷的測(cè)試方法。
▲i視頻視覺品牌3套方案風(fēng)格測(cè)試復(fù)盤
▲vivo瀏覽器視覺品牌升級(jí)核心頁面風(fēng)格測(cè)試
經(jīng)過用戶的驗(yàn)證和后期修改，我們確定好了唯一的一套最合適的視覺品牌。在設(shè)計(jì)組內(nèi)部評(píng)審+項(xiàng)目組核心成員評(píng)審效果通過后，接下來工作就是按部就班的去完成后續(xù)頁面的規(guī)劃和落地。這一環(huán)節(jié)的工作體量較大，需要花時(shí)間去梳理替換所有頁面。整體t替換預(yù)計(jì)耗時(shí)需要2周左右，建議多些成員參與完成。
最后一步也是最重要的一步，需要把視覺品牌的設(shè)計(jì)指導(dǎo)和規(guī)范進(jìn)行沉淀。視覺品牌規(guī)范手冊(cè)是需要項(xiàng)目組設(shè)計(jì)師一起維護(hù)的。好的設(shè)計(jì)語言是第一步，維護(hù)和讓其發(fā)揮最大價(jià)值（原則、一致性、效率）是視覺品牌規(guī)范手冊(cè)的意義。
▲視覺品牌規(guī)范手冊(cè)4大模塊
目前我們已經(jīng)梳理出vivo瀏覽器、短視頻的視覺品牌規(guī)范手冊(cè)。內(nèi)容包括4個(gè)部分：品牌概述、品牌符號(hào)、視覺語言、物料規(guī)范。對(duì)產(chǎn)品的視覺品牌理解和如何應(yīng)用會(huì)完整的體現(xiàn)在手冊(cè)里，建議每一個(gè)參與項(xiàng)目設(shè)計(jì)師都應(yīng)該在設(shè)計(jì)前先整體看一遍。
視覺品牌的定義流程以及方法，是我們團(tuán)隊(duì)資深ui設(shè)計(jì)師第三季度重點(diǎn)研究和探索的產(chǎn)物。希望能給正在做視覺品牌相關(guān)工作的設(shè)計(jì)師帶來一些幫助和啟發(fā)，如果有建議或者疑問，歡迎通過VMIC UED公眾號(hào)和我們交流，讓我們一起優(yōu)化好這個(gè)視覺品牌定義體系，為用戶創(chuàng)造更好的視覺體驗(yàn)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com