用户体验之翻页按钮设计

手机看阅读器的时候无意看到这篇文章《小屏幕，大世界;“Next”背后的秘密》，关于手机界面翻页的用户体验。针对手机上不同的应用，不同的功能，可以设置多种翻页方式，用户体验也不同。我联想到网页上的翻页实现方式同样也是多种多样的，总结一下分下面几大类：

一、最简洁，自动加载，自动翻页

很多社交网站是没有翻页按钮的，当滚动到页面最底部时下面的内容会自动加载。

当自动加载的内容过多时，可能就不自动加载了，而是一个大大的“显示更多”按钮，仅多点击一次按钮。

二、简洁，只包含上页下页

上图是本博客翻页链接的截图，仅包含上页，下页的链接，很简洁，适合信息量少的地方。一般wordpress博客默认就是这种样式。

三、稍复杂，方便快速跳转

下两张是discuz的，分别有第一页、尾页和中间一些页码，其他则会省略。

下两张图是百度贴吧和Google搜索结果的页码显示，有很明显的上一页和下一页链接，并且会显示当前页面的详细前后n页

四、兼顾简洁和功能：多种方式的结合

新浪微博的翻页方式结合了上面几点：首先，在页面较短的情况下自动向下加载，不用任何点击。自动加载较多的内容后不再自动加载，尾部出现下面的按钮，鼠标悬浮在“第一页”按钮上会弹出页面跳转的菜单。有较为明显的“上一页”，“下一页”引导。仅仅有三个图标，跳转依然方便。

五、需求特殊化的页码跳转

下图是phpMyAdmin的页码跳转方式，当数据表包含大量数据时（下图的数据库就有2万多条记录），可以看出，前12页和最后6页是每页都显示的，中间则是大约每1200条记录一个跳转链接。当页码是中间页码时，比如当跳转到第8000页时，第8000页的前10页和后10页就会详细列出来，其他部分则平均显示。网站管理员很容易体会到这样设置的方便之处：默认数据的排列是插入顺序排列的，管理员往往想查看最新的数据，很方便就跳转到最后几页，即使是中间的部分数据，这种方式也类似“二分法”迅速定位。

六、分析&总结

简单的翻页竟然有这么多种表现方式，首先它得具备翻页的功能，再次要方便跳转，最后要保证需求的前提下做到简洁美观。

针对第一类：自动向下加载的方式比较适合于微博、SNS等类型的网站，用户关注的往往是最新的内容，页面显示的是timeline，不可能也需不要存在“尾页”或者是“最旧结果”，返回首页就只需要一个“返回顶部”的按钮就够了，google的图片搜索也使用了这种免翻页的方式。

只包含上一页下一页的这种翻页，往往适用于内容不多的小博客，或者3页之内的新闻。

百度贴吧，discuz除了包含详细页面的链接，也有首页和尾页的链接，满足一些浏览者快速跳转浏览最新、最旧的帖子。

Google搜索结果页就不需要单独的“首页”，“尾页”链接，而是把“上一页”、“下一页”的按钮做的很大。用户在搜索的时候往往只需要前面几页内容相关度较大的内容，加个“尾页”链接完全没有意义。

个人认为新浪微博的翻页按钮是最赞的，页面自动加载了很长很长以后才出现翻页按钮（防止页面过大浏览器假死），只有三个按钮却同样方便在1-10页中跳转。要说需要改进的地方，本人认为悬浮到页码的时候弹出的页码菜单，从下到上为1到10更合适（现在状况是10到1），为什么自己体会一下。

phpmyAdmin的体验同样很赞，界面虽朴素，页码的设定却十分巧妙，大量数据的情况下方便快速定位。

无论是网站、软件还是其他什么产品，真正做好细节才能留住用户，下次做翻页的时候，是否要“首页”、“尾页”按钮，“上一页”、“下一页”按钮做多大，中间详细显示多少页码，下拉菜单还是横排列出，真的需要根据网站的功能，用户的需求仔细考虑一下了。