内容展示页,是选择瀑布流还是分页呈现?

每个设计师在工作中都会纠结于是使用瀑布流还是分页列表去展示内容。到底如何选择,让我们先分析下两种交互方式的优缺点。


每个设计师在工作中都会纠结于是使用瀑布流还是分页列表去展示内容。到底如何选择,让我们先分析下两种交互方式的优缺点。

内容展示页,是选择瀑布流还是分页呈现?

瀑布流

瀑布流是一种允许用户不断往下滚动,页面自动刷新呈现内容的交互形式,且这样的滚动是没有终点的。这种方式在很多网站和应用中有所应用,但并不适合所有的网站和应用。对着生活中实例来映射,下图中的艺考打分画面,老师在大量的画海中一张一张浏览打分,有几分瀑布流的味道。

内容展示页,是选择瀑布流还是分页呈现?

优点分析

使用瀑布流作为浏览内容的交互方式能够延长用户在页面的停留时长,增加用户的参与度。

它是伴随信息高速增长应运而生,允许用户在信息海洋自由徜徉,有种无拘无束的直观感,比较适合用户去在大量的内容中随意逛游发现自己中意的内容。当用户在海量内容里去挑选自己喜欢的东西,而不是去挑选特定内容的时候,瀑布流成了一个标配,它非常符合逛的特质。再从操作本身来比较,比起单击和双击等动作,无论是PC端还是移动端,滚动或滑动来得更简单,效率更高。比如将一篇冗长的文章分散在不同页面去呈现,还不如让用户滚动去看完全篇,这样的体验比分页更好。

缺点分析

首先预加载对于用户的浏览是一个极佳的体验,这个技术出现的背景是因为内容加载速度慢而导致的用户的高流失率,应用的被卸载。使用瀑布流的页面和应用会不断预加载内容,但是当加载了大量内容后,页面反应速度会越来越慢,影响使用体验。其次因为瀑布流都会配备大量图片,所以对于硬件的容量要求特别高,很多16G、32G的PAD在使用了一段时间后,需要我们清除缓存才能再次使用。

其次就是当我们滚动过程中发现了几个好的内容,但是也没有可以标记的动作,回头再想找中意的内容时就很痛苦,你得重复刚刚的滚动过程,运气好你能找到印象中的那几个内容,回马枪很难耍起来,降低了这方面的用户体验。

再次我们无法直观看到内容的数量,瀑布流不会像分页统计一样有一个总数据的统计。用户也无法通过浏览器的滚动条的长度去预估什么时候能到底。因为当页面滚动到底部的时候,更多内容会加载进来,滚动条的长度又开始发生变化,同时footer会被推开视野,然后footer中包含的信息也就看不到了,对于想看得用户来说是个难点。所以设计的时候可以尝试把底部做固定或者设计一个“更多”的按钮,这样内容的加载控制点在用户手中,体验更佳。

分页显示

顾名思义就是把内容分别拆分到不同的页面显示。比如200行内容,每一分页显示20行,分10页显示,你能直观看到内容的总分页数,分页内容数,分页呈现内容数的控制。看下实际生活中的例子,去超市购物,货架与货物的关系与内容和分页的关系有异曲同工之妙。

内容展示页,是选择瀑布流还是分页呈现?

优点分析

分页显示可以方便用户去寻找特定的内容,用户再次打开页面,还是能快速找到对应的内容。精确的定位能帮助你快速找到那些你中意的内容,整个阅读的进度,加载多少内容都会是在精确的控制范围内。

对比瀑布流的无穷无尽,用户在分页显示中知道内容数量是多少,总数量是多少,什么时候可以浏览完毕。分页操作的界面:上一页,01,02,03,04,05……19,20 下一页,让用户做到胸有成竹,让用户感受到控制感。上述特点可以看到,分页显示比较适用一些购物类的网站,当用户在网上购物,他们经常会来回比较查看感兴趣的产品。比对下淘宝和京东的APP,京东在网下滑动的时候是有分页显示的“9/70”,明确告诉你数量,淘宝这点暂时还没发现。

缺点分析

当然对比瀑布流的操作方式,分页的方式在操作次数所需更多,比如用户要看下一个分页内容,得找到”下一页”的按钮,鼠标移动到按钮上,“点击”然后等待下页的加载,每页显示的内容也是有限的。

那如何决定是使用瀑布流还是分页显示?

从现网成功案例来讲,UGC为主的相关网站和应用都在使用瀑布流去承载内容,比如微博、脸书、人人都是产品经理等,然后还有一些以图片为主的网站和应用,比如花瓣、pinterest、instagram等也在使用。分页显示相对来说是一种安全模式,比较适用那些带有明确内容偏向的用户去使用的场景。

