美叶研学
文章小册日报
文章小册日报
目录
设计漫谈
  • 前言

    第1节

    关于本课

  • 全部课程

    第1节

    行为判定

    第2节

    移动注册

    第3节

    消息推送

    第4节

    分层呈现

    第5节

    多选

    第6节

    防止犯错

    第7节

    排序

    第8节

    标准化录入

    第9节

    打断

    第10节

    视觉层级

    第11节

    进程状态

    第12节

    密码设定

    第13节

    内容归类

    第14节

    反馈

    第15节

    操作距离

    第16节

    折叠播报

    第17节

    按钮注释

    第18节

    滑屏操作

    第19节

    选择权

    第20节

    内容溢出

    第21节

    输入暗示

    第22节

    关系映射

    第23节

    返回顶部

    第24节

    位置锚定

    第25节

    分页

    第26节

    面板优化

    第27节

    输入补全

    第28节

    信息检索

    第29节

    还原

    第30节

    内容折叠

    第31节

    通知提示

    第32节

    可视化

    第33节

    对话框

    第34节

    页面直达

    第35节

    输入法

    第36节

    清空删除

    第37节

    路径指引

    第38节

    社交对话

    第39节

    评论

    第40节

    文本框标签

    第41节

    筛选

    第42节

    光标控制

    第43节

    富媒体播放

    第44节

    数值修正

    第45节

    帮助说明

    第46节

    特殊状态

    第47节

    情感化

    第48节

    浏览线

    第49节

    模态叠层

    第50节

    预览

美叶 © 2026京ICP备18053775号-2    京公网安备 11010502047597号
分页
2023年2月16日

在位置锚定一节,我们曾提到了分页,在进行网页产品时,当页面内相同结构单元的信息条数非常多时,我们通常会选用分页器来完成设计。那么此刻问题特别多的小强可能就会发问了,为什么要在这些产品中使用分页器呢?


为什么使用分页?

其实要回答这个问题也并不困难,使用分页器是为了保障网页打开速度。如果我们打开一个网页,初始给到我们的信息条数非常多的话,就会导致网页加载过慢,很多信息的给出需要和服务器交互,带宽有时会限制数据的传输速度。另外一个限制条件来源于设备本身,如果网页的信息量过大,缓存这些信息,通常会消耗掉大部分的设备内存,网页浏览就会变得卡顿,从而影响体验。分页的使用,可以有效减少数据加载的条数,从而提升网页浏览的效率。那么在网页产品设计中,究竟存在哪些分页类型呢?


网页分页

网页中最常见的分页方式,主要借助分页器来实现。分页器有很多种类型,当分页的个数较少时,比如2-3页,我们可以使用最简单的分页器类型完成设计,这种分页器只包含有翻页按钮,用户可以通过点击上一页或者下一页查看全部的页面内容。



当产品的分页数量增加时,这种分页器就很难达到使用预期,比如一个包含10个分页的网页中,我们想要查看第10页内容,需要从起始的第一页,连续点击9次下一页按钮。

为解决10个分页数量的网页浏览效率问题,我们必须要对分页器进行升级,这时我们就会用到第2种分页器结构,这种分页器不仅包含上下翻页按键,同时还向用户展示部分分页页签,用户可以对照页签编号,迅速直达对应页面,如图所示



即便是有些分页没有给出对应的分页,我们依然可以通过选中相近分页的方式,来缩短抵达目标分页的“距离”

当然如果一个产品中的分页数量非常之多时,比如有50个分页,这时上一种分页器也很难提升用户访问中间页面的效率。如果我们的目标分页是26页,那么即便是我们选中了和26页最近的第5分页,要想到达26分页,我们仍然需要连续点击下一页按钮数十次之多。为了更好的触达中间分页,此时我们就需要考虑用到另一种升级类型的分页器了。


在这种分页器中,除了上述分页器所包含的全部结构外,还为用户提供了一个“直达输入框”,用户可以在输入框内输入数字的方式,快速直达目标页面。比如我们想要访问56页,只需输入56,然后点击确定提交即可。


通过上文的讲解,我们不难总结,网页分页器类型的选定,主要依照分页数据量进行。在网页产品设计中,我们可以依照自身产品的数据量多少,以及可能的扩展型需要,来灵活选择分页器类型。

如今随着移动互联网的发展,很多APP为了获得更好的阅读体验,已经不再使用分页器来进行设计了。受其影响,很多网页产品也取消分页器的使用,取而代之的是通过内容自动加载方式,为用户提供更加连续的阅读体验。



自动加载

如果我让你举例说明,在哪一款移动APP中你用到过和网页分页器类似的控件结构,我想大概率你会很难举出这样的例子来。网页的分页器之所以没有在移动设备普及,主要原因是分页器这类控件在移动设备中应用,会造成点击体验不佳。这里所说的体验不佳,是实实在在存在的体验不佳。如果我们在移动设备中,横向摆放这些分页按钮,那么势必会造成频繁误触,因为这些按钮分布太过密集了。

另外一个体验不佳则体现在对阅读连续性的打断上,我想没有任何人喜欢在feed浏览中,还要频繁的点击翻页按钮。所以在移动设备上,用户执行任何操作,都会遵循这样的体验序列,那就是精准的点击远没有滑动体验好,而滑动操作再好,也没有自动触发更让人心情愉悦。所以但凡涉及到内容加载,在移动产品设计中,都会被设计成自动加载。


定位问题

在移动产品设计中,“拒绝”使用网页分页器,虽然获得了浏览体验上的提升,但同时也会遇到新问题,那就是如何让用户快速触达,内容流的某一特定区段(比如中间区段,或是初始区段)?

如果你是一个经常发微博的人,那么你可能有过这样的经历,就是查找曾经自己发送的某条微博,比如,你在现在的时间点(2023年),查看自己注册微博时(2010年),发布的第一条微博。你需要执行不断连续的滑屏加载操作,一直到手腕酸疼,才可能找到这条微博。

类似的在移动端很多产品中,都会遇到类似的问题,比如我想要查找和某个朋友聊天时的关键信息,而这位朋友是我的高频联系人,于是我不得不连续执行向上翻页操作。

那么,在移动产品设计中,有没有好的解决方案可以用来提升用户“定位效率”呢?答案是有的,解决方案之一就是为用户提供筛选或者搜索功能,帮用户缩小查找范围。比如微博在18年前后,上线了一个筛选器,用户可以借助这个筛选器,圈定微博feed发布的条件范围。


而微信则想的更为周全,在查找聊天记录页面,为用户提供了多大8种类型的筛选方式,用户可以根据自身需要,灵活查找聊天内容。


相较于分页器,筛选条件的建构,往往从多个信息维度展开,不同维度筛选条件的交叉组合,更利于用户定位内容。比如在一些视频应用中,当用户没有明确片源查找需求时,可以借助交叉筛选条件,在百万片库中筛选出心怡的片源。



小结

在本课的最后,我们再对本节内容,做一个小结,当我们想要网页产品设计中用分页器时,需要依照分页的个数,来选定分页器类型,同时要兼顾数据的扩展需要(现在是2页,可能很快就几十个分页了)。

当我们进行移动产品设计时,如果内容呈现,依托于自动加载方式,那么在满足用户常规阅读需求外,一定要评估用户的需求,看是否需要为用户提供筛选、排序、精确搜索等协助用户定位内容的功能。

位置锚定
面板优化