到目前為止，我已經寫了好幾十篇關于Banner設計的文章了，目前應該還沒有人把Banner設計講出這么多門道出來吧（臉紅ing……哈哈）。但是，我今天想升級一下，不講Banner設計了，而是給大家講一下Banner設計的進階版——專題頁設計（做好專題頁的前提就是做好Banner設計，這也為什么我會在前面那么大篇幅講Banner設計的原因咯）。

一、專題頁設計的作用是什么？

專題頁一般有3類：信息展示類型／純賣貨類型以及兩者的結合。

所謂信息展示類型就是，它只是用來展示信息用的。比如誰誰獲獎了／誰誰又有什么新鮮玩意，又要舉辦什么大型活動了，想要告知大家，所以需要做一個專題頁公告天下。

就像一些影視方面的年度盛典專題頁設計，如下圖：

而賣貨類型的專題頁就比較常見了，比如各大電商平臺的活動專題頁。

信息展示和賣貨的結合，就是現在比較流行的一種專題頁了，相當于一邊解說介紹，一邊賣貨，增加了與用戶之間的互動和購買欲望，比如在時尚穿搭／護膚美容／吃喝玩樂等專題里用的較多：

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

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

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

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

三、專題一般都有哪些布局形式呢？

我簡單給大家總結了一下：

左右對比形式的專題頁，常見于需要表現出PK或者VS對決類的專題頁設計。

S形的專題頁，這種形式的專題頁基本上不管什么需求的設計都可以嘗試，因為它相比于平鋪直敘的形式既不會顯得那么呆板，同時閱讀起來也很流暢，舉例：

Z形的專題頁，這種形式的專題頁其實跟S形的作用是類似的，只是說這種Z形會比S形硬朗，更適合用作一些比較男性化的風格頁面或者品類里，比如電子器械／汽車／男士護膚／游戲等，舉例：

1字形的專題頁，有一種硬朗和厚重的感覺，這種形式的專題頁除非是有如下圖所示的這種高質量模特大圖或產品圖鎮樓，一般情況下很少用到，尤其是在賣貨類型的專題頁里，可能會顯得背景有點搶鏡了。

常規樓層類型的專題頁，這種頁面會顯得比較簡潔好把控，主要在于背景顏色要有深－淺－深－淺的節奏，同時每一個樓層都是單獨的模塊，有利于信息閱讀。

同理，樓層類型的專題頁還可以做一些一些細微的演變，比如從上至下，背景不做切割，始終是一個整體，只是保證中間的內容在一個安全數值以內就好了，比如京東的中間內容區域一般是990Px：

還有在原來的基礎上，在某一塊樓層里做一些排版小變化，比如切分成一小塊i一小塊的自由排版：

自由排版類型的專題頁，這種專題頁設計比較適合那些想走高逼格路線的時尚服飾類目，同時這種設計往往是看著簡潔，但是對設計師的排版功力要求比較高，不建議新手或沒什么功力的人嘗試：

四、做專題好比穿衣搭配，它們有哪些基本規則和技巧呢？

我給大家總結了下面9個規則和技巧，如果你經常在做專題頁設計的卡頓了，或者不知道該如何將頁面優化細化下去，也許下面這9個規則和技巧會對你有幫助。接下來我一個個給大家舉例解釋這9個技巧。

1、首尾呼應

說到服裝搭配，我們打量一個人會從頭看到腳，很多人都喜歡戴帽子／圍巾／頭飾等，如果這些上半身的裝飾物的顏色或紋理質感恰巧跟你下半身的鞋子或襪子的質感／紋理／顏色有一些呼應，那整個一身搭配就會感覺特別整體，甚至起到首尾呼應的作用，舉例：

我們做專題頁一般都是從上至下，從搭框架到細化細節的順序，所以當你做完專題頁的時候可以檢查一下自己是否做到了首尾呼應，比如：

其好處就是，避免頁面太過單調，同時可以讓頁面看起來更整體。

2、巧用對比（明暗／粗細）