举个直观的例子:谷歌的文字搜索是使用分页显示,而图片搜索采用的是瀑布流的方式,纠其原因是:

  1. 文字搜索对于用户来说是有明确目的倾向的而图片搜索对于用户来说他也不知道该找哪张图片,所以需要从海量图片中找寻;
  2. 用户浏览和处理图片的速度远大于处理文字的速度,瀑布流的大量内容的推送对于用户处理来说不在话下。

所以设计师在选择使用瀑布流或分页显示前得想清楚各自的优缺点。具体使用哪种交互方式,得基于实际的场景和内容的传递方式来分析。总的来说,瀑布流更适合那些随意浏览,逛逛看看不带特定目的的场景使用。而分页显示比较适合带有特定目的,想查找具体项在哪个位置,浏览过的内容还能回头一一快速而方便找回的场景。

 

本文由 @agileyang 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22637/

(0)
CatherineCatherine
上一篇 2017-05-02 10:59
下一篇 2017-05-02 13:08

相关推荐

  • Axure官方教程中文版第2课:页面操作-木卫艾欧网原译

    Axure真正的官方教程,入门必备,木卫艾欧独家翻译,免费!

    2015-01-05
  • 性爱机器人为什么这么火?用户体验称比真人舒服

    来源:环球网【9月9日消息】据外媒称,由于受顾客欢迎,整个欧洲大陆的妓院正在大量抢购性爱机器人。欧洲各地的性玩偶公司也纷纷表示正与“感兴趣的投资者”进行谈判,以在全球范围内扩大业务。荷兰:价值23000英镑的性爱机器人被盗!近日,窃贼闯入了荷兰南部布雷达的一家大型性用品商店,将店里所有的性爱机器人都被偷走了。据悉,这些性玩偶价值23,000英镑。对于经营这家失窃的成人用品商店的老板尼尔斯·范德沃特称,这起看似普通的盗窃行为给他的公司造成...

    2018-04-07
  • Axure RP 8 入门手册 – 第7章

    第7章母版管理第1节母版简介第2节添加/编辑/删除第3节添加母版到页面中第4节从页面中移除母版第5节拖放行为第6节自定义触发事件第7章母版管理第1节母版简介圆儿:小楼欧巴!小楼:圆圆好!圆儿:老师,我就一个圆!小楼:可是我喜欢两个圆啊!圆儿:老师…你正经一点儿好不好嘛!小楼:呃……你想问什么?圆儿:我想问,在做很多个页面的时候,如果每个页面中都有相同的内容,有没有办法不用每个页面都做一次?当然,我知道能够复制粘贴,但是,如果将来再发生改...

    2018-04-25
  • 提升用户体验 抢占用户心智

    马云提出的新营销是连接线上线下的全新核心载体,超越单纯线上或者线下的全网营销概念。但华帝李洋认为,线上和线下只是连接用户的媒介,核心仍然是用户体验。抢占用户的心智,提升用户认知,是“新零售”的前提。打造新型厂商关系 构建全新服务体系在产品端,最初的模式是线上采用完全与线下独立的产品线,无论价格、卖点、功能配置都与线下产品区隔,线上和线下营销团队完全独立,各说各话。但随着时间的推移和互联网的蓬勃发展,这种割裂式的操作手法已经成为过去式。企...

    2018-03-29
  • 不看后悔的产品与运营结合的用户体验

    作者第一次拿实例产品进行文字和图片的分析。如果有兴趣的朋友可以回复文末的关键词进行体验产品。

    2017-05-24
  • 交互设计案例视频展示

    一款APP的交互原型演示,有能力的话自己动手做个视频吧! [hana-flv-player video=" http://jhxt.org/wp-content/uploads/2015/07/ixdshow.flv" width="640" height="auto" description="Ta APP 交互简介" player="…

    2015-07-01
  • 通知邮件,潜移默化地影响着用户体验

    在打造一个产品的过程中,创业公司往往会把绝大多数的财力和精力用在开发应用或者搭建网站上,很少投入到给用户发的提醒邮件上。

    2017-05-31
  • 用户体验测量的工具:可用性度量

    说到用户体验度量就不得不说用户体验,用户体验即用户在使用产品、系统、服务的过程中建立起来的主观心理感受、因为它是纯主观的,就带有一定的不确定因素;而个体的差异也决定每个用户的真实体验无法通过其他途径来完全模拟或再现。

    2017-05-30
  • 干货推荐|关于无线C端产品的一些UX建议

    开始之前,先来看一下Eric WK.See-To的一项最新研究成果(Eric WK.See-To等人针对如何提升移动端视频的UX满意度做了以下研究)。

    2017-05-29
  • 【Material Design】Chrome iOS版微交互创新(下拉管理tab)

    平时在手机上主要用Safari,今天用Chrome时下意识的手指下拉滑动,发现已经可以通过下拉操作来管理tab,而且不仅仅是下拉刷新,还有进一步的优化和创新: 直接下拉是刷新当前tab 下拉并往左滑可打开新的tab 下拉往…

    2015-08-19