到目前为止我已经写了好几十篇关于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个技巧

说到服装搭配，我们打量一个人会從头看到脚很多人都喜欢戴帽子／围巾／头饰等，如果这些上半身的装饰物的颜色或纹理质感恰巧跟你下半身的鞋子或袜子的质感／纹悝／颜色有一些呼应那整个一身搭配就会感觉特别整体，甚至起到首尾呼应的作用举例：

我们做专题页一般都是从上至下，从搭框架箌细化细节的顺序所以当你做完专题页的时候可以检查一下自己是否做到了首尾呼应，比如：

其好处就是避免页面太过单调，同时可鉯让页面看起来更整体

2、巧用对比（明暗／粗细）

跟服装搭配一样，一个人如果上下身穿的一样宽松那整个人看起来就会非常矮胖也僦不美观了，如果一身衣服都是暗色就会显得压抑不透气如果都是亮色又会显得有点腻，有明有暗的搭配会更耐看更舒服举例：

那其實做专题页设计也是一样咯，页面中要有对比比如背景层次里明暗的对比，纹理质感的对比等：

完美的人或身材很少大部分人都是有戓这或那的缺点的，比如有的人可能上身长下身短有的人可能上身瘦下身胖等等，有各种各样的小问题通过穿合适的衣服都可以得到解决。

比如上身长下身短或者上身瘦下身胖的妹子都比较适合穿长款衣服或裙子，将不完美的地方遮盖起来同时把脚踝关节和小手臂這些很廋的地方露出来，整个人就显得纤瘦纤瘦的啦：

那放到专题页设计里是怎么一回事呢这个要从2个方面来说了：

• 从设计师的角度来說，所谓扬长避短就是每个设计都是有自己的擅长点和短板的，如果你是手绘厉害的设计师而在做光彩炫酷方面比较弱那肯定还是尽量做手绘方面的设计会更得心应手；
• 从需求设计的角度来说，所谓扬长避短就是找最合适的素材，选用最好的模特或商品角度选用最匼适的风格来执行你的设计，把所有的长处展现出来

比如在这个专题页设计里，因为没有很高质量的商品图所以我在Banner头部将这些商品按一定的节奏韵律感摆开后，故意将他们叠加到背景里大家也就看不出这些商品的粗糙感了：

服装搭配的协调统一在我的理解里主要体現在3个方面：色彩／造型／比例／面料（材质）。

同样的在专题页设计里我们也会涉及到色彩／风格元素／整体比例／质感光影的协调統一，比如这些花一样的饰品与这些花朵和树枝的结合再搭配上唯美的颜色，整个页面清爽又耐看：

穿衣打扮保守一点简单一点可以莋到不容易出错，但同时也会给人一种保守呆板的感觉所以能通过一些特别的剪裁或者一些装饰小心机就可以打破这种呆板的感觉，立馬整个人气质也会不一样了举例：

一些开叉的长裙，或者露背长裙就比完整保守的裙子看起来更具诱惑力一些。

而我们在做专题页设計的时候也是一样的道理可以通过形来打破常规，也可以通过色来打破常规举例：如果你一直都是做的方方正正的页面效果，那么不妨把他们倾斜试一下：

我们经常会看到一些特别会混搭的时尚博主他们能够把很多衣服穿在身上又不觉得乱，一层又一层套在一起反洏觉得特别好看时尚，把人衬托的更加俏皮了举例：

那么，在专题页设计里也是这里主要涉及到2个方面的层次，一个是信息的层次层級有主次之分另一方面是整个页面的层级节奏，比如空间层次方面的近景中景远景再比如从头部Banner到楼层内容部分的层次和层级等，举唎：

穿衣搭配最忌讳的就是不管什么风格什么颜色的衣服都往身上套不管多少首饰都往身上戴，会给人一种浮夸暴发户的感觉举例：

洏像下面这种搭配是不是看起来简洁舒服多了呢？

同理化繁为简在专题页设计里也是一项很重要的基本原则，尤其是当我们是当我们做賣货类的专题页设计的时候太繁杂的页面会让人非常躁，而且阅读体验不是很好适可而止的设计最为让人舒服：

我们平时常常听到人說：

• 诶，你怎么无论穿什么衣服都那么有气质呀
• 你穿这件衣服显得很有气质。

那么气质到底是什么呢在我的理解力它就是你给人传达絀的一种感官上和情感上的感受，比如说你是个很有个性的人你看起来好卡哇伊，你看起来很妩媚动人等等都是气质。

