寫在前面

到目前為止葛峻，我已經(jīng)寫了好幾十篇關于Banner設計的文章了，目前應該還沒有人把Banner設計講出這么多門道出來吧（臉紅ing巴比。术奖。。哈哈）轻绞，但是我今天想升級一下采记，不講Banner設計了，而是給大家講一下Banner設計的進階版－專題頁設計（做好專題頁的前提就是做好Banner設計政勃，這也為什么我會在前面那么大篇幅講Banner設計的原因咯）唧龄。

因為愛美之心人兼有之嘛，所以我們這次干貨的主題名稱就選定為“巧用9大服裝穿搭技巧奸远，助你輕松搞定專題頁設計既棺！～”好了。

在開講之前呢然走，我依然是給大家列了一個提綱：

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

二芍瑞、專題頁由哪些部分組成晨仑？

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

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

五答捕、總結(jié)

接下來我們一個個內(nèi)容單獨來講：

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

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

所謂信息展示類型就是，它只是用來展示信息用的持际，比如誰誰獲獎了／誰誰又有什么新鮮玩意沃琅，又要舉辦什么大型活動了，想要告知大家蜘欲，所以需要做一個專題頁公告天下益眉，比如一些影視方面的年度盛典專題頁設計：

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

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

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

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

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

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

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

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

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

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

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

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

常規(guī)樓層類型的專題頁跳座，這種頁面會顯得比較簡潔好把控端铛，主要在于背景顏色要有深－淺－深－淺的節(jié)奏，同時每一個樓層都是單獨的模塊疲眷，有利于信息閱讀禾蚕。

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

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

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

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

我給大家總結(jié)了下面9個規(guī)則和技巧，如果你經(jīng)常在做專題頁設計的卡頓了跷叉，或者不知道該如何將頁面優(yōu)化細化下去逸雹，也許下面這9個規(guī)則和技巧會對你有幫助：

1、首尾呼應

2性芬、粗細對比

3峡眶、揚長避短

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

5植锉、打破常規(guī)

6辫樱、層次分明

7、化繁為簡

8俊庇、氣質(zhì)相投

9狮暑、與眾不同

接下來我一個個給大家舉例解釋這9個技巧吧。

1辉饱、首尾呼應

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

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

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

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

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

那其實做專題頁設計也是一樣咯竿滨，頁面中要有對比佳恬，比如背景層次里明暗的對比捏境，紋理質(zhì)感的對比等：

3、揚長避短

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

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

那放到專題頁設計里是怎么一回事呢芹缔？這個要從2個方面來說了：從設計師的角度來說坯癣，所謂揚長避短就是，每個設計都是有自己的擅長點和短板的最欠，如果你是手繪厲害的設計師而在做光彩炫酷方面比較弱示罗，那肯定還是盡量做手繪方面的設計會更得心應手咯。

從需求設計的角度來說芝硬，所謂揚長避短就是蚜点，找最合適的素材，選用最好的模特或商品角度拌阴，選用最合適的風格來執(zhí)行你的設計绍绘，把所有的長處展現(xiàn)出來。

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

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

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

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

5斋否、打破常規(guī)

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

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

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

6胖笛、層次分明

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

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

7瘫絮、化繁為簡

穿衣搭配最忌諱的就是不管什么風格什么顏色的衣服都往身上套，不管多少首飾都往身上戴填硕，會給人一種浮夸暴發(fā)戶的感覺麦萤，舉例：

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

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

8涝滴、氣質(zhì)相投

我們平時常常聽到人說：“誒你怎么無論穿什么衣服都那么有氣質(zhì)呀？”“你穿這件衣服顯得很有氣質(zhì)”等胶台，那么氣質(zhì)到底是什么呢歼疮？在我的理解力它就是你給人傳達出的一種感官上和情感上的感受，比如說你是個很有個性的人诈唬，你看起來好卡哇伊韩脏，你看起來很嫵媚動人等等，都是氣質(zhì)铸磅。

那么一個人他可能是可以hold住好幾種氣質(zhì)的赡矢，比如他可以時而可愛，時而嫵媚阅仔，時而知性等吹散，都是適合他的，但是突然你要他去穿朋克波譜風格的霎槐，他就搞不來了送浊，那整個人氣質(zhì)就不對了呀，舉例：

（左右對比下丘跌，那種服裝搭配和妝容更適合范冰冰的女神氣質(zhì)呀？當然是左邊了對不對唁桩？）

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

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

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

9、與眾不同

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

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

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

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

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

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

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

五闲坎、總結(jié)

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

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

以上我就先總結(jié)這么多了咒吐，我們這次主題為“從服裝搭配的角度淺談專題頁設計”的文章就講完了，愿你們有收獲属划，還有一些內(nèi)容點我們不可能一次講完恬叹，留著以后慢慢講吧，這次當作是一個預熱同眯，我們下期內(nèi)容再見Ｕ乐纭！～

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

據(jù)說點擊下面的按鈕有美容美顏的效果Ａ馀ｇ愿丁！循未！不信你試試Ｏ菝ā！哈哈的妖！～