Navigation menu

0755-82192581
  • Contact us
  • 0755-82192581
  • 深圳市罗湖区嘉宾路深华商业大厦9楼(地铁1号线国贸站B出口既是)

    3375726676@qq.com


    © 2007-2021 All Rights Reserved.
  • 策略型高端网站设计公司

    Strategic advanced website design company

    View More
  • 网页设计如何更好的使用轮播

    时间:2022-06-25  作者:GARY  来源:https://www.niegoweb.com/
    网页设计过程中我们经常会使用到轮播,尤其是首页banner图的轮播。这样做的目的是为了让受众快速了解重要内容,但它们有很多可访问性问题,它们通常表现出低点击率,在自动前进和人们经常滚动浏览它们时可能会非常具有破坏性。再加上带有微小点击区域的小进度点、几乎不可见的标签和一点视差,你手中就有了一个相当麻烦的设计模式。


    深圳专业网页设计公司

    如果我们确实需要设计一个轮播,我们应该记住什么?我们如何创造更好的轮播体验来帮助人们,而不是让他们沮丧?我们如何避免轮播通常带来的常见可访问性和可用性故障?考虑到一些轮播实际上有多大,有时会占据整个屏幕的 50% 到 90%,这并不奇怪。而且由于轮播中显示的内容很少是用户最终访问该网站的原因,因此几乎本能地忽略了它。因此,用户很少点击轮播的幻灯片,尤其是当第一张幻灯片不够吸引人或与手头的任务无关时。

    自动推进轮播也不能解决上面列出的问题。每当页面上的任何部分内容开始移动时,许多用户几乎会立即忽略它。如果幸运的话,用户可能会被困在轮播附近探索相关内容,因此他们可能会瞥见第二张或第三张幻灯片,但他们会拼尽全力忽略它,直到进入下一页。更常见的是,尽管许多人倾向于只是滚动过去自动推进的轮播,试图将其移出视图并继续他们的任务。这在移动应用程序中的入职教程中尤其明显,用户在面对入职轮播时首先搜索的是一个珍贵的“跳过”按钮。

    轮播非常有效,尤其是当我们想要突出显示所有功能或选项,但又没有空间一次显示它们时。不过,在某些情况下轮播效果还不错。如果轮播有意义地集成到用户试图完成的任务中,这尤其适用。在这种情况下,点击率通常相对较高:用户以大致线性的速度推进轮播。换句话说,当我们在特定且相关的上下文中提供附加内容时,轮播就起作用了。所有这些用例对于零售、旅游、产品页面、画廊、相关项目、新闻故事和投资组合等都是非常典型的。这正是轮播闪耀的地方。

    我们非常习惯于在轮播中指示当前位置的进度点,但是有一些很好的理由可以让我们避免使用它们。一方面,有时用户拼命尝试点击它们,假设这是一种支持向前和向后导航的交互。但是因为这些点通常非常小,所以通过它们导航——即使它受到支持——也很慢并且需要很高的精度。通常,这会导致愤怒的点击(或轻敲)、错误和意想不到的来回跳跃的狂热组合。另一方面,进度点并不是吸引用户点击轮播的特别有效方式。他们不怎么交流。绝对不是每个点代表什么,也不是用户在滑过轮播时应该期待什么。进度指示器不传达任何特定含义(即除了进度之外),因此与鼓励交互不是很相关。

    进度点的有用特性是它们指示进度。但是,我们不需要单独依靠它们来显示用户当前的位置。一种选择是使用水平滑块来指示整个选项列表的实际距离。这就是劳力士所做的,伴随着带有箭头的滑块一步一步地向前移动。这可能就足够了——并且避免对单个点进行愤怒的点击/点击。不过,单独添加水平滑块并不理想。尤其是对于较长的轮播,它没有传达足够的信息来指示用户当前在轮播中的确切位置,以及他们必须走多远才能完成一个完整的循环。我们可以发明各种显示进度的方法——也许是百分比或饼图可视化,但最好的方法可能是最简单的方法:数字。

    相关案例

    OTHER CASE