html5滚动列表-你知道优秀无限滚动的五个原则吗?

2023-08-31 0 3,407 百度已收录

无限滚动(有时称为无休止滚动)是允许用户滚动浏览大量内容而看不到尽头的技术。 这些技巧很简单,只要在页面向下滚动时保持刷新即可。

该技术允许用户滚动浏览列表,而无需中断或额外的交互 - 当用户滚动时,会出现内容条。 Facebook的新闻提要页面、谷歌的图像搜索和Twitter的时间线都使用了这项技术。 这看起来很诱人,但它并不适用于所有网站或应用程序。

伟大无限滚动的五个原则

正确地实现无限滚动并不是一项不可能的任务。 要实现这一目标,请记住并遵循以下准则。

html5滚动列表-你知道优秀无限滚动的五个原则吗?

1. 导航栏保持可见

使用无限滚动时,最好保持导航栏始终可见。 这使得用户可以快速、轻松地导航到页面或应用程序的不同区域。 如果找不到导航栏,用户将不得不一直滚动到主页。

仅适用于联通设备:由于联通设备的屏幕较小,因此导航栏的比例可以相对较大。 如果屏幕上有滚动内容,当用户滚动获取新内容时,可以隐藏导航栏; 然后,当用户开始向前滚动以尝试返回到底部时,可以显示它。

html5滚动列表-你知道优秀无限滚动的五个原则吗?

2.如果有脚注,添加“加载更多”按钮

无限滚动限制用户对脚注的访问。 事实上,这是无限滚动设计的主要挑战之一:当用户到达列表顶部时html5滚动列表,内容不断加载,用户将看到页脚一两秒,直到下一组结果出现。加载并且页脚被挤出。 外面的景色。 这会阻止用户到达脚注。

以Bing图片为例。 页码包含“了解更多”和“帮助”等链接,但用户实际上无法单击其中任何一个,直到过了一会儿,页面停止无限滚动。

html5滚动列表-你知道优秀无限滚动的五个原则吗?

如果您的网站或应用程序有脚注,并且它对您(或更重要的是,对您的用户)很重要,那么您应该使用“加载更多”方法。 在用户单击“加载更多”按钮之前,不会手动加载新内容。 这使得界面非常简单html5滚动列表,并且还使得按需加载附加内容的认知负荷最小化。

Instagram 使用“加载更多”按钮可以轻松访问脚注,而无需强迫用户重复单击“加载更多”。

html5滚动列表-你知道优秀无限滚动的五个原则吗?

3. 返回按钮使用户返回到之前的位置

有时,无限滚动的实现会带来一个重大的可用性缺陷:滚动位置没有记录为“状态”。 如果用户从列表中的链接跳转然后单击后退按钮,他们希望返回到页面上的相同位置。 并且列表位置不再存在,这意味着使用浏览器的后退按钮通常会导致滚动位置重置到页面底部。 难怪用户很快就会因为没有适当的“返回列表”功能而感到沮丧。

不要让您的用户仅仅通过按后退按钮就失去对列表的跟踪。 非常重要的是,当用户通过列表访问某个商品的详情页面时,应该与点击浏览器返回按钮返回列表时的位置相同。

html5滚动列表-你知道优秀无限滚动的五个原则吗?

Flickr 会监听用户点击浏览器后退按钮的行为,以满足用户的期望。 APP会记住用户的滚动位置,因此当用户按下后退按钮时,它会返回到原始位置。

4. 提供为特定项目添加书签的可能性

无限滚动最常见的缺点之一是您无法在内容出现时为其添加书签。为您喜爱的内容(或

“保存以供稍后使用”),可以成为用户作为将来参考的有用工具。 当网站或应用程序提供书签功能时,用户就会使用它。 例如,Pinterest 使用书签工具来帮助用户保存他们的想法。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 html5 html5滚动列表-你知道优秀无限滚动的五个原则吗? https://www.wkzy.net/game/185461.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务