決戰(zhàn)雙11,哪些技巧可以讓你的專題頁(yè)設(shè)計(jì)脫穎而出?

2 評(píng)論 11618 瀏覽 77 收藏 27 分鐘

這是小編見(jiàn)過(guò)講雙十一專題設(shè)計(jì)的最完整最有幫助的文章,我只是看了十遍而已。

考慮到我們都是做商業(yè)設(shè)計(jì)的正經(jīng)人,商業(yè)的東西肯定就涉及到競(jìng)爭(zhēng)了嘛,所以我們作為設(shè)計(jì)師不只是要會(huì)把頁(yè)面給設(shè)計(jì)出來(lái),還應(yīng)該學(xué)會(huì)讓自己的設(shè)計(jì)脫穎而出有競(jìng)爭(zhēng)力,從而被更多愿意掏腰包的消費(fèi)者看到,所以我們今天要講的話題是:“決戰(zhàn)雙十一,哪些技巧能讓你的專題頁(yè)設(shè)計(jì)脫穎而出?”

按照慣例,我先給大家列一個(gè)提綱咯:

一、專題頁(yè)由哪些部分組成?

二、如何讓你的專題頁(yè)設(shè)計(jì)脫穎而出?

1、從局部上分析如何脫穎而出

2、從整體上分析如何脫穎而出

三、總結(jié)

接下來(lái)我們一條一條來(lái)捋清楚(文章越到后面越精彩,結(jié)尾有彩蛋,大家耐心看完哦?。。 ?/p>

一、專題頁(yè)由哪些部分組成?

(以下是以前提到的一個(gè)知識(shí)點(diǎn),我在這里為了方便大家理解后面的內(nèi)容,所以再放一遍)

雖然我們現(xiàn)在可以看到各種樣式形式的專題頁(yè),但是它們脫去那些華麗的外衣后,即使都是很基本的原型圖,我拿一個(gè)最基礎(chǔ)的專題頁(yè)基本型給大家看一下,大家就知道了。

一般來(lái)說(shuō),專題頁(yè)由這幾個(gè)部分組成:頭部Banner+至少1個(gè)樓層模塊+背景+氛圍點(diǎn)綴物。如下圖所示:

cb97581848f0a84a0d304fe4bb7a.jpg

而B(niǎo)anner是由哪些部分組成的呢?Banner組成要素包含4個(gè)方面:文案 、商品/模特、背景、點(diǎn)綴物(可有可無(wú))。

011058184916a84a0d304f05344d.jpg

而我在之前反復(fù)強(qiáng)調(diào)過(guò)的,Banner的作用是:宣傳/展示/廣而告之/準(zhǔn)確傳達(dá)信息。

其中頭部Banner我在前面寫(xiě)過(guò)好幾十篇文章介紹了,大家應(yīng)該都不陌生了吧,然后樓層模塊從上之下你想放多少個(gè)就放多少個(gè),形式也可以多種多樣,最后的背景和氛圍點(diǎn)綴物跟Banner設(shè)計(jì)里的是同理的,我在前面也反復(fù)提到,這里也不做過(guò)多說(shuō)明咯~

二、如何讓自己的專題頁(yè)設(shè)計(jì)脫穎而出?

首先我們可以看幾張圖:

54c658184935a84a0d304f339f69.jpg

(1/2/3/4/5當(dāng)中哪一個(gè)人物更加突出?是不是3號(hào)人物?)

25255818497ea84a0e282bfa8dba.jpg

(這些圓當(dāng)中哪一個(gè)最突出?是不是紫色的最突出?)

所以我們應(yīng)該知道,脫穎而出就好比寫(xiě)作手法里的對(duì)比,就好比平面構(gòu)成里的特異。

接下來(lái)我會(huì)從以下2個(gè)方面來(lái)進(jìn)行分析:局部vs整體。

1.那么從局部上分析是指什么呢?

從前面的專題頁(yè)組成要素我們可以看到,一個(gè)專題頁(yè)里分別包含了下面這些組成部分:文案/背景/產(chǎn)品或模特/點(diǎn)綴物/樓層。

所以接下來(lái)我們可以來(lái)看下,從局部上如何脫穎而出:

(1)文案:不管是做Banner設(shè)計(jì)還是做專題頁(yè)設(shè)計(jì),文案才是最直觀表達(dá)活動(dòng)的定位和運(yùn)營(yíng)策略的信息(而設(shè)計(jì)的作用就是把這個(gè)活動(dòng)定位給傳達(dá)出來(lái)),在我看來(lái)也是最重要的組成部分,那么文案有哪些類型呢?

情緒帶入型

下面是截取的我以前寫(xiě)的一篇文章里的一小段文字,我覺(jué)得拿來(lái)當(dāng)做減肥產(chǎn)品的廣告文案也是可以的:

“以前有個(gè)同事她說(shuō)要減肥要健身

我說(shuō)好啊看你能堅(jiān)持多久

因?yàn)槲乙埠脦状魏斑^(guò)這種話

