您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 視覺設(shè)計(jì) >> 瀏覽設(shè)計(jì)教程

弄懂5個(gè)套路,搞定不一樣的春節(jié)專題頁設(shè)計(jì)!

寫在前面

每到年底的時(shí)候,大家應(yīng)該都無心工作只想回去跟家人團(tuán)聚吧,只可惜啊,我們的職業(yè)是電商設(shè)計(jì)師,人家現(xiàn)在都忙著打年貨過節(jié),而我們卻要忙著趕各種節(jié)日促銷頁面設(shè)計(jì)的稿子,哈哈,累覺不愛。。


不過好在再堅(jiān)持幾天就放假過年了,我猜想大家的年貨頁面應(yīng)該都做完的差不多了吧,我也就不寫年貨頁面該怎么做相關(guān)的話題了,而是講一講我從這些年的年貨節(jié)頁面看到的一些現(xiàn)象,發(fā)表一些自己的看法和思考。


一、目前年貨節(jié)頁面的一些現(xiàn)狀

我們先一起來看幾個(gè)例子,我直接在花瓣搜索“年貨節(jié)”“春節(jié)”等相關(guān)詞匯,出現(xiàn)的基本都是下面這樣的頁面:

735d5875ed6ca8012060c8effdaf.jpg

看完后你們的第一感覺是什么?大家發(fā)現(xiàn)什么現(xiàn)象和規(guī)律了嗎?接下來我們從以下幾個(gè)方面一起來看下:


配色:配色基本都是大面積的紅色或黃色。

布局:常規(guī)布局,頭圖Banner+樓層的形式。

標(biāo)題:標(biāo)題慣用毛筆字,或者使用一些體現(xiàn)年代感的襯線字體。

表現(xiàn)手法:手繪配合素材搭建場景的方式。

氛圍點(diǎn)綴:各種代表春節(jié)或喜慶相關(guān)的元素做氛圍點(diǎn)綴,比如說燈籠/紅房子/剪紙/生肖/煙花炮竹/紅包等等。


文化背景:雖然都是用的手繪形式,但是反應(yīng)不同的年代其手繪風(fēng)格是不一樣的,質(zhì)感和色調(diào)也不一樣,年代越久色彩飽和度越低,年代越近色彩飽和度越高,比如阿里2015年的年貨節(jié)看起來是比較艷麗現(xiàn)代感的。


品牌:如果有品牌形象一般都會(huì)在頁面里加一結(jié)合運(yùn)用或展示,比如阿里的貓頭形狀,比如三只松鼠的松鼠形象等都是已經(jīng)深入人心了,如果沒有品牌的店鋪基本是隨便玩自由發(fā)揮了(跟單身狗類似。。是沒有什么牽掛和約束的人。。)。


品類:基本都是在頭圖Banner部分結(jié)合自身的品類特點(diǎn)去發(fā)揮,放一些相關(guān)產(chǎn)品做展示。


整體:整體看起來紅紅火火,非常喜慶熱鬧,一眼就能聯(lián)想到過年,需要買買買辦年貨。


那么看到這里,可能一方面你會(huì)覺得:“天哪,怎么幾乎所有的年貨節(jié)頁面都是紅紅火火毛筆字,高高興興過大年的手繪風(fēng)格?。窟@讓我們這些不會(huì)寫毛筆字也不會(huì)手繪的人怎么活?”


另一方面你會(huì)發(fā)現(xiàn),過了這么多年,貌似每年只要是關(guān)于年貨節(jié)相關(guān)的頁面,形式/風(fēng)格/布局總是就那樣,有些只是換了個(gè)生肖而已,仿佛年貨頁面設(shè)計(jì)樣式已經(jīng)固化了,近乎審美疲勞了。


其實(shí),以上都只是從視覺層面去分析的我們普遍看到的年貨節(jié)頁面,其實(shí)跳出視覺層面去分析可以給設(shè)計(jì)師更多手繪及毛筆字以外的選擇,獲得更多新的玩法和新的設(shè)計(jì)方向。


so,我們繼續(xù)往下看~


二、我自己做了一個(gè)嘗試

