当前位置: 首页 >文章 > 10种banner版式的总结与分析
收藏
分享

10种banner版式的总结与分析

举报小梓的设计笔记小梓的设计笔记发布于 2018-08-037300阅读77点赞2评论
我们都知道在一个网站中,banner图片对于浏览者来说是非常重要的,尤其是电商banner,它的最主要目的是营销,是要让消费者有冲动去购买,这对设计的要求也就更高了。而企业网站也一样,一个合适的banner不仅能吸引眼球,同时也能让用户更好的理解产品及功能,反之如果这个banner不合适,那么就会导致整个网站都显得很普通。...

我们都知道在一个网站中,banner图片对于浏览者来说是非常重要的,尤其是电商banner,它的最主要目的是营销,是要让消费者有冲动去购买,这对设计的要求也就更高了。而企业网站也一样,一个合适的banner不仅能吸引眼球,同时也能让用户更好的理解产品及功能,反之如果这个banner不合适,那么就会导致整个网站都显得很普通。


现在的banner版式设计可以说是非常丰富多彩的,尤其是电商,各种花哨的效果各种吸睛,不过也有的电商banner做的特别清爽有趣,很有新意。接下来就把banner设计版式给大家具体分析一下吧!


01

重心型

重心型版式也称为居中型,重心型的banner容易让浏览者产生视觉焦点,让消费者一眼就能看到想要表达的,适合重点突出的文案或单个产品。


02

左右型

左右型版式,顾名思义就是把整个版面分为左右两个部分。可以文案在左,产品在右;也可以文案在右,产品在左。这都要看自己设计的需求去选择。一般左右型banner在文案的那一边都会加些装饰或者背景有些效果,已达到左右均衡,这样整个banner就会比较自然和谐。左右型在banner的设计中比较常见,尤其是企业网站的轮播图基本都是这种版式。


03

上下型

上下型版式,顾名思义就是把整个版面分为上下两个部分。可以文案在上,产品在下;也可以文案在下,产品在上。这都要看自己设计的需求去选择。因为banner的尺寸通常没有那么高,所以这种版式一般用的比较少。


04

倾斜

倾斜型banner给人一种偏个性的感觉,大多数倾斜的对象都是版面的装饰图形和文字等。一些律动感或时尚感比较强的产品会采用这种版式,同时这种设计也是比较别致和吸引眼球的。


05

满版型


满版型的banner一般以场景图像填充整个版面,加之以文字,文字一般在左右或者居中。这种版式的背景通常视觉传达比较直观,给人以大气舒展的感觉,同时视觉冲击力也比较强烈。


06

蒙版型

蒙版型的banner就是以图像在最下面,加之一个有透明度的蒙层,最后在最上层加上文字。这种banner设计也比较常见,无论是企业banner还是电商,用的都比较多,因为这种版式给人的产品代入感比较强。


07

曲线型


曲线型的banner一般以曲线为基础去编排图片和文字。这种版式一般在运动或者需要展现节奏和律动的产品中出现的比较多。如健身运动网站、汽车网站等。



08

对称型


对称型banner一般给人比较稳重大气的感觉。对称也分为绝对对称和相对对称,绝对对称一般用的比较少,因为绝对对称给人一种过于严谨和死板的感觉。而相对对称则比较灵活,同时也不失整齐稳重,所以用的比较多。


09

三角型


三角型的排版也比较常见,尤其是以三角形作为装饰性元素在版面中出现,给人以前后空间感比较强。正三角形是最具安全稳定因素的形态(如金字塔),而圆形和倒三角形则给人以动感和不稳定感。


10

四角型


四角型banner一般以四边形为基础去编排图片和文字,给人以严谨,规范的感觉,下图是四角型的一种,同时也用到了左右型、满版型设计。


提醒一下大家,上面的每种版式设计可能并非以一种表现形态出现,可能同时存在好几种版式形式。所以大家在分析banner的时候不要以单一的一种视角去分析,毕竟设计的灵活性是非常强的,所以大家也不要不局限于我上面所说的几种版式,可以发挥更多的创造力和想象力哦。希望今天的这篇文章对大家有帮助!


2条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,481人)

【4月】趣味MG动画制作训练营
距离开班仅剩12天31人已报名
【4月】零基础手绘插画训练营
距离开班仅剩12天57人已报名
电商海报设计训练营
距离开班仅剩40天23人已报名
猜你喜欢
白无常电商设计 - PS透明材质产品修图教程

2018-08-22

白无常电商设计 发表

白无常电商设计 - PS透明材质产品修图教程
做抖音短视频的底层逻辑

2021-10-27

小虎转载君 发表

做抖音短视频的底层逻辑
掌握这个技巧,直播带货翻10倍!

2021-10-28

小虎转载君 发表

掌握这个技巧,直播带货翻10倍!
微信打开外链之后的三个新机会

2021-09-18

小虎转载君 发表

微信打开外链之后的三个新机会
短视频种草的5种表达方法

2021-07-31

小虎转载君 发表

短视频种草的5种表达方法
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了48,550
并提交了249份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证