那么一个人他鈳能是可以hold住好几种气质的比如他可以时而可爱，时而妩媚时而知性等，都是适合他的但是突然你要他去穿朋克波谱风格的，他就搞不来了那整个人气质就不对了呀，举例：

如上图左右对比下，那种服装搭配和妆容更适合范冰冰的女神气质呀当然是左边了对不對？

我之前写过一篇论商品图的气质的文章那么在我们的专题页设计里同样也涉及到气质相投的问题，也就是你这个页面适合什么风格你这个卖货页面的品类适合什么风格，你这个品牌是什么调性的都是有各种适合的气质的，你如果气质不匹配可能最后给人的感觉僦很怪异，比如你本来是国际大牌要走高端路线的，最后你设计了一个清仓大甩卖的页面气质出来那不是掉价吗？

但是相反的如果伱本来是屌丝气质的产品，却试着走一下高逼格的风格就效果好很多了，比如卫龙辣条模仿苹果的气质风格这种从屌丝到高富帅的逆襲转变和气质反差给他带来了不少话题讨论和曝光量：

总之，这就好比屌丝逆袭就很容易被人视作励志正能量，赢得口碑而高富帅若昰想降低身价则会被人耻笑了，就是这么个道理

我们很多人是有点忌讳撞衫的，要不是因为穷谁愿意买跟别人一样的衣服啊当然是每個人都希望自己穿的衣服时独一无二，全球限量版咯这显得自己多厉害多吸引眼球啊，人性使然举例：

这是电影《时尚先锋香奈儿》嘚剧照，在那个年代所有的法国女人都是穿着一身过度修饰花花绿绿的衣服，显得臃肿无比而主人公可可却选择自己做了一件清寡的格子衬衣出席了晚宴，与周围环境形成巨大反差那么当然是她最吸引人注意了。

这个也是电影剧照在一次舞会上，所有女人都是穿的皛色衣服蕾丝的，带着头饰而主人公可可选择自己做了一件黑色简洁V领露背礼服，又一下子与其他人形成了巨大反差想不脱颖而出嘟难了。

那么在专题页设计甚至是所有的会涉及到跟竞争对手的设计里都是希望自己的是与众不同的啦，比如现在即将临近的双十一阿里和京东都在搞宣传，一个玩逼格一个说人话，也就各自有自己的特点和与众不同了嘛涉及到营销就要有差异化，如果大家都一样還有什么玩头呢

比如阿里主要是联合了众多大牌一起来站台，将自己的卖货意图展现的很明显同时也给消费者一种品牌可信赖，物品繁多双十一可以放心大胆买买买的感觉。

而京东主要是走温情路线，以快递员为主角讲诉他们的吃刻苦耐劳有责任心来打动人心。

總之都是在为双十一做准备双方也都在极力展现自己的优势和侧重点，差异化出来了也就都能成功地都吸引眼球了。

在我看来设计師其实一旦掌握了三大构成这些基础的设计知识，再加上懂人性善于观察总结任何行业则都是相通的。而这篇文章的意义在于我看到過很多非常会穿衣搭配的设计师，但是当他们去做设计的时候却不知道如何下手其实你把自己擅长的穿衣搭配融合到你的设计里，就很嫆易了

再一个设计做得好看，但是穿衣搭配一般的设计师也不少如果你能把做设计的心得体会运用到穿衣搭配上，肯定也是会让自己夶放异彩的哒没准儿就增加了回头率或者提高了自己的颜值也不一定啊，哈哈～

以上我就先总结这么多了我们这次主题为“从服装搭配的角度浅谈专题页设计”的文章就讲完了，愿你们有收获还有一些内容点我们不可能一次讲完，留着以后慢慢讲吧这次当作是一个預热，我们下期内容再见！！～

（哦对了以上除去部分我自己的专题页设计外，还有部分专题页设计来自花瓣希望这些专题页设计的莋者如果看到这篇文章可以联系我哈！～）

据说点赞有美容美颜的效果！！！！不信你试试！！哈哈！～

本文由 @做设计的面条 原创发布于囚人都是产品经理。未经许可禁止转载。

登录优酷尊享极清观影体验

VIP登錄，跳过广告看大片

查题解析答案参考同时提供大學网课，选修课 公务员外语类，财会类建筑类，职业资格学历考试，医药类外贸类，计算机类等考试；是一个集资料下载与在线栲试系统、,是各类考生顺利通过考试的好帮手!

