@TTTing1?：作為設(shè)計師，我們不只是要會把頁面給設(shè)計出來，還應(yīng)該學會讓自己的設(shè)計脫穎而出有競爭力，從而被更多愿意掏腰包的消費者看到，所以我們今天要講的話題是：決戰(zhàn)雙十一，哪些技巧能讓你的專題頁設(shè)計脫穎而出？

歡迎關(guān)注小婷姐的微信公眾號「TTTink-D」，一個干貨與文筆俱佳的美女設(shè)計師。

按照慣例，我先給大家列一個提綱咯：

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

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

1. 從局部上分析如何脫穎而出
2. 從整體上分析如何脫穎而出

三、總結(jié)

接下來我們一條一條來捋清楚（文章越到后面越精彩，結(jié)尾有彩蛋，大家耐心看完哦?。?！～）：

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

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

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

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

而Banner是由哪些部分組成的呢？Banner組成要素包含4個方面：文案 、商品／模特、背景、點綴物（可有可無）。

而我在之前反復強調(diào)過的，Banner的作用是：宣傳／展示／廣而告之／準確傳達信息。

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

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

首先我們可以看幾張圖：

（1/2/3/4/5當中哪一個人物更加突出？是不是3號人物？）

（這些圓當中哪一個最突出？是不是紫色的最突出？）

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

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

1、那么從局部上分析是指什么呢？

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

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

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

情緒帶入型

下面是截取的我以前寫的一篇文章里的一小段文字，我覺得拿來當做減肥產(chǎn)品的廣告文案也是可以的：

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

我說好啊看你能堅持多久

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

最后卻都不了了之了

可是幾個月后再看到他

細腰美臀大長腿

顯得更加自信了

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

而我只會給自己找借口

也許再這樣下去

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

促銷型

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

口號型

爭做行業(yè)領(lǐng)跑者／先賺它1個億／上天貓就購了／好物低價上京東等等

通告型

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

價值觀型

趁年輕，住好點／Just Do It／我的青春我做主／你值得擁有

自嗨型

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

惡搞型

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

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

改變食界，條條是道－衛(wèi)龍

買了就是朋友－故宮淘寶

擬人化文案

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

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

“?。∫前言缟舷碌牡耙矌砭秃昧恕?/p>

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

“您好，您的食材到了”

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

功能描述型

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

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

在同一個類型里，但是文案寫得比別人出彩或者內(nèi)容更能打動用戶而達到脫穎而出的目的：

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

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

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

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

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

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

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

（2）背景：背景上的脫穎而出，主要體現(xiàn)在色彩／形式／紋理等上面的一種差異化和對比。

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

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

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

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

紋理上：有紋理VS無紋理／無規(guī)律VS有規(guī)律／重復VS變化

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

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

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

品牌效應(yīng)：大品牌VS小品牌／有品牌VS無品牌／多品牌VS單一品牌／線上品牌／線下品牌／跨品牌合作（吾皇／暴走漫畫）

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

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

產(chǎn)品品質(zhì)：好品質(zhì)VS差品質(zhì)／有特點VS無特點／有后期修飾VS無后期修飾／有人知曉VS無人知曉。

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

功能差異：多功能VS單一功能／有差異VS無差異／有優(yōu)勢VS無優(yōu)勢

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

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

（4）點綴物：有點綴物VS沒有點綴物／點綴物合適VS點綴物不合適。

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

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

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

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

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

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

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

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

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

舉例：反差型（衛(wèi)龍）

舉例：惡搞型（歪瓜出品）

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

舉例：獨一無二型（天貓貓頭形象）

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

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

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

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

（3）意：主要是指品牌特性／理念意義／定位方向等，與眾不同。

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

天貓／三只松鼠／初語等都已經(jīng)形成了自己的形象特征，當你的頁面上出現(xiàn)了這些形象特征的時候，也就有了自己的優(yōu)勢：

理念意義：圖形代表的含義，靈感來源等

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

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

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

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

再比如，兒童節(jié)的活動設(shè)計，別人可能都走手繪可愛卡哇伊路線：

而我們走了小清新路線（其實也是因為怕侵權(quán)不好用模特之類的，再一個我們是兒童節(jié)／母親節(jié)／520一起做的活動，哈哈～）

（4）技：主要是指技術(shù)創(chuàng)新／跨界合作／手法創(chuàng)新等讓人感到新奇，任何時候，都是因為有了技術(shù)的進步才使得我們有了更好的體驗和更多的選擇。

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

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

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

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

三、總結(jié)

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

▼

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

▼

動態(tài)的比靜態(tài)的看起來厲害

▼

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

▼

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

▼

動手做的（比如手工和攝影）比動手畫的厲害

▼

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

▼

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

▼

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

▼

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

▼

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

▼

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

▼

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

 

歡迎關(guān)注小婷姐的微信公眾號「TTTink-D」，一個干貨與文筆俱佳的美女設(shè)計師：

微信公眾號簡介：專注開拓電商設(shè)計思維，不定期分享一些個人見解干貨，當然也會分享一些頂級創(chuàng)意、攝影、人生感悟方面的好文啦。

小婷姐的電商設(shè)計系列好文：

1. 《新人手冊！聊聊關(guān)于電商設(shè)計的那些事兒》
2. 《前輩經(jīng)驗！聊聊新人設(shè)計師最容易遇到的12個問題》
3. 《不怕沒靈感了！SALE 招牌的9種排版設(shè)計方法歸納（附案例）》
4. 《如何辨別一個BANNER的好壞？（附案例）》
5. 《電商干貨！BANNER圖設(shè)計之商品圖該怎么玩（上集）》
6. 《電商干貨！BANNER圖設(shè)計之商品圖該怎么玩（下集）》
7. 《感覺技不如人？聊聊設(shè)計師該如何正確認知自己的價值》
8. 《超長干貨！平臺電商設(shè)計師vs店鋪電商設(shè)計師哪個好？》
9. 《職場進階術(shù)！哪些性格特質(zhì)有助于設(shè)計師的成長和提升？》
10. 《設(shè)計師項目做到一半總是想要放棄怎么辦？（附問答合集）》
11. 《超實用！從人性的角度揭露電商BANNER圖設(shè)計背后的秘密》
12. 《解鎖新姿勢！我有一百種方法教你撩出滿意的BANNER》
13. 《用講故事的方法，掌握這5種BANNER 背景設(shè)計的套路》
14. 《不摳圖不合成，教你快速做出一張高格調(diào)的BANNER設(shè)計》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學習平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量180萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導航：http://hao.uisdc.com