最近，当我在应用程序中设计横幅布局样式时，我总是为如何仅使用这些样式而苦苦挣扎。还有其他款式吗？那么问题又来了，针对不同的场景类型，哪种风格更好呢？
下面我针对上述问题找到了一些有代表性的Banner样式，总结为以下6类：单一切换样式/多种切换样式/功能样式/特殊排版一致布局/特殊后台处理/复合扩展类。
接下来我们将举例说明不同类型的应用场景。
1.单张切换样式
单次切换样式一般分为全满、全屏宽度和非满三种样式。
其中，熊猫金库采用全屏样式，淘宝采用全屏宽度的弧形样式，转转采用非全屏样式。一般来说，传单切换样式主要用于首页横幅的展示。
1.支持所有样式
越来越多的应用程序正在放弃全满的风格。主要原因是这种风格对操作图的要求比较高。样式和颜色需要尽可能一致，以免影响app整体的样式显示效果。
当然，这里以熊猫宝库为例，因为它没有采用同色切换，而是采用了左侧的文字和右侧吉祥物的设计。而且，所使用的不同颜色的饱和度和亮度往往是一致的，因此这会影响APP的视觉外观。呈现效果不是适得其反，而是锦上添花。
2.全屏宽度样式
不过，屏幕宽度占满后，风格并不受此限制，因为顶部以品牌主色调作为压轴。无论横幅样式和颜色如何变化，都不会对视觉呈现产生太大影响。
因此，如果所有全类样式都不能保证Banner的一致性，还是要谨慎使用。全屏宽幅风格适合有主色压轴的时候使用，适合各种风格的购物平台。
3.款式不够丰富
转转的空心风格比较特殊，我们在下面的特殊背景风格类别中进行分析。
2.多种切换风格
多种切换样式分为：旋转轮播式/右滑式/堆叠式
1. 旋转木马
我们先来了解一下什么是走马灯。上图为中国古代走马灯。因灯的各面绘有连续不断的动态形状的古代武将骑马图，灯转动时如数人在互相追逐，故名走马灯。
那么App中常见的轮播Banner样式就可以追溯到旋转轮播。然而，由于它提供功能信息，因此我们不需要在这里显示图像的动态和连贯信息。
那么我们先来看几个例子：
上图中的乐客App首页使用的是同尺寸的平行轮播，第二个是景深轮播，第三个是景深异形轮播，最后一个是景深轮播。是一个均匀的弧形转盘。一般在扩展应用时，会采用文本等特殊排版，以保持一致性和统一性。
关于文字等特殊排版，我们下面举个例子，往下看。
统一大小的平行轮播：统一大小的并行轮播多用于iOS 11或者主色较弱的app风格。一般图片的高度都比较窄，因为据不完全统计，越来越多的App操作活动效果不是很好，所以图片的高度也相对降低了。
景深轮播：景深轮播一般用在页面想要有更丰富的层次感时。
弧形转马款式：弧形转马比较特殊。其实比较常见的就是Android手机系统屏幕上可定制的弧形轮播交互形式。由于这种形式是弧形的，很容易造成使用者头晕。所以需要根据具体场景谨慎使用。
2.右滑式
右侧滑动样式分为：信息显示型侧滑和侧滑景深型。
(1)信息显示侧滑
信息展示侧幻灯片分为常规图文类、图片嵌入卡片信息形式、视频展示类。例如：淘宝的海外购物备注页面是图片形式嵌套卡片式信息，淘宝的生活研究院是侧滑视频展示，即滑到哪个横幅就可以自动播放视频。一般信息展示式侧滑多用于产品的二级页面。
(2)侧滑景深方式
这里示例的侧滑景深类是在首页上使用的，但是这种风格比较特殊，通常在二级页面上使用较多，因为首页侧边的使用会破坏页面的一致性在一定程度上。
3.堆叠式
堆叠方式一般分为：垂直堆叠方式和水平堆叠方式。
(1)垂直堆叠式
垂直层叠样式一般适合首页，与产品背景图结合出现。例如：上左图，每张卡片显示不同的航班信息。
(2)水平层叠式
水平层叠样式一般适合页面的中间位置。它与其他常见的Banner 样式不同。主要用于图片展示较多的场景，丰富页面形式的多样化。
3、功能风格
功能风格一般分为点击展开播放类、信息摘要切换类、附加功能类。
1.点击展开播放类别
点击展开播放类别通常适用于视频、音频等应用，比如虾米的爱电台页面。点击较窄的色块Banner可展开对应的播放类别。
2.信息摘要切换类别
信息汇总切换类别上述两个淘宝案例都属于这一类别，只不过中间一个将信息汇总到不同促销价格类别，右边一个将信息汇总到不同时间点进行切换。该类别通常适用于电商产品宣传页面。
2. 功能附加类
附加功能类通常在当前Banner需要附加功能时使用，比如添加收藏、添加购物车等，通常用在商品展示页面较多。
4.特殊排版，布局一致
特殊排版一致布局一般分为图文交错样式、图文相关样式、文字一致样式。
1.图文交错
图文交错的风格一般适合想要个性化页面展示的应用。与其他平庸的应用程序相比，有更多的创意元素可以发挥。比如上图一的那家，卖的是比较个性化的服装。
2.图文关联类
图文关联类一般适合在每个banner文案和标签信息显示一致的情况下使用，例如：电商品类中的享受。
3. 文本一致性类
文本一致性类别多用于使用不同的图片作为背景，图片有遮罩作为遮罩。每个不同横幅上的文字大小和布局都是相同的。例如：上面的京东库存图和最后一个Enjoy页面，这里的Enjoy文字就添加了主色作为文字背景，进一步强调了文字的一致性。
4.特殊后台处理
特殊背景处理一般分为：特殊背景形状风格、图片元素背景切换风格、图片背景模糊处理风格、
1.不规则背景形状风格
异形背景形状风格一般适合那些想要个性化显示并与同类应用程序区分开来的人。通常使用品牌颜色。
2.图片元素背景切换类风格
图片颜色元素背景切换风格一般是提取当前展示banner的图片元素作为背景展示，可以丰富页面当前活动的氛围。它通常被电子商务应用程序使用。
3.图片背景模糊处理风格
通常采用固定的图片背景，进行高斯模糊处理，然后叠加一层遮罩层进行显示。一般情况下，背景可以随图片切换，也可以不随图片切换。例如：淘宝的生活研究采用的是非切换图片模糊类型。
5、复合扩展类
复合扩展类别一般分为：垂直层叠列表样式、沉浸式Banner+功能样式、Banner视频和图片叠加样式
1.垂直层叠列表样式
垂直层叠列表样式是一种比较特殊的展示类别。这里最美有物App定位为高品质、高端原创产品，因此采用卡片式垂直层叠风格进行展示。用户不仅可以看到当前产品的信息，还可以看到其他产品的文字信息，一般用于展示特殊品质的产品。
2.沉浸式Banner+功能风格
淘宝汇集名品的背景采用了更加商业化的男性化背景风格展示，给用户传达了一种更加硬朗、高品质的感觉，这与男性优质产品的特点非常符合。顶层左侧放置一个男模特，右侧放置三张卡片。最上面一排卡片可以横向滑动，下面是对应的折扣信息。
这种复合类型常用于电商，推荐的产品需要沉浸式展示。
3. Banner视频与图片叠加样式
这里淘宝生活首页的背景采用了视频展示，顶层采用多张图片进行展示，并搭配相应的文案。期刊和杂志的概念也被引入到特别演讲中。
主要用于期刊专页的展示。
总结
以上介绍了6种不同的Banner展示类型，分为单切换风格、多切换风格、功能风格、特殊排版一致布局风格、特殊背景处理风格、复合扩展风格。
我们希望在设计Banner风格的时候，能够选择更适合当前场景的风格。
作者：Wildebeest X，口袋金融UED设计经理。公众号：海盐学会
本文最初由@野马X 发表在《人人都是产品经理》上。未经许可禁止转载
题图来自Pexels，基于CC0许可
