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

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


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

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

瀑布流

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

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

优点分析

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

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

相关推荐

  • UED沉思录

    Q:设计前期至输出时常见问题及解决思路以下分享,全是血淋淋的教训积累与总结。当然也是这段时间在AJK优秀Leader的带领下成长出来的。Q:设计师存在的表象问题?设计方案缺乏理论系统化因需求而丧失设计原则页面结构较为混乱,映射设计思路不清晰页面设计细节打磨程度较低页面制作时参数命名不严谨输出适配的兼容欠考虑Q:设计的根本目的是什么?解决问题Q:设计需要具备哪些能力?洞察力「发现身边的好设计」分析力「分析需求、解决痛点的思路」匠人精神「设...

    2018-03-15
  • 交互设计的实质是行为塑造

    交互性是信息化和互联网时代工业设计的发展趋势之一,也是用户体验研究的重要范畴。交互作为一种行为动作的研究,旨在把握人体工程学和逻辑思维学的多方位系统工程的发展趋势,以实现用户对操作行为的完美体验的设…

    2016-05-24
  • 交互设计师的60日计划之第四天

    此次分享的 [button type="info" text="交互设计师的60日计划" url="https://www.iamue.com/tag/interaction-designers-of-60-days" open_new_tab="false"] 来自 Killa.G 让我们一起跟着学习和并学会做自己的总结与…

    交互专题 2015-08-20
  • 阿里巴巴UED的设计团队究竟为双11贡献了什么?

    在11月11日这个日子的前后一段时间,当你发现如下症状之一:当你被机场、地铁、公交站牌和网页里频繁出现的双11提醒,感觉重要的时刻就要来临;当你心跳加速,不管什么都先放到购物车里再说;当你最终等待在11号这天的凌晨用风一样的速度支付成功,并长吁一口气;当你认为一切都那么的简单、自然、纯粹,不过是一场轻松的购物。只能说你Too young,Too simple。你的一举一动已经被一个神秘的组织所引导,它让你下单时够快、够准、够狠,并且你毫...

    2018-02-01
  • 百度三端搜索首页之美:精确、精准、精细

    持之以恒的学习是设计的来源,责任感是设计的原则,而灵感是设计的升华。

    2017-05-12
  • 【文创•职通车】2018校园招聘信息

    序号001未而思伯文化传媒(杭州)有限公司2007 年成立至今,经历了十年的发展,从最初的单一媒介投放板块到如今的以视频内容创作,品牌营销传播为两大核心板块。十年媒体资源、渠道积累,坚持立足浙江为中心,面向江浙沪,以传统媒体+新媒体的渠道传播组合方式。(向上滑动启阅)一、 总监助理( 1 名)职位描述:1、本科以上学历,具有良好的协调沟通能力,良好的文字功底;2、完成总监交代的任务,负责项目的对接协调统筹工作;3、负责总监的工作日程安排...

    2018-03-20
  • 交互设计的本质是什么?

    行为逻辑的认知,让我们在设计数字世界的产品时,把注意力放在用户上、放在用户的动机和行为上,以及发生这些行为的媒介和场景。从这个层面去思考数字世界的产品,也许更贴近交互设计的本质。

    2017-04-29
  • 面对大项目,交互设计应该如何进行?

    去倾听用户真正的心声,才能设计出一款既能解决用户所担心的问题,又能让他印象深刻的产品。

    2017-05-08
  • 【交互设计面试经验】2015年1月20日-交互设计师面试问题分享

    面试时间 2015年1月20日 阿西导读: 今天起我们给交互设计行业的朋友们开一个福利栏目:交互设计师面试分享我们在分类里叫交互设计面试,无论你是新手交互还是UI转UE 或是PM转UE又或者PM兼职UE。 不论怎样你都需要知…

    2015-01-21
  • UI设计师工作必备的七个设计神器

    今天推荐的这7个神器,有经典款也有新人版,不过大致贯穿了UI设计的整个工作流程,从排版、配色、切图到标注、预览,都有对应的良心神器推荐 ,非常适合刚入门的UI设计师,当然,有两款谷歌刚出的神器,也值得老手们来瞧一瞧。

    2017-05-31