产品Banner样式类型分析
比较有代表性的Banner样式汇总归类,可分为以下6种类别:
1.单张切换样式
2.多张切换样式
3.功能类样式
4.特殊排版一致类布局
5.特殊背景处理
6.复合拓展类。
一、单张切换样式
单张切换样式一般分为全部撑满、屏宽撑满和未撑满3种样式。
其中熊猫金库采用的是全部撑满的样式,淘宝采用的是屏宽撑满的弧形样式,转转采用的是未撑满的样式。总的来说,单张切换样式主要用于首页Banner的展示。
1. 全部撑满类样式
全部撑满类样式在越来越多的App中被弃用,主要原因是此样式对运营图的要求比较高,需要做到风格和颜色尽量一致,才不会影响App整个的风格展示效果。
当然这里以熊猫金库举例是因为它并没有采用相同颜色切换,而是都采用了左侧文字,右侧吉祥物的设计,而且采用的不同颜色饱和度明度也趋向一致,所以这样对APP的视觉呈现效果并没有起到反效果,反而有加分。
2. 屏宽撑满样式
然而屏宽撑满样式并不受此局限,是因为顶部采用了品牌主色调压轴,不管Banner风格样式和色彩怎样多变,都不会对视觉呈现有多大影响。
所以全部撑满类样式如果不能确保Banner的一致性,还是要慎用。屏宽撑满的样式适合有主色调压轴的情况下使用,适用于风格多样的购物类平台。
3. 未撑满样式
转转的未撑满的样式较为特殊,我们会在下文特殊背景样式类别里解析。
二、多张切换样式
多张切换样式分为:走马灯式轮播/右侧滑动类样式/堆叠类样式
1. 走马灯式轮播
我们首先来了解下什么是走马灯,上图为中国古代的走马灯。因多在灯各个面上绘制古代武将骑马的图画的连贯动态造型,而灯转动时看起来好像几个人你追我赶一样,故名走马灯。
那么App里常见的轮播Banner样式,可以追溯为走马灯式轮播,只不过由于这里是为功能信息服务的,所以我们这里无需展示图像的动态连贯信息。
那么我们先来看几个实例:
上图的乐刻App首页采用的为大小一致平行轮播、第二个为景深类轮播、第三个为景深类异形轮播、最后一个为一致类弧形轮播。一般拓展应用的话会采用文字等特殊排版来进行一致性统一。
关于文字等特殊排版我们在下文会进行举例,且往下看。
大小一致平行类轮播:其中大小一致平行类轮播多用于Ios11或者主色调较为弱化的App风格中。一般图片的高度较窄,因为据不完全统计,越来越多的App运营活动效果并不是太好,所以图片的高度也相对调低了。
景深类轮播:景深类轮播一般在觉得页面想要丰富层次感的时候采用。
弧形轮播样式:弧形轮播较为特殊,实际上比较常见的是安卓手机系统屏幕上可自定义的弧形轮播交互形式,这种形式因为是弧形的,容易给用户造成眩晕感,所以需要根据具体场景谨慎使用。
2. 右侧滑动类样式
右侧滑动类样式分为:信息展示类侧滑、侧滑景深类。
(1)信息展示类侧滑
信息展示类侧滑分为常规图文类、图片嵌套卡片式信息的形式和视频展示类。例如:淘宝的海淘笔记页面为图片嵌套卡片式信息的形式,淘宝的生活研究所为视频展示类侧滑,也就是滑动到哪个哪个Banner可以自动播放视频。一般信息展示类侧滑多用于产品的二级页面。
(2)侧滑景深类样式
侧滑景深类这里的实例使用在了首页,但此类样式较为特殊,通常还是二级页面使用的较多,因为首页侧面的使用对页面的一致性有一定的破坏。
3. 堆叠类样式
堆叠类样式一般分为:纵向层叠样式、横向层叠样式。
(1)纵向层叠样式
纵向层叠样式一般适用于首页,且与产品背景图相结合的形式出现,例如:上图左一,每个Card显示不同的航班信息。
(2)横向层叠样式
横向层叠样式一般适用于页面里的中间位置,区别与其它常见的Banner样式,主要用于图片展示较多的场景内使用,丰富页面形式的多样化。
三、功能类样式
功能类样式一般分点击展开播放类、信息归纳切换类、功能附加类。
1. 点击展开播放类
点击展开播放类通常适用于视频、音频等App,比如:虾米的Ai电台页面,点击较窄的一块色块Banner即展开播放相应的播放类别。
2. 信息归纳切换类
信息归纳切换类以上2个淘宝案例都属于这个类别,只是中间那个把信息归纳为不同促销价格分类,右边把信息归纳为不同时间点进行切换,这种类别通常适用于电商商品促销类页面。
2. 功能附加类
功能附加类通常在当前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样式的时候能够选择更为合适的样式,以适用当前的场景。
产品Banner样式类型分析相关推荐
- mysql查询时间类型c语言处理_资讯类app用户热度及资讯类型分析-Mysql进行数据预处理...
本文是"资讯类app用户热度及资讯类型分析"一文中,Mysql进行数据预处理的部分.因为篇幅可能比较长,而且摘出来不会过于影响原文分析思路,所以这里单独进行介绍.(本文前四部分与正 ...
- 基于淘宝评价的采集与产品爆款挖掘分析
基于淘宝评价的采集与产品爆款挖掘分析 知已知彼,方能百战不殆.在已经成熟的电商环境中尤是如此.无论您是从事公司企业店铺的运营专家,还是从事个人店铺的打理.了解对手行业.了解同行最受欢迎的产品,是必须的 ...
- 数据挖掘实战—电商产品评论数据情感分析
文章目录 引言 一.评论预处理 1.评论去重 2.数据清洗 二.评论分词 1.分词.词性标注.去除停用词 2.提取含名词的评论 3.绘制词云查看分词效果 三.构建模型 1.评论数据情感倾向分析 1.1 ...
- 销售技巧之客户类型分析
销售技巧之客户类型分析 据客户的性格特征可以把客户分为以下几个类型: 固执型 心理特征:坚决.强硬.经常压价,经常要求折扣,提出很多价格上的要求,喜欢引用竟争对手作比较. 对策: (1)对于这类客户无 ...
- 毕业设计之 - 大数据分析:电商产品评论数据情感分析
文章目录 1 简介 数据分析目的 数据预处理 评论去重 数据清洗 分词.词性标注.去除停用词 提取含名词的评论 绘制词云¶ 词典匹配 评论数据情感倾向分析 修正情感倾向 LinearSVC模型预测情感 ...
- 数据挖掘作业学习学习笔记-电商产品评论数据情感分析
使用的教材:<电商产品评论数据情感分析> 作业&学习笔记:数据挖掘第14周 说明:书本内容详实.此篇用于自己期末回顾知识的重点内容,故做出的学习笔记缺省了书本原本的其他精粹. 随着 ...
- 【项目实战】Python实现基于LDA主题模型进行电商产品评论数据情感分析
说明:这是一个机器学习.数据挖掘实战项目(附带数据+代码+文档+视频讲解),如需数据+代码+文档+视频讲解可以直接到文章最后获取. 视频: Python实现基于LDA模型进行电商产品评论数据情感分析 ...
- 国内三款主流海淘产品APP竞品分析
最近在做一些有关跨境电商的产品设计,故对国内几大跨境电商产品做了一些分析,主要是针对产品的功能设计.下面简单跟大家分享,希望能抛砖引玉. 一. 体验概览 二. 竞品选择: 入选条件: 电商巨头代表:天 ...
- 【蓝桥杯Java_C组·从零开始卷】第一节、环境与变量类型运算符与类型分析
B站高清回放地址: [https://www.bilibili.com/video/BV1Bm4y1Q7Wt?spm_id_from=333.999.0.0] 目录 一.Java环境搭建与使用(Ecl ...
最新文章
- python文字教程-Python
- Java并发编程—如何取消定时任务
- 工业三防手持终端如何选
- 1、深入理解 Laravel Eloquent(一)——基本概念及用法
- html5中的h1,HTML5语义 - 产品列表中的h1用法
- 六下计算机教学总结,六年级信息技术教师教学工作总结
- Struts2.0 + Spring2.5 + Hibernate3.3开发环境的配置(1)
- Windows系统的版本分类
- 若依微服务版 数据库设计说明书
- JDBC基础操作汇总
- 网站使用手机相机_使用“互通相机”把你的iPhone手机变成Mac的心灵之窗!
- Spring AOP
- flink ui含义图解
- jquery 筛选选择器 下拉菜单
- 微信的WXML和HTML WXSS和CSS的区别详解
- C++ int、long、long int、long long、uint64_t字节长度
- 张浩java成绩大于98分_1028学习
- IE打开报错,提示该内存不能为read的解决办法!
- IP地址错误,网络无法连接 网络搜索的方法都没用
- FreeBSD开启SSH远程登录