B端UI交互界面基础组件-翻页控制

0 评论 2861 浏览 11 收藏 11 分钟

编辑导语:在前一篇文章《B端UI界面交互基础组件-输入框(下)》中,一起学习了B端“输入框”组件UI设计规范,其中包括“多行文本”、“下拉选择”;并从输入框组件的需求场景、内容布局以及交互方式等方面对以上组件进行了详尽的规范描述;今天我们继续介绍了B端“翻页控制”组件的交互规范。

一、常规翻页

1. 需求场景

需要对数据读取进行跳转。

2. 内容布局

1)布局分为:统计信息、翻页控制。

2)统计信息居右显示,包含已选择条目数量、总共条目数量、每页显示条目数。

使用场景中如不存在的选择行为,则不显示选择条目数:

如不允许变更每页显示条目数,则直接显示条目文本:

3)翻页控制按钮,支持同时显示3个跳转页码。

当页码小于10个时,不显示页码跳转输入框:

当前页码用选中状态标注:

当前页为第一页:当前页,当前页+1,当前页+2(总页数大于等于3):

当前页为最后一页:当前页-2(总页数大于等于3),当前页-1:

其他:当前页-1,当前页,当前页+1。

4)跳转获取鼠标焦点时,显示页码跳转按钮。

3. 交互行为

切换每页显示条目数时,自动跳转到第一页,页码同步刷新、跳转到输入框等操作按照内容布局相关约束执行。

页码跳转后,对应页码数据同步刷新。

点击页码跳转、或页码直接跳转到对应页/点击页码跳转(当前页不支持跳转)。

点击其他翻页按钮跳转,页码已显示至尾页,禁用下一页、尾页跳转按钮。

4)跳转到文本框获取焦点后,水印文本消失,页码跳转按钮显示:

5)输入页码后,敲击Enter键或鼠标点击跳转按钮,执行跳转操作。

6)跳转页码不允许输入非正整数,输入不合法数据执行跳转操作时,不执行跳转操作。

7)跳转页码输入为大于允许输入最大页码数时,自动替换为最大页码数。

8)执行跳转操作时,自动清除页码跳转输入框内容,并移除光标。

9)当跳转时,当前页码返回数据为空,则自动刷新翻页控制区域,并再次执行跳转到最后一页操作。

10)根据跳转页码,标注当前页码为选中状态:

当前页为第一页、禁用“首页”、“上一页”按钮:

当前页为最后一页、禁用“尾页”、“下一页”按钮:

仅有一页时,禁用所有翻页跳转按钮:

其他情况翻页跳转均可用:

二、简单翻页

1. 需求场景

  • 需要对数据读取进行跳转。
  • 一般推荐使用者按顺序翻页。

2. 内容布局

1)布局分别为,统计信息、翻页控制。

2)统计信息居右显示,包含已选择条目数量、总共条目数量、每页显示条目数。

使用场景中如不存在选择行为,则不显示选择条目数:

如不允许变更每页显示条目数,则直接显示条目文本:

3)翻页控制按钮,显示当前页码。

当前页码数小于5时,显示1~10,上限以最大页码为准:

当前页码大于5时,页码范围为当前页码前后4后5(合计10个页码):

当前页码+5大于总页码时,页码范围为总页码-9至总页码:

3. 交互行为

每页条目数变更交互逻辑与常规翻页相同。

点击当前页下拉菜单,出现页码跳转,内容规则则参见内容布局翻页控制按钮说明。

首页、上一页、下一页、尾页交互逻辑参见常规翻页对应交互行为说明。

三、极简翻页

1. 需求场景

  • 需要使用翻页跳转。
  • 显示空间不足。

2. 内容布局

1)布局分为——统计信息、翻页控制。

2)翻页控制按钮,显示当前页数据条目区间,取件显示宽度以区间数据自动展示:

3)翻页区间跳转记录中显示对应页码数据条目区间,最后一页区间以实际区间数据为准:

当前页码数小于5时,显示1~10页相应记录区间,上限以最大页码为准:

当前页码大于5时,页码范围为当前页码前4后5(合计10个页码):

当前页码+5大于总页码时,页码范围为总页码-9至总页码:

3. 交互行为

当前页为第一页时,上一页按钮禁用。

当前页为最后一页时,下一页按钮禁用。

在跳转列表中有第一页区间数据时,不显示跳转至第一页按钮:

在跳转页表中有最后一页区间数据时,不显示跳转至最后一页按钮。

四、总结

关于B端基础交互组件“翻页控制”的相关分享就到这里,下一章我们介绍“表格”包括基础表格、分屏表格、分页表格的相关交互规范。

 

本文由 @云计算产品汪 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 unsplash,基于 CC0 协议

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!