常用翻页与加载方式的应用设计分析

前段时间,做过一个简单的项目,兼任项目经理并负责其中的交互设计部分,这算是我第一次在正式工作接触交互设计原型,其中有一个模块涉及到了内容加载和翻页的设计问题,个中产生了一点自己关于常用的翻页器和加载内容方式的一些小思考,工作完成后恰逢国庆长假,总结一下常用的翻页器和内容加载方式的交互方式和应用场景,并和大家分享一下!

对于翻页器也是在互联网爆发后,人们主流的获取信息方式从书本转移到面积有限的屏幕上后衍生出来的,由于屏幕面积有限,信息内容超出其承载范围,便出现翻页和其他加载新内容的形式,网页翻页和内容加载的方式也是模仿着书籍翻页的形式而来,书本的纸张是最原始的承载信息方式,翻页是该场景下的常用操作方式,而对于现在的移动设备和PC网页来说,内容承载方式不再是传统的纸张,而变成了页面模块,这时又该如何承载并向用户展现内容呢?下面,总结并分析一下现有的翻页和内容加载方式。

翻页器

翻页器是目前最常用的翻页方式,也是最原始的多页面内容呈现查看方式,在互联网刚兴起的时候,对于界面交互方式没有太多创新,翻页器是多页面呈现最常用的方式,包括一些网站、文本阅读等场景,现在随着其他更适合对应场景的交互方式的出现,翻页器的应用相对减少,应用最多的就是一些B端产品中数据加载的应用场景。

翻页器的构成一般有以下三个组成要素:

  1. 数字页码:翻页器的数字页码就是指示当前用户所在页面编码,通常会列出用户当前页面编码及其前后三个页码,也会给出首页或者末页,方便用户快速定位页面。
  2. 前后翻页:前后翻页就是上一页和下一页的操作按钮,通常为翻页器必备的构成部分,用户只需要直接点击按钮即可向前或向后翻页,不需要每次点击数字页码,相对点击页码数字翻页更为便捷直观。
  3. 跳跃翻页:跳跃翻页就是不按照常规顺序进行翻页阅读,而是直接跳到首页、尾页或者中间的任意一页,首尾页的跳跃取决于内容的数量,看其能否无限加载。

如下是中国知网的翻页器设计,由于在写论文期间用的较多,所以比较熟悉,感觉还不错,构成要素全面,比较简洁,都能满足用户需求,其为用户提供了9个可选的数字页码,并为用户提供了前后翻页和首页的跳跃翻页,鉴于论文数据庞大,可能会无限加载,因此无法提供尾页跳跃翻页,这一点类似于浏览器的搜索结果的展示。

中国知网的翻页器

跳跃翻页目前使用的相对较少,只有在一些特定的场景下才会使用到跳跃翻页,例如首页和尾页的跳跃,某些网站还会有让用户跳到任意页面的跳跃方式,只是这种场景下需要用户记住需要寻找的内容所在的页面,并不十分常见,对用户的要求也必要高,几乎没有用户记得住需要内容的所在具体页面,也很少有人去记住,即使有这样的需求,翻页器中可能就额外需要设置一个跳跃至指定页面的页码定位器控件了,这就进一步增加了翻页器的复杂度。

普象网翻页器

自从瀑布流随着Pinterest 在 2011 年开始走红后,加上设备在纵向上显示不设限制,可以无限滚动,翻页器在网站中应用的相对较少,越来越多的网站开始采用瀑布流的无限加载,但是在特定的场景下依然能看见翻页器的身影,其在如下场景中比较适用:

  1. 内容检索场景,例如浏览器搜索等对检索需求较高的场景;
  2. 有限内容分页,例如长篇文章的分页展示;

必应搜索结果和新闻资讯的分页

上述两种应用场景中最常见的就是前者——无限内容的检索翻页,该场景下用户对内容的检索需求较高,需要为用户分批展示搜索结果,并给了用户的时间去思考选择自己想要的内容,而第二个场景只有极少数网站使用到了,这样做就使得翻页器成了用户流畅阅读的障碍和门槛,用户查看下一页每次都需要点击,而且对点击精度要求较高,准确点击才能成功操作,故而在大多数网站中被其他方式所取代。