記得在以前我就寫過一篇關(guān)于各種各樣做Banner的方法的文章,鼓勵(lì)設(shè)計(jì)師應(yīng)該跳出固有思維模式,去做更多嘗試:

解鎖新姿勢,我有100種方法教你撩出滿意的Banner!~


剛好新年馬上要到了,雖然我的目的不是要賣貨我也不是要做專題頁設(shè)計(jì)或Banner,但在我看來專題頁也好,海報(bào)設(shè)計(jì)或Banner設(shè)計(jì)也好,其實(shí)都是相通的,我想給自己的公眾號做出個(gè)什么東西出來留個(gè)紀(jì)念,我需要他特別一點(diǎn),所以就想,要不做一個(gè)立體版本的新年主題的海報(bào)吧。


需要說明的是,這個(gè)東西從構(gòu)思-繪圖-制作成片-拍攝花了我2天時(shí)間,這也是我第一次做這種紙雕作品,所以還比較粗糙。


先給大家看看吧,沒有打燈的時(shí)候它長這樣,嘿嘿:


打了燈之后,立馬就像變魔術(shù)一樣,超級美膩!!~可以自己換燈的顏色和背景布,感覺都會(huì)不一樣。


最后看一下細(xì)節(jié),雖然還有點(diǎn)粗糙,不過立體空間感都已經(jīng)出來了,梅花燈籠等等所有東西全都是用刻刀雕出來的,嘿嘿

要知道,以前做海報(bào)或做專題頁設(shè)計(jì)我都是坐在電腦前,操作ps軟件去表達(dá)自己要的畫面,但這次自己嘗試動(dòng)手去做,去觸摸紙張的質(zhì)感,去調(diào)試光線明暗和遠(yuǎn)近來感受陰影的變化,我的感受是,偶爾換一種方式去思考去執(zhí)行比用電腦軟件繪制陰影和各種圖層擁有更多樂趣和成就感,這種感覺是非常棒的,嘿嘿。


另外對于這個(gè)的制作過程我還是有蠻多體會(huì)的,因?yàn)榫W(wǎng)上沒有找到詳細(xì)的制作教程,所以自己也摸索好一會(huì)兒(淘寶上其實(shí)有賣類似這種東西的,不過它們賣的都是批量生產(chǎn)的東西,另外阿門也有寫過一篇相關(guān)的帖子,不過他更多的是炫照,沒有特別詳細(xì)的步驟,哈哈)。


嗯,我這個(gè)是專為自己的公眾號《做設(shè)計(jì)的面條》定制的,摸索了好一會(huì)兒,不斷嘗試弄廢了十幾張A4紙才弄出來,哈哈,有機(jī)會(huì)下次看出個(gè)詳細(xì)教程給大家也玩玩吧(大家需要這個(gè)教程嘛~),畢竟我這次的重點(diǎn)是講關(guān)于突破設(shè)計(jì)思維方面的內(nèi)容啦。


三、重新認(rèn)識電商設(shè)計(jì)

回到我們這次的話題當(dāng)中來,要想突破思維,首先要明白3個(gè)概念:

(1)思維決定行為,不管是專題頁/Banner還是Html5活動(dòng)頁面,其實(shí)最終目的都是為賣貨或宣傳品牌形象服務(wù)的,是因?yàn)槲覀兿扔辛艘粋€(gè)賣貨的主題或需求后,才會(huì)有對應(yīng)的視覺頁面被電商設(shè)計(jì)師設(shè)計(jì)出來,最終呈現(xiàn)在了消費(fèi)者面前,同時(shí)一個(gè)頁面長什么樣是老板運(yùn)營策劃設(shè)計(jì)師共同協(xié)調(diào)配合的成果。


也就是說,如果你的運(yùn)營和策劃思維不變,視覺上就很難有太多新花樣,頁面不好看或者太常規(guī)其實(shí)不是設(shè)計(jì)師一個(gè)人的事,明白了這個(gè)道理后,我們可以再把緯度拉開一些看,也許會(huì)更有趣,不要只停留在視覺層面的漩渦里,而是要以結(jié)果目的為導(dǎo)向——賣貨以及更好地賣貨。


