考慮到我們都是做商業設計的正經人，商業的東西肯定就涉及到競爭了嘛，所以我們作為設計師不只是要會把頁面給設計出來，還應該學會讓自己的設計脫穎而出有競爭力，從而被更多願意掏腰包的消費者看到。
寫在前面
首先感謝站酷這個平臺，讓我的數十篇電商設計相關的文章能夠在這裡得到展示，這一年多來，我也在這裡認識了很多同行朋友，看到了大家的進步，也感受到了你們帶給我的動力，希望我能堅持把書寫完，哈哈，就說這麼多，接下來進入正題咯：
考慮到我們都是做商業設計的正經人，商業的東西肯定就涉及到競爭了嘛，所以我們作為設計師不只是要會把頁面給設計出來，還應該學會讓自己的設計脫穎而出有競爭力，從而被更多願意掏腰包的消費者看到，所以我們今天要講的話題是：“決戰雙十一，哪些技巧能讓你的專題頁設計脫穎而出？”
按照慣例，我先給大家列一個提綱咯：
一、專題頁由哪些部分組成？
二、如何讓你的專題頁設計脫穎而出？
1、從局部上分析如何脫穎而出
2、從整體上分析如何脫穎而出
三、總結
接下來我們一條一條來捋清楚（文章越到後面越精彩，結尾有彩蛋，大家耐心看完哦！！！～）：
一、專題頁由哪些部分組成？
（以下是以前提到的一個知識點，我在這裡為了方便大家理解後面的內容，所以再放一遍）
雖然我們現在可以看到各種樣式形式的專題頁，但是它們脫去那些華麗的外衣後，即使都是很基本的原型圖，我拿一個最基礎的專題頁基本型給大家看一下，大家就知道了。
一般來說，專題頁由這幾個部分組成：頭部Banner＋至少1個樓層模塊＋背景＋氛圍點綴物。如下圖所示：
而Banner是由哪些部分組成的呢？Banner組成要素包含4個方面：文案 、商品／模特、背景、點綴物（可有可無）。
而我在之前反覆強調過的，Banner的作用是：宣傳／展示／廣而告之／準確傳達信息。
其中頭部Banner我在前面寫過好幾十篇文章介紹了，大家應該都不陌生了吧，然後樓層模塊從上之下你想放多少個就放多少個，形式也可以多種多樣，最後的背景和氛圍點綴物跟Banner設計裡的是同理的，我在前面也反覆提到，這裡也不做過多說明咯～
二、如何讓自己的專題頁設計脫穎而出？
首先我們可以看幾張圖：
（1/2/3/4/5當中哪一個人物更加突出？是不是3號人物？）
（這些圓當中哪一個最突出？是不是紫色的最突出？）
所以我們應該知道，脫穎而出就好比寫作手法裡的對比，就好比平面構成裡的特異。
接下來我會從以下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（完全不知所云但是看起來很厲害的樣子的文案，超級大牌都愛用。。）
惡搞型
老闆跑路了／美工甩手不幹了等（歪瓜出品，我後面會再提到，因為它簡直是電商設計界的一股泥石流。。）
反差型文案(後面我會解釋舉例為什麼反差）
改變食界，條條是道－衛龍
買了就是朋友－故宮淘寶
擬人化文案
下面是一則日本烤雞肉串的廣告文案：
“那麼，我去當香蔥烤雞肉串去了”
“啊！要是把早上下的蛋也帶來就好了”
“我可不能在這種地方被吃掉”
“您好，您的食材到了”
這則文案就是通過擬人化的口吻，即讓人覺得新穎可愛，又讓人感受到其食材的新鮮。
功能描述型
保溼護膚一步到位／棉柔舒適超強吸附力／輕鬆舒適不變形等等，常用於詳情頁裡
瞭解完以上文案類型後，所以當我們想要自己的設計能夠脫穎而出，要麼做到在同一個類型（定位方向）的文案裡比別人寫的更出彩，要麼就換一種類型（定位方向）的文案去寫，而後者其實更容易起到脫穎而出的效果，舉例：
在同一個類型裡，但是文案寫得比別人出彩或者內容更能打動用戶而達到脫穎而出的目的：
比如如果都是促銷型文案，你寫“XXX週年慶特賣惠”肯定不如“XXX週年慶，全場滿100減50”這種文案有吸引力。
為什麼呢？因為對於這種促銷類型的文案你把實惠寫的越具體就越能讓用戶感受到真的是在打折，而不是乾癟癟的說你在做促銷活動，因為這樣用戶會很疑惑你到底能給他多少優惠，他心裡沒底就不敢放心大膽的買了。
換一種定位方向達到脫穎而出的目的：
比如衛龍作為一款屌絲辣條居然走蘋果這種高富帥的路線；
再比如故宮淘寶居然把那些高高在上的皇帝娘娘們塑造成一種賣萌的形象；
再比如大家都在宣揚正能量的時候，這個品牌的咖啡飲料卻走負能量路線；
以上關於文案部分，我們就講到這裡了，總之文案體現的是你的活動定位和策略，所以文案先於設計執行，並且它很重要很重要很重要。
（2）背景：背景上的脫穎而出，主要體現在色彩／形式／紋理等上面的一種差異化和對比。
色彩上：明亮鮮豔VS暗黑系／暖色VS冷色／多彩色VS無彩色。
比如，同樣是表達年輕，大部分人想到的應該是活力多彩的，而如果你用的是暗黑系的，那你就脫穎而出了。
形式上：扁平VS質感／繁雜VS留白／柔美曲線VS剛硬稜角／重複VS變化。
比如，衛龍作為一個賣辣條的品牌，無論是從產品的辣這個特性，還是它產品本身的基因來看，都應該走紅紅火火熱鬧低端路線的風格設計對不對？但他突然有一天開始走蘋果這種高富帥的大量留白高冷路線，大家的眼球立馬就被它吸引了。
紋理上：有紋理VS無紋理／無規律VS有規律／重複VS變化
比如，有些比較卡哇伊風格的頁面，如果能在背景上有一些相關元素或紋理的點綴，起到相互呼應的作用，就會比空白的背景有吸引力一些。
反之亦然，有些背景不適合放紋理，會顯得累贅或多餘，那麼空白背景就會顯得更有吸引力更舒服一些。
（3）產品或模特：產品或模特的脫穎而出主要體現在品牌效應／產品品質／功能差異等給人的感官感受。
品牌效應：大品牌VS小品牌／有品牌VS無品牌／多品牌VS單一品牌／線上品牌／線下品牌／跨品牌合作（吾皇／暴走漫畫）
比如，大品牌的產品比小品牌的產品佔據更多優勢，有品牌的產品比無品牌的產品顯得更可信更正規等，所以如果上升到品牌這個層面，僅僅只是設計的好看或突出並不會起到很大的優勢作用，只是錦上添花而已，品牌的影響力和口碑才是最主要的因素。
但是當2個品牌一起聯合，跨品牌做活動，就會比單一品牌產生更強的效應，達到1+1大於2的作用，比如家紡品牌和可口可樂的合作，在設計上也是沿用了可口可樂的經典女人曲線般的瓶身形象：
產品品質：好品質VS差品質／有特點VS無特點／有後期修飾VS無後期修飾／有人知曉VS無人知曉。
比如，同樣一款產品，你的產品圖看起來更清晰更乾淨或更有趣好玩更高檔肯定就會更吸引到相應的人群的注意力和購買慾望，這些都是會影響到你的頁面設計好壞的因素。
功能差異：多功能VS單一功能／有差異VS無差異／有優勢VS無優勢
比如如果都是護膚產品的專題頁設計，但是你的這款產品是有別人不具備的功能特性的，那麼就可以在你的設計裡通過文字排版或圖形描繪的方式表現出來，直觀的傳達給別人你的這些優勢和氛圍，就比干癟癟的將產品往頁面上一擺更具吸引力：
當然這個情況更適合單個產品的宣傳或者放在詳情頁裡。
（4）點綴物：有點綴物VS沒有點綴物／點綴物合適VS點綴物不合適。
這個同上面講的紋理類似，比如，有些比較卡哇伊風格的頁面，如果能在背景上有一些相關元素或紋理的點綴，起到相互呼應的作用，就會比空白的背景有吸引力一些。
（5）樓層： 這裡主要包含樓層內容和樓層形式2個方面。
樓層內容：內容新穎VS內容常規／內容豐富VS內容單調：
一般來說，在樓層內容裡如果插入一些好玩的遊戲，或者有一些視頻播放，再或者變著花樣給用戶發紅包和購物券，會比常規的商品列表展示的樓層更有讓人逛的慾望（不過這個都不止是設計師的事情了，而是運營／交互設計師／產品經理／策劃要去做的事情）。
樓層形式：形式新穎VS形式常規／形式貼合主題VS不貼合主題。
比如以穿搭建議的方式賣貨的專題頁樓層設計，大多數都是像左邊這樣，將一堆衣服按一定秩序堆放好，但是右邊這種形式呢？每個模特擺出一個字母的造型，讓人覺得有點搞怪，都忍不住想要跟著模仿造型了對不對？
2、那麼從整體上分析是指什麼呢？
整體上我們可以從型／色／意／技四個方面來探討如何做到脫穎而出這個問題：
（1）型：主要是指整體的形式／風格等方面要與眾不同，那麼跟前面的文案一樣，要想脫穎而出話，要麼就是在同一個類型裡你能做到你是最優秀的；要麼是跳出這個類型，或者跨界到不同的領域或定位類型裡去表現。
舉例：反差型（衛龍）
舉例：惡搞型（歪瓜出品）
（看完這家店的設計風格，整個人都要笑屎。。簡直是電商界的一股泥石流，哈哈。我也承認這家店成功的脫穎而出了，但。。我有點好奇這家店的美工走出了這家店鋪能不能順利找到工作。。除非他打算一輩子呆在這種同類型的店鋪裡，哈哈哈哈！！！）
舉例：獨一無二型（天貓貓頭形象）
自從2015年的天貓雙十一，第一次將所有的頁面都沿用貓頭的這個造型，就驚豔了全場，因為這個形象太討巧了，不僅成功地與他的品牌形象掛鉤，還非常有利於品牌延伸，這以後，但凡頁面裡出現這貓頭造型，就一定會聯想到天貓，因為他是獨一無二的。
當你擁有了某種獨一無二的東西，也就很容易脫穎而出了。
（2）色：主要是指色彩上的差異化，這個跟前面講局部的內容類似，比如：明亮鮮豔VS暗黑系／暖色VS冷色／多彩色VS無彩色（別人家都是明亮色系你可不可以嘗試暗黑色系呢？別人家都是暖色系，你可不可以嘗試一些冷色系呢？別人家都是誇張多彩絢麗，你能不能嘗試低調無彩色系呢？）
比如，同樣是表達年輕，大部分人想到的應該是活力多彩的，而如果你用的是暗黑系的，從另一個角度去詮釋年輕，那你比較容易就脫穎而出了。
（3）意：主要是指品牌特性／理念意義／定位方向等，與眾不同。
品牌符號：從品牌這個角度來說，每一個品牌形象都是獨一無二的，比如
天貓／三隻松鼠／初語等都已經形成了自己的形象特徵，當你的頁面上出現了這些形象特徵的時候，也就有了自己的優勢：
理念意義：圖形代表的含義，靈感來源等
比如，提到聖誕節，大家都會聯想到紅配綠，也會聯想到聖誕樹／雪地／聖誕老人／長筒襪對不對，所以我猜想你們的第一反應應該是搞比較基礎的堆疊效果吧？像下面這樣：
但有沒有想過像下面這樣提取一種基本型，然後巧妙地與自己的產品相結合呢？
定位方向：促銷VS趣味VS溫情VS苦情VS情懷（比如別人都走促銷路線你可以走趣味路線，別人走趣味路線你可以走溫情路線，別人走溫情路線你可以走苦情路線，別人走苦情路線你就走情懷路線，當別人都走情懷路線了，你走促銷路線，哈哈哈哈！！）
比如，今冬情人節那次，別人都走溫情路線，我們走了苦情路線，反響很不錯：
再比如，兒童節的活動設計，別人可能都走手繪可愛卡哇伊路線：
而我們走了小清新路線（其實也是因為怕侵權不好用模特之類的，再一個我們是兒童節／母親節／520一起做的活動，哈哈～）
（4）技：主要是指技術創新／跨界合作／手法創新等讓人感到新奇，任何時候，都是因為有了技術的進步才使得我們有了更好的體驗和更多的選擇。
比如以前沒有互聯網的時候，大家只能在線下購物，有了互聯網之後大家開始在PC上購物，後來移動個互聯網的發展和智能手機的普及和便利，大家又開始轉向移動端購物，現在Vr又出來了，以後指不定購物有多便利了。你搶先運用了新技術，你就佔有優勢。
舉例：前度時間很火的雙十一邀請函，就是一個活生生的例子，可以看下它的幕後製作視頻：
我在裡面看到，它分別涉及到腦爆＋前期構思＋手繪草圖＋攝影＋後期合成＋Vr技術＋threejs＋webGL的組合繪製3D場景＋渲染等技術環節。最終達到了刷屏的效果，吸引了幾乎所有互聯網人的注意力。
如果你也有這個技術，你的作品想不脫穎而出也難了（不過也只有BAT這個級別的大金主才花得起這個錢了）。
三、總結
看完以上所有的分析，你應該有一些頭緒知道該怎麼讓自己的專題頁脫穎而出了吧？另外我也看到現在電商設計行業普遍是這麼個現象：
頁面裡有視頻的比沒視頻的厲害
▼
動態的比靜態的看起來厲害
3D的比2D的看起來厲害
有場景合成的比簡單的商品堆砌的厲害
動手做的（比如手工和攝影）比動手畫的厲害
手繪的比非手繪的看起來厲害
有造型變化的比沒有造型變化的厲害
自由排版的比常規排版的看起來厲害
乾淨留白的比熱鬧促銷的看起來厲害
有文化底蘊的比沒文化底蘊的厲害
有故事的比沒故事的看起來厲害
不按套路出牌的比循規蹈矩的厲害
最！重！要！的！是！
將這篇文章看到最後還點讚了的人最厲害！！！
哈哈哈哈哈！！
我們下期再見！～
原文地址：https://www.zcool.com.cn/article/ZNDQzMzc2.html
作者其他精品文章：
閱讀更多 UI小志 的文章
