【修真院PM小课堂】轮播图有几种表现形式，适合什么场景， 有哪些切换方式？
大家好，我是IT修真院西安分院第6期的PM学员，今天给大家分享一下，关于web和app中轮播图的各种表现形式和切换方式
一、背景目标
背景：轮播图不论在web还是app中都是首屏至关重要的一部分，很多时候我们都会选择轮播图这种引导宣传的方式，搞清楚轮播图的各种表现形式和切换方式，对我们设计产品来说是十分重要的。
目标：探究轮播图的页面位置、切换方式、布局设计、切换效果的优缺点和场景，以便在使用轮播图的时候可以更好的设计产品需要的方案。
二、轮播图的页面位置
1.屏幕左侧
优点：可以用轮播图内容引发用户兴趣，吸引用户注意力，提高点击率
缺点：轮播图尺寸很难把握，图片太小容易被忽略，图片太大右侧内容容易被忽略
场景：多用于资讯类
案例：搜狐、人人都是产品经理、环球网
2.屏幕中间
优点：重要程度比放在左侧还要高的多，主要靠轮播图来吸引用户
缺点：很占空间，热区容纳信息量变小，视觉被吸引可能会忽略其他重要的元素
场景：需要轮播图来极速抓住用户注意力的情况，多为电商、生活类等
案例：小猪短租、爱彼迎、美团、淘宝、网易严选、下厨房
3.屏幕右侧
优点：充实页面提高页面美观度的同时还可以进行引导宣传营销
缺点：用户很可能会阅读完文字内容自动忽略轮播图
场景：需要对页面进行充实或是左侧大片区域有核心业务的情况
案例：网易新闻、百度新闻、飞猪
4.无轮播图
优点：提高网站性能和加载速度
缺点：用户可接收到的宣传的内容一定程度上有所减少
场景：社交类、资讯类、生活类、和部分选择静态图的电商web
案例：腾讯新闻、搜狐新闻、知乎、微博、豆瓣、蘑菇街、链家、58同城
轮播图位置一定程度上代表了轮播图的重要性，但是尺寸也是受关注程度的重要因素，尺寸越大越容易受到关注。
三、轮播图的布局设计
1.整张大图
优点：视觉效果非常好，重点突出，可以让用户一眼关注到宣传重点
缺点：占用空间较多，影响屏幕信息容量
场景：定位清晰、布局简洁、内容较少、对于宣传十分重视的web
案例：小猪短租、美团、途牛
2.一屏多栏轮播图
优点：可以填充更多信息，用户可以根据喜好进行选择
缺点：视觉效果不好，画面混乱
场景：想展示的信息内容较多
案例：淘宝、新浪新闻、京东
一屏多栏轮播图的情况，一起自动切换会让用户眼花缭乱，引起厌烦，所以新浪新闻为了解决这种情况，选择了在多栏轮播图的情况下，一栏舍弃自动切换，只采用手动切换的形式
3.多张小图构成一张轮播图
优点：可以填充更多信息，用户可自行选择
缺点：用户容易抓不住重点，对排版要求很高，否则容易画面混乱
场景：想展示的信息内容多且并且可以整合成为一个整体
案例：百度视频、易车网、京东
四、切换方式
1.自动切换
优点：展示更多图片，用户不用手动切换
缺点：可能会在用户没看完的时候自动切换
场景：通用
案例：淘宝、新浪新闻、百度视频
2.轮播点切换
优点：可以跳转切换，可以直观看到一共有多少张图片
缺点：点击面积太小，容易误触
场景：通用
案例：淘宝、新浪新闻、百度视频
关于轮播点切换可能会造成误触的问题，有些web进行了改良，将轮播点调整成为不用点击，鼠标放置在该轮播点位置就会自动切换的形式，避免了为了切换轮播图造成页面跳转的情况
3.翻页键切换
优点：用户使用更加方便，不翻页时可自动隐藏，不会遮挡图片
缺点：只能一张一张进行切换，用户不能直观看到图片总数
场景：通用
案例：淘宝、网易新闻、百度视频
4.标签切换
优点：分类清晰，用户使用起来很方便，不会误触，可以跳转切换，有意义的直观信息
缺点：美观性较差，更占空间，要考虑标签容量，不能添加太多图片
场景：多种类型，且分类十分明确的内容展示
案例：新浪新闻
5.导航切换
优点：可以容纳更多一点的图片，可以直观了解到图片内容，可以跳转切换，让用户产生点击动机
缺点：会遮挡轮播图内容，用户会只选择自己感兴趣的
场景：主题明确，并且有明确用户兴趣点的内容展示
案例：爱奇艺、优酷、腾讯视频、音悦tai
五、切换效果
切换效果主要有三种
水平切换（京东、淘宝）
渐变切换（京东、小猪短租、途牛、网易严选）
闪现（携程、优酷、新浪新闻、爱奇艺）
切换效果可以通用，可以根据需要自行选择
六、app轮播图
app有 有轮播图和无轮播图两种情况
有轮播图：手动左右滑动切换+自动轮播+轮播点显示，切换方式为水平切换，轮播速度在2s-3s，轮播点区别于pc端，只是用来显示轮播图总数，多用于电商类、视频类、旅行类app，例如淘宝、京东、饿了么、携程、腾讯视频
无轮播图：社交类、资讯类、出行工具类app，例如知乎、新浪新闻、微博、微信、今日头条、滴滴出行
七、讨论
李燈辉：为什么app的轮播点没有切换功能
王雯：因为app页面太小，原本pc端就容易产生误触的情况下，app中进行点击误触的情况就更严重了，而且手指左右滑动也更方便更符合用户习惯，没必要再给轮播点增加切换功能
【修真院PM小课堂】轮播图有几种表现形式，适合什么场景， 有哪些切换方式？相关推荐
- 【修真院pm小课堂】详谈用户体验五要素
[修真院pm小课堂]详谈用户体验五要素 用户体验五要素在产品的工作中经常听到,那么他究竟是什么呢?怎样去使用呢? 一.战略层 明确商业目标和用户目标,解决两者之间的冲突,找到平衡点,确定产品原则和定位 ...
- 【修真院pm小课堂】登录注册的触发场景
大家好,我是IT修真院深圳分院第七期的学员,一枚正直纯洁善良pm, 今天给大家分享一下,修真院官网pm任务五,深度思考中的知识点--在什么样的时间点里去做登录操作比较好 一.登录注册 注册登录系统对于 ...
- 【修真院PM小课堂】关于用户成长系统的分享
一.什么是用户成长体系: 其实说白了就是让用户"自愿"做产品想要他们做的事情,对产品的关键词是「促活」和「留存」.好的用户成长体系不论对于用户还是平台来说,都是双赢的结果.而没有价 ...
- html中间大两边小轮播代码,vue使用swiper实现中间大两边小的轮播图效果
项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来 下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swipe ...
- 【修真院WEB小课堂】定时器有哪些用法？
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [定时器有哪些用 ...
- 微信小程序--轮播图
微信小程序轮播图的实现是利用了swiper组件(滑块视图容器). 主要参数如下: 属性名 类型 默认值 说明 indicator-dots Boolean false 是否显示面板指示点 indica ...
- 五分钟掌握微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名 类型 默认值 说明 autoplay Boole ...
- 微信小程序---轮播图
0. 微信小程序轮播图的实现 a. 是利用了swiper组件滑块视图容器 b. swiper的文档 文档https://developers.weixin.qq.com/miniprogram/dev ...
- 【修真院java小课堂】ArrayList浅析
大家好,我是IT修真院郑州分院第8期学员,一枚正直善良的java程序员.今天给大家分享一下,修真院官网 java任务中可能会使用到的知识点: ArrayList浅析 width="640&q ...
- 微信小程序 轮播图代码
微信小程序轮播图的代码如下: 首先,在小程序的 wxml 文件中,添加如下代码: <!-- 轮播图组件 --> <swiper class="swiper" in ...
最新文章
- 数据库设计和管理规范
- WP老杨解迷：开发生态两极化和榜单乱象
- Binder子系统之调试分析(二)
- log4j2.xml 文件
- oracle中行数少于1000,oracle中in的个数超过1000的解决办法
- OpenCV的resize方法与双线性插值
- JavaScript中语句与函数的执行辨析
- 2021总结-》2022年
- 如何在家优雅地使用 Sci-Hub 免费下载外文文献
- 定时任务时间表达式的规则
- IDEA中Terminal窗口中无法使用maven命令
- HTML：设置背景颜色和图片
- 思科 计算机网络 第一章测试考试答案
- Data Management Platform 数据管理平台全接触
- 五子棋(含较高级的人机对战)
- 通信天线建模与MATLAB仿真分析,通信天线建模与MATLAB仿真分析代码
- css3的clip-path方法裁切图片（三角形，多边形，圆，椭圆）
- c++ 按分割符(忽略多次出现)切割string字符串
- html 和css常见的面试题
- HTML5-电影影评网