B端UI交互界面基础组件

释放双眼,带上耳机,听听看~!

一、常规翻页

1. 需求场景

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

2. 内容布局

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 交互行为

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、简单翻页

1. 需求场景

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

2. 内容布局

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 交互行为

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

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

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

三、极简翻页

1. 需求场景

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

2. 内容布局

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

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

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

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

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

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

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

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

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

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

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

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

3. 交互行为

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

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

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

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

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

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

四、总结

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

人已赞赏
产品设计

如何搭建情感设计体系

2020-10-17 22:35:24

产品设计

关于共享单车管理系统

2020-10-21 14:29:28

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索