如何搞定頁面視覺風(fēng)格統(tǒng)一性?看這篇文章就夠了!
本文分享的是關(guān)于視覺統(tǒng)一的方法,就不單止是適用于店鋪了,而是品牌、平臺、店鋪都適合。
7月份的時候,有一位粉絲問到了我關(guān)于統(tǒng)一店鋪視覺風(fēng)格的問題,我說等有機會了專門寫篇文章做分享,因為一兩句話根本就說不清。
但是,今天我并不是專門只針對某個店鋪做視覺統(tǒng)一的設(shè)計分享,而是想從全局的角度去給大家闡述這個問題。畢竟,你得知道自己為什么需要做視覺統(tǒng)一,你才可能做好視覺統(tǒng)一,所以這個問題就不單單只是指店鋪了,而是關(guān)于品牌與用戶之間的問題。
因為不管是店鋪也好,平臺也好,他們其實都是為賣貨服務(wù)的,它們與品牌產(chǎn)品之間其實都是合作關(guān)系,最終其實都是要鏈接到用戶身上的,而設(shè)計師要做的,歸根結(jié)底都是處理好它們與用戶之間的關(guān)系,幫助達成交易。
所以我將要分享的關(guān)于視覺統(tǒng)一的方法,就不單止是適用于店鋪了,而是品牌、平臺、店鋪都適合的。
按照慣例,我還是先給大家列出一個提綱,方便大家理解:
- 為什么需要統(tǒng)一視覺風(fēng)格?
- 統(tǒng)一視覺風(fēng)格的方法有哪些?
- 統(tǒng)一視覺風(fēng)格的注意事項及總結(jié)。
接下來我就逐條展開給大家說一下這其中的奧秘吧!
一、為什么需要統(tǒng)一視覺風(fēng)格?
當(dāng)我們提到統(tǒng)一視覺風(fēng)格這幾個字,不知道大家能聯(lián)想到什么?或者能聯(lián)想到什么畫面什么公司什么產(chǎn)品呢?
在回答這些問題之前,我還是先給大家舉一些例子也許你就明白了。
比如:前幾天我無意中打開了淘寶app,然后剛好看到了2018年淘寶新勢力周的一系列賣場頁面:
大家知道像淘寶天貓京東這樣的平臺,每年各種賣場促銷活動是很多的,而且每一場活動都需要容納成千上萬的商家和數(shù)以萬計的商品。但是,所有這些東西都卻只是通過一塊液晶顯示屏展現(xiàn)在消費者面前,那么這時候就是我們設(shè)計師發(fā)揮作用的時候啦。
這時候設(shè)計師需要做的事情就包括以下幾個方面:
- 要保證活動頁面里能把所有東西都容納進去;
- 要保證頁面是方便顧客瀏覽的,所以要有規(guī)律可循;
- 要保證頁面是可以吸引顧客一直逛下去的,所以頁面有規(guī)律的同時又要有所差異,視覺上不枯燥,不然會視覺疲勞;
- 要在顧客心里和腦袋里建立某種印象,找到存在感,以免被顧客遺忘;
- 既要保證平臺活動整體的調(diào)性和諧性,又要為不同的商家提供最恰當(dāng)?shù)恼故緳C會,所以視覺表現(xiàn)形式要合理;
等等……
總而言之就是要權(quán)衡平臺、商家、顧客三者之間的關(guān)系和利益:顧客買的爽,商家賣的爽,平臺名利雙收。
那么這時候保持頁面視覺統(tǒng)一就很有必要了,因為視覺統(tǒng)一就有以下非常重要的幾點作用:
1. 強化品牌或事件在用戶心中的印象
因為幾乎一所有的品牌都需要做的一件事情就是占領(lǐng)用戶心智,就是要讓用戶在眾多的品牌選擇里有自己的一席之地,不要把自己遺忘了,所以它需要不斷的出現(xiàn),保持存在感。
一個活動每年去做,一個電影每年都出續(xù)集,一個產(chǎn)品每年都會出不同的系列等等,都是同一個道理,都是在強化自己在用戶心目中的印象,保持存在感。
提到這個,我平時每次搞活動都會提醒大家不要經(jīng)常換頭像或微信昵稱,我讓大家多來留言其實就是這個道理。因為我每天要面對的那么多人的頭像和名字,如果你長期不換頭像并且經(jīng)常來留言,那我肯定會記得你。
但如果你經(jīng)常換頭像,并且留言次數(shù)還少,那我鐵定就不記得你了,因為你沒有強化一個符號在我的腦海里啊,明白了吧。
2. 讓事件變得有序有規(guī)律可循
就像我們辦運動會,不同的隊穿不同的衣服、喊不同的口號等等,即便是隊里的人走散了,你看一下隊服或?qū)Ψ胶暗目谔柲憔湍鼙鎰e出是自己人還是別人了是吧。
再比如:你去超市貨架上拿飲料,正是因為這種視覺統(tǒng)一的作用,所以你才能很好的辨認(rèn)出自己要買的品牌產(chǎn)品,而不至于拿錯了,反過來對于品牌也一樣,自己內(nèi)部的產(chǎn)品之間是有統(tǒng)一的視覺形象的,同時又是跟其他品牌相區(qū)分開來的,所以才可以保證顧客不買錯。
這些道理運用到頁面設(shè)計上也是一樣的,讓顧客方便逛,同時別逛錯了地方。
3. 提高相關(guān)人員的可執(zhí)行性
因為像這種大型的活動,需要大量的人力投入,就拿設(shè)計師來說,一般都是某個主設(shè)計師出來一個設(shè)計方案,然后這個方案不僅要能達到以上提到的要求,還必須要是能保證其他設(shè)計師能夠以這個設(shè)計方案來模版,去執(zhí)行剩余的幾十上百個頁面,工作量非常之大。
二、統(tǒng)一視覺風(fēng)格的方法有哪些?
前面我們講到了統(tǒng)一視覺風(fēng)格和形象的必要性和重要性,那么接下來就是大家最關(guān)心的如何統(tǒng)一視覺形象的問題了,所以我依舊會從好幾個方面以舉例的方式給大家做講解,你就明白了。
不過在這之前,我還是拿一張圖給大家看,還是淘寶新勢力的這張圖:
你在這個畫面里看到了什么?這個視覺畫面里都包含了哪些東西?
嗯,我看到了模特、文字、圖案、各種顏色,還有布局、排版、以及所有上面的內(nèi)容匯聚在一起所組成的一種風(fēng)格。
那所謂統(tǒng)一頁面的視覺風(fēng)格,也就是說只要保證以上所有上面提到的這些東西,我在另外的頁面里也至少能找到一項是類似的,那我們就很容易將它們視為是具有共通性的頁面了,也就達到了視覺風(fēng)格統(tǒng)一的目的。
以下面這幾個淘寶新勢力分會場的頁面為例:
你應(yīng)該注意到了,這些頁面雖然顏色不一樣,但整體看視覺卻非常統(tǒng)一,同時細(xì)看又有些差別,其原因就在于以下幾個方面:
- 不同的頁面對應(yīng)的色相不同,但是明度和飽和度是近似的;
- 不同的頁面對應(yīng)的文案不同,但是文案的字體樣式、布局排版是一樣的;
- 不同的頁面對應(yīng)的氛圍點綴元素不同,但是氛圍元素的風(fēng)格、質(zhì)感、手法等等是類似的;
- 不同的頁面對應(yīng)的對應(yīng)的點綴元素不同,但是每一個頁面里的點綴元素都是跟相應(yīng)的主題、模特、文案等等相呼應(yīng)的。
所以你才會有這些頁面具有統(tǒng)一的視覺風(fēng)格的印象,包括其他會場的頁面,雖然做了一些小調(diào)整,但是依然可以看得出來是統(tǒng)一的視覺風(fēng)格:
因為這里運用到了跟上面同樣的原理。
不過這種手繪風(fēng)格與模特相結(jié)合的設(shè)計形式我以前也給大家分析過,我這里就不深入舉例了,大家可以看看圣保羅藝術(shù)家Ana Strumpf為很多時尚雜志所做的插畫封面就能有所體會:
這種手法給人俏皮、時尚、新潮的感覺,非常適合追求趣味個性而又不失品味的心態(tài)年輕的群體,所以這一次的淘寶新勢力周大概也是出于這種新潮人群定位考量,才會做這種形式的設(shè)計吧。而且這種扁平質(zhì)感半插畫性質(zhì)的設(shè)計形式幾乎是很難過時的,非常前衛(wèi)和耐看。
所以到這里你應(yīng)該就好理解了,一般來說,我們有以下5個途徑可以達到統(tǒng)一視覺風(fēng)格的途徑:
1. 提煉某種風(fēng)格,重復(fù)使用
比如:你看今天淘寶新勢力的一些會場頁面,視覺風(fēng)格就非常統(tǒng)一,一眼就看出是實體模特+手繪圖形相結(jié)合的風(fēng)格形式,在模特臉部做一些圖案輪廓線,然后模特周圍點綴一些手繪圖案做氛圍,有點達達主義的趕腳。
2. 建立某種品牌色,重復(fù)使用
當(dāng)我們重復(fù)看到某種顏色跟某個品牌或產(chǎn)品同時出現(xiàn),時間久了就會自然而然的把這個顏色和品牌聯(lián)系在一起,從而產(chǎn)生條件反射,只要看到某個顏色立馬就會想到這個品牌,只要聽到這個品牌的名字腦海里就會出現(xiàn)某種顏色。
這其實就是通過建立某種品牌色達到視覺風(fēng)格統(tǒng)一的目的,從而讓品牌在用戶心里建立起了這種色彩印象。
比如蒂芙尼藍:
所以,任何頁面,任何場所,任何產(chǎn)品上只要出現(xiàn)了這個蒂芙尼藍色,用戶都會默認(rèn)他們是有聯(lián)系相關(guān)聯(lián)的:
再比如,可口可樂紅:
當(dāng)然了,色彩種類那么多,有的品牌或店鋪的品牌色并不是單一的,而是多彩的,這都沒有什么限定。
那這個如果是運用到頁面設(shè)計或Banner設(shè)計里的話,這種品牌色是一定都需要出現(xiàn)在畫面里的,至于色彩比例就因需要而定了,而且今后只需要出現(xiàn)這種顏色,就能反過來達到視覺統(tǒng)一的目的。
3. 提煉某種視覺元素,重復(fù)使用
所謂視覺元素,其實就是指一切你能看到的想到的元素,所以這里的視覺元素也是指多個方面的,比如:某種圖案圖形、某個物件、某個文字、產(chǎn)品、模特、logo等等其實都算是視覺元素。
那說到視覺元素的運用,我腦海里印象比較深刻的2個品牌就是初語和天貓,前者是店鋪,后者是平臺。
我們可以看看品牌升級以前的初語,它有一個讓人印象非常深刻的視覺元素,就是她的模特和眼部的妝容:
所有的模特都保持了一致的妝容特點,氣質(zhì)也是類似的,當(dāng)然你也會看到很多他的設(shè)計都是會藝術(shù)名畫相結(jié)合,這些都是它的特點,并且加以充實用,就給人建立了很深刻的印象,你只要看到這種模特妝容或者畫面,你就知道:“噢沒錯了,這是初語”。
那天貓也是一樣的,每年雙十一這個天貓頭的元素就會以各種形式露面,而且不止是在雙十一,可以說是相當(dāng)強大的視覺符號了,你想忘都忘不掉它。
Budweiser?百威:
GUERLAIN 嬌蘭:
Beats:
(2017年天貓雙十一宣傳海報)
這種通過某種視覺符號來統(tǒng)一視覺形象,重復(fù)使用從而加深用戶印象的方式在很多其他地方都有用到。比如:每一個蘋果手機,每一次開機,都會出現(xiàn)同樣的開機畫面——白底+黑色的蘋果logo。
4. 打造品牌專屬的IP或?qū)櫸镄蜗螅⒅貜?fù)使用
這就跟品牌給自己找了個獨一無二的代言人一樣的效果,只要這個形象出現(xiàn)了,你就知道這個是xxx品牌。
比如店鋪,三只松鼠就是這么干的:幾乎所有的頁面里都會出現(xiàn)三只松鼠。
比如:平臺,京東有狗,天貓有貓,蘇寧也有獅子等等,電商界儼然是一個動物世界。
再比如珠寶品牌,卡地亞Cartier有獵豹:
這只獵豹經(jīng)常出現(xiàn)在各種品牌宣傳廣告里,或者制作成各種首飾,用戶看到獵豹就會想到卡地亞。
5. 提煉某一句口號,重復(fù)使用
既然我們前面提到了視覺元素,那么文案或口號其實也是畫面里的其中一種視覺元素,所以我們再以2017年天貓雙十一宣傳海報舉例。
Budweiser?百威:
GUERLAIN 嬌蘭:
Beats:
這里面的“xxx祝你雙11快樂” 、 “天貓雙11全球購狂歡節(jié)”等等口號文案,重復(fù)使用,其實就起到了這種畫面視覺統(tǒng)一的作用。
而且這種方式也在很多地方有運用到啦,比如:你看的很多動漫、電視劇,總會重復(fù)出現(xiàn)一些臺詞,嗯,說到這里,我想到了小時候看的一個動畫片《寵物小精靈,每集火箭隊出場臺詞都是這幾句:
然后每集結(jié)束的時候總會有那么一幕,喵喵被拋到空中然后喊出一句臺詞:“我們還會回來噠!~~~~”。
你看這種重復(fù)口號的威力多么可怕啊,一二十年了還讓用戶印象深刻呢。
不過,其實最后列舉的這三點其實都可以稱作是視覺元素的重復(fù)使用啦,至于原因我也在前面作了解釋,而且以上所有的方式其實都是可以結(jié)合運用的,并不是孤立存在的。
還有,大家注意到了嗎?我在每一條后面都加了4個字“重復(fù)使用”,因為就算你有了自己特定的視覺元素、有屬于自己的寵物形象、有自己的品牌色、有自己的風(fēng)格等等,但是你壓根就不露面,你還特別低調(diào)藏著掖著不展示自己,那誰還記得你啊。
說到這個,我想到了異地戀之所以容易失敗,不也是差不多道理嗎?
你和男/女朋友三五年不見面沒有關(guān)系,沒法手拉手親親嘴也沒有關(guān)系,但是如果你們壓根就不聯(lián)系,出現(xiàn)在彼此的視線里,那感情自然會淡的呀,等于是白白給了別人可乘之機。
所以我一直都覺得品牌和用戶之間其實也是一樣的道理,就是在“談戀愛”,而不是做生意,至于你們之間是談的什么類型的戀愛,那就看自己本事了!~
咳咳,這個話題扯遠(yuǎn)了。
總結(jié)
之所以我們需要做視覺統(tǒng)一,其實就是為了強化我們在用戶心理的印象,讓他們記住我們,記住我們是很有規(guī)范的,靠譜的,可信奈的品牌印象等等,并且還要重復(fù)的出現(xiàn)在用戶的視野里,那怎么出現(xiàn)呢?
方法就在我上面列舉的幾條內(nèi)容里啦。當(dāng)然,你也得控制一個度,不要過份的運用這些方法,不然會招致用戶反感的。
想想有的男孩子可以成功討女孩子歡心,而有的卻被女孩子嫌棄的不行,知道原因了嗎?道理都是一樣的??!
你看下面這些世界杯期間的廣告,畫面low,口號low,重復(fù)次數(shù)又很多,用戶記住是記住你了,但真的挺煩的!
#專欄作家#
做設(shè)計的面條,公眾號:做設(shè)計的面條,人人都是產(chǎn)品經(jīng)理專欄作家。一位擅長將電商及banner設(shè)計講得最透徹易懂的妹子,有趣有料會拍照,歡迎互相交流。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Pixabay,基于 CC0 協(xié)議
看完你的文章感覺很厲害,終于學(xué)會了什么是只講理論不講方法,更牛逼的地方在于完全的沒有講到核心解決問題的手法還可以讓新手看起來好像這就是方法,簡直讓我耳目一新,看見現(xiàn)在什么自媒體培訓(xùn)班都是這么教人的,我就放心了。
此頁面最到位的話在這里,握手!
結(jié)尾圖片很是調(diào)皮, ?? 有所收獲