这样设计Banner，点击率更高 （三）
本文由竹子和玥玥共同整理撰写
常见的Banner比例和大小
Banner 通常为图文结合，横构图居多，当然也存在竖构图的Banner。Banner的比例会影响其视觉效果和排版方式。
（1）1:1比例
1：1的Banner面积较大，要求图片质量高。相对横构图来说，竖构图比例比较少见，主要用于更好地展示画面。文字内容不要过分影响到画面的展示。在实际的界面展示中，根据界面的需要，具体的尺寸比例上可以有少许的出入，总体满足接近1:1即可。
由于Banner面积较大，画面的空间也大，适合用于展示高质量的图片，如质量较高的摄影照片、产品图、高质量插画等等，氛围感强烈。用于一下子抓住用户的注意力，吸引他们的视线停留。
（2）8:6的比例
8:6也就是4:3，图片面积也还比较大的，便于展示精美的图片。
例如MIX这样的修图类的产品，对图片的要求比较高。
（3）8:5的比例
8:5的比例的Banner大小适中，可以承载比较多的内容。
（4）8:4的比例
8:4也就是2:1的比例。Banner看起来稍微扁一些，但是总体面积也是比较宽裕的。
（5）8:3的比例
8:3的比例之下，Banner看起来稍微扁一些，属于明显的横构图。
由于面积不算太大，对图片的质量要求相对低一些。可以使用素材合成图。由于图
画部分的要求降低，文字部分的排版比例相对有所提升。
（6）8:2的比例
8：2的Banner更扁一些，占得面积较小。跟面积大的Banner同屏时，通常信息层级上没有面积大的Banner级别高，通常不用在首页上，多用于次一级的界面。
可以多个Banner一起使用，或者搭配瓷片区等有很多图的页面。界面信息内容有很多的时候，也可以使用该比例的Banner，节约界面空间。
根据界面的整体风格，可以是圆角矩形，也可以是直角矩形。
（7）8:1的比例
8:1的比例，Banner面积极小。不会作为画面中的主Banner使用。通常使用在主Banner下面。由于面积极小，设计也相对简单，能美观地清晰传达信息内容即可。
图中，好好学习的8:1比例的Banner通常起到提示作用，由于面积小，Banner上尽量言简意赅地写明重点信息，可以引导用户点击跳转到详情页面。这种设计形式无限接近一个通知消息栏。所以适合在白底界面中穿插一条使用。
Banner排版方式
了解到Banner的几种常见比例之后，我们可以看出，比例主要是影响了Banner的高度。通常情况下，Banner都是一个高度小于宽度的长方形。那么我们再来学习一下Banner的文字排版形式感。
（1）左右排版
由于Banner大多高度小于宽度，所以左右排版是Banner排版中非常常见的方式。根据用户从左到右、从上到下的阅读习惯，设计师需要结合我们需要强调的信息内容，来排布元素的位置。
左文右图
通常，如果文字信息的级别更高，我们会更倾向于将文字信息放在更容易被优先读取的左边。由于文字比较重要，所以排版时需要注意文字的易读性，不要设计过度。
文字信息排列清晰，主要分为主标题、副标题，可能会有标签和按钮。图片主要占据右边的位置，不要影响到文字的阅读。
常见的左文右图版式下文字部分排版：
左图右文
图片信息的级别更高，我们会将图片信息放在左边。通常图片级别高的以电商类产品居多。因为需要展示模特图和重要的产品。文字设计可以更大胆一点，文字排版自由度高于左文右图。
常见的左图右文版式：
（2）居中式排版
居中排版是排版样式中非常常用的方式，几乎什么比例的Banner都可以采用居中的版式。
两边摆放元素，中间放文字
文字居中、元素放两边的版式，由于文字占据画面中间位置是比较空的，所以标题需要设计得很突出、很充实。通常标题文字会比很大，整个标题部分会有设计。
居中叠加色块，中间放文字
一般用于家居类产品的Banner。为了不破坏家居摄影的画面，选择这样的排版方式。文字通常不会太复杂，以简洁为主。
总结
文字居中，通常有一个主标题，有可能会有副标题。主标题字号较大，是最重要的信息内容。可以做一些设计细节的梳理让它更引人注意，比如字体重新设计、做上质感、做厚度等等设计手法。
除了主标题以外，有时候还会搭配副标题。副标题的信息层次明显低于主标题，字体的字重、字号大小都要明显弱于主标题。位置上通常位于主标题的上方或下方。可以加上一些设计细节，但是与主标题可以设计问题不同，副标题通常是在文字后面加上色块装饰。
（3）环绕式排版
文字组在画面正中间，相关元素围绕文字，形成环绕效果。可以有效地强调文字。
（4）上文下图式排版
上下盘版的Banner，文字依旧是是居中的。
优秀Banner案例分析
我们既要总结分析，也要看看周围优秀的案例，竹子为大家挑选一些不错的线上案例给大家观看。
（1）常规形式运用最为普及
常规形式的Banner 图也是最普及的，主要运用组合元素为图片层和轮播点，通过不同的滑动交互形式来做变化。通常是单纯的 Banner 图，轮播点、滑动等切换形式。图片本身为直角或者圆角，通栏或者分栏来呈现，这个需要结合界面的整体风格来定。
例如Moo整体界面都是偏圆的设计，所以Banner也使用了大圆角设计。
Moo
开眼APP整体界面比较锐利、有个性，Banner选择了锐利的直角样式，和整个APP的品牌调性符合。
开眼
毒物的Banner为了展示高质量的时尚摄影图片，使用了1:1的尺寸比例。为了给Banner更充足的界面面积，使用了通栏的设计。
毒物
轮播点的形式比较多样。最常见的是圆形轮播点，以及圆形和圆角矩形结合。
如果界面整体的风格偏直角，那么轮播点可以选择使用直角矩形。
爱奇艺的首页Banner，由于Banner左下有重要的大标题文字，所以轮播点位于右下角，给文字让出和足够的空间。
爱奇艺
咕米音乐用了数字加斜线的形式，由于该页面的Banner数量很多，安排了差不多11个，这样可以比较高效地展示Banner数量和当前是第几张。但竹子是不赞同banner中安排这么多数量的，因为大多数用户只是翻前面几张，后面几乎不看。
咕米音乐
东家使用了矩形轮播点。
东家
（2）自然而流畅的缩放切换
除了常规Banner以外，Banner 图的切换交互上也可以做做文章。流畅的交互形式和视觉切换体验，能带给用户舒适的体验。比如网易有道词典，Banner滑动切换时采用缩放过度的形式，来进行 Banner 轮播。视觉上自然流畅，操作体验十分舒适。
（3）背景色随着 Banner 轮播而变化
界面头部视觉表现为了提高用户关注度，利用深色表现更能体现空间感和衬托 Banner 效果。通常为品牌色进行衬托，也有很多产品会利用 Banner 进行取色，作为背景色的选择范围，这样更具融合性和视觉表现差异。背景色随着 Banner 轮播而变化，是比较普遍的一种设计方案，视觉体验感很好。
摩天轮票务
（4）异形Banner
方方正正的Banner不会出错，同时也很中规中矩。一些产品为了打破这种常规，出现了很多吸引眼球的异形Banner。常见的异形Banner主要是从视觉造型上做一些改变和突破，在整体界面中的布局还是固定的，这样不会增加太多工作量。
例如黄油相机的格调相对比较粉嫩年轻化，偏少女风格。头部Banner在常规Banner的基础上使用了比较活泼的异形。
饿了吗的异形Banner配合领红包活动做成了红色。还配有火锅插画和按钮引导。十分吸睛。
饿了吗
（5）微动效增吸引注意
动效在 Banner 图的设计中也有所运用。相较于静态的呈现方式来说，动态Banner更能引起用户注意。通常为单图呈现，这样能强化视觉焦点。
转转
支付宝
（6）视频的嵌入和融合
视频的运用也是比较常见的，主要为一些视频类的产品，如芒果TV、爱奇艺等等，还有一些电商类产品也会使用视频来展示商品或者主播带货等等。
视频嵌入Banner是在在保持原有 Banner 布局的基础上，将视频嵌入其结构中，目的是吸引用户的注意力。
此类视频通常为自动播放的形式，由于用户在未知场景，为了不造成干扰，一般为默认静音模式。
开眼
（7） 卡片叠加滑动提升轮播空间感
在探索手势操作上面，便捷度、流畅度、体验感都是至关重要的。滑动 Banner 过程中的体验感能带给用户对于当前内容的关注程度，便于操作的同时能引起用户的好奇心更是重中之重。
虾米音乐就设计得很好，卡片叠加带来视觉呈现的空间感，手势滑动流畅自然。
虾米音乐
总结
进入2021年了，我们会发现taobao取消了Banner设计，有设计师担心Banner会不会成为历史，事实上至少目前还不会，这依然是一个重要的营销入口表达形式，设计师需要既看设计趋势，也要认真实践。近期应该是找工作的高峰期了，我写了如何设计UI作品集系列的文章，可以去我的公众号看翻看往期的文章。
—
—
责任编辑：