所以在用户对内容的检索需求不强的场景下,翻页器并不十分适用,用户不需要定位查找,分页展示甚至对用户的流畅体验来说是一种障碍,除非有特殊需求和目的。就操作本身来讲,翻页器加载新内容需要频繁点击按钮,这在移动端就对用户就非常不友好,较于瀑布流就更显复杂和低效。倘若所适用场景中内容又具有一定的时效性,而且会定期更新内容,例如博客官网、新闻资讯等,则不建议适用翻页器,瀑布流加载更合适,因为这种场景下用户没有太大的检索需求、并且内容在更新,用户继续加载内容的频率明显高于定位查找频率,更何况很少会有人记得目标内容的具体页码。与瀑布流相比,翻页器就像是手动推拉门,而瀑布流就像是自动门,哪种方式能够给用户更加流畅的阅读体验可想而知。

但是翻页器的分页展示方式的一个瀑布流无法比拟的好处就是它的可控性,对用户来说分页展示可以让用户寻找特定的内容,并且每一页的内容数量上都是一致的,二次进入能够精准找到上次停留的位置及目标内容,也能够快速找到历史内容,有一些B端产品还会有页面内容的控制功能,用户能够精准把握单页内容的加载量,对于这种精准定位检索的需求和带有明确内容倾向的场景,翻页器非常适用,相较于无穷无尽、没有页面感和数量感的瀑布流能够让用户感到明显的可控感。

瀑布流

顾名思义,瀑布流就是内容像瀑布一样可以不断往下滚动,页面随用户鼠标滚轮滚动不断自动加载的交互形式,由于其具备自动无限加载的特点,又被称为懒加载模式,只要还有内容可加载就能无限滚动加载下去。用户能够通过这种快速的浏览式阅读模式在短时间内看到大量的信息,加载时可以减少点击的翻页操作,在最小用户操作成本下能够让用户获得最佳的流畅体验和最多的内容体验,操作流程不易被打断,没有间断的思考间隔,极易营造一种沉浸式的体验,让用户有一种停不下来的感觉。

依据加载更多内容是是否需要点击操作,瀑布流可以分为以下两类:

  1. 自动式瀑布流:即分段式瀑布流,到达某个临界处,页面自动加载后续内容,用户不需要点击操作;
  2. 手动式瀑布流:手动式瀑布流需要用户手动点击页面底部的加载更多按钮后才能获得更多的内容;

网易雷火的自动瀑布流加载与腾讯CDC的手动式瀑布流加载

自从2011年瀑布流随着Pinterest的出现后,国内的很多网站均纷纷采用这种内容加载方式,例如花瓣、网易雷火UX官网,尽管这种加载方式在很多的网站和APP中都有应用,但是也并非一种普适的交互形式,瀑布流比较适合应用在用户无目浏览的场景中,例如一些资讯、社交类,便捷的操作方式比较容易营造一种沉浸式体验,这种场景中用户没有明确的目的和特定检索需求,映射到现实生活中的场景就是逛街,从操作上来看,瀑布流在移动端对用户加载内容也十分适合,较于翻页器的频繁精准点击,瀑布流的单击和滑动明显更为高效,将优先内容分页展示,瀑布流的阅读流畅体验显然更佳。

总结一下,瀑布流有如下优点:

  1. 浏览体验更加流畅;
  2. 操作方式简易快速高效;
  3. 极易营造沉浸式体验;

