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

一、專題頁設(shè)計(jì)的作用是什么？

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

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

就像一些影視方面的年度盛典專題頁設(shè)計(jì)，如下圖：

而賣貨類型的專題頁就比較常見了，比如各大電商平臺(tái)的活動(dòng)專題頁。

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

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

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

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

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

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

我簡(jiǎn)單給大家總結(jié)了一下：

左右對(duì)比形式的專題頁，常見于需要表現(xiàn)出PK或者VS對(duì)決類的專題頁設(shè)計(jì)。

S形的專題頁，這種形式的專題頁基本上不管什么需求的設(shè)計(jì)都可以嘗試，因?yàn)樗啾扔谄戒佒睌⒌男问郊炔粫?huì)顯得那么呆板，同時(shí)閱讀起來也很流暢，舉例：

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

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

常規(guī)樓層類型的專題頁，這種頁面會(huì)顯得比較簡(jiǎn)潔好把控，主要在于背景顏色要有深－淺－深－淺的節(jié)奏，同時(shí)每一個(gè)樓層都是單獨(dú)的模塊，有利于信息閱讀。

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

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

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

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

我給大家總結(jié)了下面9個(gè)規(guī)則和技巧，如果你經(jīng)常在做專題頁設(shè)計(jì)的卡頓了，或者不知道該如何將頁面優(yōu)化細(xì)化下去，也許下面這9個(gè)規(guī)則和技巧會(huì)對(duì)你有幫助。接下來我一個(gè)個(gè)給大家舉例解釋這9個(gè)技巧。

1、首尾呼應(yīng)

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

我們做專題頁一般都是從上至下，從搭框架到細(xì)化細(xì)節(jié)的順序，所以當(dāng)你做完專題頁的時(shí)候可以檢查一下自己是否做到了首尾呼應(yīng)，比如：

其好處就是，避免頁面太過單調(diào)，同時(shí)可以讓頁面看起來更整體。

2、巧用對(duì)比（明暗／粗細(xì)）

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

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

3、揚(yáng)長(zhǎng)避短

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

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

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

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

比如在這個(gè)專題頁設(shè)計(jì)里，因?yàn)闆]有很高質(zhì)量的商品圖，所以我在Banner頭部將這些商品按一定的節(jié)奏韻律感擺開后，故意將他們疊加到背景里，大家也就看不出這些商品的粗糙感了：

4、協(xié)調(diào)統(tǒng)一

服裝搭配的協(xié)調(diào)統(tǒng)一在我的理解里主要體現(xiàn)在3個(gè)方面：色彩／造型／比例／面料（材質(zhì)）。

同樣的，在專題頁設(shè)計(jì)里我們也會(huì)涉及到色彩／風(fēng)格元素／整體比例／質(zhì)感光影的協(xié)調(diào)統(tǒng)一，比如這些花一樣的飾品與這些花朵和樹枝的結(jié)合，再搭配上唯美的顏色，整個(gè)頁面清爽又耐看：

5、打破常規(guī)

穿衣打扮保守一點(diǎn)簡(jiǎn)單一點(diǎn)，可以做到不容易出錯(cuò)，但同時(shí)也會(huì)給人一種保守呆板的感覺，所以能通過一些特別的剪裁或者一些裝飾小心機(jī)就可以打破這種呆板的感覺，立馬整個(gè)人氣質(zhì)也會(huì)不一樣了，舉例：

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

而我們?cè)谧鰧ｎ}頁設(shè)計(jì)的時(shí)候也是一樣的道理，可以通過形來打破常規(guī)，也可以通過色來打破常規(guī)，舉例：如果你一直都是做的方方正正的頁面效果，那么不妨把他們傾斜試一下：

6、層次分明

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

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

7、化繁為簡(jiǎn)

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

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

同理，化繁為簡(jiǎn)在專題頁設(shè)計(jì)里也是一項(xiàng)很重要的基本原則，尤其是當(dāng)我們是當(dāng)我們做賣貨類的專題頁設(shè)計(jì)的時(shí)候，太繁雜的頁面會(huì)讓人非常躁，而且閱讀體驗(yàn)不是很好，適可而止的設(shè)計(jì)最為讓人舒服：

8、氣質(zhì)相投

我們平時(shí)常常聽到人說：

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

……

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

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

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

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

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

9、與眾不同

我們很多人是有點(diǎn)忌諱撞衫的，要不是因?yàn)楦F，誰愿意買跟別人一樣的衣服啊當(dāng)然是每個(gè)人都希望自己穿的衣服時(shí)獨(dú)一無二，全球限量版咯，這顯得自己多厲害多吸引眼球啊，人性使然，舉例：

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

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

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

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

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

總之都是在為雙十一做準(zhǔn)備，雙方也都在極力展現(xiàn)自己的優(yōu)勢(shì)和側(cè)重點(diǎn)，差異化出來了，也就都能成功地都吸引眼球了。

五、總結(jié)

在我看來，設(shè)計(jì)師其實(shí)一旦掌握了三大構(gòu)成這些基礎(chǔ)的設(shè)計(jì)知識(shí)，再加上懂人性善于觀察總結(jié)，任何行業(yè)則都是相通的。而這篇文章的意義在于，我看到過很多非常會(huì)穿衣搭配的設(shè)計(jì)師，但是當(dāng)他們?nèi)プ鲈O(shè)計(jì)的時(shí)候卻不知道如何下手，其實(shí)你把自己擅長(zhǎng)的穿衣搭配融合到你的設(shè)計(jì)里，就很容易了。

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

以上我就先總結(jié)這么多了，我們這次主題為“從服裝搭配的角度淺談專題頁設(shè)計(jì)”的文章就講完了，愿你們有收獲，還有一些內(nèi)容點(diǎn)我們不可能一次講完，留著以后慢慢講吧，這次當(dāng)作是一個(gè)預(yù)熱，我們下期內(nèi)容再見??！～

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

據(jù)說點(diǎn)贊有美容美顏的效果?。。?！不信你試試??！哈哈！～

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