这样设计Banner,点击率更高Homepage recommendation
1年前Publish
72422
|
52
|
1098
内含大量截图和视频转的GIF去对案例进行配图说明。


已经2021年。我们大部分设计都集中在移动端APP设计上,所以竹子今天写的文章也主要对移动端的Banner设计进行总结思考。



1. 常见移动端Banner 的视觉表现形式

Banner 在运营场景中是非常常见的,使用非常广泛。通常会以轮播的形式展示,这也是导航的形式之一。Banner使用在产品中,可以带给用户传达需要重点传播的内容。比如活动信息和官宣咨询等。美观度和抢眼程度也很高。

为了能引起用户更高的关注度,Banner 在视觉层的表现上面也在不断的创新。除了 Banner 设计创意、构图、配色等视觉层面发挥以外,在表现形式上分为静态、动态、视频等。

 

(1)静态 Banner 

静态的Banner是最常见的,在设计效率还是技术落地都是最便利的方式。Banner本身是 静态的图片格式,在产品中分为单图展现和多图切换。



(2)动态 Banner 

动态 Banner 相较于静态Banner,更容易引起用户的关注度。我们在设计动态 Banner 的时候,在重点元素、行动按钮等关键的元素使用动态的表现方式,用来强化重点信息。


动态 Banner 通常以单图展示居多。这是因为动态 Banner 可以引起很高的关注度,如果太多的动效Banner在同一屏界面上,反而让用户眼睛无所适从,过于花哨了的效果反而引起用户的反感。


转转



(3)Banner中嵌入视频

随着短视频的热度越来越高,视频嵌入到轮播广告的方式也越来越多。比较常见的的表现形式为,默认出现在首个 Banner 中,可以关闭播放。此类广告通常为静音模式,此时设计师要考虑到用户打开的场景可能是在办公室内,也可能是晚上安静的卧室内,刺激的声音会增加用户的不适。这样的设计细节,降低用户了在未知场景中的使用干扰,带给用户更加友好的体验。是设计师应该随时考虑的问题。

除了上面提到的视频嵌入Banner,在一些影视类产品可能会采用多个视频轮播的形式,不过这种应用场景相对较少,比较特殊。



(4) 背景Banner

前几年也出现了一些打破常规表现形式的轮播广告形式,例如3D翻转、元素位移等等复杂的视觉效果,现在很多过于繁琐花哨的表现手法逐渐很少看到了。取而代之的是更加简洁高效能传达信息的Banner。比较常见的形式是将Banner至于底层背景的位置,其他图标和小图浮于Banner之上,制造出特殊的视觉层次感。那么这些视觉效果为什么这么好,却使用的少了?因为Bannerde 本质是用最短的时间吸引用户产生点击行为,而不是纯粹的炫技。



2.Banner 在界面中的视觉表现

打开我们手机中的APP,你会发现banner的样式各异,尺寸也各异,那么这些尺寸选择有什么讲究吗?

影响Banner布局的因素较多,例如 Banner 本身的比例、大小,单个还是多个Banner,是通栏还是分栏,是独立的Banner还是需要与背景形成对比,等等因素都有可能对Banner的视觉表现造成影响。

 

(1)Banner的常见比例

Banner 的比例影响高度值的控制。在计算的过程中我们通常取能被 4 整除的数值。目前的移动产品中,一些APP去掉了首页Banner的设计,只有在活动期间才会出现Banner入口。这也可以看出,Banner对于不同类型的移动产品的作用和功能是有明显差别的。

一些类型产品比较强调Banner图,预留给Banner的面积不减反增。如视频类、格调较高的电商类、展览类等等产品,还是会使用面积较大的Banner,比如竹子经常用看的野兽派、造作这类格调家居的APP,本身需要高质量的图片吸引用户的视觉关注。大尺寸的Banner会带来更多的视觉冲击力。



一些类型产品减小甚至直接去掉了Banner图的位置,整个界面显得更加紧凑、充实。例如一些学习类、听书类,甚至一些日常电商产品等等,更偏向于面积较小、样式简单、文字很大的Banner。,所以选择banner的比例,和大程度和产品的类型有直接关联。



(2)轮播点Banner和分栏Banner

Banner 加轮播点的方式是最常见的。界面中只显示一个Banner,轮播点的数量显示这个区域的Banner数量,并显示当前正在播放的是第几个Banner。分栏Banner可以看到部分还没有播到的Banner,已经暗示了用户还有其他的Banner,所以通常不带有轮播点提示了。