最后卻都不了了之了

可是幾個(gè)月后再看到他

細(xì)腰美臀大長(zhǎng)腿

顯得更加自信了

是啊她總可以做到付諸行動(dòng)

而我只會(huì)給自己找借口

也許再這樣下去

我都配不上和她做朋友了吧”

促銷型

全場(chǎng)5折起/全場(chǎng)買(mǎi)三免一/1元秒殺0元搶購(gòu)/周年鉅惠等等

口號(hào)型

爭(zhēng)做行業(yè)領(lǐng)跑者/先賺它1個(gè)億/上天貓就購(gòu)了/好物低價(jià)上京東等等

通告型

熱烈慶祝XXX成立幾周年/歡迎XXX領(lǐng)導(dǎo)蒞臨我司/恭喜XXX榮獲XXX稱號(hào)

價(jià)值觀型

乘年輕,住好點(diǎn)/Just Do It/我的青春我做主/你值得擁有

自嗨型

bigger than bigger/again and again/more and more(完全不知所云但是看起來(lái)很厲害的樣子的文案,超級(jí)大牌都愛(ài)用。。)

惡搞型

老板跑路了/美工甩手不干了等(歪瓜出品,我后面會(huì)再提到,因?yàn)樗?jiǎn)直是電商設(shè)計(jì)界的一股泥石流。。)

反差型文案(后面我會(huì)解釋舉例為什么反差)

改變食界,條條是道-衛(wèi)龍

45de581849e3a84a0d304fbe54b8.jpg

買(mǎi)了就是朋友-故宮淘寶

b617581849f9a84a0e282b26e802.jpg

擬人化文案

下面是一則日本烤雞肉串的廣告文案:

“那么,我去當(dāng)香蔥烤雞肉串去了”

4dfd58184a24a84a0d304f352b9e.jpg

“啊!要是把早上下的蛋也帶來(lái)就好了”

304458184a40a84a0d304f806bf6.jpg

“我可不能在這種地方被吃掉”

320758184a59a84a0d304fc97d57.jpg

“您好,您的食材到了”

517e58184a70a84a0e282b63f670.jpg

這則文案就是通過(guò)擬人化的口吻,即讓人覺(jué)得新穎可愛(ài),又讓人感受到其食材的新鮮。

功能描述型

保濕護(hù)膚一步到位/棉柔舒適超強(qiáng)吸附力/輕松舒適不變形等等,常用于詳情頁(yè)里

了解完以上文案類型后,所以當(dāng)我們想要自己的設(shè)計(jì)能夠脫穎而出,要么做到在同一個(gè)類型(定位方向)的文案里比別人寫(xiě)的更出彩,要么就換一種類型(定位方向)的文案去寫(xiě),而后者其實(shí)更容易起到脫穎而出的效果,舉例:

在同一個(gè)類型里,但是文案寫(xiě)得比別人出彩或者內(nèi)容更能打動(dòng)用戶而達(dá)到脫穎而出的目的:

比如如果都是促銷型文案,你寫(xiě)“XXX周年慶特賣(mài)惠”肯定不如“XXX周年慶,全場(chǎng)滿100減50”這種文案有吸引力。

為什么呢?因?yàn)閷?duì)于這種促銷類型的文案你把實(shí)惠寫(xiě)的越具體就越能讓用戶感受到真的是在打折,而不是干癟癟的說(shuō)你在做促銷活動(dòng),因?yàn)檫@樣用戶會(huì)很疑惑你到底能給他多少優(yōu)惠,他心里沒(méi)底就不敢放心大膽的買(mǎi)了。

