分页设计怎么做?超详细B端组件指南来啦!

更新时间:2024-01-22 11:29:50

在 B 端产品设计中,分页是一个很重要的功能,但由于它在界面中存在感不强、设计点也很小,所以很容易被设计师忽略。分页设计虽然看似不起眼,却对用户体验和系统性能有着深远的影响。分页设计怎么做?本文将深入探讨如何在 B 端设计中实现既美观又实用的分页组件,从 Element 分页、Ant Design 分页到 TDesign 的模块内内容切换,我们将一一剖析这些组件的特点,并提供实用的设计指南。做好设计就是认真对待每一个点,无论大小。全面考虑是美观 + 实用的重要一步,一起来看看本文为大家准备的 B 端组件指南吧!

海量 B 端组件指南,点击下图直达👇

分页设计

1、分页设计

其实看似小小的分页在不同场景下都有不同定义,先做一个小解释:

Element 分页:它是 Element-ui 中的分页组件,是一套基于 Vue.js 的前端 UI 组件库,提供了丰富的组件和工具;

点击图片即可免费获取 Element饿了么设计规范库👇

分页设计怎么做

Ant Design 分页:Ant Design Vue 是一个优秀的 Vue UI 组件库,提供了强大的表格组件和分页组件,可以轻松实现表格分页功能;

点击图片即可免费获取 Ant Design网页版组件库(浅色版)👇

TDeisgn:是用于模块内切换内容的控件,也就是说当页面出现数据量过多或者长内容列表需要加载时,可以利用分页器控制单页内的信息数量,把大内容切割成为小块展示在页面上。而简单来讲分页的组成,一般是包含「上一页」「当前页」「下一页」这三个基本要素。

点击图片即可免费获取 TDesign 桌面端组件库(变体版)👇

2、分页设计怎么做?

首先要确定分页功能中所涉及到的组合元素,常规的元素有以下这些:数据总量、页面展示数量(根据不同展示内容做调整)、上一页+下一页+翻页、当前页码、相邻页码展示、更多分页、总页数、页码跳转,根据不同场景需求确定选择哪些元素以哪种形式进行组合。本篇在此做部分元素设计时的建议解释。

2.1 必要呈现的元素

2.2 相邻页码展示

这个功能键本就是为了让用户可以更快点击跳转到自己想去的页面,所以建议设计时所呈现的数量要长一些(尽量在8-14 个左右),如果数量不够,相邻页码的作用则与上一页/下一页按钮重合了;

2.3 尾页

对于数据量过于庞大的页面来说,总页数太大(如 12300 页),都显示出来对前端操作压力会太大,所以建议设计时可以直接使用「跳转至尾页」的文字按钮;

2.4 页码跳转

这个功能可以帮助用户从当前页快速跳转至某页,比如电商平台界面中,用户搜索商品浏览至第 7 页时发现基本是销量个位数以下的商品,不想看了,记忆中第 3-4 页有自己喜欢的商品,这个功能就可以帮助他迅速回到心仪商品的页面,继续浏览购买。

总结

总结来说,B 端分页设计不仅仅是关于 “上一页”、“下一页” 的简单按钮,它涉及到的元素和设计考量远比这复杂。通过本文的介绍,我们了解到了分页设计的重要性,以及如何通过考虑数据总量、页面展示数量、步长设置、相邻页码展示、尾页按钮和页码跳转等元素,来提升分页的实用性和美观度 UI 设计中兼顾视觉与实用功能是一件很不容易的事,所以对于 B 端的控件可以多做了解,多与开发保持交流,全面考虑不同软件展示需求的数据特性,完成更合适的设计。更多 B 端控件设计分享,请点击下面的图片。免费获取海量 B 端控件设计吧!

——————文章来源:BIGD 团队————