但是瀑布流也有自己的技术短板和应用场景,首先其对设备硬件要求较高,长时间的在同一个页面中加载资源内容,当前页面会下载大量的缓存内容,页面的响应速度就会减慢,进而影响用户体验,只有退出应用和浏览器并清空缓存才能恢复。其次瀑布流因为缺少检索功能,不利于用户回溯查找看过的内容,在用户具有检索定位查找的需求场景中不适用。在使用瀑布流加载内容时,用户无法得知自己所处的位置,除非已经加载完了全部资源内容,对内容的加载无法控制,也无法查看内容的总量,侧边滚动条的提示作用失效,在可控性上手动式瀑布流优于自动式瀑布流。最后如果网站页脚中有相关内容的话,在瀑布流中,页脚的功能将很难发挥出来,尤其是自动式瀑布流,除非像知乎那样处理,将页脚移至侧边栏中。

总结一下就是以下不足:

  1. 设备内存资源占用较大;
  2. 难以回溯已阅信息;
  3. 无法估算内容总量
  4. 不能定位检索特定信息;
  5. 页脚和侧边滚动条功能难用;

动态面板(箭头指向、圆点定位器)

严格来讲,动态面板不能算作是页面加载和翻页的形式,但是在本质上动态面板和翻页器一样都内容资源的容器,不过在操作方式上动态面板略有不同,常见的有箭头切换和圆点定位器,有的也有混合使用的情况。其中箭头切换就是在页面左右两侧以箭头的方式单击切换翻页,圆点定位器就是用固定数量圆点的方式指示页面,将数字页码转化为不同颜色圆点。

普象网动态面板翻页

动态面板通常可以作为瀑布流的补充,用作是放置在页面的顶部的演示型模块,所承载的内容较少,操作方式分为自动式、手动式或者两者结合,箭头指示操作方式,底下的圆点定位器(形状不局限于圆形)指示所处位置和点击定位。

动态面板在如下场景中较为适用:

  1. 页面顶部的滚动Banner的展示型模块;
  2. 内容较少的模块型展示;
  3. 网站首页顶部的视觉优化;

但不适用于需要用户频繁操作的场景模块。

锚点滚动

锚点滚动就是滚动鼠标后,设备页面自动滚动到指定锚点位置,直接跳过过度阶段,锚点滚动可以制作炫酷的交互动画,用滚轮就可以直接定位到下一屏,没有滚动到中间对比突兀的中间状态,操作上十分方便,应用场景多为个人或组织机构的官方对外展示网站,一些展示用的单页也会用到锚点滚动,对应在移动端翻页操作则转化为手指上滑操作。

其不足之处就是给开发造成难度,不适合大量使用,通常只是在网站的某个模块中使用,例如首页。

subsign的锚点滚动

手势翻页(多用于移动端阅读器)

手势翻页通常应用在移动设备上,是移动端阅读模式中常用的方式,大致有左右翻页、上下滑动两种模式,左右翻页和前文中的翻页器类似,是对书籍阅读方式的仿真,模拟阅读实体书籍的动作,通过手指左右滑动或点击两侧来切换阅读内容,例如微信阅读的左右滑动翻页,有些产品对阅读翻页做了些模拟优化,模拟出更加真实的翻页效果,例如QQ阅读的左右翻页;上下滑动和自动式瀑布流类似,将内容完整展示在屏幕内,用户只需要直接滑动屏幕即可,不管是在移动端还是在PC端,这都是最常见的浏览页面内容的方式。

常见的手势翻页模式

总结

常见的几种翻页和内容加载方式有普通翻页器、瀑布流、动态面板、锚点滚动和手势翻页,前四种普遍使用在PC网页端上,手势翻页通常应用在移动设备上,每种方式都有其各自的特点和适用场景,普通翻页器较适用于用户带有明确检索需求的搜索内容分页展示,瀑布流则较适合于用户无明确检索需求、目的不明确的浏览场景,动态面板适合于少数页面的内容滚动展示,常位于网站上顶部,最常见的就是顶部的滚动banner,锚点滚动则多用于企业、机构等的官网方对外展示的首页模块,能够较容易地设计出炫酷的交互动效吸引用户,并且操作方便,但不适合大量使用。

不论是那种翻页和内容加载方式,都需要让用户使用体验更佳,需要依据用户实际需求正确选择恰当的方式。

 

1