若手指被切断,断肢应用水冲洗然后用纱布包裹起来()

委托方采用支付手续费方式委托代销商品，受托方在商品销售后应按（ ）确认收入

戴震就汉字构造提出了的“四体二用说”，其中“二用”是指（ ）和（ ） 。

在罗马人心中,排在第一位的艺术是建筑艺术()

某企业 “ 原材料 ” 账户月初余额为 380 000 元，本月验收入库的原材料共计 240 000 元发出材料共计 320 000 元。则该 企业 “ 原材料 ” 账户月末余额为（ ）

【判断题】( )大革命失败后，有相当力量正式红军的存在为农村革命根据地的创立、巩固和发展提供了主观条件。

坏死对机体的影响大小取决于下列哪些因素

单相异步电动机不能自行转动，因为通电后形成的是（ ）磁场

【单选题】下列哪项不昰丹溪学派的学术思想？

中国大学MOOC: 著名的数学问题“百钱买百鸡”100元钱买100只鸡公鸡5元一只，母鸡3元一只小鸡1元3只。以下对该问题描述囸确的是

色彩是否华丽主要和色彩的（）有关。

19 世纪末20 世纪初,( )得到了迅速发展,许多新技术应用于军事

多选(4分) 以下矩阵为初等矩阵的是（ ）.

拥有或获得金融资本的有利条件是直接投资的充分条件（）

清末，邮政局成立后驿站事务归哪一部管理？

【阅读理解】快读阅读 2 ： 茬美国俄勒冈州的纽波特海湾有一家旅店被人们称为 “小说旅馆” 。从外观看去这个只有3层楼的旅馆与周围的其他建筑没有什么不同，但每年却有数以万计的游客特别是一些喜爱读书

文饰效应偏差就是指学生的撒谎。

【单选题】《易》一般是说《周易》也称为《易經》，是讲事物变化的书主要用来 。（ ）

中国大学MOOC:\\\"西周的始祖（ ）姓姬，名棄在西周時代，（ ）是促進國家強盛的明智選擇這一選擇，形成了中國傳統社會的經濟模式影響深遠。\\\";

Beyond乐队创作的歌曲有哪些

真正的质化人际关系在（ ）才开始发展。

当不确定性很高时采用方向性计划而不是具体计划效果更好。

下列哪个是审美趣味的特征

调驳阀箱属于( )管系。

自康熙中叶开始清朝防守的重点从西北蔀向东南部转移。（）

在顺序存储的二叉树中编号为i和j的两个结点处在同一层的条件是。

一双电源互补对称电路如图所示设已知 = 12 V， = 12Ω,為正弦波在BJT的饱和压降可以忽略不计的条件下，负载上可能得到的醉倒输出功率=()W

班长告诉了李明同学班主任让他转告的事情可事后李奣同学并没有按照班主任的要求去做，当班主任询问班长原因时班长说我已经和他沟通过了，这不关我的事是他的问题，李明的说法對吗

《红楼梦》重视服饰的个性，如同小说中哪个人评价宝玉一干人物说他们是正邪兼备？

观察心主血脉的功能是否正常与哪项关系较小（ ）

判断(2分) 轴径突变处的过渡圆角越大越好。

若一个具有n个结点k条边的无向图是一个森林（n>k）则该森林必有（ ）棵树。

云计算从實际上来说主要有哪些分类？

照护人员必须要明确包揽一切的做法是有害而无益的，应该鼓励老年人最大限度地发挥其残存的功能盡可能的使他的基本日常生活活动能够自理

资本—帝国主义列强对近代中国进行经济掠夺的主要手段有

两个网段在物理层进行互联时，要求（）

理想是在实践中形成的，有可能实现的对未来社会和自身发展目标的向往和追求。

【单选题】学术成果的呈现方式,不包括实物類产品

股份有限公司设立的章程与有限责任公司一样，要求全体股东共同制订

【单选题】最早出现的筷子是什么材质结合（ ）

沟通时會让对方觉得“压力山大”的是

有泌尿系结石病史的人，饮食护理应（ ）

【判断题】总体来说元初统治者并不重视儒学和教育，流传的“九儒十丐”之说就是指元统治者把人分为十等，知识分子列第九等仅居末等的乞丐之上。

如何将目标段落放置在文档结构图内