換一種定位方向達(dá)到脫穎而出的目的:

比如衛(wèi)龍作為一款屌絲辣條居然走蘋(píng)果這種高富帥的路線;

28e458184a8ca84a0d304f143942.jpg

再比如故宮淘寶居然把那些高高在上的皇帝娘娘們塑造成一種賣(mài)萌的形象;

f62b58184a9ea84a0d304f2c771e.jpg

再比如大家都在宣揚(yáng)正能量的時(shí)候,這個(gè)品牌的咖啡飲料卻走負(fù)能量路線;

以上關(guān)于文案部分,我們就講到這里了,總之文案體現(xiàn)的是你的活動(dòng)定位和策略,所以文案先于設(shè)計(jì)執(zhí)行,并且它很重要很重要很重要。

(2)背景:背景上的脫穎而出,主要體現(xiàn)在色彩/形式/紋理等上面的一種差異化和對(duì)比。

色彩上:明亮鮮艷VS暗黑系/暖色VS冷色/多彩色VS無(wú)彩色。

比如,同樣是表達(dá)年輕,大部分人想到的應(yīng)該是活力多彩的,而如果你用的是暗黑系的,那你就脫穎而出了。

37ad58184ad8a84a0d304f97edca.jpg

形式上:扁平VS質(zhì)感/繁雜VS留白/柔美曲線VS剛硬棱角/重復(fù)VS變化。

比如,衛(wèi)龍作為一個(gè)賣(mài)辣條的品牌,無(wú)論是從產(chǎn)品的辣這個(gè)特性,還是它產(chǎn)品本身的基因來(lái)看,都應(yīng)該走紅紅火火熱鬧低端路線的風(fēng)格設(shè)計(jì)對(duì)不對(duì)?但他突然有一天開(kāi)始走蘋(píng)果這種高富帥的大量留白高冷路線,大家的眼球立馬就被它吸引了。

a73758184aefa84a0e282bc8c3b7.jpg

紋理上:有紋理VS無(wú)紋理/無(wú)規(guī)律VS有規(guī)律/重復(fù)VS變化

比如,有些比較卡哇伊風(fēng)格的頁(yè)面,如果能在背景上有一些相關(guān)元素或紋理的點(diǎn)綴,起到相互呼應(yīng)的作用,就會(huì)比空白的背景有吸引力一些。

04a158184b0da84a0e282bce5f52.jpg

反之亦然,有些背景不適合放紋理,會(huì)顯得累贅或多余,那么空白背景就會(huì)顯得更有吸引力更舒服一些。

(3)產(chǎn)品或模特:產(chǎn)品或模特的脫穎而出主要體現(xiàn)在品牌效應(yīng)/產(chǎn)品品質(zhì)/功能差異等給人的感官感受。

品牌效應(yīng):大品牌VS小品牌/有品牌VS無(wú)品牌/多品牌VS單一品牌/線上品牌/線下品牌/跨品牌合作(吾皇/暴走漫畫(huà))

比如,大品牌的產(chǎn)品比小品牌的產(chǎn)品占據(jù)更多優(yōu)勢(shì),有品牌的產(chǎn)品比無(wú)品牌的產(chǎn)品顯得更可信更正規(guī)等,所以如果上升到品牌這個(gè)層面,僅僅只是設(shè)計(jì)的好看或突出并不會(huì)起到很大的優(yōu)勢(shì)作用,只是錦上添花而已,品牌的影響力和口碑才是最主要的因素。

但是當(dāng)2個(gè)品牌一起聯(lián)合,跨品牌做活動(dòng),就會(huì)比單一品牌產(chǎn)生更強(qiáng)的效應(yīng),達(dá)到1+1大于2的作用,比如家紡品牌和可口可樂(lè)的合作,在設(shè)計(jì)上也是沿用了可口可樂(lè)的經(jīng)典女人曲線般的瓶身形象:

dc4158184b29a84a0d304f0dbffc.jpg

