惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

腾讯CDC
The Cloudflare Blog
IT之家
IT之家
V
V2EX
雷峰网
雷峰网
MyScale Blog
MyScale Blog
P
Proofpoint News Feed
Stack Overflow Blog
Stack Overflow Blog
博客园 - Franky
Engineering at Meta
Engineering at Meta
S
SegmentFault 最新的问题
GbyAI
GbyAI
Microsoft Azure Blog
Microsoft Azure Blog
博客园 - 司徒正美
云风的 BLOG
云风的 BLOG
小众软件
小众软件
博客园 - 叶小钗
Blog — PlanetScale
Blog — PlanetScale
C
Check Point Blog
A
About on SuperTechFans
B
Blog
月光博客
月光博客
宝玉的分享
宝玉的分享
Last Week in AI
Last Week in AI

人人都是产品经理

为什么你的产品找不到差异化?90%的失败都卡在第一步上(下) – 人人都是产品经理, 3年从30万到1300万用户、获2200万美元融资,这个AI教育产品用“抽卡”破解了获客难题 – 人人都是产品经理, 园区招商系统怎么做才能真正帮到去化?我加了这一个功能,推广链接转发400次阅读过万 – 人人都是产品经理, AI大事件:OpenAI发完网络安全模型又搞药物研发,小鹏汽车要抓”DeepSeek时刻” – 人人都是产品经理, 电商不是卖货,是一场更残酷的产品经理实战 – 人人都是产品经理, 没想到,活动营销又回来了! – 人人都是产品经理, 为何All-in海外KOC:一场关于AI时代窗口期的豪赌 – 人人都是产品经理, 重新理解企业的内部协作 – 人人都是产品经理, 苹果的 AI 战略到底是什么? – 人人都是产品经理, 医疗智能体·第2讲——合规护城河:等保、PIPL与HIPAA的架构实战 – 人人都是产品经理, 向量知识库五步法:从“答非所问”到“精准回复” – 人人都是产品经理, 鸿蒙PC三方库构建总指挥HPKBUILD(sha)库为例 – 人人都是产品经理, 何时该用LLM?AI产品经理的LLM设计指南 – 人人都是产品经理, 医疗信息领域的需求方、决策方、准入方以及关注点(二) – 人人都是产品经理, 即梦涨价:一场被误读的「傲慢」 – 人人都是产品经理, 面试AI PM必答题:Hermes和OpenClaw的区别,如何讲清楚业务价值 – 人人都是产品经理, AI的下一张船票:世界模型——AI产品经理必须理解的技术拐点 – 人人都是产品经理, 小红书做GEO,怎么让AI信你?记住这 3 个重要信息 – 人人都是产品经理, 5 家印度 AI 初创公司,看看印度 AI 再做什么 – 人人都是产品经理, AI项目跨团队协作:产品技术业务如何不打架 – 人人都是产品经理, Agentic Workflow(智能体工作流):让AI从”答案生成器”变成”数字员工” – 人人都是产品经理, lycium_plusplus 项目全景解读:OpenHarmony 三方库构建的“大管家” – 人人都是产品经理, 从爆单救火到前置履约:两套预采策略,把生鲜大促履约效率拉满 – 人人都是产品经理, 什么时候该补货?我用一轮数据做了一个决定 – 人人都是产品经理, 从“机械兜底”到“动态分流”:AI客服重复进线治理的4大底层逻辑 – 人人都是产品经理, 抖音拼效率,红书拼洞察 – 人人都是产品经理, 全民狂欢与退潮——为什么龙虾这波热潮冷却得如此之快? – 人人都是产品经理, Stripe押注!MPP重塑全球支付 – 人人都是产品经理, 小红书GEO:AI引用你的内容,不是因为你对,而是因为你看起来可信 – 人人都是产品经理, 前百度副总裁押注办公Agent,日韩付费爆发,Manus迎来强劲对手 – 人人都是产品经理,
分页加载VS无限加载
CUPTEA · 2023-09-12 · via 人人都是产品经理

究竟应该选择分页加载,还是无限滚动呢?关于这个问题,或许不少设计者在业务中都会碰到。这篇文章里,作者就总结了分页加载和无限滚动加载的利弊,一起来看看吧。

上一篇文章解构了分页,本文分析一下分页加载和无限滚动加载的利弊。