(2)只要是賣貨就會(huì)涉及到競爭和對比,想一想你們家今年的年貨節(jié)頁面設(shè)計(jì)是否比上一次做的更好了?你的年貨頁面設(shè)計(jì)是否在其他同類里突出了?這些都決定你可以獲得多少曝光量,是否能吸引到買家或用戶的注意力,從而對銷量造成影響。


(3)突破可以是思維層面上的突破,也可以是執(zhí)行層面上的突破,比如別人都是直接賣貨,你可以加入其他一些互動(dòng)的玩法,一邊玩一邊賣貨,一邊講感情一邊賣貨;再比如別人都用手繪的表現(xiàn)形式,那我偏偏不用手繪,我換個(gè)方式,做手工或攝影什么的都可以,如果別人也是搞攝影或搞手工畫插畫什么的,那你就做到比別人有趣比別人做得好,因?yàn)橐朊摲f而出你就得跟別人區(qū)別開來。


四、換幾個(gè)角度去思考問題

所以,我們可以先從以下幾的角度去思考新玩法和新設(shè)計(jì)方向的問題:


1、結(jié)合自己的品牌形象或特點(diǎn)去做設(shè)計(jì)

在某種意義上來說,有品牌意識的產(chǎn)品或店鋪比沒有品牌意識的產(chǎn)品或店鋪占據(jù)更多優(yōu)勢,無論你是做年貨節(jié)頁面還是其他各種活動(dòng)頁面設(shè)計(jì),因?yàn)槟阌辛俗约邯?dú)一無二的視覺形象或標(biāo)志也就有了識別性,你需要做的只是比上一次做的更好,而不要在乎其他同類的競爭,因?yàn)槟愕莫?dú)一無二的東西是別人競爭不走的,別人只能是模仿者,比如天貓的貓頭形象,識別性特別高,每年都可以玩出一些新花樣。


2016年的雙十一出街海報(bào)


幾乎每次專題頁活動(dòng)的頭圖里都有貓頭元素,今年的年貨節(jié)也不例外:

3da45875ef49a801219c77258536.jpg

所以,如果可以的話,不管你現(xiàn)在有沒有品牌,是大店或是小店,都可以試著去慢慢培養(yǎng)自己的品牌意識和視覺形象。


2、適當(dāng)追熱點(diǎn)或惡搞

有時(shí)候偶爾追一下熱點(diǎn)或者迎合一下當(dāng)下潮流也沒什么不妥的,只有運(yùn)用得好不好水平高不高的問題,熱點(diǎn)本身并沒有對錯(cuò)之分,比如杜蕾斯每次熱點(diǎn)都可以用的非常巧妙,一大批網(wǎng)名被他的機(jī)智所折服,并不會(huì)覺得他討厭,而是很期待他下次會(huì)玩出什么新花樣。


比如剛過去的圣誕節(jié)海報(bào)。。。。污力十足又巧妙地讓人無法反駁。。。

cf455875ef61a8012060c8ca6896.jpg

再比如味龍辣條,最擅長干的事情就是制造話題,一個(gè)集運(yùn)營策劃和公關(guān)以及演員特質(zhì)于一身的品牌,時(shí)而高大上到吐血,時(shí)而又屌絲逗比低俗到骨髓,引得一大幫自媒體自發(fā)報(bào)道,連推廣費(fèi)都省了。。

db0b5875ef92a8012060c8f15bf8.jpg


3、文案的創(chuàng)新

我們發(fā)現(xiàn)每年的年貨節(jié)頁面看來看去都差不多,其實(shí)跟文案沒有創(chuàng)新有很大關(guān)系,文案其實(shí)就是對一個(gè)活動(dòng)主題最直觀的反映,比如我們看到每年大部分年貨節(jié)的主題文案是什么呢?比如:

“搶年貨”

“鉅惠來襲”

“有禮賀新年“

“賀歲狂歡“

“年貨盛典”

“年味中國”

“春節(jié)不打烊”

....................


這些文案主題一看就是寡然無趣的,走的是低價(jià)促銷的套路,雖然這招短期內(nèi)很管用,但是每年都用也就沒有什么吸引力了,原因主要體現(xiàn)在這三個(gè)方面:


