分页交互细节分析

说说目前常用的三种分类显示信息方法：

常规翻页          信息滚动翻页         滚动条

前者是横向翻页方式，后两者是纵向的信息翻页。分页作为很小的一个组件，大多数网站都不会花费什么精力去设计，设计也大同小异，用户已经使用习惯学习成本为0，但如果能够在细节上做的更细致贴心一些，用户的使用体验会有所提升。

一、 先来看常规翻页

1) 组成结构

• 上页+页码+下页

•  跳转到__页/第__页”；

•  确认”按钮；

•  支持键盘操作；

2) 使用情景

当网页内容较多、不能在限定区域内显示完全时；
为了方便用户在多个页面间跳转和快速定位（尤其是按顺序翻页），通过翻页设计提供多个页面间的导航。
在电商网站3级页、搜索结果页面等信息量大的页面是很重要的。

•   分页的内容是什么类型？

•   页面数量有多少？

•   查看最多的是哪些页面？

•    手动全部翻一遍的几率

•   是否会不按顺序翻页，为什么？

•   是否会查看已翻过的翻页？

•   翻页是否在列表顶部和底部都出现？

•   “最后一页”是否一定要有？

•   列表顶部什么情况下有翻页？

按照用户心理模型，浏览邮箱内容时是反复浏览型，且页面较长，此时需要在顶部添加翻页，但电商网站搜索结果页和新浪微博的用户是在浏览到页面底部时才会有翻页动作，因此不必在顶部放翻页。

•   是否可以mouseover就显示页面内容？什么时候可以？

设计前考虑完以上问题，针对情况进行取舍设计。

3) 交互分析

•   Google翻页

搜索结果首次只提供10个页码；
设计猜想：google开发者认为一般用户在这10页内就能找到想要的内容。

点击任何一页码继续浏览，发现后续提供的页码是：当前页+9；
设计猜想：当用户往下点击页码时，google开发者认为前10页内容不能满足用户，于是将搜索范围放大。

但最多提供20个页码；
设计猜想：但考虑到网页宽度还是不能继续无限制增加页码个数，于是设定最多一次提供20个页码。

 •   Baidu翻页

始终有第”1“页，中间用”…“表示未显示的页码；
设计猜想：用户翻到后面页码也找不到想要的内容时，会返回第一页重新查找，此时第“1”页是home的作用。

选中页码和mouseover页码样式始终在一个位置不变，不需移动鼠标就可点击下一页，而后页码自动替换状态；
设计猜想：瞄准页码点击较困难，可以减少用户瞄准位置的次数。但没有做完美，用户每刷新一个页面，还是要滚动浏览器条到下方瞄准页码位置。这个微小的友好交互可以运用到轮播图设计中，减少鼠标瞄准操作。
但也最多提供20个页码；

 •   Sina微博小分页

滚动翻页与翻页的结合使用；

上页与下页放在一起更便于点击；

通常情况下用户按“下一页”的情况最多，那么上页样式可以更简单些；

4) 用户心智模型分析

•   以Taobao搜索结果列表页为例：

用户输入关键词进行模糊搜索，然后出现相关结果列表，用户需要逐页 翻看查找，此时“上一页”“下一页”使用最多,因此要设计的便于点击切换；或间隔两三页查看，因此样式上要区分查看过的页码和未查看过的；前几页浏览的几 率最大，当翻到后面相关内容越来越少，用户会想要返回第一页，因此最好一直显示首页；页码数量不宜过长，不要导致用户视觉辨识困难；也不宜过短，以免给用 户造成网站信息较少的错觉。

•   新浪微博信息列表翻页用户心智模型：

用户浏览的信息是关注的信息，会像读报纸一样逐页的浏览下去，因此“上一页”“下一页”用的次数最多；其次是跳转翻页，为体现轻量微博的概念，将传统翻页的中间页码部分简化成下拉菜单，既能标识当前页位置又能翻页切换跳转；

5) 总结

缺点是会打断用户阅读，影响用户关注的主要内容。
优点是条理清晰，便于分段查找信息，后台请求压力小；

与别的组件一样，分页不是单独存在的也要结合使用环境来交互设计。

二、 信息滚动翻页

GOOGLE图片

•    “无限滚动翻页”，当用户浏览到页面底部，自动刷新页面展示新的信息；

•    连续翻过很多页后，当再无内容可以展示时，自动出现关联信息按钮“查看更多信息”，引导用户去浏览其他相关信息；

•    或需要点击一下才可翻页；

•   页面过长时须提供“回到顶部”按钮；

更多贴近用户心智模型，方便阅读浏览。缺点是当一段信息不能及时刷新出来时，无法跳跃浏览其下面的信息。

三、 滚动条

1) 滚动条与横向分页优先级

当同时使用滚动条和翻页时，该如何设计。
翻页与滚动条的相辅相成，都是页面过长，为分段呈现内容的方法;

•   翻页在滚动条内部

设计猜想：滚动条到最底部方出现翻页。大概出自浏览器，滚动条内放页面翻页；

QQ邮箱

例如浏览器，是因为软件与其内容的嵌套关系；

•   有翻页也滚动条，滚动内容不宜过长（PC端产品）

设计猜想：滚动条需要拖动滑块浏览，如果滑块过短便更不容易操作；统计过IE、FF、Office等常用软件，一般滑块高度到8px时就不再缩小。当滑块高度只剩8px时，滚动条的拖动体验就相当的差。

•   移动端产品则貌似无限制

设计猜想：不需拖动鼠标，移动端上手动点击是最方便常用的操作；

2) 分页不一定是click跳转的

有上下翻页同时能快速拖动浏览不同页的信息，适用于内容能够粗略浏览的页面；

四、 总结

1) 从信息的结构来看，传统翻页是横向信息分段显示，而“无限滚动翻页”属于纵向信息递增显示（随滚动页面信息增长）。

•   区分访问过/未访问过的页码样式，能更好的帮助用户记忆，不重复浏览；

•    链接的可点击区域尽量大，方便用户点击，页码间距足够避免用户误点击；

•   清晰标识当前页位置，一般处于页码中部；

•   可提供批量翻页（如，下10页）；

•   页面过长时，增加“返回顶部”;

•   不需要“上一页”“下一页”时就不显示，如后者比前者使用更频繁，前者可简化成符号>；

•   显示总页数（当不显示总数时，翻到最后一页就不能再翻页了）；

•    “上一页”“下一页”位置固定；

•   页码数量不宜过长（一下呈现过多导致视觉混乱，用户翻看页码困难）或过短（特别是搜索结果，会造成网站信息较少的印象）；

•   尽量使用首页和末页链接，且放在普通页码区外的固定位置；

•   除放第一页外，可选择放前面三页的页码，视觉上稳定些；

•    避免花哨交互，精简；

•   页码过多时，允许跳转翻页；

2) 同方向分页的Tab与翻页很少同时使用，滚动翻页与滚动条也是如此。但横向与纵向的组件可以交叉配合使用，比如滚动条与翻页。
3) 没有规定横向的一定是翻页，纵向的一定是滚动条，可以发散开来：横向为滚动条，纵向翻页，但此种方式似乎不便于操作。

所有组件的灵魂是用户操作方式。