跟服裝搭配一樣，一個人如果上下身穿的一樣寬松那整個人看起來就會非常矮胖，也就不美觀了，如果一身衣服都是暗色就會顯得壓抑不透氣，如果都是亮色又會顯得有點膩，有明有暗的搭配會更耐看更舒服，舉例：

那其實做專題頁設計也是一樣咯，頁面中要有對比，比如背景層次里明暗的對比，紋理質感的對比等：

3、揚長避短

完美的人或身材很少，大部分人都是有或這或那的缺點的，比如有的人可能上身長下身短，有的人可能上身瘦下身胖等等，有各種各樣的小問題，通過穿合適的衣服都可以得到解決。

比如，上身長下身短或者上身瘦下身胖的妹子都比較適合穿長款衣服或裙子，將不完美的地方遮蓋起來，同時把腳踝關節和小手臂這些很廋的地方露出來，整個人就顯得纖瘦纖瘦的啦：

那放到專題頁設計里是怎么一回事呢？這個要從2個方面來說了：

• 從設計師的角度來說，所謂揚長避短就是，每個設計都是有自己的擅長點和短板的，如果你是手繪厲害的設計師而在做光彩炫酷方面比較弱，那肯定還是盡量做手繪方面的設計會更得心應手；
• 從需求設計的角度來說，所謂揚長避短就是，找最合適的素材，選用最好的模特或商品角度，選用最合適的風格來執行你的設計，把所有的長處展現出來。

比如在這個專題頁設計里，因為沒有很高質量的商品圖，所以我在Banner頭部將這些商品按一定的節奏韻律感擺開后，故意將他們疊加到背景里，大家也就看不出這些商品的粗糙感了：

4、協調統一

服裝搭配的協調統一在我的理解里主要體現在3個方面：色彩／造型／比例／面料（材質）。

同樣的，在專題頁設計里我們也會涉及到色彩／風格元素／整體比例／質感光影的協調統一，比如這些花一樣的飾品與這些花朵和樹枝的結合，再搭配上唯美的顏色，整個頁面清爽又耐看：

5、打破常規

穿衣打扮保守一點簡單一點，可以做到不容易出錯，但同時也會給人一種保守呆板的感覺，所以能通過一些特別的剪裁或者一些裝飾小心機就可以打破這種呆板的感覺，立馬整個人氣質也會不一樣了，舉例：

一些開叉的長裙，或者露背長裙，就比完整保守的裙子看起來更具誘惑力一些。

而我們在做專題頁設計的時候也是一樣的道理，可以通過形來打破常規，也可以通過色來打破常規，舉例：如果你一直都是做的方方正正的頁面效果，那么不妨把他們傾斜試一下：

6、層次分明

我們經常會看到一些特別會混搭的時尚博主，他們能夠把很多衣服穿在身上又不覺得亂，一層又一層套在一起，反而覺得特別好看時尚，把人襯托的更加俏皮了，舉例：

那么，在專題頁設計里也是，這里主要涉及到2個方面的層次，一個是信息的層次層級有主次之分，另一方面是整個頁面的層級節奏，比如空間層次方面的近景中景遠景，再比如從頭部Banner到樓層內容部分的層次和層級等，舉例：

7、化繁為簡

穿衣搭配最忌諱的就是不管什么風格什么顏色的衣服都往身上套，不管多少首飾都往身上戴，會給人一種浮夸暴發戶的感覺。

而像下面這種搭配是不是看起來簡潔舒服多了呢？

同理，化繁為簡在專題頁設計里也是一項很重要的基本原則，尤其是當我們是當我們做賣貨類的專題頁設計的時候，太繁雜的頁面會讓人非常躁，而且閱讀體驗不是很好，適可而止的設計最為讓人舒服：

8、氣質相投

我們平時常常聽到人說：

• 誒，你怎么無論穿什么衣服都那么有氣質呀？
• 你穿這件衣服顯得很有氣質。

……

那么氣質到底是什么呢？在我的理解力它就是你給人傳達出的一種感官上和情感上的感受，比如說你是個很有個性的人，你看起來好卡哇伊，你看起來很嫵媚動人等等，都是氣質。