第一點(diǎn):每年的物價(jià)人力成本都在上漲,商家無論是出于品牌方面的考慮還是出于生存需要都是不可能無限給你讓利的,所以你會(huì)發(fā)現(xiàn)買東西打折什么的力度其實(shí)感覺越來越低了,用戶也不是察覺不到的。


第二點(diǎn):人性驅(qū)使,人都愛貪便宜,你這次給了便宜,他下次只想要你更便宜,要不然他就會(huì)失望甚至離開你,這種靠低價(jià)策略吸引到的用戶始終是不太忠誠的,除非你有其他方面粘住他,或者你一直便宜下去。


第三點(diǎn):對設(shè)計(jì)師來說,拿到這些文案確實(shí)也是很難做出更有突破性的頁面設(shè)計(jì)了,年年都這樣,什么熱鬧呀氛圍啦要有過年的氣氛啦,無非換個(gè)生肖,比如去年是猴子今年換成雞,或者把各種平面構(gòu)成原理利用起來,換一些文化元素之類的,我想你們應(yīng)該深有體會(huì)的~


那像下面這些文案,因?yàn)檠由斓搅似渌暥?,是可以有更多發(fā)揮空間的,比如:

“過年送好禮”:這個(gè)關(guān)鍵詞就是“送好禮”,那設(shè)計(jì)師就可以想送禮的一些門道了,送給誰的呢?怎么送呢?有什么講究呢?,在一個(gè)送禮多半講求的是面子/趣味/意義,低價(jià)倒不是用戶最看重的,所以這種主題也可以玩的更加長久一點(diǎn)。


“新年大換新”:這個(gè)關(guān)鍵詞是“換新”,誰都喜歡新鮮的人新鮮的事物,只是需要一個(gè)理由去推動(dòng)而已,以這個(gè)緯度去思考可以發(fā)展出很多創(chuàng)新的方向,比如換新意味著換一種心情/換一種狀態(tài)/換一種活法/換一種身份/意味著蛻變,設(shè)計(jì)師在設(shè)計(jì)上面也就可以玩出更多花樣了。 


“年味回家”:這里的關(guān)鍵詞是“回家”,想想那些身在異鄉(xiāng)的正常人,每到年底最思戀的應(yīng)該還是家了,家的味道家的溫暖都可以勾起他們的回憶,而且回家可以發(fā)散出很多畫面,比如回家途中的趣事/對家的思戀和遐想/回家后的感受/對家的想象/回家前的一些思緒等等,可以發(fā)揮的空間太大了,而且通過這個(gè)方向切入主題,吸引到的用戶也不是最看重低價(jià)的,而是愿意為家投入金錢的一類人。

a3a55875efdfa801219c77430759.jpg

比如像這種攝影題材,這種畫面看似簡單,但卻是非常容易戳中淚點(diǎn)的。


總結(jié)以上,無非就是說,多想一些其他緯度的活動(dòng)主題和文案,要知道人的情感和需要是多種多樣的,尤其是親情友情愛情和做自己是恒久不變的也是人最需要的幾樣?xùn)|西,你老是走這種低價(jià)促銷路線,寫些不痛不癢的文案,既不能打動(dòng)人掏腰包,也無法長久下去,再一個(gè)對于設(shè)計(jì)師來說發(fā)揮空間也太少無法有太多創(chuàng)新,作為用戶來說當(dāng)然也就容易審美疲勞了啊。


當(dāng)然,最有效的方式是,配合著這些點(diǎn)再適當(dāng)給一些優(yōu)惠力度來做,而不要把低價(jià)促銷當(dāng)作是最主要的發(fā)力點(diǎn)。


4、新的活動(dòng)玩法

現(xiàn)在人們使用手機(jī)的頻率越來越高了,移動(dòng)端購物占比平均差不多都在80%以上了吧,所以利用智能手機(jī)這塊屏幕的優(yōu)勢其實(shí)可以獲得更多的玩法,而且傳播面也會(huì)比pc廣得多(除了科技的進(jìn)步以外,公眾號和朋友圈等等新載體的出現(xiàn)功不可沒)。


我覺得在這一點(diǎn)上,其實(shí)阿里和京東今年都是做得不錯(cuò)的,大家可以看下:


