网站基础控件设计原则&规范——翻页控件
- 2. Contents
前言:Why & How
网站中分页控件的使用情况
问题归类
其他互联网产品的分页控件
分页控件使用原则 & 规范
- 6. 主搜索
26px
25px
另外,只有一页的情况没有分页
小于10个分页的情况
10个分页的情况
- 16. 分页控件的设计规范 —— 1
■ 对当前所在页码给以明确标示
通过在“翻页区”为当前页赋予视觉焦点+在“状态区”标识的方法(通常情况
只用前者)方便用户明确当前所在页码或以此为依据记录相关信息
- 17. 分页控件的设计规范 —— 2
■ 一般情况下,需要显示页面总量和数据总量
可以通过“末页的持续呈现”或单独的“状态区”来显示,给用户一个预期值,
让用户知道需要检视的所有数据量
- 18. 分页控件的设计规范 —— 3
■ 完备的相邻页码、前后翻页和首末页(末页视情况而定)
■ 尽量大的可交互面积(特别是在小尺寸触屏终端)
■ 具备快速跳转功能
- 20. 我们网站分页控件的样式规范—区域及说明
出于通常情况下用户使用频度的考虑, 尽量大的可交互面积(个位数字标准面积为26*26)
“上一页”的按钮简化成向左的箭头。
标准状态下,当前页码的相邻
显示页码为4个 方便用户跳转到任意页
箭头的符号使用参照图形符号的设计规
范,建议使用示例中的箭头,不建议使 对当前所在页面给以 显示页码总量,给用户以明确预期
用三角形符号,因为三角形符号最为显 明确的视觉焦点属性
当翻页区显示末页时,此处可以去掉
见的语义是“弹出显示更多内容”。
需要情况下可以显示数据总量
通常无需通过分数形式再次显示当前页码
始终显示第一页,方便用户随时
回到最初状态或以此跳板 是否显示“末页”视数据
情况和技术成本而定
翻页区 状态区 跳转区
P1 P2 P3
- 21. 我们网站分页控件的样式规范 —— 显示逻辑
一般场景中,当只有1页内容时,
也需要显示出翻页控件,虽没有
以不是始终显示末页时的逻辑方案为例: 实际操作用途,但这对用户了解
数据呈现的整体情况及养成操作
■ 当页码总量≤10时,所有页码被全部显示。 习惯都有一定帮助。
■ 当页码总量>10时,只显示10个页码,首页,当前页,以及当前页相邻的8个页
码。相邻页码的显示以左右数量平均为优先,以总数保障为标准。
特别注意:当相邻页最左侧页码是“2”时,首页与相邻页之前的“…”需要去掉
去掉 “…”