【修真院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中进行点击误触的情况就更严重了，而且手指左右滑动也更方便更符合用户习惯，没必要再给轮播点增加切换功能