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

推荐订阅源

博客园 - Franky
N
Netflix TechBlog - Medium
宝玉的分享
宝玉的分享
Google DeepMind News
Google DeepMind News
腾讯CDC
G
Google Developers Blog
Martin Fowler
Martin Fowler
Microsoft Security Blog
Microsoft Security Blog
Recent Announcements
Recent Announcements
爱范儿
爱范儿
Engineering at Meta
Engineering at Meta
Microsoft Azure Blog
Microsoft Azure Blog
A
About on SuperTechFans
aimingoo的专栏
aimingoo的专栏
有赞技术团队
有赞技术团队
Jina AI
Jina AI
人人都是产品经理
人人都是产品经理
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
M
MIT News - Artificial intelligence
罗磊的独立博客
博客园 - 三生石上(FineUI控件)
美团技术团队
WordPress大学
WordPress大学
阮一峰的网络日志
阮一峰的网络日志

人人都是产品经理

为什么你的产品找不到差异化?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迎来强劲对手 – 人人都是产品经理,
B端组件指南:分页
CUPTEA · 2023-09-08 · via 人人都是产品经理

分页这个功能往往因为设计点太小而被忽视,但其实分页这个功能,也有许多细节值得考虑。这篇文章里,作者就对分页的作用、结构等方面进行了经验分享,一起来看。

分页在B端是一个很重要的功能,但往往因为设计点太小而被设计师忽略。上一周我在优化系统的大数据表单页面,发现了许多问题,也踩了点坑,记录下来和各位分享点经验。

一、什么是分页

Element:当数据量过多时,使用分页分解数据。

Ant Design:采用分页的形式分隔长列表,每次只加载一个页面。

TDeisgn:用于模块内切换内容的控件。

也就是说当页面出现数据量过多或者长内容列表需要加载时,可以利用分页器控制单页内的信息数量,把大内容切割成为小块展示在页面上。

虽各大厂对分页的设计略有不同,但往往都逃不过以下这几个元素。其中,「上一页」「当前页」「下一页」是分页最基本的三要素。

你真的了解分页吗?(上)

二、分页的作用

1. 减少用户单次请求对服务器产生的性能压力和时间损耗

在大数据量的场景下,若不做分页,服务器就需要承担巨大的压力,庞大的数据量一次性传给前端,导致加载缓慢甚至服务器崩溃。

2. 减少低价值的请求

在大数据量的结果页中,若用户在查看完前几页之后发现该数据不是自己想要的,就能立马退出页面,无需等待所有的结果加载完成,从而减少了无价值的加载请求。

三、分页的结构

1. 总数据数

总数据数的显示可以让用户具有掌控感和安全感,让用户在操作时更具心理预期。

2. 单个页面显示的条数

单个页面显示的条数也可称为步长设置。在步长的规则设计上,各家系统略有不同。Acro在当前页面切换步长后自动跳转回第一页。

你真的了解分页吗?(上)

而Element在设置步长后则保持原位置不动。

你真的了解分页吗?(上)

看似Element的做法是更优解,但设置步长这个操作并没有什么意义,也会给前端开发工程师徒增工作量。不论是选择Acro还是Element的做法,切换步长时,数据位置已经改变,用户也找不到刚刚看到的数据去了什么位置。

在优化系统时,PM提出了给分页加步长的这么一个需求,原因是因为他使用的电脑分辨率比我的要高,因此在我页面上显示十行数据时为满屏状态,而他的页面底部还有许多留白。

此时靠用户改变步长增加了用户的交互成本,但如果让前端工程师把「页面展示规定数量」规则放开,改成「自适应显示」,不限制每行Min-Height,保证低分辨率正常显示,超出滚动的规则,问题也就解决了。

3. 相邻页数

相临的页码是为了让用户能够更快速的点击跳转到附近页面。

设计师需要注意页码展示的数量一定要够长,不然点击临页的作用就会等同于「上一页」「下一页」的按钮。

点击「上一页」按钮一下便能跳转到第8页,点击两下便能到第7页,也不是什么费力的事情。若展示更多的相邻页数,页码就能起到快速跳转的作用。

你真的了解分页吗?(上)

4. 尾页

尾页不一定是总页数。

如果数据非常的庞大,显示总页数会给前端带来比较大的压力,如果在业务中用户并没有查看最后一页的需求,那么可以不在尾页显示总页数。

如果用户就想看最后一页的数据,那么利用倒序或者跳至尾页岂不更方便快捷些。

你真的了解分页吗?(上)

5. 跳转页面

下图是TDesign设计系统中给出的跳转页面样式。

你真的了解分页吗?(上)

TDesign在跳转页面的按钮展现了总页数,我认为是一个过多的设计。

其一:分页有尾页做提示。

其二,如下图Element给出的样式,当输入超过页面数量的页码时,系统不生效,即便用户输入很长一段数字也不会产生什么问题。

你真的了解分页吗?(上)

还有两个值得注意的点就是数据的刷新方式和使用频率。

在设计时,需要与前端充分沟通,知道该页面的数据是否出于一直刷新的状态和使用频率。若该数据页一直处于刷新的状态,那么原本在第一页的数据将会一直往后出现在第二页,第三页…那么,即便你记住了某一条数据所处的页数,他的位置在不断的刷新,回过头输入页码又怎么能找到他呢。

同理,若该数据用户好几个月不查看一次,那他也不会记住数据所在的位置,也更不会想要去查看了。我想任何人在用浏览器搜索某个内容时,都不会滑到页面底部去选择页码吧。

这时,跳转页面在分页的中便也没有出现的意义了。

6. 隐藏分页

走查时,PM扔给我一个截图说,当数据只加载出来一页时就别展示分页了。

我带着需求和前端进行了沟通,发现在Element组件库中有一个特殊的场景是隐藏分页,当数据只有一页时可以选择隐藏分页,但我和前端一致认为没有必要隐藏分页。

你真的了解分页吗?(上)

原因有两点。

其一,该数据列表关联的执行动作是在不断运行的,也就是说数据会在不停的增加,很快数据就会占满一页。那么就没有必要为这短暂的一刻把分页做一个隐藏,不仅增加了交互成本也增加了开发和测试的成本。

其二,若该数据结果数量基本不变,保持在一页左右,甚至小于一页,那么也就没有必要做分页了吧。

设计师在进行分页时,要充分了解组件特点,全面考虑数据特性,与开发随时保持交流,避免做出美而不实的设计。

文章到这就结束了,下次谈谈分页加载和无限加载的区别。

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

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

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