產(chǎn)品品質(zhì):好品質(zhì)VS差品質(zhì)/有特點(diǎn)VS無(wú)特點(diǎn)/有后期修飾VS無(wú)后期修飾/有人知曉VS無(wú)人知曉。

比如,同樣一款產(chǎn)品,你的產(chǎn)品圖看起來(lái)更清晰更干凈或更有趣好玩更高檔肯定就會(huì)更吸引到相應(yīng)的人群的注意力和購(gòu)買(mǎi)欲望,這些都是會(huì)影響到你的頁(yè)面設(shè)計(jì)好壞的因素。

6e2058184b6ba84a0d304f6fa46b.jpg

功能差異:多功能VS單一功能/有差異VS無(wú)差異/有優(yōu)勢(shì)VS無(wú)優(yōu)勢(shì)

比如如果都是護(hù)膚產(chǎn)品的專題頁(yè)設(shè)計(jì),但是你的這款產(chǎn)品是有別人不具備的功能特性的,那么就可以在你的設(shè)計(jì)里通過(guò)文字排版或圖形描繪的方式表現(xiàn)出來(lái),直觀的傳達(dá)給別人你的這些優(yōu)勢(shì)和氛圍,就比干癟癟的將產(chǎn)品往頁(yè)面上一擺更具吸引力:

0fb458184b8ba84a0d304fa3d029.jpg

當(dāng)然這個(gè)情況更適合單個(gè)產(chǎn)品的宣傳或者放在詳情頁(yè)里。

(4)點(diǎn)綴物:有點(diǎn)綴物VS沒(méi)有點(diǎn)綴物/點(diǎn)綴物合適VS點(diǎn)綴物不合適。

這個(gè)同上面講的紋理類似,比如,有些比較卡哇伊風(fēng)格的頁(yè)面,如果能在背景上有一些相關(guān)元素或紋理的點(diǎn)綴,起到相互呼應(yīng)的作用,就會(huì)比空白的背景有吸引力一些。

40c958184baea84a0e282b5785dd.jpg

(5)樓層:這里主要包含樓層內(nèi)容和樓層形式2個(gè)方面。

樓層內(nèi)容:內(nèi)容新穎VS內(nèi)容常規(guī)/內(nèi)容豐富VS內(nèi)容單調(diào):

一般來(lái)說(shuō),在樓層內(nèi)容里如果插入一些好玩的游戲,或者有一些視頻播放,再或者變著花樣給用戶發(fā)紅包和購(gòu)物券,會(huì)比常規(guī)的商品列表展示的樓層更有讓人逛的欲望(不過(guò)這個(gè)都不止是設(shè)計(jì)師的事情了,而是運(yùn)營(yíng)/交互設(shè)計(jì)師/產(chǎn)品經(jīng)理/策劃要去做的事情)。

ea7158184bc6a84a0e282b7b6653.jpg

樓層形式:形式新穎VS形式常規(guī)/形式貼合主題VS不貼合主題。

比如以穿搭建議的方式賣(mài)貨的專題頁(yè)樓層設(shè)計(jì),大多數(shù)都是像左邊這樣,將一堆衣服按一定秩序堆放好,但是右邊這種形式呢?每個(gè)模特?cái)[出一個(gè)字母的造型,讓人覺(jué)得有點(diǎn)搞怪,都忍不住想要跟著模仿造型了對(duì)不對(duì)?

e31b58184bdfa84a0d304f637163.jpg

2、那么從整體上分析是指什么呢?

整體上我們可以從型/色/意/技四個(gè)方面來(lái)探討如何做到脫穎而出這個(gè)問(wèn)題:

(1)型:主要是指整體的形式/風(fēng)格等方面要與眾不同,那么跟前面的文案一樣,要想脫穎而出話,要么就是在同一個(gè)類型里你能做到你是最優(yōu)秀的;要么是跳出這個(gè)類型,或者跨界到不同的領(lǐng)域或定位類型里去表現(xiàn)。

舉例:反差型(衛(wèi)龍)

e5bd58184bfea84a0d304ff2e909.jpg

舉例:惡搞型(歪瓜出品)

9bdd58184c10a84a0d304f42742b.jpg

(看完這家店的設(shè)計(jì)風(fēng)格,整個(gè)人都要笑屎。。簡(jiǎn)直是電商界的一股泥石流,哈哈。我也承認(rèn)這家店成功的脫穎而出了,但。。我有點(diǎn)好奇這家店的美工走出了這家店鋪能不能順利找到工作。。除非他打算一輩子呆在這種同類型的店鋪里,哈哈哈哈?。。。?/p>

舉例:獨(dú)一無(wú)二型(天貓貓頭形象)

自從2015年的天貓雙十一,第一次將所有的頁(yè)面都沿用貓頭的這個(gè)造型,就驚艷了全場(chǎng),因?yàn)檫@個(gè)形象太討巧了,不僅成功地與他的品牌形象掛鉤,還非常有利于品牌延伸,這以后,但凡頁(yè)面里出現(xiàn)這貓頭造型,就一定會(huì)聯(lián)想到天貓,因?yàn)樗仟?dú)一無(wú)二的。