那么一個人他可能是可以hold住好幾種氣質的，比如他可以時而可愛，時而嫵媚，時而知性等，都是適合他的，但是突然你要他去穿朋克波譜風格的，他就搞不來了，那整個人氣質就不對了呀。

我之前寫過一篇論商品圖的氣質的文章，那么在我們的專題頁設計里同樣也涉及到氣質相投的問題，也就是你這個頁面適合什么風格，你這個賣貨頁面的品類適合什么風格，你這個品牌是什么調性的，都是有各種適合的氣質的，你如果氣質不匹配，可能最后給人的感覺就很怪異，比如你本來是國際大牌，要走高端路線的，最后你設計了一個清倉大甩賣的頁面氣質出來，那不是掉價嗎？

但是相反的，如果你本來是屌絲氣質的產品，卻試著走一下高逼格的風格，就效果好很多了，比如衛龍辣條模仿蘋果的氣質風格，這種從屌絲到高富帥的逆襲轉變和氣質反差給他帶來了不少話題討論和曝光量：

總之，這就好比，屌絲逆襲就很容易被人視作勵志正能量，贏得口碑，而高富帥若是想降低身價則會被人恥笑了，就是這么個道理。

9、與眾不同

我們很多人是有點忌諱撞衫的，要不是因為窮，誰愿意買跟別人一樣的衣服啊當然是每個人都希望自己穿的衣服時獨一無二，全球限量版咯，這顯得自己多厲害多吸引眼球啊，人性使然，舉例：

這是電影《時尚先鋒香奈兒》的劇照，在那個年代，所有的法國女人都是穿著一身過度修飾花花綠綠的衣服，顯得臃腫無比，而主人公可可卻選擇自己做了一件清寡的格子襯衣出席了晚宴，與周圍環境形成巨大反差，那么當然是她最吸引人注意了。

這個也是電影劇照，在一次舞會上，所有女人都是穿的白色衣服，蕾絲的，帶著頭飾，而主人公可可選擇自己做了一件黑色簡潔V領露背禮服，又一下子與其他人形成了巨大反差，想不脫穎而出都難了。

那么在專題頁設計甚至是所有的會涉及到跟競爭對手的設計里，都是希望自己的是與眾不同的啦，比如現在即將臨近的雙十一，阿里和京東都在搞宣傳，一個玩逼格，一個說人話，也就各自有自己的特點和與眾不同了嘛，涉及到營銷就要有差異化，如果大家都一樣還有什么玩頭呢？

比如阿里主要是聯合了眾多大牌一起來站臺，將自己的賣貨意圖展現的很明顯，同時也給消費者一種品牌可信賴，物品繁多，雙十一可以放心大膽買買買的感覺。

而京東，主要是走溫情路線，以快遞員為主角講訴他們的吃刻苦耐勞有責任心，來打動人心。

總之都是在為雙十一做準備，雙方也都在極力展現自己的優勢和側重點，差異化出來了，也就都能成功地都吸引眼球了。

五、總結

在我看來，設計師其實一旦掌握了三大構成這些基礎的設計知識，再加上懂人性善于觀察總結，任何行業則都是相通的。而這篇文章的意義在于，我看到過很多非常會穿衣搭配的設計師，但是當他們去做設計的時候卻不知道如何下手，其實你把自己擅長的穿衣搭配融合到你的設計里，就很容易了。

再一個設計做得好看，但是穿衣搭配一般的設計師也不少，如果你能把做設計的心得體會運用到穿衣搭配上，肯定也是會讓自己大放異彩的噠，沒準兒就增加了回頭率或者提高了自己的顏值也不一定啊，哈哈～

以上我就先總結這么多了，我們這次主題為“從服裝搭配的角度淺談專題頁設計”的文章就講完了，愿你們有收獲，還有一些內容點我們不可能一次講完，留著以后慢慢講吧，這次當作是一個預熱，我們下期內容再見??！～

（哦對了，以上除去部分我自己的專題頁設計外，還有部分專題頁設計來自花瓣，希望這些專題頁設計的作者如果看到這篇文章可以聯系我哈！～）

據說點贊有美容美顏的效果?。。?！不信你試試??！哈哈！～

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