阿里年貨節(jié)版本的《清明上河圖》,我當(dāng)時(shí)體驗(yàn)了下覺得好贊,把每個(gè)店鋪的特點(diǎn)都結(jié)合進(jìn)去了,還做了很多惡搞的小細(xì)節(jié),你在逛的時(shí)候真的可以聽到有人在吆喝,太有場景代入感了。

另外,大家可能只是看到這個(gè)需要設(shè)計(jì)師花費(fèi)多少心血去畫完這些畫面,需要很強(qiáng)的手繪功力,但是背后的運(yùn)營玩法和創(chuàng)新思路其實(shí)也是大家應(yīng)該去重點(diǎn)關(guān)注的點(diǎn),無論是什么方法來執(zhí)行其實(shí)都只是技能之行層面的,會(huì)手繪的人很多,繪插畫的人很多,但想一下這幾個(gè)問題:


為什么有的頁面能火有的人能火,而有的卻無人問津呢?

你能不能想到這些玩法呢?

你有沒有打動(dòng)人的故事可講呢?


雖說都是手繪,但是我看到這些頁面里多了一些小細(xì)節(jié)還是不一樣的:

下面這個(gè)是今年的淘寶年貨節(jié),這應(yīng)該是畫的關(guān)羽和張飛吧?但是穿著打扮動(dòng)作姿勢有點(diǎn)潮,還跟賣貨相結(jié)合了,哈哈

32ed5875f056a8012060c81de398.jpg

還有這些,通假字用得巧,畫面還很惡搞,讓人會(huì)心一笑:

還有這次京東超級品牌日的H5頁面,雖然一開始聽到背景說唱音樂部分的時(shí)候稍微覺得有點(diǎn)尷尬,但整個(gè)畫面還是挺有點(diǎn)意思的,畫面節(jié)奏銜接的也比較流暢。。


這里是鏈接,大家可以去體驗(yàn)看看:

https://h5.m.jd.com/dev/oAzjQ5pcPJyaNVP6oDddVRinT8a/index.html?from=timeline&isappinstalled=0


還有其他一些有意思的頁面設(shè)計(jì)我就不一一舉例啦,你們自己平時(shí)多搜集吧。


5、如果突破太難,不如就做自己

持續(xù)突破很難,不如就干脆堅(jiān)持做自己,比如擁有自己專屬的顏色或擁有自己的專屬形象并使它們成為一種標(biāo)志性特色,很多時(shí)候擁有自己特定的顏色或標(biāo)志性圖案比不斷去嘗試新的事物會(huì)更容易被消費(fèi)者記住,這就是重復(fù)給人帶來的加強(qiáng)記憶效果。


比如著名珠寶商蒂芙尼的御用顏色:蒂芙尼藍(lán)

13c95875f0e1a801219c770ca4ef.jpg

還有可口可樂的紅白色(瓶身的完美曲線也是他的一項(xiàng)標(biāo)志)

441d5875f0f7a8012060c8fbd64b.jpg

其實(shí)無論突不突破,都要明白電商無非就是為了賣貨或更好的賣貨,我們做設(shè)計(jì)寫文案搞活動(dòng)都是為了這個(gè)目的服務(wù)的,那么你得需要讓別人注意到你的存在,讓自己脫穎而出啊,在這點(diǎn)上還真得跟那些明星或網(wǎng)紅們學(xué)學(xué),比如我提到papi醬你們能聯(lián)想到什么?我提到薛之謙你們又能聯(lián)想到什么呢?


總結(jié)


其實(shí)中國的傳統(tǒng)文化博大精深,光從文化這個(gè)角度去想,年貨節(jié)主題要去發(fā)散思維的話可以挖掘的點(diǎn)太多了,更別說從人性/體驗(yàn)/執(zhí)行等等層面上的思考結(jié)合運(yùn)用了,其他節(jié)日主題或活動(dòng)設(shè)計(jì)也一樣。越來越覺得,設(shè)計(jì)師可不是一個(gè)只會(huì)用用軟件畫畫圖的人,要想做的好,需要懂的東西太多了。

[教程作者:TTTing]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/ui3371.html
年末福利!三種網(wǎng)頁設(shè)計(jì)常見表現(xiàn)手法
設(shè)計(jì)中的層次和層級
圖趣網(wǎng)微信
建議反饋
×