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