时间: 2021-07-30 10:14:13 人气: 27 评论: 0
最近我在设计App中Banner排版样式的时候总是在纠结怎么用来用去就那几个样式，到底还有没有其它样式呢？那么问题又来了不同场景类型对应哪种样式更好呢？
下面我就以上这些疑问找了一些比较有代表性的Banner样式进行了汇总归类，分为以下6种类别：单张切换样式／多张切换样式／功能类样式／特殊排版一致类布局／特殊背景处理／复合拓展类。
接下来我们就不同类型进行举例并说明其运用场景。
单张切换样式一般分为全部撑满、屏宽撑满和未撑满3种样式。
其中熊猫金库采用的是全部撑满的样式，淘宝采用的是屏宽撑满的弧形样式，转转采用的是未撑满的样式。总的来说，单张切换样式主要用于首页Banner的展示。
全部撑满类样式在越来越多的App中被弃用，主要原因是此样式对运营图的要求比较高，需要做到风格和颜色尽量一致，才不**影响App整个的风格展示效果。
当然这里以熊猫金库举例是因为它并没有采用相同颜色切换，而是都采用了左侧文字，右侧吉祥物的设计，而且采用的不同颜色饱和度明度也趋向一致，所以这样对APP的视觉呈现效果并没有起到反效果，反而有加分。
然而屏宽撑满样式并不受此局限，是因为顶部采用了品牌主色调压轴，不管Banner风格样式和色彩怎样多变，都不**对视觉呈现有多大影响。
所以全部撑满类样式如果不能确保Banner的一致性，还是要慎用。屏宽撑满的样式适合有主色调压轴的情况下使用，适用于风格多样的购物类平台。
转转的未撑满的样式较为特殊，我们**在下文特殊背景样式类别里解析。
多张切换样式分为：走马灯式轮播／右侧滑动类样式／堆叠类样式
我们首先来了解下什么是走马灯，上图为中国古代的走马灯。因多在灯各个面上绘制古代武将骑马的图画的连贯动态造型，而灯转动时看起来好像几个人你追我赶一样，故名走马灯。
那么App里常见的轮播Banner样式，可以追溯为走马灯式轮播，只不过由于这里是为功能信息服务的，所以我们这里无需展示图像的动态连贯信息。
那么我们先来看几个实例：
上图的乐刻App首页采用的为大小一致平行轮播、第二个为景深类轮播、第三个为景深类异形轮播、最后一个为一致类弧形轮播。一般拓展应用的话**采用文字等特殊排版来进行一致性统一。
关于文字等特殊排版我们在下文**进行举例，且往下看。
大小一致平行类轮播：其中大小一致平行类轮播多用于Ios11或者主色调较为弱化的App风格中。一般图**的高度较窄，因为据不完全统计，越来越多的App运营活动效果并不是太好，所以图**的高度也相对调低了。
景深类轮播：景深类轮播一般在觉得页面想要丰富层次感的时候采用。
弧形轮播样式：弧形轮播较为特殊，实际上比较常见的是安卓手机系统屏幕上可自定义的弧形轮播交互形式，这种形式因为是弧形的，容易给用户造成眩晕感，所以需要根据具体场景谨慎使用。
右侧滑动类样式分为：信息展示类侧滑、侧滑景深类。
（1）信息展示类侧滑
信息展示类侧滑分为常规图文类、图**嵌套卡**式信息的形式和视频展示类。例如：淘宝的海淘笔记页面为图**嵌套卡**式信息的形式，淘宝的生活研究所为视频展示类侧滑，也就是滑动到哪个哪个Banner可以自动播放视频。一般信息展示类侧滑多用于产品的二级页面。
（2）侧滑景深类样式
侧滑景深类这里的实例使用在了首页，但此类样式较为特殊，通常还是二级页面使用的较多，因为首页侧面的使用对页面的一致性有一定的破坏。
堆叠类样式一般分为：纵向层叠样式、横向层叠样式。
（1）纵向层叠样式
纵向层叠样式一般适用于首页，且与产品背景图相结合的形式出现，例如：上图左一，每个Card显示不同的航班信息。
（2）横向层叠样式
横向层叠样式一般适用于页面里的中间位置，区别与其它常见的Banner样式，主要用于图**展示较多的场景内使用，丰富页面形式的多样化。
功能类样式一般分点击展开播放类、信息归纳切换类、功能附加类。
点击展开播放类通常适用于视频、音频等App，比如：虾米的Ai电台页面，点击较窄的一块色块Banner即展开播放相应的播放类别。
信息归纳切换类以上2个淘宝案例都属于这个类别，只是中间那个把信息归纳为不同促销价格分类，右边把信息归纳为不同时间点进行切换，这种类别通常适用于电商商品促销类页面。
功能附加类通常在当前Banner需要附加什么功能的时候采用，比如：需要添加收藏、添加购物车等功能，通常也是商品展示类页面使用较多。
特殊排版一致类布局一般分图文错开类样式、图文关联类、文本一致类。
图文错开类样式一般适用于想要有个性化页面展示的App，相对于其它中规中矩的App有更多的创意类元素可供发挥，例如：上图图一的卖比较个性类别的服装。
图文关联类一般适用于每个Banner都有一致性的文案和标签信息展示的时候使用，例如：电商类的Enjoy。
文本一致类多用于采用不同的图**作为背景，且图**上都有蒙层作为遮罩，每个不同的banner上的文字大小，排版都相同。例如：上图的京东股票和最后一张Enjoy的页面，这里的Enjoy的文本都添加了主色调作为文字底衬，更加强调了文字的一致性。
特殊背景处理一般分为：异形背景形状类样式、图**元素背景切换类样式、图**背景模糊处理类样式、
异形状背景形状类样式一般也适用于想要个性化展示，区别与同类App的展示形式，通常采用品牌色为主。
图**色彩元素背景切换类样式一般提取了当前展示banner的图**元素做为背景展示，可以丰富当前活动在页面中的氛围，一般电商类App使用较多。
通常采用固定的图**背景并进行了高斯模糊的处理方式，再叠加一层蒙层进行展示，一般背景可以随图**切换也可不切换，例如：淘宝的生活研究所采用的是不切换的图**模糊类型。
复合拓展类一般分为：纵向层叠列表样式、沉浸式Banner+功能类样式、Banner视频与图**叠加类样式
纵向层叠列表样式是属于比较特殊的展示类别，此处最美有物App的定位为精品高端类原创商品，所以这里采用了卡**式纵向层叠的样式进行展示，用户不光能看到当前产品的信息还能看到其它产品的文字信息，一般用于特殊品质类产品展示。
淘宝的聚名品背景采用了较为商务男性化的背景风格展示，给用户传递的感觉较为硬朗、品质，非常符合男性优品的特质。顶层左侧放置了一个男士模特，右侧放置了三个卡**。其中最上面的一排卡**可以侧滑，下面是对应的优惠信息。
这种复合类型常用于电商，需要推荐的商品需要沉浸式展示的情况。
这里淘宝的生活家页面背景采用的是视频展示，顶层采用了多个图**进行展示，并配合了相应的文案。并且引入了期刊杂志的概念，进行专题展示。
主要用于期刊类专题页面展示。
以上介绍了6种不同Banner的展示类型，分为单张切换样式、多张切换样式、功能类样式、特殊排版一致类布局样式、特殊背景处理类样式、复合拓展类样式。
希望在我们设计banner样式的时候能够选择更为合适的样式，以适用当前的场景。
作者：角马X，口袋理财UED设计经理。公众号：海盐社
本文由 @角马X 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自 Pexels，基于 CC0 协议