dbed58184c44a84a0d304f8c8b55.jpg

當(dāng)你擁有了某種獨(dú)一無(wú)二的東西,也就很容易脫穎而出了。

(2)色:主要是指色彩上的差異化,這個(gè)跟前面講局部的內(nèi)容類似,比如:明亮鮮艷VS暗黑系/暖色VS冷色/多彩色VS無(wú)彩色(別人家都是明亮色系你可不可以嘗試暗黑色系呢?別人家都是暖色系,你可不可以嘗試一些冷色系呢?別人家都是夸張多彩絢麗,你能不能?chē)L試低調(diào)無(wú)彩色系呢?)

比如,同樣是表達(dá)年輕,大部分人想到的應(yīng)該是活力多彩的,而如果你用的是暗黑系的,從另一個(gè)角度去詮釋年輕,那你比較容易就脫穎而出了。

853058184c70a84a0d304fbc8755.jpg

(3)意:主要是指品牌特性/理念意義/定位方向等,與眾不同。

品牌符號(hào):從品牌這個(gè)角度來(lái)說(shuō),每一個(gè)品牌形象都是獨(dú)一無(wú)二的,比如

天貓/三只松鼠/初語(yǔ)等都已經(jīng)形成了自己的形象特征,當(dāng)你的頁(yè)面上出現(xiàn)了這些形象特征的時(shí)候,也就有了自己的優(yōu)勢(shì):

995358184c87a84a0e282bdc395c.jpg

理念意義:圖形代表的含義,靈感來(lái)源等

比如,提到圣誕節(jié),大家都會(huì)聯(lián)想到紅配綠,也會(huì)聯(lián)想到圣誕樹(shù)/雪地/圣誕老人/長(zhǎng)筒襪對(duì)不對(duì),所以我猜想你們的第一反應(yīng)應(yīng)該是搞比較基礎(chǔ)的堆疊效果吧?像下面這樣:

fe0858184c9fa84a0e282b561b57.jpg

但有沒(méi)有想過(guò)像下面這樣提取一種基本型,然后巧妙地與自己的產(chǎn)品相結(jié)合呢?

fcc458184cb7a84a0d304fd3b25d.jpg

定位方向:促銷VS趣味VS溫情VS苦情VS情懷(比如別人都走促銷路線你可以走趣味路線,別人走趣味路線你可以走溫情路線,別人走溫情路線你可以走苦情路線,別人走苦情路線你就走情懷路線,當(dāng)別人都走情懷路線了,你走促銷路線,哈哈哈哈?。。?/p>

比如,今冬情人節(jié)那次,別人都走溫情路線,我們走了苦情路線,反響很不錯(cuò):

c6ed58184cd6a84a0d304f48d3b3.jpg

再比如,兒童節(jié)的活動(dòng)設(shè)計(jì),別人可能都走手繪可愛(ài)卡哇伊路線:

397c581952dfa84a0e282bd46e0d.jpg

而我們走了小清新路線(其實(shí)也是因?yàn)榕虑謾?quán)不好用模特之類的,再一個(gè)我們是兒童節(jié)/母親節(jié)/520一起做的活動(dòng),哈哈~)

ab3058184d03a84a0e282b8f879a.jpg

