搞定頁面視覺風格統一性，看這篇文章就夠了！
寫在前面
7月份的時候，有一位麵粉問到了我關於統一店鋪視覺風格的問題，我說等有機會了專門寫篇文章做分享，因為一兩句話根本就說不清：
但是，今天我並不是專門只針對某個店鋪做視覺統一的設計分享，而是想從全局的角度去給大家闡述這個問題，畢竟，你得知道自己為什麼需要做視覺統一，你才可能做好視覺統一，所以這個問題就不單單只是指店鋪了，而是關於品牌與用戶之間的問題。
因為不管是店鋪也好，平台也好，他們其實都是為賣貨服務的，它們與品牌產品之間其實都是合作關係，最終其實都是要鏈接到用戶身上的，而設計師要做的，歸根結底都是處理好它們與用戶之間的關係，幫助達成交易。
所以我將要分享的關於視覺統一的方法，就不單止是適用於店鋪了，而是品牌、平台、店鋪都適合的。
按照慣例，我還是先給大家列出一個提綱，方便大家理解：
一、為什麼需要統一視覺風格？
二、統一視覺風格的方法有哪些？
三、統一視覺風格的注意事項及總結
接下來我就逐條展開給大家說一下這其中的奧秘吧！～
一、為什麼需要統一視覺風格？
當我們提到統一視覺風格這幾個字，不知道大家能聯想到什麼？或者能聯想到什麼畫面什麼公司什麼產品呢？在回答這些問題之前，我還是先給大家舉一些例子也許你就明白了。
比如前幾天我無意中打開了淘寶app，然後剛好看到了2018年淘寶新勢力周的一系列賣場頁面：
大家知道像淘寶天貓京東這樣的平台，每年各種賣場促銷活動是很多的，而且每一場活動都需要容納成千上萬的商家和數以萬計的商品，但是，所有這些東西都卻只是通過一塊液晶顯示屏展現在消費者面前，那麼這時候就是我們設計師發揮作用的時候啦。
這時候設計師需要做的事情就包括以下幾個方面：
1、要保證活動頁面里能把所有東西都容納進去；
2、要保證頁面是方便顧客瀏覽的，所以要有規律可循；
3、要保證頁面是可以吸引顧客一直逛下去的，所以頁面有規律的同時又要有所差異，視覺上不枯燥，不然會視覺疲勞；
4、要在顧客心裡和腦袋裡建立某種印象，找到存在感，以免被顧客遺忘；
5、既要保證平台活動整體的調性和諧性，又要為不同的商家提供最恰當的展示機會，所以視覺表現形式要合理；
等等......
總而言之就是要權衡平台、商家、顧客三者之間的關係和利益：顧客買的爽，商家賣的爽，平台名利雙收。
那麼這時候保持頁面視覺統一就很有必要了，因為視覺統一就有以下非常重要的幾點作用：
1、強化品牌或事件在用戶心中的印象
因為幾乎一所有的品牌都需要做的一件事情就是佔領用戶心智，就是要讓用戶在眾多的品牌選擇里有自己的一席之地，不要把自己遺忘了，所以它需要不斷的出現，保持存在感；
一個活動每年去做，一個電影每年都出續集，一個產品每年都會出不同的系列等等，都是同一個道理，都是在強化自己在用戶心目中的印象，保持存在感。
提到這個，我平時每次搞活動都會提醒大家不要經常換頭像或微信昵稱，我讓大家多來留言其實就是這個道理，因為我每天要面對的那麼多人的頭像和名字，如果你長期不換頭像並且經常來留言，那我肯定會記得你；但如果你經常換頭像，並且留言次數還少，那我鐵定就不記得你了，因為你沒有強化一個符號在我的腦海里啊，明白了吧。
2、讓事件變得有序有規律可循；
就像我們辦運動會，不同的隊穿不同的衣服、喊不同的口號等等，即便是隊里的人走散了，你看一下隊服或對方喊的口號你就能辨別出是自己人還是別人了是吧。
再比如你去超市貨架上拿飲料，正是因為這種視覺統一的作用，所以你才能很好的辨認出自己要買的品牌產品，而不至於拿錯了，反過來對於品牌也一樣，自己內部的產品之間是有統一的視覺形象的，同時又是跟其他品牌相區分開來的，所以才可以保證顧客不買錯。
這些道理運用到頁面設計上也是一樣的，讓顧客方便逛，同時別逛錯了地方。
3、提高相關人員的可執行性；
因為像這種大型的活動，需要大量的人力投入，就拿設計師來說，一般都是某個主設計師出來一個設計方案，然後這個方案不僅要能達到以上提到的要求，還必須要是能保證其他設計師能夠以這個設計方案來模版，去執行剩餘的幾十上百個頁面，工作量非常之大。
二、統一視覺風格的方法有哪些？
前面我們講到了統一視覺風格和形象的必要性和重要性，那麼接下來就是大家最關心的如何統一視覺形象的問題了，所以我依舊會從好幾個方面以舉例的方式給大家做講解，你就明白了。
不過在這之前，我還是拿一張圖給大家看，還是淘寶新勢力的這張圖：
你在這個畫面里看到了什麼？這個視覺畫面里都包含了哪些東西？
嗯，我看到了模特、文字、圖案、各種顏色，還有布局、排版、以及所有上面的內容匯聚在一起所組成的一種風格。
那所謂統一頁面的視覺風格，也就是說只要保證以上所有上面提到的這些東西，我在另外的頁面里也至少能找到一項是類似的，那我們就很容易將它們視為是具有共通性的頁面了，也就達到了視覺風格統一的目的。
以下面這幾個淘寶新勢力分會場的頁面為例：
你應該注意到了，這些頁面雖然顏色不一樣，但整體看視覺卻非常統一，同時細看又有些差別，其原因就在於以下幾個方面：
1、不同的頁面對應的色相不同，但是明度和飽和度是近似的；
2、不同的頁面對應的文案不同，但是文案的字體樣式、布局排版是一樣的；
3、不同的頁面對應的氛圍點綴元素不同，但是氛圍元素的風格、質感、手法等等是類似的；
4、不同的頁面對應的對應的點綴元素不同，但是每一個頁面里的點綴元素都是跟相應的主題、模特、文案等等相呼應的；
所以你才會有這些頁面具有統一的視覺風格的印象，包括其他會場的頁面，雖然做了一些小調整，但是依然可以看得出來是統一的視覺風格：
因為這裡運用到了跟上面同樣的原理。
不過這種手繪風格與模特相結合的設計形式我以前也給大家分析過，我這裡就不深入舉例了，大家可以看看聖保羅藝術家Ana Strumpf為很多時尚雜誌所做的插畫封面就能有所體會：
這種手法給人俏皮、時尚、新潮的感覺，非常適合追求趣味個性而又不失品味的心態年輕的群體，所以這一次的淘寶新勢力周大概也是出於這種新潮人群定位考量，才會做這種形式的設計吧。
而且這種扁平質感半插畫性質的設計形式幾乎是很難過時的，非常前衛和耐看。
所以到這裡你應該就好理解了，一般來說，我們有以下5個途徑可以達到統一視覺風格的途徑：
1、提煉某種風格，重複使用
比如你看今天淘寶新勢力的一些會場頁面，視覺風格就非常統一，一眼就看出是實體模特＋手繪圖形相結合的風格形式，在模特臉部做一些圖案輪廓線，然後模特周圍點綴一些手繪圖案做氛圍，有點達達主義的趕腳。
2、建立某種品牌色，重複使用
當我們重複看到某種顏色跟某個品牌或產品同時出現，時間久了就會自然而然的把這個顏色和品牌聯繫在一起，從而產生條件反射，只要看到某個顏色立馬就會想到這個品牌，只要聽到這個品牌的名字腦海里就會出現某種顏色。
這其實就是通過建立某種品牌色達到視覺風格統一的目的從而讓品牌在用戶心裡建立起了這種色彩印象。
比如蒂芙尼藍：
所以，任何頁面，任何場所，任何產品上只要出現了這個蒂芙尼藍色，用戶都會默認他們是有聯繫相關聯的：
再比如，可口可樂紅：
當然了，色彩種類那麼多，有的品牌或店鋪的品牌色並不是單一的，而是多彩的，這都沒有什麼限定。
那這個如果是運用到頁面設計或Banner設計里的話，這種品牌色是一定都需要出現在畫面里的，至於色彩比例就因需要而定了，而且今後只需要出現這種顏色，就能反過來達到視覺統一的目的。
3、提煉某種視覺元素，重複使用
所謂視覺元素，其實就是指一切你能看到的想到的元素，所以這裡的視覺元素也是指多個方面的，比如某種圖案圖形、某個物件、某個文字、產品、模特、logo等等其實都算是視覺元素。
那說到視覺元素的運用，我腦海里印象比較深刻的2個品牌就是初語和天貓，前者是店鋪，後者是平台。
我們可以看看品牌升級以前的初語，它有一個讓人印象非常深刻的視覺元素，就是她的模特和眼部的妝容：
所有的模特都保持了一致的妝容特點，氣質也是類似的，當然你也會看到很多他的設計都是會藝術名畫相結合，這些都是它的特點，並且加以充實用，就給人建立了很深刻的印象，你只要看到這種模特妝容或者畫面，你就知道：「噢沒錯了，這是初語」。
那天貓也是一樣的，每年雙十一這個天貓頭的元素就會以各種形式露面，而且不止是在雙十一，可以說是相當強大的視覺符號了，你想忘都忘不掉它：
Budweiser 百威
GUERLAIN 嬌蘭
Beats
（2017年天貓雙十一宣傳海報）
這種通過某種視覺符號來統一視覺形象，重複使用從而加深用戶印象的方式在很多其他地方都有用到，比如每一個蘋果手機，每一次開機，都會出現同樣的開機畫面：白底＋黑色的蘋果logo。
4、打造品牌專屬的IP或寵物形象，並重複使用
這就跟品牌給自己找了個獨一無二的代言人一樣的效果，只要這個形象出現了，你就知道這個是xxx品牌。
比如店鋪，三隻松鼠就是這麼乾的：幾乎所有的頁面里都會出現三隻松鼠。
比如平台，京東有狗，天貓有貓，蘇寧也有獅子等等，電商界儼然是一個動物世界。
再比如珠寶品牌，卡地亞Cartier有獵豹：
這隻獵豹經常出現在各種品牌宣傳廣告里，或者製作成各種首飾，用戶看到獵豹就會想到卡地亞。
5、提煉某一句口號，重複使用
既然我們前面提到了視覺元素，那麼文案或口號其實也是畫面里的其中一種視覺元素，所以我們再以2017年天貓雙十一宣傳海報舉例：
Budweiser 百威
GUERLAIN 嬌蘭
Beats
這裡面的「xxx祝你雙11快樂」 「天貓雙11全球購狂歡節」等等口號文案，重複使用，其實就起到了這種畫面視覺統一的作用。
而且這種方式也在很多地方有運用到啦，比如你看的很多動漫、電視劇，總會重複出現一些台詞，嗯，說到這裡，我想到了小時候看的一個動畫片《數碼寶貝》，每集火箭隊出場台詞都是這幾句：
然後每集結束的時候總會有那麼一幕，喵喵被拋到空中然後喊出一句台詞：「我們還會回來噠！～～～～」。
你看這種重複口號的威力多麼可怕啊，一二十年了還讓用戶印象深刻呢。
不過，其實最後列舉的這三點其實都可以稱作是視覺元素的重複使用啦，至於原因我也在前面作了解釋，而且以上所有的方式其實都是可以結合運用的，並不是孤立存在的。
還有，大家注意到了嗎？我在每一條後面都加了4個字「重複使用」，因為就算你有了自己特定的視覺元素、有屬於自己的寵物形象、有自己的品牌色、有自己的風格等等，但是你壓根就不露面，你還特別低調藏著掖著不展示自己，那誰還記得你啊。
說到這個，我想到了異地戀之所以容易失敗，不也是差不多道理嗎？你和男／女朋友三五年不見面沒有關係，沒法手拉手親親嘴也沒有關係，但是如果你們壓根就不聯繫，出現在彼此的視線里，那感情自然會淡的呀，等於是白白給了別人可乘之機。
所以我一直都覺得品牌和用戶之間其實也是一樣的道理，就是在「談戀愛」，而不是做生意，至於你們之間是談的什麼類型的戀愛，那就看自己本事了！～
咳咳，這個話題扯遠了。
最後我做個總結：
之所以我們需要做視覺統一，其實就是為了強化我們在用戶心理的印象，讓他們記住我們，記住我們是很有規範的，靠譜的，可信奈的品牌印象等等，並且還要重複的出現在用戶的視野里，那怎麼出現呢？方法就在我上面列舉的幾條內容里啦。
當然，你也得控制一個度，不要過份的運用這些方法，不然會招致用戶反感的。
想想有的男孩子可以成功討女孩子歡心，而有的卻被女孩子嫌棄的不行，知道原因了嗎？道理都是一樣的啊！～
你看下面這些世界盃期間的廣告，畫面low，口號low，重複次數又很多，用戶記住是記住你了，但真的挺煩的！～
好了，這裡是《做設計的麵條》，一個有料的電商設計公眾號，喜歡我的文章就把我設置為星標吧，我們下期再見！～
－－－這裡是做設計的麵條的第339篇原創文章－－－
轉載請註明公眾號名稱和ID
TAG:做設計的麵條 |