(3)Banner和通栏Banner

通栏和分栏的差别,这个因素最影响 Banner 呈现出的大小。Banner不是越大越好,要考虑到产品内容布局和信息层级区分,还要让整个界面看上去舒适。所以,界面的整体风格和布局样式是会影响 Banner 布局样式的,二者需要相得益彰,而不是喧宾夺主或是格格不入。



通栏的样式可以左右通栏,也可以上下通栏,我们可以根据整体界面的需要来选择具体样式。通常做成通栏之后,Banner面积会更大一些,尤其是上下通栏的面积展示会更大。



(4)有背景层的Banner样式

为了更有层次的展现Banner,有些产品还会在Banner背后加上背景层,用来呼应Banner内容、丰富头部的层次感。背景层搭配Banner的形式也是多种多样的。



虾米音乐的背景层使用的是图片,而且背景层的图是固定的,不会随着Banner的改变的。

摩天轮票务的背景是一个矩形色块。随着Banner的切换,背景层颜色会切换成和Banner颜色相近的色彩。



爱彼迎的Banner直接作为背景层,置于卡片下方,面积很大。马蜂窝的Banner本体面积较小,悬浮与底色色块之上。二者都有较强的空间层次感。



3.常见的Banner 比例

Banner 通常为图文结合,横构图居多,当然也存在竖构图的Banner。Banner的比例会影响其视觉效果和排版方式。

 

(1)1:1比例

1:1的Banner面积较大,要求图片质量高,主要用于更好地展示画面。由于画面在展示中的重要性较高,文字内容不要过分影响到画面的展示。在实际的界面展示中,根据界面的需要,具体的尺寸比例上可以有少许的出入,总体满足接近1:1即可。



由于Banner面积较大,画面的空间也大,适合用于展示高质量的图片,如质量较高的摄影照片、产品图、高质量插画等等,氛围感强烈。用于一下子抓住用户的注意力,吸引他们的视线停留。由于空间充组,文字的排版上,比较自由,可以融入平面设计的一些排版方式,例如尖叫设计的Banner。



(2)8:6的比例

8:6也就是4:3,图片面积也还比较大的,便于展示精美的图片。由于高度略有降低,Banner为横构图。



例如MIX这样的修图类的产品,对图片展示的要求就比较高,所以Banner面积也较大。图文之间的排版关系也为左右构图常用的版式。



(3) 8:5的比例

8:5的比例的Banner大小适中,可以承载比较多的内容。可以选择直接展示图片,也可以融入排版做成图文结合的Banner。



(4)8:4的比例

8:4也就是2:1的比例。Banner看起来稍微扁一些,但是总体面积也是比较宽裕的。



由于面积相对宽裕,所以也是可以用于展示比较大的照片。也可以承载较多的文字内容,例如MONO的这个Banner。



(5)8:3的比例

8:3的比例之下,Banner看起来稍微扁一些,属于明显的横构图。面积上比较紧凑了,不太方便展示特别大的图。可以使用插画Banner或者使用一些素材拼接的方式。



由于面积不算太大,对图片的质量要求相对低一些。可以使用素材合成图。由于图画部分的要求降低,文字部分的排版比例相对有多提升。



(6)8:2的比例

8:2的Banner更扁一些,占得面积较小。跟面积大的Banner同屏时,通常信息层级上没有面积大的Banner级别高,通常不用再首页上,多用于次一级的界面。



可以多个Banner一起使用,或者搭配瓷片区等有很多图的页面。界面信息内很多的时候也可以使用该比例的Banner,节约界面空间。由于面积很小,所以文字所占面积比较大,文案方面要言简意赅,通常有主标题和副标题。

根据界面的整体风格,可以是圆角矩形,也可以式直角矩形。



(7)8:1的比例

8:1的比例,Banner面积极小。不会作为画面中的主Banner使用。通常使用在主Banner下面。由于面积极小,设计也相对简单,能美观地清晰传达信息内容即可。



图中,好好学习的8:1比例的Banner通常起到提示作用,由于面积小,Banner上尽量言简意赅地写明重点信息,可以引导用户点击跳转到详情页面。这种设计形式无限接近一个通知消息栏。所以适合在白底界面中穿插一条使用。



4. Banner 排版方式

