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

推荐订阅源

H
Heimdal Security Blog
A
Arctic Wolf
K
Kaspersky official blog
V
Vulnerabilities – Threatpost
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Simon Willison's Weblog
Simon Willison's Weblog
L
LINUX DO - 热门话题
MongoDB | Blog
MongoDB | Blog
T
Threat Research - Cisco Blogs
D
Docker
爱范儿
爱范儿
T
Tenable Blog
C
Check Point Blog
B
Blog
C
Cisco Blogs
Vercel News
Vercel News
The Cloudflare Blog
T
Threatpost
NISL@THU
NISL@THU
T
Tor Project blog
V2EX - 技术
V2EX - 技术
P
Palo Alto Networks Blog
Application and Cybersecurity Blog
Application and Cybersecurity Blog
T
Tailwind CSS Blog
G
GRAHAM CLULEY
P
Privacy & Cybersecurity Law Blog
SecWiki News
SecWiki News
博客园 - 司徒正美
S
Security @ Cisco Blogs
GbyAI
GbyAI
S
Secure Thoughts
Microsoft Security Blog
Microsoft Security Blog
The Register - Security
The Register - Security
Recorded Future
Recorded Future
Cloudbric
Cloudbric
Webroot Blog
Webroot Blog
N
News and Events Feed by Topic
Y
Y Combinator Blog
博客园_首页
T
Troy Hunt's Blog
The Hacker News
The Hacker News
雷峰网
雷峰网
Google DeepMind News
Google DeepMind News
U
Unit 42
AWS News Blog
AWS News Blog
PCI Perspectives
PCI Perspectives
V
Visual Studio Blog
博客园 - 聂微东
有赞技术团队
有赞技术团队
酷 壳 – CoolShell
酷 壳 – CoolShell

人人都是产品经理

