我们在设计 App 中 Banner 排版样式的时候很多人都会觉得用来用去就那几个样式，做不出什么新意来。其实不然，还有很多其它样式不为人知，也许我们平时看到过，设计的时候却又想不起来。那么为了提升工作效率，这里总结了一些比较有代表性的 Banner 样式进行了汇总归类，并分析了其不同的使用场景。我把他们分为以下6种类别：单张切换样式／多张切换样式／功能类样式／特殊排版一致类布局／特殊背景处理／复合拓展类

接下来我们就不同类型进行举例并说明其运用场景。

一、单张切换样式

单张切换样式一般分为全部撑满、屏宽撑满和未撑满3种样式。

其中熊猫金库采用的是全部撑满的样式，淘宝采用的是屏宽撑的弧形样式，转转采用的是未撑满的样式。总的来说单张切换样式主要用于首页 Banner 的展示。

1、全部撑满类样式

全部撑满类样式在越来越多的 App 中被弃用，主要原因是此样式对运营图的要求比较高，需要做到风格和颜色尽量一致，才不会影响 App 整个的风格展示效果。当然这里以熊猫金库举例是因为它并没有采用相同颜色切换，而是都采用了左侧文字，右侧吉祥物的设计，而且采用的不同颜色饱和度明度也趋向一致，所以这样对 App 的视觉呈现效果并没有起到反效果，反而有加分。 

2、屏宽撑满样式

然而屏宽撑满样式并不受此局限，是因为顶部采用了品牌主色调压轴，不管 Banner 风格样式和色彩怎样多变，都不会对视觉呈现有多大影响。

所以全部撑满类样式如果不能确保 Banner 的一致性，还是要慎用。屏宽撑满的样式适合有主色调压轴的情况下使用，适用于风格多样的购物类平台。

3、未撑满样式

转转的未撑满的样式较为特殊，我们会在下文特殊背景样式类别里解析。

二、多张切换样式

多张切换样式分为：走马灯式轮播／右侧滑动类样式／堆叠类样式

1、走马灯式轮播

我们首先来了解下什么是走马灯，上图为中国古代的走马灯。因多在灯各个面上绘制古代武将骑马的图画的连贯动态造型，而灯转动时看起来好像几个人你追我赶一样，故名走马灯。

那么 App 里常见的轮播 Banner样式，可以追溯为走马灯式轮播，只不过由于这里是为功能信息服务的，所以我们这里无需展示图像的动态连贯信息。

那么我们先来看几个实例。上图的乐刻 App 首页采用的为大小一致平行轮播、第二个为景深类轮播、第三个为景深类异形轮播、最后一个为一致类弧形轮播。一般拓展应用的话会采用文字等特殊排版来进行一致性统一。关于文字等特殊排版我们在下文会进行举例，且往下看。

1）大小一致平行类轮播

其中大小一致平行类轮播多用于 iOS 11或者主色调较为弱化的 App 风格中。一般图片的高度较窄，因为据不完全统计，越来越多的 App 运营活动效果并不是太好，所以图片的高度也相对调低了。

2）景深类轮播

景深类轮播一般在觉得页面想要丰富层次感的时候采用。

3）弧形轮播样式

弧形轮播较为特殊，实际上比较常见的是安卓手机系统屏幕上可自定义的弧形轮播交互形式，这种形式因为是弧形的，容易给用户造成眩晕感，所以需要根据具体场景谨慎使用。

2、右侧滑动类样式

右侧滑动类样式分为信息展示类侧滑、侧滑景深类

1）信息展示类侧滑

信息展示类侧滑分为常规图文类、图片嵌套卡片式信息的形式和视频展示类。例如淘宝的海淘笔记页面为图片嵌套卡片式信息的形式，淘宝的生活研究所为视频展示类侧滑，也就是滑动到哪个哪个 Banner 可以自动播放视频。一般信息展示类侧滑多用于产品的二级页面。

2）侧滑景深类样式

侧滑景深类这里的实例使用在了首页，但此类样式较为特殊，通常还是二级页面使用的较多。因为首页侧面的使用对页面的一致性有一定的破坏。

3、堆叠类样式

堆叠类样式一般分为纵向层叠样式、横向层叠样式。

