決戰雙11,哪些技巧可以讓你的專題頁設計脫穎而出?

2 評論 11544 瀏覽 77 收藏 27 分鐘

這是小編見過講雙十一專題設計的最完整最有幫助的文章,我只是看了十遍而已。

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

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

一、專題頁由哪些部分組成?

二、如何讓你的專題頁設計脫穎而出?

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

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

三、總結

接下來我們一條一條來捋清楚(文章越到后面越精彩,結尾有彩蛋,大家耐心看完哦?。?!~):

一、專題頁由哪些部分組成?

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

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

一般來說,專題頁由這幾個部分組成:頭部Banner+至少1個樓層模塊+背景+氛圍點綴物。如下圖所示:

cb97581848f0a84a0d304fe4bb7a.jpg

而Banner是由哪些部分組成的呢?Banner組成要素包含4個方面:文案 、商品/模特、背景、點綴物(可有可無)。

011058184916a84a0d304f05344d.jpg

而我在之前反復強調過的,Banner的作用是:宣傳/展示/廣而告之/準確傳達信息。

其中頭部Banner我在前面寫過好幾十篇文章介紹了,大家應該都不陌生了吧,然后樓層模塊從上之下你想放多少個就放多少個,形式也可以多種多樣,最后的背景和氛圍點綴物跟Banner設計里的是同理的,我在前面也反復提到,這里也不做過多說明咯~

二、如何讓自己的專題頁設計脫穎而出?

首先我們可以看幾張圖:

54c658184935a84a0d304f339f69.jpg

(1/2/3/4/5當中哪一個人物更加突出?是不是3號人物?)

25255818497ea84a0e282bfa8dba.jpg

(這些圓當中哪一個最突出?是不是紫色的最突出?)

所以我們應該知道,脫穎而出就好比寫作手法里的對比,就好比平面構成里的特異。

接下來我會從以下2個方面來進行分析:局部vs整體。

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

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

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

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

情緒帶入型

下面是截取的我以前寫的一篇文章里的一小段文字,我覺得拿來當做減肥產品的廣告文案也是可以的:

“以前有個同事她說要減肥要健身

我說好啊看你能堅持多久

因為我也好幾次喊過這種話

最后卻都不了了之了

可是幾個月后再看到他

細腰美臀大長腿

顯得更加自信了

是啊她總可以做到付諸行動

而我只會給自己找借口

也許再這樣下去

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

促銷型

全場5折起/全場買三免一/1元秒殺0元搶購/周年鉅惠等等

口號型

爭做行業領跑者/先賺它1個億/上天貓就購了/好物低價上京東等等

通告型

熱烈慶祝XXX成立幾周年/歡迎XXX領導蒞臨我司/恭喜XXX榮獲XXX稱號

價值觀型

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

自嗨型

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

惡搞型

老板跑路了/美工甩手不干了等(歪瓜出品,我后面會再提到,因為它簡直是電商設計界的一股泥石流。。)

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

改變食界,條條是道-衛龍

45de581849e3a84a0d304fbe54b8.jpg

買了就是朋友-故宮淘寶

b617581849f9a84a0e282b26e802.jpg

擬人化文案

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

“那么,我去當香蔥烤雞肉串去了”

4dfd58184a24a84a0d304f352b9e.jpg

“??!要是把早上下的蛋也帶來就好了”

304458184a40a84a0d304f806bf6.jpg

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

320758184a59a84a0d304fc97d57.jpg

“您好,您的食材到了”

517e58184a70a84a0e282b63f670.jpg

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

功能描述型

保濕護膚一步到位/棉柔舒適超強吸附力/輕松舒適不變形等等,常用于詳情頁里

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

在同一個類型里,但是文案寫得比別人出彩或者內容更能打動用戶而達到脫穎而出的目的:

比如如果都是促銷型文案,你寫“XXX周年慶特賣惠”肯定不如“XXX周年慶,全場滿100減50”這種文案有吸引力。

為什么呢?因為對于這種促銷類型的文案你把實惠寫的越具體就越能讓用戶感受到真的是在打折,而不是干癟癟的說你在做促銷活動,因為這樣用戶會很疑惑你到底能給他多少優惠,他心里沒底就不敢放心大膽的買了。

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

比如衛龍作為一款屌絲辣條居然走蘋果這種高富帥的路線;

28e458184a8ca84a0d304f143942.jpg

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

f62b58184a9ea84a0d304f2c771e.jpg