(4)技:主要是指技術(shù)創(chuàng)新/跨界合作/手法創(chuàng)新等讓人感到新奇,任何時(shí)候,都是因?yàn)橛辛思夹g(shù)的進(jìn)步才使得我們有了更好的體驗(yàn)和更多的選擇。

比如以前沒(méi)有互聯(lián)網(wǎng)的時(shí)候,大家只能在線下購(gòu)物,有了互聯(lián)網(wǎng)之后大家開(kāi)始在PC上購(gòu)物,后來(lái)移動(dòng)個(gè)互聯(lián)網(wǎng)的發(fā)展和智能手機(jī)的普及和便利,大家又開(kāi)始轉(zhuǎn)向移動(dòng)端購(gòu)物,現(xiàn)在Vr又出來(lái)了,以后指不定購(gòu)物有多便利了。你搶先運(yùn)用了新技術(shù),你就占有優(yōu)勢(shì)。

舉例:前度時(shí)間很火的雙十一邀請(qǐng)函,就是一個(gè)活生生的例子,可以看下它的幕后制作視頻:

520a58184faba84a0d304f5b2de7.jpg

我在里面看到,它分別涉及到腦爆+前期構(gòu)思+手繪草圖+攝影+后期合成+Vr技術(shù)+threejs+webGL的組合繪制3D場(chǎng)景+渲染等技術(shù)環(huán)節(jié)。最終達(dá)到了刷屏的效果,吸引了幾乎所有互聯(lián)網(wǎng)人的注意力。

如果你也有這個(gè)技術(shù),你的作品想不脫穎而出也難了(不過(guò)也只有BAT這個(gè)級(jí)別的大金主才花得起這個(gè)錢(qián)了)。

三、總結(jié)

看完以上所有的分析,你應(yīng)該有一些頭緒知道該怎么讓自己的專題頁(yè)脫穎而出了吧?另外我也看到現(xiàn)在電商設(shè)計(jì)行業(yè)普遍是這么個(gè)現(xiàn)象:

頁(yè)面里有視頻的比沒(méi)視頻的厲害:

cce258185008a84a0e282b2a2564.jpg

動(dòng)態(tài)的比靜態(tài)的看起來(lái)厲害

3602581854fda84a0e282b192967.jpg

3D的比2D的看起來(lái)厲害

17c358185116a84a0d304fc705ed.jpg

有場(chǎng)景合成的比簡(jiǎn)單的商品堆砌的厲害

63aa5818512fa84a0d304f542f72.jpg

動(dòng)手做的(比如手工和攝影)比動(dòng)手畫(huà)的厲害

367858185148a84a0d304fa483f5.jpg

手繪的比非手繪的看起來(lái)厲害

5f7958185163a84a0e282b4c1e20.jpg

有造型變化的比沒(méi)有造型變化的厲害

b3885818517aa84a0e282b17836a.jpg

自由排版的比常規(guī)排版的看起來(lái)厲害

beb05818518ca84a0e282b57bdc1.jpg

干凈留白的比熱鬧促銷的看起來(lái)厲害

d066581851a4a84a0e282bb0b57e.jpg

有文化底蘊(yùn)的比沒(méi)文化底蘊(yùn)的厲害

1d7b581851b6a84a0d304f68c111.jpg

有故事的比沒(méi)故事的看起來(lái)厲害

83fa581851caa84a0e282b94933b.jpg

不按套路出牌的比循規(guī)蹈矩的厲害

b890581851eba84a0e282bc07813.jpg

最!重!要!的!是!

將這篇文章看到最后還點(diǎn)贊了的人最厲害?。?!

哈哈哈哈哈??!

我們下期再見(jiàn)!~

 

本文由 @做設(shè)計(jì)的面條 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 那個(gè)負(fù)能量語(yǔ)錄印象挺深刻,不過(guò)消費(fèi)者好奇會(huì)喝一次,但會(huì)長(zhǎng)久嗎?誰(shuí)知道自己下一次的倒霉不是因?yàn)楹攘诉@瓶飲料呢?娛樂(lè)營(yíng)銷沒(méi)有錯(cuò),但是萬(wàn)變不離其宗的宗法與本質(zhì)還是不能變的。

    回復(fù)
  2. 好文支持 :mrgreen:

    來(lái)自廣東 回復(fù)