1）纵向层叠样式

纵向层叠样式一般适用于首页，且与产品背景图相结合的形式出现，例如上图左一，每个 card显示不同的航班信息。

2）横向层叠样式

横向层叠样式一般适用于页面里的中间位置，区别与其它常见的 Banner 样式，主要用于图片展示较多的场景内使用，丰富页面形式的多样化。

三、功能类样式

功能类样式一般分点击展开播放类、信息归纳切换类、功能附加类。

1、点击展开播放类

点击展开播放类通常适用于视频、音频等 App，比如虾米的Ai电台页面，点击较窄的一块色块Banner 即展开播放相应的播放类别。

2、信息归纳切换类

信息归纳切换类以上2个淘宝案例都属于这个类别，只是中间那个把信息归纳为不同促销价格分类，右边把信息归纳为不同时间点进行切换。这种类别通常适用于电商商品促销类页面。

3、功能附加类

功能附加类通常在当前 Banner 需要附加什么功能的时候采用，比如需要添加收藏、添加购物车等功能，通常也是商品展示类页面使用较多。

四、特殊排版一致类布局

特殊排版一致类布局一般分图文错开类样式、图文关联类、文本一致类。

1、图文错开类

图文错开类样式一般适用于想要有个性化页面展示的 App ，相对于其它中规中矩的 App 有更多的创意类元素可供发挥，例如上图图一的卖比较个性类别的服装。

2、图文关联类

图文关联类一般适用于每个 Banner 都有一致性的文案和标签信息展示的时候使用。例如电商类的 Enjoy

3、文本一致类

文本一致类多用于采用不同的图片作为背景，且图片上都有蒙层作为遮罩，每个不同的 Banner上的文字大小，排版都相同。例如上图的京东股票和最后一张 Enjoy 的页面。这里的 Enjoy 的文本都添加了主色调作为文字底衬，更加强调了文字的一致性。

五、特殊背景处理

特殊背景处理一般分为异形背景形状类样式、图片元素背景切换类样式、图片背景模糊处理类样式

1、异形状背景形状类样式

异形状背景形状类样式一般也适用于想要个性化展示，区别与同类 App 的展示形式。通常采用品牌色为主。

2、图片元素背景切换类样式

图片色彩元素背景切换类样式一般提取了当前展示 Banner 的图片元素做为背景展示。可以丰富当前活动在页面中的氛围。一般电商类 App 使用较多。

3、图片背景模糊处理类样式

通常采用固定的图片背景并进行了高斯模糊的处理方式，再叠加一层蒙层进行展示，一般背景可以随图片切换也可不切换。例如淘宝的生活研究所采用的是不切换的图片模糊类型。

六、复合拓展类

复合拓展类一般分为纵向层叠列表样式、沉浸式 Banner +功能类样式、Banner 视频与图片叠加类样式

1、纵向层叠列表样式

纵向层叠列表样式是属于比较特殊的展示类别，此处最美有物 App 的定位为精品高端类原创商品，所以这里采用了卡片式纵向层叠的样式进行展示，用户不光能看到当前产品的信息还能看到其它产品的文字信息。一般用于特殊品质类产品展示。

2、沉浸式 Banner +功能类样式

淘宝的聚名品背景采用了较为商务男性化的背景风格展示，给用户传递的感觉较为硬朗、品质，非常符合男性优品的特质。顶层左侧放置了一个男士模特，右侧放置了三个卡片。其中最上面的一排卡片可以侧滑，下面是对应的优惠信息。

这种复合类型常用于电商，需要推荐的商品需要沉浸式展示的情况。

3、Banner 视频与图片叠加类样式

这里淘宝的生活家页面背景采用的是视频展示，顶层采用了多个图片进行展示，并配合了相应的文案。并且引入了期刊杂志的概念，进行专题展示。

主要用于期刊类专题页面展示。

七、总结

以上介绍了6种不同 Banner 的展示类型，分为单张切换样式、多张切换样式、功能类样式、特殊排版一致类布局样式、特殊背景处理类样式、复合拓展类样式。希望在我们设计 Banner 样式的时候能够选择更为合适的样式，以适用当前的场景。