再比如大家都在宣揚正能量的時候,這個品牌的咖啡飲料卻走負能量路線;

以上關于文案部分,我們就講到這里了,總之文案體現的是你的活動定位和策略,所以文案先于設計執行,并且它很重要很重要很重要。

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

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

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

37ad58184ad8a84a0d304f97edca.jpg

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

比如,衛龍作為一個賣辣條的品牌,無論是從產品的辣這個特性,還是它產品本身的基因來看,都應該走紅紅火火熱鬧低端路線的風格設計對不對?但他突然有一天開始走蘋果這種高富帥的大量留白高冷路線,大家的眼球立馬就被它吸引了。

a73758184aefa84a0e282bc8c3b7.jpg

紋理上:有紋理VS無紋理/無規律VS有規律/重復VS變化

比如,有些比較卡哇伊風格的頁面,如果能在背景上有一些相關元素或紋理的點綴,起到相互呼應的作用,就會比空白的背景有吸引力一些。

04a158184b0da84a0e282bce5f52.jpg

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

(3)產品或模特:產品或模特的脫穎而出主要體現在品牌效應/產品品質/功能差異等給人的感官感受。

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

比如,大品牌的產品比小品牌的產品占據更多優勢,有品牌的產品比無品牌的產品顯得更可信更正規等,所以如果上升到品牌這個層面,僅僅只是設計的好看或突出并不會起到很大的優勢作用,只是錦上添花而已,品牌的影響力和口碑才是最主要的因素。

但是當2個品牌一起聯合,跨品牌做活動,就會比單一品牌產生更強的效應,達到1+1大于2的作用,比如家紡品牌和可口可樂的合作,在設計上也是沿用了可口可樂的經典女人曲線般的瓶身形象:

dc4158184b29a84a0d304f0dbffc.jpg

產品品質:好品質VS差品質/有特點VS無特點/有后期修飾VS無后期修飾/有人知曉VS無人知曉。

比如,同樣一款產品,你的產品圖看起來更清晰更干凈或更有趣好玩更高檔肯定就會更吸引到相應的人群的注意力和購買欲望,這些都是會影響到你的頁面設計好壞的因素。

6e2058184b6ba84a0d304f6fa46b.jpg

功能差異:多功能VS單一功能/有差異VS無差異/有優勢VS無優勢

比如如果都是護膚產品的專題頁設計,但是你的這款產品是有別人不具備的功能特性的,那么就可以在你的設計里通過文字排版或圖形描繪的方式表現出來,直觀的傳達給別人你的這些優勢和氛圍,就比干癟癟的將產品往頁面上一擺更具吸引力:

0fb458184b8ba84a0d304fa3d029.jpg

當然這個情況更適合單個產品的宣傳或者放在詳情頁里。

(4)點綴物:有點綴物VS沒有點綴物/點綴物合適VS點綴物不合適。

這個同上面講的紋理類似,比如,有些比較卡哇伊風格的頁面,如果能在背景上有一些相關元素或紋理的點綴,起到相互呼應的作用,就會比空白的背景有吸引力一些。

40c958184baea84a0e282b5785dd.jpg

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

樓層內容:內容新穎VS內容常規/內容豐富VS內容單調:

一般來說,在樓層內容里如果插入一些好玩的游戲,或者有一些視頻播放,再或者變著花樣給用戶發紅包和購物券,會比常規的商品列表展示的樓層更有讓人逛的欲望(不過這個都不止是設計師的事情了,而是運營/交互設計師/產品經理/策劃要去做的事情)。

ea7158184bc6a84a0e282b7b6653.jpg

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

比如以穿搭建議的方式賣貨的專題頁樓層設計,大多數都是像左邊這樣,將一堆衣服按一定秩序堆放好,但是右邊這種形式呢?每個模特擺出一個字母的造型,讓人覺得有點搞怪,都忍不住想要跟著模仿造型了對不對?

e31b58184bdfa84a0d304f637163.jpg

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

整體上我們可以從型/色/意/技四個方面來探討如何做到脫穎而出這個問題:

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

舉例:反差型(衛龍)

e5bd58184bfea84a0d304ff2e909.jpg

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

9bdd58184c10a84a0d304f42742b.jpg

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

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

自從2015年的天貓雙十一,第一次將所有的頁面都沿用貓頭的這個造型,就驚艷了全場,因為這個形象太討巧了,不僅成功地與他的品牌形象掛鉤,還非常有利于品牌延伸,這以后,但凡頁面里出現這貓頭造型,就一定會聯想到天貓,因為他是獨一無二的。

