最近在App里设计Banner排版样式的时候，总是在纠结如何使用那些样式。还有其他款式吗？那么问题又来了。不同场景类型用哪种风格比较好？
下面，我找了一些有代表性的Banner风格对以上问题进行总结归类，分为以下六类:单切换风格/多切换风格/功能性风格/特殊排版一致布局/特殊后台处理/复合扩展类。
接下来，我们给出不同类型的例子，说明它们的应用场景。
一、单张切换方式
单次切换风格一般分为满、满、欠满三种风格。其中熊猫金库采用全样式，淘宝采用全屏宽度的弧形样式，转身采用全样式。一般来说，单一切换风格主要用于首页Banner的显示。
1。完整的类样式
所有全风格的风格在越来越多的app中被抛弃。主要是这种风格对操作图的要求比较高，风格和颜色尽量保持一致，以免影响app的整体风格展示效果。当然，这里以熊猫金库为例，是因为它没有使用相同的颜色开关，而是都使用了左手人物和右手吉祥物的设计，不同颜色饱和度的亮度趋于一致，所以这对于APP的视觉呈现效果并没有反作用，反而有加分。
2。全屏宽度样式
而全屏宽度样式则不受此限制，因为顶部采用了品牌的主色调压轴，无论横幅样式和颜色如何变化，都不会对视觉呈现产生太大影响。所以，如果所有的全类样式都不能保证Banner的一致性，就要慎用。全屏宽的风格适合搭配主基调压轴使用，适合各种风格的购物平台。
3。风格不够
欠填样式比较特殊，我们会在下面的特殊背景样式这一类来分析。二。多页切换样式
多种切换方式分为:灯笼转盘/右滑式/堆叠式。1。旋转木马
首先，我们先了解一下灯笼是什么。上图是中国古代的灯笼。因为灯的四面都画有许多古代武将骑马的画面，灯一转，看起来像是几个人在互相追逐，所以得名“骑马”。
那么App中常见的轮播横幅样式可以追溯到灯笼轮播，但是因为它是为功能信息服务的，所以我们不需要在这里显示图片的动态连贯信息。
所以我们先来看几个例子:
上图中的乐刻App首页使用了大小一致的平行转盘，景深第二转盘，景深第三转盘，弧度一致的最后转盘。一般来说，如果扩展应用程序，为了一致性和统一性，会采用文本等特殊排版。
下面我们会给出文字等特殊排版的例子，往下看。
大小相同的平行转盘:其中，大小相同的平行转盘多用于Ios11或主色较弱的App风格。一般画面高度较窄，因为据不完全统计，越来越多的App运营活动效果不是很好，所以相对降低了画面高度。
景深轮播:景深轮播一般用在你觉得页面想要丰富层次感的时候。
弧形转盘风格:弧形转盘比较特别。其实就是一种常见的可以在安卓手机系统屏幕上自定义的弧形转盘的交互形式。因为这种形式是弧形的，所以用户很容易有眩晕感，需要根据具体场景谨慎使用。
2。右滑动风格
右滑式分为:信息显示型侧滑和侧滑景深型。(1)信息显示式侧滑
信息侧滑可分为常规图文、图片嵌套卡信息和视频显示的形式。比如淘宝的海淘笔记页面是图片嵌套卡片信息的形式，淘宝的生活研究院是视频显示侧滑的形式，就是你滑到哪个横幅上就能自动播放视频。一般信息显示侧滑多用于产品的二级页面。
(2)侧滑景深样式
首页使用侧滑深度类的例子，但是这种样式比较特殊，通常在二级页面使用较多，因为首页侧面的使用对页面的一致性有一定的破坏。
3。堆叠类样式
堆垛方式一般分为垂直堆垛方式和水平堆垛方式。(1)垂直堆叠样式
垂直层叠式一般适用于首页，以结合产品背景图的形式出现，比如上图左边一张为每张卡片显示不同的航班信息。
(2)水平堆叠样式
横向级联样式一般适用于页面的中间位置，区别于其他常见的横幅样式。主要用于图片较多的场景，丰富了页面形式的多样性。
三。函数类样式
功能类风格一般分为点击扩展播放类、信息感应切换类和功能添加类。1。单击以展开游戏类别
点击播放类别通常适用于影音等app，比如虾米的Ai电台页面，点击一个窄色块横幅就会开始播放对应的播放类别。
2。信息感应开关类
信息诱导切换类别上面两个淘宝案例都属于这个类别，只有中间的一个把信息分类到不同的推广价格类别，右边的一个把信息分类到不同的时间点进行切换。该类别通常适用于电子商务产品推广页面。
2。功能附加类
附加功能通常在Banner需要添加任何功能时使用，比如添加收藏、添加购物车等功能。通常情况下，产品展示页面的使用频率更高。四。特殊排版一致类布局
特殊排版一致性类的排版一般分为图形交错样式、图形联想类和文字一致性类。1。图文交错类
图形交错风格一般适合想要个性化页面显示的app。与其他表现良好的app相比，有更多的创意元素可以发挥，例如，图图一号出售更多个性化品类的服装
2。图形关联类
图形关联类一般适用于每个Banner有一致的文案和标签信息展示的情况，比如电子商务的Enjoy。
3。文本一致性类
文字一致性类多用于使用不同的图片作为背景，图片上有蒙版，每个不同横幅上的文字大小和排版都是一样的。比如上图的JD.COM股票和最后一页的Enjoy，这里的Enjoy的文字就加入了主色作为文字背景，强调了文字的一致性。四。特殊后台处理
特殊背景处理一般分为:特殊背景形状样式，图片元素背景切换样式，图片背景模糊处理样式，1.不同形状背景形状类别样式
不同的造型、背景、形状、风格也一般适合个性化展示，区别于同类app的展示形式，通常以品牌色彩为主。
2。图片元素背景切换类样式
色元素背景切换风格一般提取当前显示的banner的图片元素作为背景显示，可以丰富页面中当前活动的氛围。一般电商app用的比较多。3。图像背景模糊类样式
通常使用固定的图片背景，经过高斯模糊处理，再叠加一层蒙版进行显示。一般来说，背景可以切换有无图片。比如淘宝的生活研究院，采用的是未定型的图片虚化类型。V .复合扩展类
复合扩展类一般分为:垂直层叠列表式、沉浸式Banner+功能式、Banner视频和图片叠加式。1。垂直级联列表样式
垂直级联列表样式属于一种特殊的显示类别。在这里，最美内容App的定位是优质原创产品，所以在这里，采用卡片式垂直层叠风格进行展示，用户不仅可以看到当前产品的信息，还可以看到其他产品的文字信息，一般用于特殊品质产品的展示。
2。沉浸式横幅+功能类风格
淘宝的名牌背景采用了更加男性化的背景风格展示，给用户一种硬朗的感觉和品质，非常符合男性优秀产品的特点。左上方有一个男模，右边有三张牌。顶排卡可以侧滑，对应的优惠信息在下面。这种复合型常用于电商，要推荐的商品需要沉浸式展示。
3。横幅视频和图片覆盖样式
在这里，淘宝生活首页的背景是用视频展示的，最上面一层是用多张图片展示的，并配有相应的文案。并为专题展览引入了期刊杂志的概念。主要用于期刊专题页面展示。
摘要
介绍了六种不同的Banner显示类型，分为单次切换式、多次切换式、功能式、特殊排版一致布局式、特殊背景处理式和复合扩展式。希望我们在设计banner风格的时候，能够选择一个更适合的风格，来适合当下的场景。
作者:角马X，UED口袋金融的设计经理。微信官方账号:海燕社
本文由@娇妈x原创，大家都是产品经理。未经许可，禁止转载。
图片来自Pexels，基于CC0协议。
