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

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


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

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

瀑布流

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

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

优点分析

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

它是伴随信息高速增长应运而生,允许用户在信息海洋自由徜徉,有种无拘无束的直观感,比较适合用户去在大量的内容中随意逛游发现自己中意的内容。当用户在海量内容里去挑选自己喜欢的东西,而不是去挑选特定内容的时候,瀑布流成了一个标配,它非常符合逛的特质。再从操作本身来比较,比起单击和双击等动作,无论是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

相关推荐

  • 【产品分析】微信拼手气红包的贪嗔痴

    春节期间火爆的“拼手气”红包,让用户疯狂点击拼手速网速,拼rp看金额,每一个环节都深深戳着用户的G点,高潮迭起。“拼手气”就是拼人品,那么,最佳手气者是不是有机可循呢?微信红包这样的设计目的在何处? Aaron毛…

    2015-03-05
  • 写给产品经理和设计师的用户体验知识4(大结局)

    从2015年起,我陆续写了《写给产品经理和设计师的用户体验知识》系列文章,当时的写作提纲如下:第一部分:先纠结两个概念「用户体验」和「设计」第二部分:设计原则概览原则1:符合用户使用需求原则2:基于用户的心理模型设计原则3:一致性原则4:及时有效的反馈和解释原则5:形式追随功能原

    微信热点 2018-02-12
  • 交互设计攻略之“竞品分析”上

    前言:无论一个产品是从0到1,还是从1到2,我们需要对自身产品有一个清晰的认知与定位,最快的方式就是竞品调研。知己知彼,取长补短。(这里针对自家产品做的一个竞品调研分享,请勿商用。)首先,我们要确定竞品调研的目的是什么?很简单:为了选取同类型产品功能,可供学习与借鉴的地方,从而对本产品平台进行迭代优化。运用金字塔原理自上而下的方法解决“竞品分析的目的”是找出【同类竞品学习与借鉴】,那么引申的问题如下:一、同类型产品有哪些?想知道同类型产...

    2018-03-16
  • 实例分析:关于上传照片交互逻辑的思考

    最近在重新设计公司APP上传照片的组件,研究了很多移动端上传照片的组件,下面来简单单谈谈自己的总结。

    2017-05-12
  • 在007里的用户体验是“爽”还是“不爽”

    有一天在微信上和007社群的班级一位同学聊天,一通天南海北的乱扯后,话题就回到007这个社群上了,因为这段时间我参与007社群的一些活动,对这个话题特别敏感,然而他却流露出对这个社群的很多不满意,我们之间的一段对话让我思考了很久很久。对了,这两天你看了你们小组的信息了吗?小组信息?刚看,不过我最近在考虑要不要直接退出007,感觉没意思,也啥时间整这些了。那你当初为啥参加007啊?没啥,就是觉得应该养成一个写作的习惯以及可以认识一些稍微志...

    2018-04-11
  • 聊聊为应用创建「一致性设计」的几个原则

    我们在创造某些体验后,需要一些理由给它们做出定义。伟大的设计是无形的,因为他们具有一致性,并让人熟悉。

    2017-05-24
  • 用户体验:从幽灵按钮到空心元素,它们一直在流行

    幽灵按钮和类似的空心元素,在诸多的设计趋势当中,还是显得颇为单薄的。它们的转化率看起来不够突出,和其他的固定形体相比,吸引力也一般,它们的视觉效果主要取决于周围的对比度和环境本身,一句话,缺点很多。即便如此,它们并没有很快消失,相反依然活跃在设计的一线。它们能够如此,很大程度上是因为我们对于这些元素已经习以为常了。它们最初出现在 UI 界面上的时候,用户所感到的迷惑和混乱,已经逐步消失,我们都知道,它是一个按钮。现在的幽灵按钮和类似的元...

    2018-05-04
  • 大屏时代,如何做好电视端交互设计?

    在过去一年多的时间里,笔者有幸参与了电视端大屏幕的项目,在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些“电视交互设计的一些事”分享出来,共同探讨电视端的设计。-硬件+远距离操控——基本交互-基于桌面资料研究以及设计经验,总结了基本交互主要包含以下几个关键内容:遥控器输入、导航和菜单、信息展现、控件摆放和焦点状态。一 、遥控器输入当我们用手指快速便捷地在手机屏幕上点击或滑动时,主流电视大屏及应用的操作还是:使用遥...

    2018-04-01
  • Sketch 3 布尔运算教程

      在Sketch里面,如果你发现一些基本的图形都不适合你,你想组合或者用更多的图形时,这时候就离不开布尔运算。当然,如果钢笔工具用的熟练的话,用钢笔工具也可以画出自己想要的复杂图形,但有些时候我们其实…

    交互设计 2015-08-19
  • 为产品赋予人格 - 情感化设计的组成要素及实践案例

    Flickr为用户准备了很多有意思的登录欢迎语,这其实是一个容易被忽略的细节,但Flickr的整体设计风格与产品气质也正是由许许多多这样的细节构成的。也许,只有当这些细节从产品中消失的时候,我们才会发现并开始怀…

    2015-11-01