网站基础控件设计原则&规范——翻页控件

1. 网站全局性设计问题整理及解决 — 分页控件
 上一页 上一页 
用户体验部 | UDC | 李龙

2. Contents
 前言：Why & How
 网站中分页控件的使用情况
 问题归类
 其他互联网产品的分页控件
 分页控件使用原则 & 规范

3. Why?
效率 质量

4. How?
1. 尊重习惯，延续习惯，通过一致形成习惯
注： 我们不追求绝对正确，通过一致形成的习惯就是正确。
我们基于现有的情况和理解形成一致。
2. 先对现有使用情况进行整理和归类，发现问题，
针对性的辨析和解决

5. 网站中分页控件的使用情况

6. 主搜索
26px
25px
另外，只有一页的情况没有分页
小于10个分页的情况
10个分页的情况

7. 其他（我的阿里、交易管理、旺铺）

8. 其他互联网产品的分页控件

9. 其他互联网产品的翻页 —— Google

10. 其他互联网产品的翻页 —— flickr

11. 其他互联网产品的翻页 —— 新浪

12. 其他互联网产品的翻页 —— 淘宝

13. …
…

14. 什么是分页控件
 分页控件：
分页控件（paging）是以分步形式向用户呈现同一组数据的控件，其核心目
的是加快内容呈现，方便用户查看和定位某些具体内容

15. 分页控件设计的核心原则
一、用户清楚知道自己在哪儿
二、明确的知道可以去哪儿
三、能方便的去想去的地方

16. 分页控件的设计规范 —— 1
■ 对当前所在页码给以明确标示
通过在“翻页区”为当前页赋予视觉焦点+在“状态区”标识的方法（通常情况
只用前者）方便用户明确当前所在页码或以此为依据记录相关信息

17. 分页控件的设计规范 —— 2
■ 一般情况下，需要显示页面总量和数据总量
可以通过“末页的持续呈现”或单独的“状态区”来显示，给用户一个预期值，
让用户知道需要检视的所有数据量

18. 分页控件的设计规范 —— 3
■ 完备的相邻页码、前后翻页和首末页（末页视情况而定）
■ 尽量大的可交互面积（特别是在小尺寸触屏终端）
■ 具备快速跳转功能

19. 控件之外需要考虑的
■ 对数据结果呈现方式进行不断优化，一般情况下，如果用
户可以不翻页就找到想要内容，那是最棒的
■ 在速度和体验间找到平衡，设定合理的单页数据呈现数量
■ 在某些情况下，考虑无尽滚动条是否更加合适
■ 在与页面其他操作不冲突的情况下，考虑使用辅助命令帮
助提高翻页效率，如内容区快捷键、键盘左右键、空格键

20. 我们网站分页控件的样式规范—区域及说明
出于通常情况下用户使用频度的考虑， 尽量大的可交互面积（个位数字标准面积为26*26）
“上一页”的按钮简化成向左的箭头。
标准状态下，当前页码的相邻
显示页码为4个 方便用户跳转到任意页
箭头的符号使用参照图形符号的设计规
范，建议使用示例中的箭头，不建议使 对当前所在页面给以 显示页码总量，给用户以明确预期
用三角形符号，因为三角形符号最为显 明确的视觉焦点属性
当翻页区显示末页时，此处可以去掉
见的语义是“弹出显示更多内容”。
需要情况下可以显示数据总量
通常无需通过分数形式再次显示当前页码
始终显示第一页，方便用户随时
回到最初状态或以此跳板 是否显示“末页”视数据
情况和技术成本而定
翻页区 状态区 跳转区
P1 P2 P3

21. 我们网站分页控件的样式规范 —— 显示逻辑
一般场景中，当只有1页内容时，
也需要显示出翻页控件，虽没有
以不是始终显示末页时的逻辑方案为例： 实际操作用途，但这对用户了解
数据呈现的整体情况及养成操作
■ 当页码总量≤10时，所有页码被全部显示。 习惯都有一定帮助。
■ 当页码总量＞10时，只显示10个页码，首页，当前页，以及当前页相邻的8个页
码。相邻页码的显示以左右数量平均为优先，以总数保障为标准。
特别注意：当相邻页最左侧页码是“2”时，首页与相邻页之前的“…”需要去掉
去掉 “…”

22. 我们网站分页控件的样式规范 —— 可扩展内容
■ 当在翻页区显示出末页时，状态区可不显示
■ 在遵守设计规范的基础上，样式可扩展
（仅为示例）
■ 在特殊情况下，当前页码的相邻页码数可以为两或三个