注：喜欢翻译国外互动设计体验设计网站的优秀文章案例，仅供相互学习和讨论，翻译有版权，表达包括译者的个人理解，如有错误，请纠正~
前言
“Are home page carousels actually helpful to users? ……(此处省略1万字)The short answer is that home page carousels can work, but in practice the vast majority of implementations perform poorly with end users……(此处省略1万字)But saying that home page carousels should never be used doesn’t fully align with our seven years of large-scale usability testing — at least in an e-commerce context.”
简单来说，作者想说的是，使用轮播图在有限的空间内提高用户的阅读效率是非常有用的，但在大多数情况下，轮播图的设计并不好用。
遵循本文提到的10个轮播图设计原则，可以提到使用高轮播图时的用户体验。如果在设计中不能很好地注意这10个体验的细节，最好少使用轮播图设计。
在本文中，作者将首先通过实例对10个旋转图设计原则进行反复，然后解释为什么以及如何区分桌面端和移动端的旋转图，并列出一种比旋转图更好、更容易使用的显示方法。
一、实际应用中的轮播图
根据美国50家顶级零售电商网站的统计，发现轮播图在电商网站上得到了广泛的应用:PC52%的电子商务网站使用轮播图，56%的移动电子商务网站使用轮播图。(以下图表由译者个人制作，方便大家理解。
本文的重点是如何通过设计和交互细节使主页轮播更加user-friendly，而不是关注轮播图本身应该放哪些内容。此时，我们应注意以下几点：
如果轮播图的内容与网站本身无关，没有精心设计和使用高质量的图片，用户体验会很差 — 如果轮播图的内容看起来太像广告，那么用户就会直接忽略它，即使轮播图的内容与用户需要的相关 — 轮播图内容不能太商业化。轮播图的主要优点之一是可以放专门设计和大文件的图片 — 大文件和设计图片会降低主页的退出率，对网站和品牌产生积极影响，因为设计好的高清大图可以在主页上给用户留下好印象 — 在用户快速决定停留或离开之前，增加用户在主页上的停留时间 — 精心设计轮播图片
二、轮播图设计十原则
那么，如何在实际应用中做好轮播图设计，作者将10原则分为四个部分进行阐述：
1.点击后滑动(轮播)顺序和落地页
大多数用户不会阅读所有的主页旋转图，即使是自动切换旋转图。他们经常在所有旋转图的内容循环之前跳到另一个页面或向下滑动页面，换句话说，没有人能预测用户下一步会看到哪一帧旋转图。
因此，只要轮播图不是展示网站特点和网站产品的唯一途径，用户即使不阅读所有轮播图也不会有大问题。
我们之前做的轮播图可用性研究(仔细安排每帧的显示内容和顺序)，发现大部分用户在轮播图自动轮播完一个轮回之前都会跳到另一个页面，而在手动轮播图网站，轮播图只会停留在第一帧，除非用户主动找到，否则不会注意到有用的信息。因此，即使完善轮播图的细节设计是个好主意，也不能成为用户获取网站信息的唯一途径。
两条原则：
原则1： 特别是第一帧，轮播图的显示顺序非常重要；原则2：将轮播图作为显示网站重要信息和特征的补充手段，而不是唯一的方式。
2.PC自动轮播逻辑
自动轮播形式可以保证轮播图的每一帧都有一定的曝光率，实际上自动轮播的点击率(8%~10%)高于手动轮播(1%~2%)，因为像动态图一样，自动轮播图容易吸引页面其他静态图的用户注意力，所以轮播图的内容和设计质量需要很高的要求。此时要注意三个极其重要的自动轮播图设计原则：
原则1:自动轮播不要太快——
如果轮播速度过快，用户就没有足够的时间阅读感兴趣的轮播图片；如果轮播速度过快，用户感兴趣的轮播内容而受到骚扰。
轮播图的展示时间应根据轮播图的文案确定 — 尼尔森诺曼集团推荐自动轮播图的单帧时长按1秒显示3个文案播放，这意味着每个轮播图的显示时长是独立的。
事实上，你也可以向苹果学习，让用户对轮播时间有心理预期。
原则2：用户hover内容应暂停自动轮播——
Web information seeking and interaction 指出用户鼠标的位置与当前页面关注的内容有内在联系 ：
当用户的鼠标悬挂在某个帧中时，表明他们对其内容感兴趣；当用户悬挂时，第二个原因是防止用户在点击他们想看到的帧时自动旋转到下一帧 ；如果用户意识到他们在点击后跳转到一个无关紧要的页面，用户会感到怒和失落，不得不回到主页，然后再次点击原来想要的帧轮播放图。
原则3：当用户有任何主动交互行为时，应停止自动轮播——
当用户主动点击轮播图按钮查看前一帧或下一帧内容时，这种行为是故意的，并且是故意的 即使用户决定查看主页的其他内容，也不应更改（当前轮播内容）。
点击行为是用户的主动响应行为，是反映用户意图和兴趣的强烈信号。因此，当用户主动交互旋转图（旋转图）时，应停止自动旋转，因为用户很可能打算查看某一帧的内容。
3. 轮播图控制器应具有两个功能
原则1:轮播图控件提示当前图片帧数位置——
提示用户有更多帧数的图片，让用户有更多的探索可能性；提示用户有多少帧；当旋转图自动播放到最后一帧时，提示用户循环到第一帧。
常用的设计是在五颜六色的图片上设置一组小点，但通常很难识别。最好把这些点放在图片外面。
原则2：轮播图控件允许用户切换前后帧内容——
这是使用箭头的好方法。然而，我们发现，由于底图与箭头的对比度不够，箭头本身尺寸有限，用户很容易忽略这些控制器。如何避免用户忽略前后切换的箭头：
显示下一帧或前一帧的图片；根据所识别背景图片的颜色和亮度进行相应的颜色变化。
用户很容易感知到可以通过显示前后帧内容的部分内容进行切换。
除了传统的设计风格，比如用来感知位置的小点和前后切换的箭头，table of contents这种设计风格也能起到同样的效果 。
首先，它将位置感知和手动切换控件结合在一起UI组件；其次，它可以为用户提供一定的轮换信息线索，让用户知道接下来会看到什么，让用户更有效地跨帧切换。
4. 移动端的一切都如此不同
触摸屏设备上的轮播图和PC端有很大的不同 — 之前列举的PC移动设备上的交互逻辑无效，有许多新规则：
原则1:没有移动终端hover因此，尽量避免自动轮播——
hover状态是用户对特定帧内容感兴趣并可能在阅读副本后点击的信号，这意味着如果没有hover如果状态激活自动轮播暂停，自动轮播不适合使用移动设备 — 在用户点击轮播图几毫秒之前，自动轮播会突然切换图片，使用户跳转到错误的页面。
原则2：移动终端支持滑动操作——
用户在触摸屏设备上的操作预期是滑动导航和切换传统的轮换图操作控制器（如箭头前后切换和小点）
原则3：移动屏幕图片需要特别优化——
许多在PC端上使用的轮播图设计稿在直接缩放后在移动端上重复使用，导致移动端屏幕上很多文案阅读性差；移动用户添加载较慢的轮播图更没有耐心( 用户在PC端可以边花费1到5秒钟来等待轮播图刷新边浏览网页的导航栏和其他信息，而在移动端有限的屏幕大小下用户只能看到轮播图)
现在我们来总结一下：
三、轮播图的替代方案
单纯展示静态内容作为在主页的独立部分是替代轮播图的一种好方式：
它没有轮播图的那些用来控制切换图片的控件，因而尤其适合在移动端使用；它高度符合用户与首页的交互方式(70%的移动端用户会下意识的拖动并浏览首页的内容，来获知他们来到了什么类型的网站)；相比于使用轮播图要遵守的那10条原则，它使用起来更加便捷，那些商家和公司会越来越认识到布局设计上的紧凑会有多重要。
原文作者：Christian Holst
原文地址链接：https://www.smashingmagazine.com/2016/07/ten-requirements-for-making-home-page-carousels-work-for-end-users/
本文由 @ vanhelsinglhj 翻译发布于人人都是产品经理。未经许可，禁止转载。
题图来自 pexels，基于CC0协议
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至827202335@qq.com 举报，一经查实，本站将立刻删除。文章链接：https://www.eztwang.com/dongtai/77761.html
微信扫一扫 
