交互设计中关于是选择分页还是加载的问题讲解

所属分类: 网页制作 / 应用技巧 阅读数: 452
收藏 0 赞 0 分享
本文作者@子木yoyo 发布于其个人博客。无论是在web页面还是手机应用,信息往往无法在一个页面全部展示,这就需要用到一些可以扩展页面信息的交互模式:分页 (Pagination)和加载(Continuous Scrolling)。分页和加载都是非常常见的交互模式,我们每天都会遇到,也正是因为太常见,我们甚至感觉不到它们的存在,浏览到页面的底部时,看到分页就顺手点一下,自动加载了就继续阅读。
  但正是这小小的一点,也会带给用户很不同的微妙感受。本文就来聊聊这些小差异带来的大不同。
  分页
  分页可以将大篇幅的内容分成小块,显示在单独的连续页面上,便于用户理解和查找。可以让用户清楚的知道,自己所要浏览的内容到底有多少、已经浏览到哪个部分、还剩余多少。分页可以使用户对所浏览的内容有清楚的预期。
  篇幅较长的文章是一定会用到分页的。一是给用户内容多少的预期,二是可以给浏览者提供一个停顿。如果用户看一篇文章已经翻了十几屏,滚动条还是停留在浏览器中间靠上的位置,那该多绝望。
交互设计:分页还是加载 这是一个问题 脚本之家
  再来看看搜索引擎和电商网站,也一定会看到分页控件。
  在搜索或是查看商品列表时,内容的多少根本无法预期,分页的第一个作用自然还是告诉用户要浏览信息的量。第二,分页可以让用户快速的跳过一些不想看的信息,或是快速跳转到首页或尾页,自主的选择想要浏览的内容。第三,分页非常便于定位和回找,也许在搜索一条裙子时,我已经翻到了第五页,突然想起第二页有条好像还不错,可以直接跳转快速找到它。
  分页控件实际上是给网站的内容创造了一个自然的停顿,这个停顿运用得好的话,可以让产品更有节奏感。但是当用户浏览完一页的内容时,就必须停下正在进行的阅读,通过点击进行跳转来获取更多内容。不可否认,这个停顿会在一定程度上打断用户的思路。在遇到分页时,用户很有可能会去思考,是继续浏览呢?还是离开网站呢?所以遇到分页时,往往会流失一部分用户。
  连续加载
  连续加载是一个与分页相反的交互模式,信息之间没有明显的界限或是停顿。当页面滚动到底部,新的信息就会被自动加载进来。
  各种社交网络就特别喜欢用这种控件,用户不会被打断,可以顺畅的一直浏览下去,沉浸其中。
  但是由于信息是自动加载的,页面看起来好像没有结束,很难预测页面的内容到底有多少。一味的加载会让用户产生迷失感:这一页的内容到底有多少呢?我已经浏览了多少内容?我什么时候才能读完这一页呢?对于这种没有停顿的页面,用户想要搜寻之前看到过的信息时,也有些困难。但对于这种以休闲娱乐为主社交型的产品来说,使用不打断用户信息流的加载方式,还是非常合适的。
  使用分页控件时,用户必须通过点击才能查看到更多的内容,所以说,信息获取是用户主动请求的。而使用连续加载时,新的信息是被自动加载进来,用户是被动的接受。
  折中的方式
  分页和加载各有利弊,如今的很多网站也会采取一些折中的方式:分页加载一起用。
  如Quora,会在自动加载4次后出现一个“More”按钮,在连续的信息流之后,给用户一个停顿,让他们去主动的获取更多信息。
  新浪微博也采取了这种折中方式,自动加载两次后出现分页。对于大多数用户,在闲暇时浏览微博,加载两次的内容已经能够满足他们,对于需要浏览更多信息的用户,也让他们知道自己到底浏览了多少。
  为了使用户可以快速看到更多图片,Google图片搜索也采用连续加载的方式,但在搜索图片时,用户也非常需要明确的自己的位置,也很有可能会回去找刚才看到过的图片,所以Google在同一页中也会标出页码,便于定位和查找。这也是另一种折中的方式。
  手机客户端
  在屏幕更小、使用场景更多变的手机端,滑动显然比精确点击更简单更不容易误操作。手机端产品信息架构相对简单,用户浏览时长相对较短,使用时注意力也相对分散。所以大多数app都会使用连续加载的方式。而且加载也比分页控件更省空间。
  但像搜索引擎这样的产品,还是保留了分页的设计。
  选择加载还是分页只是设计中一个很小的点,但出色的产品都是由无数个这样的小点组成的。根据产品的特点,选择最合适它的交互方式,就是交互设计师要做的事。
更多精彩内容其他人还在看

32个典型的以分栏/网格为基础的网站

如果你正在寻找网页分栏设计的灵感,这里收集了32个典型的以分栏/网格为基础的网站。它们显示了在网页设计中分栏/网格的重要性,无论对于信息量巨大的站点还是个人博客。 1.The New York Times 2.National Post 3.Guardian 4.Times
收藏 0 赞 0 分享

理论普及——用户体验

一、概念分析1:UE用户体验 英文叫做user experience,缩写为UE, 或者UX。 当指电子商务网站的时候也被称作顾客体验(CUSTOMER EXPERIENCE). 它是指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉,是否成功,是否享
收藏 0 赞 0 分享

分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

建立用户体验

也许你刚刚来到一家公司,他们希望进行一些“可用性”工作。你可能是一名UI设计师,业务分析师,或前端开发人员,一名产品经理,或者负责用户体验部门的经理或副总。你知道,如果更好地了解使用产品/软件/网站的人,就可能开发出更好的产品/软件/网站。不管怎么样
收藏 0 赞 0 分享

网页图片快速显示的方法和技巧

1. Use .gifs rather than .jpgs. GIFs are smaller in size when compared to JPGs. 1.用.gifs格式保存图片,最好不要用.jpgs格式。因为前者的尺寸比后者小。 2.Use 'Height
收藏 0 赞 0 分享

推荐60种分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

全面的网站评估方案

有时会被问到“看看XXX网站如何?”之类的问题。 谈到评估,通常都是指产品级的网站,如果模式很新,了解需要花一定时间。于是,很多人又问“那么你仅从UI/UE的角度看看呢?”首先我们得达成共识,一切花里胡哨都在为功能服务,如果功
收藏 0 赞 0 分享

网页的栅格设计思考

原文地址:http://andymao.com/andy/post/82.html 网页设计中的脏、乱、差,是我们在设计过程中常会遇到的问题。通常"脏"是由对色彩使用不当所产生的,而色彩使用不当产生的不好效果也分为:"花、灰",花哨、
收藏 0 赞 0 分享

设计理论设计中的层次感

原文:http://andymao.com/andy/post/80.html 这段时间我一直在说设计需要有层次感,这种层次感可能有很多类型,比如色彩的层次感,或是元素的层次感。当一个设计缺乏层次感的时候页面所表现出来的无非是两种可能,一种是单调,一种是花哨。在设计中我们常
收藏 0 赞 0 分享

网页心得:网页色彩的搭配

网页的色彩是树立网站形象的关键之一,色彩搭配却是网友们感到头疼的问题。网页的背景,文字,图标,边框,超链接...,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵呢?这里谈一些心得,希望对你有所启发。 首先我们先来了解一些色彩的基本知识:
收藏 0 赞 0 分享
查看更多