系列干货！B端组件指南：分页设计（下）

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

上期回顾：

系列干货！B端组件指南：分页设计（上）

分页在 B 端是一个很重要的功能，但往往因为设计点太小而被设计师忽略。

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

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

一、分页加载

1. 分页的优点：

①给用户信息数量的预期

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

②方便回溯定位

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

③分担性能压力

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

2. 分页的缺点：

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

二、无限滚动

1. 无限滚动的优点

①减少干扰用户

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

②降低交互成本

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

③适配移动端设备

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

2. 无限滚动的缺点：

①难以再次找到特定内容

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

②无法触达页脚

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

③搜索引擎优化（SEO）表现更差

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

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

3. 加载更多

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

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

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

三、分页+无限滚动

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

四、回归需求

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

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

欢迎关注作者微信公众号：「一盏茶的设计日记」