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