小志熬夜整理，如果喜欢小志分享辣么请高往下滑动，伸出大拇指在“阅读”旁边的，拇指图样处为小志点起一盏明灯让小志知道还有你陪着我”| 来源：材料来源互联网，小编进行整理发布对啊设计师(duiasheji)
　文章为作者独立观点，不代表大不六文章网立场
duiasheji对啊网平面设计/UI设计/室内设计学习平台热门文章最新文章duiasheji对啊网平面设计/UI设计/室内设计学习平台&&&&违法和不良信息举报电话：183-
举报邮箱：Copyright(C)2017 大不六文章网您的位置：
电商运营：如何设计一期高水准的专题导购
作者：付茹
好的内容可以促进自传播，从提供货品到提供多媒体的消费素材，对这个商品对应的生活场景进行表达，给用户更好的代入式购物体验。
今年3月，阿里2016商业服务生态峰会大会主题是赋能商家，天猫接下来的运营重点，从货品运营转为内容运营和用户运营。在淘宝移动端，几个内容型栏目入口UV暴涨2倍以上。包括：微淘、淘宝头条、有好货、达人淘等。用户习惯先消费内容，再消费商品。
几乎每个消费式或内容型app都有专题栏目，像唯品会app，就是以每个商家为单位做成的专题;近期，天猫首页更是增加一整屏以专题导购的形式的页面。
专题导购是指专门针对某一类型元素、具有共同点的商品，或是同一主题下的商品推荐。目的是以内容主导消费，区别于简单的商品陈列，用场景式、有趣的或流行趋势等内容的多样呈现方式，引导用户有逛的感觉。下面主要以女性时尚电商类app为例，教你如何写一期高水准的专题导购。先了解策划专题的思路构架：
专题导购策划思路(服饰类)
第一部分：app的专题导购研究
1.优秀app推荐
推荐以下5类app研究。选择研究它们的理由：购物类app以女性用户为主，具有优质丰富多样的主题内容，而非仅仅商品瀑布流罗列,其次购物类排名优先的app，最后是具有专门的专题版块。
(注：以上排行根据ASO114网站的top榜实时数据)
推荐1：天猫，TOP13，同类淘宝/唯品会等，这类app拥有巨大的流量，内容更新频率较高.
推荐指数：★★★★★
推荐2：么么搭，TOP792，同类app穿衣助手、D2C、明星衣橱、有货、最搭、see等。这类垂直类女性时尚电商类app是目前最多的种类，以内容为导向，下载量不一定很大，但设计和文案较优秀，包含编辑主题、专题导购等，也值得学习推敲。其中最搭app为唯品会旗下app,么么搭和穿衣助手强调搭配性、D2C和有货是设计师和潮牌类，而see是帮助用户找同款。
推荐指数：★★★★★
推荐3：礼物说，TOP48，同类app半糖/什么值得买等.种类齐全，以生活场景类居多，比较有意思的玩意偏多，主题模板较固定。
推荐指数：★★★
推荐4：网易严选，TOP43，同类app必要等.以大牌的制造商为噱头，强调健康品质、高性价比的商品，并提供部分产品定制化等优质服务。不过目前主题较少，内容多偏生活类。
推荐指数：★★★
2.以天猫品牌街为案例
2.1 banner
品牌街的精选板块banner以错开两列形式，其他板块以横屏+3个商品图的形式，并且banner具有固定模板。从精选点击其他板块会跳转，像进入另一个频道，每个主题是以单店或媒体站的内容为单位。
2.2 专题部分
天猫精选专题主要以商品+模特平铺在背景图为主，没有商品瀑布流，全是展示场景，或以同类商品聚类，或以商品3D图平铺摆放陈列，图文很好地相结合，且整体篇幅不会过长，内容比较聚焦，每一款商品都有设计摆放，比较精美，很丰富，视觉效果很赞.
清凉之风：/s/Fdx7r?tm=2dd538
情人节的花样浪漫：/s/gCMBr?tm=af8274
12星座金牌女友：/s/c6z7r?tm=35204e
西门大嫂：/s/6gz7r?tm=8eb6a0
2.3 具体案例-袁姗姗教你叠穿吊带
链接：/s/BVX7r?tm=02f6cd
页面展示长度：12屏+
调性：底色纯白，以杂志感+图文配字的形式，以明星和日韩模特相结合，整体风格较为日韩系
版头图：占以一整屏，印有LOGO标志-Rayli，文字疏密得当，重点突出明星”袁珊珊”&“江疏影”，突出内容教学内容“N种穿法”，模特比较醒目，且符合”吊带“主题。
【形式】3组明星组合排比+6组达人支招+以点带面引出达人支招，全篇围绕“吊带”这一主题，中心明确，且内容很丰富。从明星穿吊带，过渡到达人穿吊带，都是以吊带为内容扩散开的。在做专题的过程中，往往某一个点很难充实整个主题，因此需要由此话题带动到其他话题，这样使整个专题内容更丰富。缺点是由明星传达到达人支招缺少过渡性的词语。
(3组榜样+搭配tips)
(6组达人支招)
【内容】教学类+吊带品类多种穿搭方式
以明星穿搭作为切入点，然后将教学内容定为”性感的吊带“”叠穿法，内容非常集中在一种品类的一种穿搭方式，素材很切合题目，且推荐的款式与明星和达人的衣服款式和色彩很类似，真正让用户感受到，这套穿着好看，我就打算买一套，也能提高连带率。
【模板】重复模板组合+对话框和小图案+动态光点引导
由3组明星和6组达人的版式看是重复利用的，在变化中又有相同点，只是商品的摆放位置随意变动。其次增添一些对话框和小图案点缀，如星星、外星飞船等，画面较丰富有趣。如果模特图较少，3D图为主可以采用这种形式，增添一些配饰点缀，画面感也比较美观，也有整体的穿搭风格。每个商品3D图配上动态光点引导点击，并且留白，商品摆放错落有致。
【文案】教学式+明星/热点效应
首先标题“袁珊珊”等借助明星效应，作为女星都会传的搭配激发女星用户至少点击了解的心态;“逆袭”、“飙升””焕然一新“等好的词语暗示这些搭配是让你更好的搭配;其次在教学中“切记”等运用错误不好的示范提醒用户搭配的正确方式。
第二部分：实操案例+操作步骤
好的专题导购需要对生活的敏锐观察力，并且对商品非常熟悉了解，在日常的生活中，包括逛实体店/网购等，多留意一些设计元素，了解下流行趋势和明星穿搭等，这样会更容易获得灵感。某个服饰类目的元素是常见的主题导购，但由于这种内容经常写很难再写出新意，其次有些特色元素并不多见但也值得一写。遇到这种情况怎么办呢?下面大家来看一个案例。
【背景说明】：某个服饰类app一个集合店频道做的一个主题。正好有几款比较靓丽的柠檬裙，光做这几款又有些单调。连衣裙本身是一类好卖的品类，其中一款又卖的特别好但其他几款反而不怎么出销量，主要是曝光度低流量较少;
第1步：理清思路，定专题方向
根据上述情况，确定以柠檬裙为主要元素做一期专题，以点带面，增加其他水果元素。
也可先观察其他app或公众号的优秀内容，激发思路。
第2步：搜集资料、搭建框架
搜集来源：百度/微博/微信/时尚类网站等
搜集资料的过程中，发现D&G今年秀场就有这款柠檬裙，且10几位明星都穿过这类裙子，连狗狗的服饰、包装设计等都印有柠檬元素，可见裙子的火爆程度。因此确定内容为火爆今夏的柠檬裙。
第3步：整理资料、完善内容
在整理商品的资料过程中发现，这些商品上印有的水果图案有一些比较抽象，难以识别清晰，因此增加一个互动小游戏：猜数量赢小礼品。
第4步：提设计需求
根据搜索资料和商品情况，最后确定内容：结合当下各大明星的柠檬裙热潮，引出柠檬裙系列商品，增加其他水果元素印花，制作一个由火爆的柠檬裙引发的印花元素主题。
第5步：修改并制作完成
在制作过程中，发现内容太多，或头重脚轻，则删除部分内容，让整个主题更协调。
第6步：推送文案设置
第7步：审核检查、后续数据监测和总结
审核检查主要包括商品的点击是否跳转/链接是否错误，文章是否有明显的错误说法，图片尺寸问题等。这样一篇优秀的专题导购就完成了。在活动当天，发现第二天有其他活动预热，价格均高于制作的价格，这是立即调整商品价格，提前购买，能起到一定的作用。当然最好是提前了解其他活动和商品的价格。最后对整期专题总结好的和不好的，并不断优化总结，并可以将好的专题模板进行存储。
【具体成品】
1. 标题使用疑问句，吸引点击;顶部图突出有奖竞猜，告知用户往下拉还有活动
2. 利用明星效应，突出主题”火爆二字”
(10+以上明星也爱穿)
3. 时尚大咖秀场更印证其流行程度。比起面料等，爱美的女性更关心流行时尚和好看的程度。
(D&G秀场商品)
4. 自然过渡到想要主推的服饰，点击购买。进行联系，丰富内容，扩充主题，以点带面。由柠檬裙相关的樱桃/菠萝等等相关元素，只要是满印商品均可进行联系推荐。
(以点带面过渡)
5.增加有奖竞猜活动，设计互动，提高用户活跃度增加用户粘性;呼应顶部图，让用户有往下拉的欲望，吸引逛更多的商品。
(互动设计)
6.用户互动情况：这道题目的回答竟有很多种，让专题变得更有意思。
第三部分：专题注意事项和Tips
制作主题导购的过程中有一些注意事项和小技巧，如下：
【注意事项】
1.篇幅长短，一般视app的具体情况，过短内容不够丰富;过长会显得冗长，用户没有耐心看。
2.色调统一和谐，与内容相符。会出现整个专题颜色过多，或留白太空，都需要调整。
3.注意banner和主题内容和调性统一，专题题目和文案内容统一，以免偏差太大。
【小技巧】
1.增加flash动图，往往能第一眼就吸引用户;或是讲述故事的动图，让专题页可以像微信公众号文章一样有趣。
2.增加互动设置，让主题关注度和分享次数增加，从而提升流量曝光度。
3.结尾的跳转banner，可以链接到运营群微信公众号、店铺或频道等，提高流量或宣传推广。
4.创意类的主题更引人注目，可以以营销推广为重点，参考以下案例。
案例1：横屏案例-手机本身是一件可以旋转的工具，因此可以跳脱屏幕，设置有趣的画面。
案例2：情感类讲故事-引起用户共鸣
5.需要对商品非常了解，注意模板的收集积累，以便部分内容可以调整运营。一方面，挑选商品对运营往往是很大的考验，对商品不熟悉很难选出合适的款，或者想到专题也很难找到对应的商品，这样很浪费时间;另一方面，往往一个好的运营是需要对生活的敏锐观察，这样才能更了解用户的需求，并且素材用起来很顺利。
6.将内容板块固定下来，按照期刊的形式周期更新。这样节省制作成本，也能形成规模，让用户更记得住。
7.注重文案、banner、推送技巧训练.
作者：付茹(个人微信号fruit0223)，坐标上海，擅长案例搜集，目前正在找工作，欢迎牛逼公司勾搭挖人～
(转载请保留)
互联网的一些事，已超50万小伙伴关注！不沉的骨头：本篇帮你解析Banner 中的构成元素，包括版面分割、版面布局、文案排版、配色和细节表现。每个方面都有丰富的案例和实战操作方法，特别实用的电商设计好文，一起来收！
案例来源于网络。
Banenr 五重奏
1-版面分割
2-版面布局
3-文案排版
5-细节表现
一、版面分割
什么是版式分割
版式分割是指在有限的版面空间里用图形或图片把整个版面分割为2个或者多个部分（列如上下或左右）并分别在左或右配置人物或标题等，把构思与计划以视觉形式表达出来，这样会让你的设计更有创造性。
在设计中的作用
将呆板单独的一个版面分割为多个版面，在视觉上面有了一定的引导性，同时通过各个版面的面积大小也可以明确当前设计的主次，更具有对比性，并且使得画面感性而有活力。
平时看到或用到哪些版面分割形式
以下几种类型的分割都是由一个形状通过面积和位置的变化使分割版面的。
分割形式都是由直线构成、它让设计严肃、理性起来，但有时也显得呆板生硬。
不知道大家有没有注意2015年京东的双11设计就是直线分割形式，让人非常的理性。
下面都是倾斜的分割，倾斜的角度和位置变化都会给视觉不同的感受：
倾斜分割让版面更具速度和动感 在运动/促销/游戏设计中常使用，倾斜的方向不同也会给人有下滑或上升的感受。
由三角形的面积、位置、数量的变化分割成不同版面：
三角形是一个具有稳定性的形状，同时也具有一定的视觉引导。通常会给人时尚的、尖锐的、暴力刺激等感受
由圆形来分割版面，圆形使版面Q版、欢乐：
不同于尖锐三角形的圆形它外形光滑饱满会让人感觉可爱、灵动，让画面更有亲和力。通常在母婴、欢乐这种主题较为常见。
&&共8页: 1
??????????您好，欢迎来到！
当前位置：&>&&>&超实用！5个帮你快速进阶的电商BANNER 设计技巧
超实用！5个帮你快速进阶的电商BANNER 设计技巧
11:41:05&&
人气：405次&&评论(0)
所属标签：
　　今天这篇好文把电商Banner 的设计方法都说得七七八八了，如何用图案提升节奏感+用装饰活跃氛围；分割背景怎么做；大色块背景如何配色等等，全是电商Banner 常见的技巧。值得一提的是文中案例非常丰富，能大大降低新手的学习难度。　　　　哈喽大家好！已经很久没有更新分享了，没有啥好的点子了。该分享的都分享的干净了，那为什么现在整理这些分享给大家呢。　　　　还是希望能帮助大家更快的了解的一些技巧，另外也是有一些新的想法想和大家交流。　　　　01）Banner 5宝　　　　图案图形节奏感　　　　装饰碎屑气氛足　　　　分割背景更活跃　　　　背景颜色大色块　　　　终极宝　　　　02）案例改稿分享　　　　是不是你也会出现这些问题：　　　　画面脏　　　　页面空　　　　细节不足　　　　一、图案图形节奏感　　　　图案指的什么　　　　图案相比大家都知道，也或多或少用过。图案放大可以变得大气，缩小也可以很精致。　　　　而Banner中经常会出现的图案大都是几何形状的重复或旋转得到的图形，用来做为背景的纹理来丰富背景的细节感。有时候有人经常会说背景里少了点什么，下次你不妨尝试一下用用。不是一定要用，如果你需要可以试试效果呢。　　　　图形指的什么　　　　有人可能会问了，图案和图形的区别是什么呢。图案是通过复制平移得到的，而图形可以通过复制平移和循环放大某个形状得到的图形。图形比图案的节奏感往往会更强一些，图形需要手动去调整和复制，可以做更多的差异化重复。而图案则是规律性更好。　　　　图案的应用　　　　图形的应用　　　　在这样一个背景纯白的视觉上面，大胆的使用单个倾斜长条复制得到的背景图形，与模特姿态和五彩缤纷的元素组合起来巧妙的产生了有节奏感。　　　　二、装饰碎屑气氛足　　　　Banner设计中经常用到会有彩礼飘带、矩形、三角形、红包外形、横条等装饰。　　　　案例中都具备图案、图形，密集的点点图案使背景更有细节、圆形的多个复制的图案让画面更饱满，飘起来的装饰是不是也有大有小。　　　　三个需要注意的方面　　　　1）有大有小　　　　最基本的基础，因为大小产生空间感、节奏感，如下图左1　　　　2）别克隆　　　　别克隆的意思就是不要所有元素都重复的使用，案例中的三角形有描边的、填充的、几何体，元素更丰富了，但适可而止。如中间图　　　　3）有深有浅　　　　案例中三角形的颜色有深浅看到了吧，这样做是让画面不会很平没有远近感觉。如图右1　　　　三、分割背景更活跃　　　　有人问我这个Banner用什么分割呢？圆形、矩形？当场我就愣住了，只想静静。这个你自己想用什么分割都可以呀，不同的分割给人不同的视觉感受。搞清楚你想要的就知道用什么了。　　　　因为它在Banner设计中的确是很有效果的，所以我们不仅需要实践，还要进行对比分析，这一我们才会成长的更快嘛。　　　　一个案例来演示下，同一主题不同分割的应用。　　　　矩形的分割应用　　　　△ 无分割　　　　△ 有分割　　　　在这里举例矩形的分割，倾斜的会更加利落一些。还有别的方式我就不一一举例了，大家　　　　多留意观察和收集（案例只是来举例分割的其他方面我就没有调整）　　　　圆形、三角形的分割应用　　　　△ 圆形　　　　△ 三角形　　　　圆让人看起会有圆滑、包容的感受，而三角形是干净利落到底的感受。形状的大小、位置，在文案后面还是模特（商品）后面，都是可以变动的。不同的地方感觉会不一样。　　　　背景的分割会让你的画面变得有层次，多尝试就会有慢慢对分割有一定的认识和感受。　　　　四、背景颜色大色块　　　　第四宝色块　　　　大面积色块的应用，在Banner设计中特别明显。也是非常有效，天猫、淘宝、京东等这些国内电商平台的活动经常是以色块背景为主。色块在很久之前就很流行，作为一种风格。在大色块背景上面，白色的文案、图案就成为了视觉焦点。在色块背景上应用类似时尚的波普元素，画面节奏感就出来了。　　　　用色块背景的时候该注意什么　　　　最重要的就是配色了，颜色尽量不要超过三种。模特或产品的颜色不要和背景颜色跳跃太大，列如上面的案例背景是蓝色，那么其它的颜色可以是青色、紫色、黄色搭配起来会比较舒适。可能你会说黄色和蓝色相隔那么远，黄色是和任何颜色都可以很好的搭配的，所以你会看到官方的Banner图中出现黄色的利益点、小色块。　　　　如果你用不好对比色、互补色、近似色等这些配色理论。那我们就把这些简化成2个点　　　　01）暗色配亮色、亮色配暗色　　　　02）深色配浅色、浅色配深色　　　　暗色配亮色、亮色配暗色　　　　暗色和亮色没有规定说哪一个颜色就是暗色或亮色，如果非要说那就是黑和白了。某一个颜色暗和亮是可以控制的，就像是颜色深浅。但是我们以饱和度最高的情况下，从最基本的红橙黄绿青蓝紫来说，如果它们对比起来就产生了暗和亮的。　　　　这里的分类表明的不是绝对的，因为一个蓝色非常亮，但是如果和黄色比起来是不是蓝色相对暗了呢。，每个颜色都有它最亮的色值，当然不会超过白色和黑色。白黑才是最亮和最暗的。就像 如果这个世界没有瘦子那么就不会有瘦子一样。　　　　所以配色要配的舒适，有时候很多小伙伴会误入歧途，亮色搭配不行，他还是尝试亮色搭配。下次不妨用暗色试试哦。　　　　深色配浅色、浅色配深色　　　　从中间开始往上走颜色越来越深，反之越来越浅。深浅配色是指一个颜色由明度和饱和度来控制颜色，然后进行配色。　　　　五、Banner 终极宝！设计师终极绝招！　　　　养成10分钟1次Ctrl+S 的好习惯。　　　　Banner5宝回顾总结　　　　图案图形让画面变得节奏感　　　　背景分割没有特定的形状，而是看你需要什么形状　　　　配色切勿亮色配亮色、暗色配暗色　　　　优秀的设计案例还有很多这个需要大家平时的采集和观察，更多的思考你会发现更多的空间。
热门活动：
阅读:405次
网友评论&登录后发表评论，让更多网友认识您！实战好文！帮你做出优秀电商Banner的五个方面（超多案例）
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
实战好文！帮你做出优秀电商Banner的五个方面（超多案例）
不沉的骨头：本篇帮你解析 中的构成元素，包括版面分割、版面布局、文案排版、配色和细节表现。每个方面都有丰富的案例和实战操作方法，特别实用的电商设计好文，一起来收！
往期设计好文回顾：
案例来源于网络。
Banenr 五重奏
1-版面分割
2-版面布局
3-文案排版
5-细节表现
一、版面分割
什么是版式分割
版式分割是指在有限的版面空间里用图形或图片把整个版面分割为2个或者多个部分（列如上下或左右）并分别在左或右配置人物或标题等，把构思与计划以视觉形式表达出来，这样会让你的设计更有创造性。
在设计中的作用
将呆板单独的一个版面分割为多个版面，在视觉上面有了一定的引导性，同时通过各个版面的面积大小也可以明确当前设计的主次，更具有对比性，并且使得画面感性而有活力。
平时看到或用到哪些版面分割形式
以下几种类型的分割都是由一个形状通过面积和位置的变化使分割版面的。
分割形式都是由直线构成、它让设计严肃、理性起来，但有时也显得呆板生硬。
不知道大家有没有注意2015年京东的双11设计就是直线分割形式，让人非常的理性。
下面都是倾斜的分割，倾斜的角度和位置变化都会给视觉不同的感受：
倾斜分割让版面更具速度和动感 在运动/促销/游戏设计中常使用，倾斜的方向不同也会给人有下滑或上升的感受。
由三角形的面积、位置、数量的变化分割成不同版面：
三角形是一个具有稳定性的形状，同时也具有一定的视觉引导。通常会给人时尚的、尖锐的、暴力刺激等感受
由圆形来分割版面，圆形使版面Q版、欢乐：
不同于尖锐三角形的圆形它外形光滑饱满会让人感觉可爱、灵动，让画面更有亲和力。通常在母婴、欢乐这种主题较为常见。
分割在设计中的应用
通过对版面的分割并且采用了倾斜性的分割形式，然版面立刻活跃起来、更加有节奏感。另外通过2快几乎相等的面积的对比色配色更大的加大了画面对视觉的冲击。
上面的设计通过圆的外形来分割页面，文案和画面信息我们能知道这是有关于宝宝的促销设计。圆的外形更容易给人亲和力，使人更容易接纳。它的细节更在于在于圆本身的细节把圆形更生动和具有层次感，而不单单只是一个简单的形状。
不规则的形状分割版面比单纯的几何形状分割更有创造力，它营造的氛围十足。所以大家常常会看到优秀的设计中会出现书本、盒子等。
如果没有了版面分割
通过对图片版面分割的还原，我们不难发现没有版面分割的图片失去了对比、节奏感、氛围这些方面的视觉感受。即使它在标题排版上很优秀，但版面分割能让它表达的更好。
采用三角形的分割形式让版面更具有刺激和对立的感觉，在失去了版面分割之后变成了普通的一个设计，所以这就是版面分割带来的作用和价值。
具象的版面分割
案例中的盘子、黑板让版面产生了分割，只是不像几何那样更加纯粹的分割版面。但是我们也不能忽视它在设计种分割版面的作用。即使设计师但是没有这个考虑，我们也要记住每个元素在画面中都会有它的作用。而不单单只是表面上面的盘子、黑板。
直线分割案列：
倾斜分割：
三角分割：
圆形分割：
版面分割回顾总结
1-版面分割使设计有层次、活跃、节奏感
2-版面分割不单单只是几何形式
3-具象的物体分割版面会更具有趣味性和创造力
优秀的设计案例还有很多这个需要大家平时的采集和观察，更多的思考你会发现更多的空间
下面我们来看下日常设计中的版面布局
二、版面布局
什么是版面布局 ？
将你确定需要放置的文案、人物、产品安排到版面上的某一块区域。另外可视化信息元素在版面布局上调整位置、大小，使版面达到美观的视觉效果。在布局过程中，我们可以遵循的常见原则，正常平衡—亦称”匀称”，多指左右、上下对照形式。
注意，这里我们必须遵循突出重点、平衡谐调的原则
布局我们需要注意哪些事情？
归纳——将内容分成几个区域，相关内容都聚在一个区域中。之后就按照你布局去寻找符合版面布局的方向、空间，比如人物的姿势、产品的的角度。
留白——不要把Banenr 排得密密麻麻，留出一定的空间。减少压迫感，毕竟Banenr 图片本身就不大。
平时看到或用到哪些版面布局方式：
设计万千，变化的只是它的色调、品质、纹理、细节、角度等。
左右结构的布局，文字在左或右。它是在Banenr 版面布局中经常出现的，其主要的特点是视觉上面比较清晰容易分辨、清爽直白。
左中右的版面布局相比左右布局来说是丰富了许多、层次感也从2到3，不过左右是文字还是人物和产品要注意的是一定要保证信息的可正常阅读，不要影响信息的传达。
上下结构从案例中大家能看的出来，模特不怎么符合这种版面布局。相对于商品而言就显的合适多了。上下布局通常也是比较少见，因为比较难掌控。
中心布局视乎在今年比较流行，可能是因为它比较容易出效果，也比较容易才受到很多设计师的喜爱。与其它版面布局不同，它以中心开始布局向外扩张。而且大多数这类布局的中心是模特。可能会跟左中右布局混淆，左中右是3个区域都是各自对应的内容，而中心布局则都是以版面中心点居中布局。
日常版面布局
我们可以看出案例采用了左中右的版面布局，而且模特的大小对比很大，人物的局部放大冲击力也很大。这样更容易创造出空间感，而且人物、文字、背景分割之间都有一个前后的关系哦。
大家第一眼容易认为这是左中右布局，其实它跟左中右的布局还是有很大差别的。它的大标题都是中间加模特或者产品，有点像一些logo中图片当字母的手法。会比单独使用文字的效果更好些。
案例欣赏-左右布局：
案例欣赏-左中右布局：
案例欣赏-上下布局：
案例欣赏-中心布局：
版面布局回顾总结
1-常见布局有 左右、左中有、上下和中心
2-不同的布局不用的需求，大家多尝试不是件坏事
3-版面的布局的有不同，合适才是最好的
下面我们来看下日常设计中的文案排版
三、文案排版
文案排版要遵循的规律
我们视觉阅读的习惯是从上至下、从左至右的顺序，除了根据特别板式需要的倾斜、透视等排版方式。大部分情况下还是使用左对齐、居中、对齐排版方式。不管什么排版方式，只要适合你版面走向的就可以尝试。
很多设计师习惯是边加内容尝试找到合适的排版，这样很容易导致一个问题，就是我们需要用大量的时间来调试各种各样的排版方式。这点大家应该深有体会，我们的时间很多时候都花在元素位置的摆放、大小调整、颜色调配上了。
我经常是根据先前思考的版式分割和版面布局来决定排版方式的。
平时看到或用到标题排版方式
以下几种常见的标题文案排版方式：
排版在Banenr 的应用
通过画的线来看，案例用到了右对齐排版，使得画面左边的视觉整齐一致，由于画面右边的内容随意性，所以在文案的大小和长短根据右边视觉配合图像走势，充分的融入版面设计中去。
为了让大家看的更清楚，我把排版还原到未倾斜时。我们可以容易的看成它是居中排版，所以不管是向左上角倾斜还是右上角都是为了让设计更有创造力，但排版的本质不变。
倾斜角度不要超过45°，否则影响视觉效果。
自由型的排版方式会更容易有效果和趣味性，不走平凡路。但是会容易制造出“空”。大家看那几个黄色圆，用来填补制作出来的“空”。所以每一种方式都不是完美的，需要我们设计师去完善它。
案例欣赏-左对齐
案例欣赏-右对齐
案例欣赏-居中对齐
案例欣赏-自由型
文案回顾总结
1-排版方式要符合画面的走向
2-文字倾斜角度不要超过45°，否则影响视觉效果
3-排版方式要充分的融入画面中去
下面我们来看下日常设计中的配色。
在这里只是大概的说下我平时的配色方法和案例解析，大家真的想要学好色彩搭配，建议大家去买本色彩相关的书看。会更加的详细，有些东西不是几个案例几句话就能明白的，更重要的是大家平时工作的尝试。
我常用配色工具：
工具路径：ps——窗口——扩展功能——kuler
ps自带的配色工具，有时候实在想不出怎么用什么色搭配另外一个颜色的时候，可以试试。
当然工具是我纠结和搭配不好另外一个颜色的时候用的，效果还不错哦。主要还是参考优秀的作品配色
常见配色技巧
常用配色技巧——对比
在12色相环上面，一种色相与其补色左边或右边的色相构成对比色关系。如黄色与蓝色和红色，这样的配色比补色搭配的排斥感要弱一些，显得较为和谐。
其它的色系分类就不细说了，还是建议大家通过书籍了解会更加详细。
看看对比色案例：
我的对比色案例解析：
1. 分割版面，左边的设定蓝色以及相关素材
2. 加入对比色红色以及相关素材，记得要有颜色不同明度和纯度的层次哦
3. 加入文案和人物，也同为对比色素材
4.加上头部顶光提高亮度和相关点缀，左边的是蓝色右边色红色
配色回顾总结
1-色调有明度和纯度的变化更有层次
2-多观察和采用优秀的设计上面的配色
3-大师不是一日练就，要不断学习
下面我们来看下日常设计中的细节
五、细节表现
我们日常在浏览页面时，经常会为一些优秀作品的细节所惊叹。这些细节表现有的看似非常不起眼，但是设计作品之间的差距，有时往往就是这些不起眼的细节决定的。
“细节决定成败”这句名言所有人都听过不论是任何行业，设计工作当中更是不变的真理，需求方的眼睛和感觉总是非常敏锐的，一个页面没有得到需求方的认可，但他们又说不出什么理由，这个时候就是细节问题了。
那么什么是细节呢？
我们平时口中或者他人口中念叨的细节：
细节表现01-字的领域
在前面我们已经讲过了文案的对齐方式，所以在设计当中我们一定要严谨。通过看蓝色条文案另外一行与一行的间距要把握的得当，它们的间距是几乎相等的。要留有呼吸的节奏。这就是我们细节的表现。
标题的颜色与文字统阴影
1.标题黄色与背景粉红色是明显的一个对比色的搭配，只是颜色的纯度稍弱一些。所以在工作中标题颜色的搭配我们不妨尝试用主色调的对比色、互补色、近似色调配试试。
2.阴影让文字更加的立体有层次感了，处理文字在页面设计的时候任何元素都是需要加阴影让它们更加的生动又生命力，即使在小的元素。
细节表现02-层次
页面设计需要有层次感，如果设计中缺乏层次感的时候就会显的单调或无力。层次感有很多，例如模特一大一小、远景近景、色彩的层次等。
中心正面的人物与背面的人物形成了鲜明的层次对比关系，另外飘絮这些也有大有小拉开了层次关系。
模糊的东西总会给人一种很远的感觉，所以案例的背景稍作模糊处理，与标题人物都拉开了很大的层次。
不管是在图形上面的层次和颜色上面的层次都做的很好。红色和蓝色是决定的对比色所以层次明显。
另外要说的就是颜色的冷暖对比，蓝色冷而红色暖，所以颜色对比非常好。
细节表现03-质感
有时候我们会形容一个优秀的设计它很有质感，大家有没有想过这些质感是表现在哪里？质感难道就只是说是杂色么？
通过上面的4个案例来看，无论是文字上面的木纹、像素格叠加还是背景上面图案叠加它们都是质感细节的一种表现手法。如果去掉了这些纹理、图案，那它不就只是一个纯色了么那还谈什么质感呢。顶多是一个渐变。
细节表现04-光影
光影可能很多人都掌握的不熟练，有光的地方就有影。有逆光、环境光这些都让我们的设计更加的自然和真实。正确的理解和使用光影就很重要了。
熟练的运用光影会对我们的页面才更高的效果提升。
注意的是光影的颜色一定要与页面的颜色来选取不然就会很花哨。
细节表现05-留白
关于留白大家都很清楚，做设计千万不要把页面上面都填的满满的否则会一点呼吸空间都没有。
你可以把用元素的大小对比来丰富空间，但是绝不是越多越好。
全部回顾总结
1-什么样的版面分割来搭配什么样的画面布局和排版都需要，大家多在工作中碰撞和尝试，世上没有一个绝对做设计的公式和流程。
2-不管是什么文章和教程都只是温习或提示你，真正的学习是通过书籍和自身的经历来提高自己。
3-内容我们一时无法消化和运用，但是可以多尝试。我也在不断的尝试着、思考着如何有突破，不管是在版面、排版、细节等方面。谢谢大家！
欢迎关注我的个人公众号“三根设计骨”
「超实用的UI设计自学指南」
自学姿势：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量160万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
我们的团队
大家在关注