为什么你的产品找不到差异化?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迎来强劲对手 – 人人都是产品经理, 企事业单位数字化的业务供需本质 – 人人都是产品经理, 医疗智能体·第1讲——医疗信息化重构:从“辅助软件”到“自主智能体”的范式转移 – 人人都是产品经理, 粉丝量就是空气!!! – 人人都是产品经理, 用户说“薯片碎了”,机器回“要买吗?”:意图识别的翻车与破局 – 人人都是产品经理, RAG召回准确率从75到90 我做对了这三件事 – 人人都是产品经理, AI大事件:Anthropic改收费、OpenAI发安全版、手术机器人纳入医保、阿里发布”秒悟” – 人人都是产品经理, Chrome 推出 Skills 新功能,Agent 重塑上网方式 – 人人都是产品经理, GitHub前创始人拿了a16z的1700万美元,做Agent时代的Git – 人人都是产品经理 拷贝或克隆其他 Flutter OH 项目到本地后无法运行 – 人人都是产品经理, 优惠券设计:优惠券创建 – 人人都是产品经理, 不用死磕文档!AI 助手 1 小时搞定飞书 CLI 安装 + 配置 + 知识库 – 人人都是产品经理, 用小龙虾做竞品分析报告:从2天到20分钟,我是怎么做到的 – 人人都是产品经理 用小龙虾做市场分析报告:搞懂这3个公式,市场规模不再靠猜 – 人人都是产品经理, 你早就在做 Harness 工程,只是不知道它叫这个名字 – 人人都是产品经理, Think Long就够?你可能想多了! – 人人都是产品经理, 货代SRM实战:供应商准入怎么做,才能让资源池不是通讯录而是可交付网络? – 人人都是产品经理, 如何做好用户调研?详解基本技巧 – 人人都是产品经理, 木鸟、途家、美团对打,平台春天行动开“卷” – 人人都是产品经理, 入职才发现公司不靠谱?小红书从业者求职避坑指南 – 人人都是产品经理, 美国 AI 三巨头联手封堵,中国 AI 突围之路在何方 – 人人都是产品经理, 小红书,放在需求对面的镜子 – 人人都是产品经理, AI 会带来大规模失业吗? – 人人都是产品经理, 从出单到补货前,我第一次犹豫:该不该放大? – 人人都是产品经理, Flutter 三方库鸿蒙化适配:5 种高效检查方式,快速判断是否需要适配 – 人人都是产品经理, 从做产品进阶拿结果:医美机构产品经理转岗科室运营经理 – 人人都是产品经理, 阿里HappyHorse,一场关于“Token经济”的阳谋 – 人人都是产品经理, To B AI:客户留存落地的观察与思考 – 人人都是产品经理, AI产品的“生命线”——数据采集、标注、清洗的产品化设计 – 人人都是产品经理, 谈谈AI Agent(二):当“孩子”能自己“体验世界”时,你该学什么? – 人人都是产品经理, UI/UX设计师的3层能力进阶,前两层让你活下来,第三层…才是真正的分水岭 – 人人都是产品经理, 2分钟 → 30秒,效率提升75%:B端产品经理如何用「规则枷锁」驯服AI幻觉? – 人人都是产品经理, 还没来得及学OpenClaw,来了个更猛的:Hermes Agent – 人人都是产品经理, AI日报:宇树机器人跑出10m/s刷新世界纪录 – 人人都是产品经理, 一文说透基金互金如何用情绪价值引导用户决策做转化 – 人人都是产品经理, 当浏览器开始替你”看”网页:AI 浏览器正在亲手拆掉它脚下的那张网 – 人人都是产品经理, 0代码,一天时间我Vibe Coding了个网站 – 人人都是产品经理, Hermes 和 OpenClaw 之争,Agent 的能力应该“装上去”还是“长出来”? – 人人都是产品经理 视频生成的“桌子”,字节Seedance 2掀完,阿里快乐马掀 – 人人都是产品经理, 从听不懂到完全信任:我的 Codex 深度产品体验 – 人人都是产品经理, 当虚拟偶像有了北京户口,与真人偶像还有什么区别? – 人人都是产品经理, 会说,远远比会做更重要 —— 对 SBTI 爆火现象的五层观察 – 人人都是产品经理, AI产品经理必看:当“搭环境”比“选模型”更重要,你的认知还在2024年吗? – 人人都是产品经理, 2026年AI产品商业化核心逻辑:从功能demo到规模化营收的3个必破卡点 – 人人都是产品经理, 京东围绕供应链,卷起裤腿下场的那些事儿 – 人人都是产品经理, SBTI一夜刷屏:它赢在了“太会说人话” – 人人都是产品经理, 折扣零售的真相:不是便宜,而是价值感! – 人人都是产品经理, 和甲方吵了一架,最后加钱做了——我学到的ToB产品经理生存法则 – 人人都是产品经理, 和几位小红书操盘手聊了8小时,干货全在这 – 人人都是产品经理, 智谱GLM-5.1登场,开源模型首超Opus4.6!!! – 人人都是产品经理 Anthropic收入凭什么反超OpenAI,终于有人把这事说清楚了 – 人人都是产品经理, 史上最有故事感的技术报告——Claude最强模型Mythos 7个极其精彩的细节 – 人人都是产品经理, 模型不是壁垒,Harness 也不是 – 人人都是产品经理, 抖音本地生活业务思考21 – 人人都是产品经理, Superpowers:145k Star的AI编码框架,到底是什么来头? Superpowers:145k Star的AI编码框架,到底是什么来头? – 人人都是产品经理, OpenAI 的路走错了,Anthropic Harness 解法启示:模型需要实践专科生 – 人人都是产品经理, 画原型图的前一步:设计站点地图 – 人人都是产品经理, 给 DeepSeek 的最后一封催更信 – 人人都是产品经理, 手把手教你用 Claude Code 搭建 AI 营销团队:5 个 Agent、12 项技能,独立完成研究、写作、设计全流程 – 人人都是产品经理, 你以为大模型在学语言?不,它在重新发明语言学 – 人人都是产品经理 所谓Skill,不过是AI时代的工业垃圾 – 人人都是产品经理, 聊一聊内容传播的几个方法 – 人人都是产品经理, 当平台开始吃掉生态:从 OpenClaw 被封杀,读懂 Anthropic 的这盘棋 – 人人都是产品经理, 你装了 10 个 AI 插件,Obsidian 还是一个文件夹 – 人人都是产品经理 关于AI智能体架构演进的系统性思考:从单体试水到多体协同的重构 – 人人都是产品经理, 当“人”变成Skill,我们又该何去何从? – 人人都是产品经理 Mythos 事件:前沿 AI 治理的意外实验 – 人人都是产品经理, 货代CRM:信用与风险管理怎么做,才能把坏账风险拦在放货之前? – 人人都是产品经理, 从HR收集自拍照到员工自助录入——我见证了园区人脸识别从”不可用”到”真好用”的全过程 – 人人都是产品经理 千问闯关AI混沌期:阿里画靶,吴嘉张弓,马云射箭? – 人人都是产品经理,
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协议。

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