在设计时难免会碰到,是使用分页还是使用无限滚动的问题。分页可以分担性能压力,减小卡顿,但并不是所有的业务场景都能适配分页。像Pinterest就采用了无限滚动的方式,利用不断刷新的信息流给用户打造一个沉浸式的体验。

你真的会用分页吗?(下)

那么使用分页和无限滚动有什么区别呢?

一、分页加载

1. 分页的优点

1)给用户信息数量的预期

分页可以让用户清楚的知道自己需要浏览的信息数量和所浏览的位置,让用户建立一个心理预期,并给予用户掌控感。

2)方便回溯定位

分页可以方便用户快速回溯定位,在大量的数据页中,当你回过头想要找到之前看到的某一个信息时,也能快速的定位到首页或者尾页。

3)分担性能压力

庞大的数据量可以通过分页减轻前端页面压力,无需一次把所有数据加载完成,用户点击页码之后加载该页面便可,也避免了低价值的请求。

2. 分页的缺点

在我们点击页码之后信息需要一定的加载时间才会呈现,一定程度上,这样的做法会打断用户的思路从而破坏了用户体验。在遇到分页时,用户会去思考,我是要继续点击浏览呢还是离开页面。

二、无限滚动

1. 无限滚动的优点

1)减少干扰用户

无限滚动在移动端和社交媒体、娱乐类属性的平台较为常见,这类平台需要给用户打造流畅的体验、让用户维持沉浸的状态。这种做法相较于分页最大的优势是减少了对用户的干扰、打断。

你真的会用分页吗?(下)

2)降低交互成本

如果用户持续快速的加载内容,无需用户点击按钮,直接通过上下滑动操控,极大的降低了交互成本。

3)适配移动端设备

因无限滚动较为美观的特性,加上移动设备视角比较小,用户已经习惯了滚屏,他们的手指总是靠近屏幕,随时准备进行滑动。

2. 无限滚动的缺点

1)难以再次找到特定内容

在有分页的情况下,用户可以记住某个信息所在的页码来定位大致的位置,但是在无限滚动中定位刚刚所阅读过的内容是一件比较困难的事情。

2)无法触达页脚

无限滚动会让用户无法触碰到网站页脚。页脚通常会放置类似于联系电话,规则政策等重要信息,信息流的持续加载阻碍了用户触碰到页脚。其次,如果用户在一个页面翻了十几屏之后,滚动条还停留在浏览器靠上方的位置,那么用户该多绝望。

3)搜索引擎优化(SEO)表现更差

这种模式有一个缺点,每次我们加载或追加新数据时,列表都会继续增长。滚动得越多,数据就越大。当浏览器无法渲染如此大量的数据后,性能将会降低。

针对分页和无限滚动的缺点,衍生出来了两个折中的方法,一个是「加载更多」,另一个是「分页+无限滚动」的模式。

三、加载更多

「加载更多」指的是当用户下滑到底部时,需要额外点击“加载更多”或“查看更多”的按钮来在尾页显示更多内容。设置“加载更多”的按钮可以让用户自主选择是否要加载更多条目。该方式有益于只想查看少量信息的用户轻松触达网站页脚。

你真的会用分页吗?(下)

并且点击“加载更多”后产生的信息大概在7屏左右,这对用户来说不是一个很长的页面,并不会造成心理负担。如果在这7屏内依然找不到想要的结果,可能是搜索词不对,这样用户就不需要继续点击“加载更多”,减少了无效的加载请求。

跟传统的无限滚动模式相比,这对用户来说无疑是提升交互体验的。但是“加载更多”按钮的一个弊端就是交互成本的上升,用户需要点击“加载更多”按钮来查看更多内容,即使这种干扰很小,也可能会使用户浏览更少的内容或者退出。

四、分页+无限滚动

分页虽可以比无限滚动更轻松的找到特定内容,但加载速度也要比无限滚动慢很多。如果既想保留分页的优点,又不想页面加载缓慢,可以通过分页+无限滚动的方式在不同页面间来回跳转,高效地跳过无关内容。

五、回归需求

分页虽会给人一种切割感,在查看上也会更耗时,但因为前端开发的性能压力而不得不采用分页时,那么也没有什么办法了。

在设计中,设计师需要回归需求,与开发随时保持交流。尤其是跟前端开发工程师,他们在编写代码时都要考虑性能问题,如果不和他们进行充分的沟通,那么做出来的交互体验可想而知。

本文由 @CUPTEA 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。