2018-8-23 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
7月份的時(shí)候，有一位面粉問(wèn)到了我關(guān)于統(tǒng)一店鋪視覺(jué)風(fēng)格的問(wèn)題，我說(shuō)等有機(jī)會(huì)了專(zhuān)門(mén)寫(xiě)篇文章做分享，因?yàn)橐粌删湓?huà)根本就說(shuō)不清。但是，今天我并不是專(zhuān)門(mén)只針對(duì)某個(gè)店鋪?zhàn)鲆曈X(jué)統(tǒng)一的設(shè)計(jì)分享，而是想從全局的角度去給大家闡述這個(gè)問(wèn)題，畢竟，你得知道自己為什么需要做視覺(jué)統(tǒng)一，你才可能做好視覺(jué)統(tǒng)一，所以這個(gè)問(wèn)題就不單單只是指店鋪了，而是關(guān)于品牌與用戶(hù)之間的問(wèn)題。
因?yàn)椴还苁堑赇佉埠?，平臺(tái)也好，他們其實(shí)都是為賣(mài)貨服務(wù)的，它們與品牌產(chǎn)品之間其實(shí)都是合作關(guān)系，最終其實(shí)都是要鏈接到用戶(hù)身上的，而設(shè)計(jì)師要做的，歸根結(jié)底都是處理好它們與用戶(hù)之間的關(guān)系，幫助達(dá)成交易。
所以我將要分享的關(guān)于視覺(jué)統(tǒng)一的方法，就不單止是適用于店鋪了，而是品牌、平臺(tái)、店鋪都適合的。
按照慣例，我還是先給大家列出一個(gè)提綱，方便大家理解：
接下來(lái)我就逐條展開(kāi)給大家說(shuō)一下這其中的奧秘吧！
當(dāng)我們提到統(tǒng)一視覺(jué)風(fēng)格這幾個(gè)字，不知道大家能聯(lián)想到什么？或者能聯(lián)想到什么畫(huà)面什么公司什么產(chǎn)品呢？在回答這些問(wèn)題之前，我還是先給大家舉一些例子也許你就明白了。
比如前幾天我無(wú)意中打開(kāi)了淘寶app，然后剛好看到了2018年淘寶新勢(shì)力周的一系列賣(mài)場(chǎng)頁(yè)面：
大家知道像淘寶天貓京東這樣的平臺(tái)，每年各種賣(mài)場(chǎng)促銷(xiāo)活動(dòng)是很多的，而且每一場(chǎng)活動(dòng)都需要容納成千上萬(wàn)的商家和數(shù)以萬(wàn)計(jì)的商品，但是，所有這些東西都卻只是通過(guò)一塊液晶顯示屏展現(xiàn)在消費(fèi)者面前，那么這時(shí)候就是我們?cè)O(shè)計(jì)師發(fā)揮作用的時(shí)候啦。
這時(shí)候設(shè)計(jì)師需要做的事情就包括以下幾個(gè)方面：
總而言之就是要權(quán)衡平臺(tái)、商家、顧客三者之間的關(guān)系和利益：顧客買(mǎi)的爽，商家賣(mài)的爽，平臺(tái)名利雙收。
那么這時(shí)候保持頁(yè)面視覺(jué)統(tǒng)一就很有必要了，因?yàn)橐曈X(jué)統(tǒng)一就有以下非常重要的幾點(diǎn)作用：
1. 強(qiáng)化品牌或事件在用戶(hù)心中的印象
因?yàn)閹缀跛械钠放贫夹枰龅囊患虑榫褪钦碱I(lǐng)用戶(hù)心智，就是要讓用戶(hù)在眾多的品牌選擇里有自己的一席之地，不要把自己遺忘了，所以它需要不斷的出現(xiàn)，保持存在感。
一個(gè)活動(dòng)每年去做，一個(gè)電影每年都出續(xù)集，一個(gè)產(chǎn)品每年都會(huì)出不同的系列等等，都是同一個(gè)道理，都是在強(qiáng)化自己在用戶(hù)心目中的印象，保持存在感。
提到這個(gè)，我平時(shí)每次搞活動(dòng)都會(huì)提醒大家不要經(jīng)常換頭像或微信昵稱(chēng)，我讓大家多來(lái)留言其實(shí)就是這個(gè)道理，因?yàn)槲颐刻煲鎸?duì)的那么多人的頭像和名字，如果你長(zhǎng)期不換頭像并且經(jīng)常來(lái)留言，那我肯定會(huì)記得你；但如果你經(jīng)常換頭像，并且留言次數(shù)還少，那我鐵定就不記得你了，因?yàn)槟銢](méi)有強(qiáng)化一個(gè)符號(hào)在我的腦海里啊，明白了吧。
2. 讓事件變得有序有規(guī)律可循
就像我們辦運(yùn)動(dòng)會(huì)，不同的隊(duì)穿不同的衣服、喊不同的口號(hào)等等，即便是隊(duì)里的人走散了，你看一下隊(duì)服或?qū)Ψ胶暗目谔?hào)你就能辨別出是自己人還是別人了是吧。
再比如你去超市貨架上拿飲料，正是因?yàn)檫@種視覺(jué)統(tǒng)一的作用，所以你才能很好的辨認(rèn)出自己要買(mǎi)的品牌產(chǎn)品，而不至于拿錯(cuò)了，反過(guò)來(lái)對(duì)于品牌也一樣，自己內(nèi)部的產(chǎn)品之間是有統(tǒng)一的視覺(jué)形象的，同時(shí)又是跟其他品牌相區(qū)分開(kāi)來(lái)的，所以才可以保證顧客不買(mǎi)錯(cuò)。
這些道理運(yùn)用到頁(yè)面設(shè)計(jì)上也是一樣的，讓顧客方便逛，同時(shí)別逛錯(cuò)了地方。
3. 提高相關(guān)人員的可執(zhí)行性
因?yàn)橄襁@種大型的活動(dòng)，需要大量的人力投入，就拿設(shè)計(jì)師來(lái)說(shuō)，一般都是某個(gè)主設(shè)計(jì)師出來(lái)一個(gè)設(shè)計(jì)方案，然后這個(gè)方案不僅要能達(dá)到以上提到的要求，還必須要是能保證其他設(shè)計(jì)師能夠以這個(gè)設(shè)計(jì)方案的模版，去執(zhí)行剩余的幾十上百個(gè)頁(yè)面，工作量非常之大。
前面我們講到了統(tǒng)一視覺(jué)風(fēng)格和形象的必要性和重要性，那么接下來(lái)就是大家最關(guān)心的如何統(tǒng)一視覺(jué)形象的問(wèn)題了，所以我依舊會(huì)從好幾個(gè)方面以舉例的方式給大家做講解，你就明白了。
不過(guò)在這之前，我還是拿一張圖給大家看，還是淘寶新勢(shì)力的這張圖：
你在這個(gè)畫(huà)面里看到了什么？這個(gè)視覺(jué)畫(huà)面里都包含了哪些東西？
嗯，我看到了模特、文字、圖案、各種顏色，還有布局、排版、以及所有上面的內(nèi)容匯聚在一起所組成的一種風(fēng)格。
那所謂統(tǒng)一頁(yè)面的視覺(jué)風(fēng)格，也就是說(shuō)只要保證以上所有提到的這些東西，我在另外的頁(yè)面里也至少能找到一項(xiàng)是類(lèi)似的，那我們就很容易將它們視為是具有共通性的頁(yè)面了，也就達(dá)到了視覺(jué)風(fēng)格統(tǒng)一的目的。
以下面這幾個(gè)淘寶新勢(shì)力分會(huì)場(chǎng)的頁(yè)面為例：
你應(yīng)該注意到了，這些頁(yè)面雖然顏色不一樣，但整體看視覺(jué)卻非常統(tǒng)一，同時(shí)細(xì)看又有些差別，其原因就在于以下幾個(gè)方面：
所以你才會(huì)有這些頁(yè)面具有統(tǒng)一的視覺(jué)風(fēng)格的印象，包括其他會(huì)場(chǎng)的頁(yè)面，雖然做了一些小調(diào)整，但是依然可以看得出來(lái)是統(tǒng)一的視覺(jué)風(fēng)格：
因?yàn)檫@里運(yùn)用到了跟上面同樣的原理。
不過(guò)這種手繪風(fēng)格與模特相結(jié)合的設(shè)計(jì)形式我以前也給大家分析過(guò)，我這里就不深入舉例了，大家可以看看圣保羅藝術(shù)家 Ana Strumpf 為很多時(shí)尚雜志所做的插畫(huà)封面就能有所體會(huì)：
這種手法給人俏皮、時(shí)尚、新潮的感覺(jué)，非常適合追求趣味個(gè)性而又不失品味的心態(tài)年輕的群體，所以這一次的淘寶新勢(shì)力周大概也是出于這種新潮人群定位考量，才會(huì)做這種形式的設(shè)計(jì)吧。
而且這種扁平質(zhì)感半插畫(huà)性質(zhì)的設(shè)計(jì)形式幾乎是很難過(guò)時(shí)的，非常前衛(wèi)和耐看。
所以到這里你應(yīng)該就好理解了，一般來(lái)說(shuō)，我們有以下5個(gè)途徑可以達(dá)到統(tǒng)一視覺(jué)風(fēng)格的途徑。
1. 提煉某種風(fēng)格，重復(fù)使用
比如你看今天淘寶新勢(shì)力的一些會(huì)場(chǎng)頁(yè)面，視覺(jué)風(fēng)格就非常統(tǒng)一，一眼就看出是實(shí)體模特＋手繪圖形相結(jié)合的風(fēng)格形式，在模特臉部做一些圖案輪廓線(xiàn)，然后模特周?chē)c(diǎn)綴一些手繪圖案做氛圍，有點(diǎn)達(dá)達(dá)主義的感覺(jué)。
2. 建立某種品牌色，重復(fù)使用
當(dāng)我們重復(fù)看到某種顏色跟某個(gè)品牌或產(chǎn)品同時(shí)出現(xiàn)，時(shí)間久了就會(huì)自然而然的把這個(gè)顏色和品牌聯(lián)系在一起，從而產(chǎn)生條件反射，只要看到某個(gè)顏色立馬就會(huì)想到這個(gè)品牌，只要聽(tīng)到這個(gè)品牌的名字腦海里就會(huì)出現(xiàn)某種顏色。
這其實(shí)就是通過(guò)建立某種品牌色達(dá)到視覺(jué)風(fēng)格統(tǒng)一的目的從而讓品牌在用戶(hù)心里建立起了這種色彩印象。
比如蒂芙尼藍(lán)：
所以，任何頁(yè)面，任何場(chǎng)所，任何產(chǎn)品上只要出現(xiàn)了這個(gè)蒂芙尼藍(lán)色，用戶(hù)都會(huì)默認(rèn)他們是相關(guān)聯(lián)的：
再比如，可口可樂(lè)紅：
當(dāng)然了，色彩種類(lèi)那么多，有的品牌或店鋪的品牌色并不是單一的，而是多彩的，這都沒(méi)有什么限定。
那這個(gè)如果是運(yùn)用到頁(yè)面設(shè)計(jì)或 Banner 設(shè)計(jì)里的話(huà)，這種品牌色是一定都需要出現(xiàn)在畫(huà)面里的，至于色彩比例就因需要而定了，而且今后只需要出現(xiàn)這種顏色，就能反過(guò)來(lái)達(dá)到視覺(jué)統(tǒng)一的目的。
3. 提煉某種視覺(jué)元素，重復(fù)使用
所謂視覺(jué)元素，其實(shí)就是指一切你能看到的想到的元素，所以這里的視覺(jué)元素也是指多個(gè)方面的，比如某種圖案圖形、某個(gè)物件、某個(gè)文字、產(chǎn)品、模特、logo 等等其實(shí)都算是視覺(jué)元素。
那說(shuō)到視覺(jué)元素的運(yùn)用，我腦海里印象比較深刻的2個(gè)品牌就是初語(yǔ)和天貓，前者是店鋪，后者是平臺(tái)。
我們可以看看品牌升級(jí)以前的初語(yǔ)，它有一個(gè)讓人印象非常深刻的視覺(jué)元素，就是她的模特和眼部的妝容：
所有的模特都保持了一致的妝容特點(diǎn)，氣質(zhì)也是類(lèi)似的，當(dāng)然你也會(huì)看到很多他的設(shè)計(jì)都是會(huì)與藝術(shù)名畫(huà)相結(jié)合，這些都是它的特點(diǎn)，并且加以充實(shí)用，就給人建立了很深刻的印象，你只要看到這種模特妝容或者畫(huà)面，你就知道：「噢沒(méi)錯(cuò)了，這是初語(yǔ)」。
那天貓也是一樣的，每年雙十一這個(gè)天貓頭的元素就會(huì)以各種形式露面，而且不止是在雙十一，可以說(shuō)是相當(dāng)強(qiáng)大的視覺(jué)符號(hào)了，你想忘都忘不掉它：
2017年天貓雙十一宣傳海報(bào)
△ Budweiser 百威
△ GUERLAIN 嬌蘭
△ Beats
這種通過(guò)某種視覺(jué)符號(hào)來(lái)統(tǒng)一視覺(jué)形象，重復(fù)使用從而加深用戶(hù)印象的方式在很多其他地方都有用到，比如每一個(gè)蘋(píng)果手機(jī)，每一次開(kāi)機(jī)，都會(huì)出現(xiàn)同樣的開(kāi)機(jī)畫(huà)面：白底＋黑色的蘋(píng)果 logo。
4. 打造品牌專(zhuān)屬的IP或?qū)櫸镄蜗螅⒅貜?fù)使用
這就跟品牌給自己找了個(gè)的代言人一樣的效果，只要這個(gè)形象出現(xiàn)了，你就知道這個(gè)是xxx品牌。
比如店鋪，三只松鼠就是這么干的：幾乎所有的頁(yè)面里都會(huì)出現(xiàn)三只松鼠。
比如平臺(tái)，京東有狗，天貓有貓，蘇寧也有獅子等等，電商界儼然是一個(gè)動(dòng)物世界。
再比如珠寶品牌，卡地亞Cartier 有獵豹：
這只獵豹經(jīng)常出現(xiàn)在各種品牌宣傳廣告里，或者制作成各種首飾，用戶(hù)看到獵豹就會(huì)想到卡地亞。
5. 提煉某一句口號(hào)，重復(fù)使用
既然我們前面提到了視覺(jué)元素，那么文案或口號(hào)其實(shí)也是畫(huà)面里的其中一種視覺(jué)元素，所以我們?cè)僖?017年天貓雙十一宣傳海報(bào)舉例：
△ Budweiser 百威
△ GUERLAIN 嬌蘭
△ Beats
這里面的「xxx祝你雙11快樂(lè)」 「天貓雙11全球購(gòu)狂歡節(jié)」等等口號(hào)文案，重復(fù)使用，其實(shí)就起到了這種畫(huà)面視覺(jué)統(tǒng)一的作用。
而且這種方式也在很多地方有運(yùn)用到啦，比如你看的很多動(dòng)漫、電視劇，總會(huì)重復(fù)出現(xiàn)一些臺(tái)詞，嗯，說(shuō)到這里，我想到了小時(shí)候看的一個(gè)動(dòng)畫(huà)片《寵物小精靈》，每集火箭隊(duì)出場(chǎng)臺(tái)詞都是這幾句：
然后每集結(jié)束的時(shí)候總會(huì)有那么一幕，喵喵被拋到空中然后喊出一句臺(tái)詞：「我們還會(huì)回來(lái)噠～」。
你看這種重復(fù)口號(hào)的威力多么可怕啊，一二十年了還讓用戶(hù)印象深刻呢。
不過(guò)，其實(shí)最后列舉的這三點(diǎn)其實(shí)都可以稱(chēng)作是視覺(jué)元素的重復(fù)使用啦，至于原因我也在前面作了解釋?zhuān)乙陨纤械姆绞狡鋵?shí)都是可以結(jié)合運(yùn)用的，并不是孤立存在的。
還有，大家注意到了嗎？我在每一條后面都加了4個(gè)字「重復(fù)使用」，因?yàn)榫退隳阌辛俗约禾囟ǖ囊曈X(jué)元素、有屬于自己的寵物形象、有自己的品牌色、有自己的風(fēng)格等等，但是你壓根就不露面，你還特別低調(diào)藏著掖著不展示自己，那誰(shuí)還記得你啊。
說(shuō)到這個(gè)，我想到了異地戀之所以容易失敗，不也是差不多道理嗎？你和男/女朋友三五年不見(jiàn)面沒(méi)有關(guān)系，沒(méi)法手拉手親親嘴也沒(méi)有關(guān)系，但是如果你們壓根就不聯(lián)系，不出現(xiàn)在彼此的視線(xiàn)里，那感情自然會(huì)淡的呀，等于是白白給了別人可乘之機(jī)。
所以我一直都覺(jué)得品牌和用戶(hù)之間其實(shí)也是一樣的道理，就是在「談戀愛(ài)」，而不是做生意，至于你們之間是談的什么類(lèi)型的戀愛(ài)，那就看自己本事了。
之所以我們需要做視覺(jué)統(tǒng)一，其實(shí)就是為了強(qiáng)化我們?cè)谟脩?hù)心理的印象，讓他們記住我們，記住我們是很有規(guī)范的，靠譜的，可信賴(lài)的品牌印象等等，并且還要重復(fù)的出現(xiàn)在用戶(hù)的視野里，那怎么出現(xiàn)呢？方法就在我上面列舉的幾條內(nèi)容里啦。
當(dāng)然，你也得控制一個(gè)度，不要過(guò)份的運(yùn)用這些方法，不然會(huì)招致用戶(hù)反感的。
想想有的男孩子可以成功討女孩子歡心，而有的卻被女孩子嫌棄的不行，知道原因了嗎？道理都是一樣的啊。
你看下面這些世界杯期間的廣告，畫(huà)面 low，口號(hào) low，重復(fù)次數(shù)又很多，用戶(hù)記住是記住你了，但真的挺煩的。
藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.cqzjtgb.com