页面动画滚动的交互细节

提醒:本文最后更新于 3763 天前,文中所描述的信息可能已发生改变,请谨慎使用。

上次写了两个常见的 Affix 交互问题,今天继续写这个系列第二篇。这个系列我只打算描述问题本身,而不深入技术细节。交互细节问题在不同项目中有不同的处理方式,没有标准答案,了解问题本身比解决方案更重要。

本文讨论的是 web 应用经常使用的动画滚动效果,通常用在导航菜单上。主要逻辑是:用户点击锚到同页面锚点的 A 链接,不是直接跳过去,而是有一个动画滑动效果。本文列举三种常见的动画滚动交互方案:

方案一(好)

点击菜单项,菜单指示条和页面同时滑动。动画完成时,指示条正好指向点击项。

demo1

方案二(好)

点击菜单项后,页面开始滑动,菜单指示条立即指向点击项。

demo2

实际上,这个示例是方案一的简化版,去掉了菜单动画,让人觉得菜单反应更灵敏。

方案三(不好)

页面动画滚动效果中,通常要监听滚动事件,将当前页面位置反馈到导航菜单的选中状态上。这样,上面的方案二容易导致这样的逻辑:

  1. 点击菜单项,该项立即被高亮选中;
  2. 页面监听了 scroll 事件,会根据页面当前位置修改菜单选中项;
  3. 页面开始滚动,触发 window.scroll 事件,导致选中项跳到开头;

看起来是这样:

demo3

这个示例是在方案一的基础上,增加了立即选中点击项的逻辑。我觉得这样体验很突兀并不好,是失败的设计。来看个更真实的例子:

macqq来源

另外,使用动画滚动页面需要注意另外一个问题:频繁触发 window.scroll 事件,可能会带来大量运算。例如采用懒惰加载图片的页面,动画滚动页面对比用户正常浏览,通常会在更短时间内触发更多图片加载,这会在性能不好的机器上产生卡顿。这个问题可以通过 throttle 节流函数等方案来避免,这里不展开讨论。

最后,本文示例动画是我参考 Smart Transitions In User Experience Design中文翻译,by 涂鸦码龙)这篇文章里的示例制作的。这篇文章描述了几种过渡效果在交互设计中的应用,值得一读。

本文链接:https://imququ.com/post/animated-scrolling-in-web.html参与评论 »

--EOF--

提醒:本文最后更新于 3763 天前,文中所描述的信息可能已发生改变,请谨慎使用。

专题「Web 产品思考」的其他文章 »

Comments