dbed58184c44a84a0d304f8c8b55.jpg

當你擁有了某種獨一無二的東西,也就很容易脫穎而出了。

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

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

853058184c70a84a0d304fbc8755.jpg

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

品牌符號:從品牌這個角度來說,每一個品牌形象都是獨一無二的,比如

天貓/三只松鼠/初語等都已經形成了自己的形象特征,當你的頁面上出現了這些形象特征的時候,也就有了自己的優勢:

995358184c87a84a0e282bdc395c.jpg

理念意義:圖形代表的含義,靈感來源等

比如,提到圣誕節,大家都會聯想到紅配綠,也會聯想到圣誕樹/雪地/圣誕老人/長筒襪對不對,所以我猜想你們的第一反應應該是搞比較基礎的堆疊效果吧?像下面這樣:

fe0858184c9fa84a0e282b561b57.jpg

但有沒有想過像下面這樣提取一種基本型,然后巧妙地與自己的產品相結合呢?

fcc458184cb7a84a0d304fd3b25d.jpg

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

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

c6ed58184cd6a84a0d304f48d3b3.jpg

再比如,兒童節的活動設計,別人可能都走手繪可愛卡哇伊路線:

397c581952dfa84a0e282bd46e0d.jpg

而我們走了小清新路線(其實也是因為怕侵權不好用模特之類的,再一個我們是兒童節/母親節/520一起做的活動,哈哈~)

ab3058184d03a84a0e282b8f879a.jpg

(4)技:主要是指技術創新/跨界合作/手法創新等讓人感到新奇,任何時候,都是因為有了技術的進步才使得我們有了更好的體驗和更多的選擇。

比如以前沒有互聯網的時候,大家只能在線下購物,有了互聯網之后大家開始在PC上購物,后來移動個互聯網的發展和智能手機的普及和便利,大家又開始轉向移動端購物,現在Vr又出來了,以后指不定購物有多便利了。你搶先運用了新技術,你就占有優勢。

舉例:前度時間很火的雙十一邀請函,就是一個活生生的例子,可以看下它的幕后制作視頻:

520a58184faba84a0d304f5b2de7.jpg

我在里面看到,它分別涉及到腦爆+前期構思+手繪草圖+攝影+后期合成+Vr技術+threejs+webGL的組合繪制3D場景+渲染等技術環節。最終達到了刷屏的效果,吸引了幾乎所有互聯網人的注意力。

如果你也有這個技術,你的作品想不脫穎而出也難了(不過也只有BAT這個級別的大金主才花得起這個錢了)。

三、總結

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

頁面里有視頻的比沒視頻的厲害:

cce258185008a84a0e282b2a2564.jpg

動態的比靜態的看起來厲害

3602581854fda84a0e282b192967.jpg

3D的比2D的看起來厲害

17c358185116a84a0d304fc705ed.jpg

有場景合成的比簡單的商品堆砌的厲害

63aa5818512fa84a0d304f542f72.jpg

動手做的(比如手工和攝影)比動手畫的厲害

367858185148a84a0d304fa483f5.jpg

手繪的比非手繪的看起來厲害

5f7958185163a84a0e282b4c1e20.jpg

有造型變化的比沒有造型變化的厲害

b3885818517aa84a0e282b17836a.jpg

自由排版的比常規排版的看起來厲害

beb05818518ca84a0e282b57bdc1.jpg

干凈留白的比熱鬧促銷的看起來厲害

d066581851a4a84a0e282bb0b57e.jpg

有文化底蘊的比沒文化底蘊的厲害

1d7b581851b6a84a0d304f68c111.jpg

有故事的比沒故事的看起來厲害

83fa581851caa84a0e282b94933b.jpg

不按套路出牌的比循規蹈矩的厲害

b890581851eba84a0e282bc07813.jpg

最!重!要!的!是!

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

哈哈哈哈哈??!

我們下期再見!~

 

本文由 @做設計的面條 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 那個負能量語錄印象挺深刻,不過消費者好奇會喝一次,但會長久嗎?誰知道自己下一次的倒霉不是因為喝了這瓶飲料呢?娛樂營銷沒有錯,但是萬變不離其宗的宗法與本質還是不能變的。

    回復
  2. 好文支持 :mrgreen:

    來自廣東 回復