了解到Banner的几种常见比例之后,我们可以看出,比例主要是影响了Banner的高度。通常情况下,Banner都是一个高度小于宽度的长方形。那么我们再来学习一下Banner的文字排版形式感。

 

(1)左右排版

由于Banner大多高度小于宽度,所以左右排版式Banner排版中非常常见的方式。根据用户从左到右、从上到下的阅读习惯,设计师需要结合我们需要强调的信息内容,来排布元素的位置。



  • 左文右图

通常,如果文字信息的级别更高,我们会更倾向于将文字信息放在更容易被优先读取的左边。由于文字比较重要,所以排版时需要注意文字的易读性,不要设计过度。

文字信息排列清晰,主要分为主标题、副标题,可能会有标签和按钮。图片主要占据右边的位置,不要影响到文字的阅读。


常见的左文右图版式下文字部分排版:



  • 左图右文

图片信息的级别更高,我们会将图片信息放在左边。这样的排版通常图片级别高,所以以电商类产品居多,因为此类产品需要展示模特图和重要商品。文字设计可以更大胆一点,文字排版自由度高于左文右图。



常见的左图右文版式:




(2)居中式排版

居中排版是排版样式中非常常用的方式,几乎什么比例的Banner都可以采用居中的版式。 



  • 两边摆放元素,中间放文字

 

文字居中、元素放两边的版式,由于文字占据画面中间位置是比较空的,所以标题需要设计得很突出、很充实。通常标题文字会比很大,整个标题部分会有设计。

 


  •  文字和主体都居中

文字作为主体,周围搭配元素,一同居中。起到强调重点的作用。



这种手法在电商类Banner中很常见。



  • 居中叠加色块,中间放文字

一般用于家居类产品的Banner。为了不破坏摄影的画面,选择这样的排版方式。文字通常不会太复杂,以简洁为主。



总结

文字居中,通常有一个主标题,有可能会有副标题。主标题字号较大,是最重要的信息内容。可以做一些设计细节的梳理让它更引人注意,比如字体重新设计、做上质感、做厚度等等设计手法。

除了主标题以外,有时候还会搭配副标题。副标题的信息层次明显低于主标题,字体的字重、字号大小都要明显弱于主标题。位置上通常位于主标题的上方或下方。可以加上一些设计细节,但是与主标题可以设计问题不同,副标题通常实在文字后面加上色块装饰。

 

(3)环绕式排版

文字组在画面正中间,相关元素围绕文字,形成环绕效果。可以有效地强调文字。



(4)上文下图排版

上下盘版的Banner,文字依旧是是居中的。



5. 优秀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 布局的基础上,将视频嵌入其结构中,目的是吸引用户的注意力。

此类视频通常为自动播放的形式,由于用户在未知场景,为了不造成干扰,一般为默认静音模式。

NIKE


开眼


(7)卡片叠加滑动提升轮播空间感

在探索手势操作上面,便捷度、流畅度、体验感都是至关重要的。滑动 Banner 过程中的体验感能带给用户对于当前内容的关注程度,便于操作的同时能引起用户的好奇心更是重中之重。

虾米音乐就设计得很好,卡片叠加带来视觉呈现的空间感,手势滑动流畅自然。


自如

 

(8)主题元素分层视差带来轮播新玩法

为了提高用户对轮播广告的关注度,突破已有的表现形式是设计师不断思考的方向。

自如 App 端的做法引起了我的关注,将主题元素和背景层进行分离,主题元素进行轮播的同时背景层渐隐呈现。不一样的视觉表现和轮播形式,带来了 Banner 轮播形式的新玩法。


 

自如


总结

进入2021年了,我们会发现taobao取消了Banner设计,有设计师担心Banner会不会成为历史,事实上至少目前还不会,这依然是一个重要的营销入口表达形式,设计师需要既看设计趋势,也要认真实践。近期应该是找工作的高峰期了,我写了如何设计UI作品集系列的文章,可以去我的公众号看《聊设计》:liaosheji2010.



作者:竹子,玥玥

本文为竹子原创发布,未经许可,禁止转载。


1098
Statement: all the content and comments made by netizens in ZCOOL only represent themselves, and do not reflect any opinions and opinions of ZCOOL.
Report
Share
Collect
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
All Comments0
南京 | UI设计师
Article information
文章标签
收录收藏夹
更多收录此文章的收藏夹