当一个页面有太多信息要显示，而一页又塞不下所有信息。为了请求速度、美观以及其他的各种理由，分页就会被我们请过来。这里就需要用到一些可以扩展页面信息的交互模式：分页（pagination）和无限滚动（continuousscrolling）。网站分页设计是很小块的设计，绝大多数的网站不会在这里花费什么精力，但是，如果能在细节上做的更贴心一些，对用户的交互体验还是有所提升的，毕竟用户每次看网页都会多次使用该功能模块。





分页





分页可以将大篇幅的内容分成小块，显示在单独的连续页面上，便于用户理解和查找。可以让用户清楚的知道，自己所要浏览的内容到底有多少、已经浏览到哪个部分、还剩余多少。分页可以使用户对所浏览的内容有清楚的预期。篇幅较长的文章是一定会用到分页的。一是给用户内容多少的预期，二是可以给浏览者提供一个停顿。在搜索或是查看商品列表时，内容的多少根本无法预期，分页的第一个作用自然还是告诉用户要浏览信息的量。第二，分页可以让用户快速的跳过一些不想看的信息，或是快速跳转到首页或尾页，自主的选择想要浏览的内容。第三，分页非常便于定位和回找，用户可以直接跳转快速找到它。分页控件实际上是给网站的内容创造了一个自然的停顿，这个停顿运用得好的话，可以让产品更有节奏感。





以淘宝商品搜索结果列表页为例：用户输入关键词进行模糊搜索，然后出现相关结果列表，用户需要逐页翻看查找，此时“上一页”“下一页”使用最多，因此要设计的便于点击切换；或间隔两三页查看，因此样式上要区分查看过的页码和未查看过的；前几页浏览的几率最大，当翻到后面相关内容越来越少，用户会想要返回第一页，因此最好一直显示首页；页码数量不宜过长，不要导致用户视觉辨识困难；也不宜过短，以免给用户造成网站信息较少的错觉。而新浪微博信息列表翻页用户心智模型：用户浏览的信息是关注的信息，会像读报纸一样逐页的浏览下去，因此“上一页”“下一页”用的次数最多；其次是跳转翻页，为体现轻量微博的概念，将传统翻页的中间页码部分简化成下拉菜单，既能标识当前页位置又能翻页切换跳转。





分页这种加载信息的方式缺点是会打断用户阅读，影响用户关注的主要内容。优点是条理清晰，便于分段查找信息，后台请求压力小，尤其对大型网站更明显。与别的组件一样，分页不是单独存在的也要结合使用环境来交互设计。





无限滚动





连续加载是一个与分页相反的交互模式，信息之间没有明显的界限或是停顿。当页面滚动到底部，新的信息就会被自动加载进来。各种社交网络就特别喜欢用这种控件，用户不会被打断，可以顺畅的一直浏览下去，沉浸其中。但是由于信息是自动加载的，页面看起来好像没有结束，很难预测页面的内容到底有多少。一味的加载会让用户产生迷失感：这一页的内容到底有多少呢？我已经浏览了多少内容？我什么时候才能读完这一页呢？对于这种没有停顿的页面，用户想要搜寻之前看到过的信息时，也有些困难。但对于这种以休闲娱乐为主社交型的产品来说，使用不打断用户信息流的加载方式，还是非常合适的。





使用分页控件时，用户必须通过点击才能查看到更多的内容，所以说，信息获取是用户主动请求的。而使用连续加载时，新的信息是被自动加载进来，用户是被动的接受。连续加载更多贴近用户心智模型，方便阅读浏览。但是缺点也很明显，当一段信息不能及时刷新出来时，无法跳跃浏览其下面的信息。另外，当排版千篇一律和内容缺乏吸引力时，普通用户确实难以长时间阅读，难以评价像手机微博那样滚屏自动加载页面对于用户是否阅读是否有帮助。在快餐式的读图时代，大众对长文阅读一直在减少，插入图片和减少文字篇幅是适应大众阅读习惯。文章的适度变化式排版，避免页面过于紧凑，给用户一定的呼吸空间，或许能起到一定的引导作用。





从信息的结构来看，分页符翻页是横向信息分段显示，而无限滚动翻页属于纵向信息递增显示，同方向分页的tab与翻页很少同时使用，滚动翻页与滚动条也是如此。但横向与纵向的组件可以交叉配合使用，比如滚动条与翻页。没有规定横向的一定是翻页，纵向的一定是滚动条，可以发散开来：横向为滚动条，纵向翻页。

• 上一篇： 网页美学设计的趋势
• 下一篇：聚卓网站动画设计的设计理念和设计目标