产品设计中轮播图的弊端以及6种替代方式

轮播图在UI设计中是个邪恶的存在,其实很多设计师和前端都这么认为。

那为什么我们还能到处看见轮播图?

一部分原因就在于我们很多人经常看到轮播图,所以把轮播图的存在习惯性地标准化了,可能会随口跟设计师们提建议。

但存在并非合理,单单“流行”这一个原因并不能支撑一个事物的合理性。身为设计师,也要习惯批判性地看问题。

来吐槽下轮播图的“名过其实”

阅读障碍:轮播图会自动翻页,这对那些阅读速度慢的人来说就是很大的障碍。你可能经常会遇到这种情况,还没看清一张图的信息它就翻过去了 ;

视觉盲点:多项视觉测试研究表明,其实轮播图获得的注意力非常少。你把重要的信息放在轮播图上,结果用户很可能只是草草扫过一眼;

干扰性:从视觉上来说,晃动的轮播图会引起一定的反感,而且还会干扰用户看其他内容;

加载速度慢:轮播图的加载速度会比普通图片慢,这点也会影响整体的用户体验。

不用轮播图,用什么呢

1. 单张大图

Less is more. 只选择一张能表达你品牌内容的图,给用户一种沉浸的体验,用户的注意力更集中,实际获得的信息其实可能更多。当然,也可以加上一层文字说明更好地表达信息。另外,这张图或者文字也可以随时按照你的目的进行更换。

(墨刀产品制作)

2. 单张大图+CTA按钮

如果觉得单张大图对用户的号召力不够,可以加一个 Call to Action 按钮。CTA 按钮在显要的位置帮助我们进行主要功能的跳转,还能有助于网站的转化率。

(墨刀产品制作)

3. 图片网格

如果你觉得对你的网站来说,一张图片的视觉冲击力或者信息表达真的不够,那可以用多张图片拼接的方式展现。图片网格比起轮播图,能够让我们更加有“主控力”的吸收信息,带来更好的体验感。

此外,还可以给各图片加上链接或者CTA按钮,以提高转化率。图片网格的方式多种多样,就看设计师对功能和视觉的考量了,下面只是列出几种可能。

 

4.  短视频

有些情况下,图片可能也不足以表达你需要表达的信息,或者自己认为短视频更有利于自己网站的用户体验和转化率等,那就用短视频吧。

不同的表现形式也会带来表达角度的转变,充分利用好短视频的特点,为用户讲一个故事,或者进行产品教学,都是不错的内容选题。

( 墨刀产品制作)

5 定制登陆页

如果放弃把所有的信息全都展示给所有用户看,那可以试试定制登陆页。已经很多人讨论过登陆页的个人化对提升转化率的好处,毕竟,千人千面,在有限的空间提供跟用户相关的信息,对用户来说好感也up。

6 直接简约式设计

如果说轮播图的存在值得质疑,那么图片的存在或许同样需要设计师视场景进行判断和抉择。即使现在主流的主页设计都有图片元素,不过仍然有些网站选择简单的,单独以文字展示的设计,这种设计只给用户必要的信息,删繁就简,直接了当。

(墨刀产品制作)

总之,对设计界的一些流行因素保持独立思考的态度,具体的抉择要考虑本身产品的服务对象、目的和风格,才是好的设计。

文中部分图片选自墨刀专区,希望大家能喜欢~~

原文地址:https://www.cnblogs.com/productcompass/p/9899846.html

时间: 2024-08-03 07:49:04

产品设计中轮播图的弊端以及6种替代方式的相关文章

element-ui中轮播图自适应图片高度

哈哈,久违了各位.我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码. 那个axios的使用不重要,大致思路就是页面渲染前拿到当前窗口的宽度*图片比例给轮播图一个初始的高度,当窗后大小发生变化时,监听事件里将轮播图高度重新赋值即可,再次感谢两位博友的帮助 <template> <div v-if="imgurl"> <el-carousel :heig

iOS中 轮播图放哪最合适? 技术分享

我们知道,轮播图放在cell或collectionViewCell上会影响用户层级交互事件,并且实现起来比较麻烦,现在推出一个技术点:答题思路是:将UIScrollView放在UIView或UICollectionView或者UITableView上,将UIScrollView的y设为需要的大小,加载在你的现有图层上,然后改变偏移量即可,具体如下: 效果如下: 代码如下: 以UICollectionView为例 //表头可以做轮播图 UIScrollView *scrollView = [[UI

vue中轮播图的实现

轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> &l

Android轮播图的实现

Android轮播图的实现 这几天看了<Android开发艺术探索>这本书真的是挺不错的,学了自定义View之后打算动手实践一个轮播图控件,网上有很多实现的方法,我最后实现起来跟他们也基本上都是大同小异,主要我也是为了练练动手能力.先来个效果图,图片是在百度搜的正经图片 分析 实现轮播图的方式大体上我看到了三种,一是使用安卓的Gallery控件来实现,二是使用HorizontalScrollView,三是使用ViewPager来实现,Gallery控件现在已经不推荐使用了,在源码中我们也看到了

第124天:移动web端-Bootstrap轮播图插件使用

Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel 一.基本的轮播图实现 HTML代码 1 <!-- 2 以下容器就是整个轮播图组件的整体, 3 注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图 4 bootstrap.js

axure 轮播图

axure设置轮播图详细流程,有问题欢迎指正,直接上流程,demo下载 :https://files.cnblogs.com/files/fannyLi/%E8%BD%AE%E6%92%AD%E5%9B%BE.rp.zip 1.打开axure新建一个页面,拖入动态面板 2.双击动态面板,弹出面板管理,填写动态面板名称:轮播图,点击绿色加号添加3个面板状态(个数根据需求而定) 3.双击动态面板中的轮播图一进入状态一,添加一张图片 4.动态面板中轮播图二.三同上,各添加一张图片 5.回到index页

原生js实现移动端Touch轮播图的方法步骤

Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下. 1. html 结构 结构上,还是用ul.li来存放轮播图片,ol.li来存放轮播小圆点: 2. 样式初始化 html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 /* 清除标签默认边距 */ body,ul,li,ol,im

JavaScript实战项目:移动端 Touch 轮播图

Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下. 1. html 结构 结构上,还是用ul.li来存放轮播图片,ol.li来存放轮播小圆点: 2. 样式初始化 html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉. /* 清除标签默认边距 */ body,ul,li,ol,img { margin: 0; padding: 0; } /* 清除 ul 等标签前面的"小圆点"

bootstrap轮播图carousel插件

一.基本介绍见:https://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html 二.例子:在PC端使用轮播图(高度固定,图片居中,容器铺满,使用背景图) <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- 指示器 --> <ol clas