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

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


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

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

瀑布流

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

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

优点分析

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

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

相关推荐

  • 提问解答:如何优雅的设计APP页面

    页面框架设计只是整个产品设计中的一环,不要把眼界局限在这一环,也不要只站需求、只站在交互、只站在视觉上思考问题,从多个角度看问题,你才会学会成长。

    2017-06-08
  • UED中国最美民宿大奖十强榜单揭晓

    你的内心是否有一种渴望,在纷杂忙乱的都市生活之后,去放松身心,亲近自然?你会向往自由的空气与水,向往与有趣的人们相遇,你会需要一个有温度的空间,让你做回真正的自己。从山间居所到林中小屋,从海边美宿到都市一隅,最美民宿,它们的美只为打动你。它们或许承载着美丽的风景,或许被美好的人们所赋予的生活填满,又或者发生着许多奇妙的故事;它们也许出自专业的设计师之手,又或许是来自对生活有理想的人们坚韧而温柔的初心;它们在江南、在大理、在北京........

    2018-02-01
  • 一项来自建筑学科的提案:如何运用交互设计手段扩展难民儿童的社会互动空间

    目前在德国官方接纳的难民中,接近半数(注1)是儿童或者青少年,这个严峻的事实已经使得德国成为世界上接收未成年难民最多的国家。根据联邦移民和难民局(BAMF)的官方报告,超过23万儿童难民处于令人难以忍受的居…

    2017-08-02
  • 交互设计就业前景怎么样?

    交互设计师/用户体验师 5年内22倍增长需求。在我几年前选择交互设计这个专业的时候还没有什么人知道是什么。还是蛮有趣的,就是想尽一切办法让用户满意。国内以前只有浙江大学才有这个专业,现在应该很多大学都有了…

    交互专题 2016-10-25
  • 设计师升级篇|动感特效轻松get

    新手设计师相较于资深设计师,后者技能更丰富且全动感特效轻松get 面,很多人想要进阶资深却苦于培养新技能,笔者在经手不少视频动效项目后,对于技能进阶颇有心得。

    2017-05-07
  • 产品信息架构的思考

    这篇适合交互设计或者对交互设计感兴趣的小伙伴们看。所以我就不解释信息架构是什么了(链接阅读:怎么理解信息架构,什么是信息架构?)。 今天写一下产品信息架构的思考。 任何产品都有信息架构,或繁杂或简单。…

    2015-11-18
  • 从「重新设计火车票样式」,谈用户体验设计

    作者:无鹿森全文共 2522 字,阅读需要 6 分钟———— / BEGIN / ————“用户体验”是随着互联网的日益深化而变得越来越热的话题之一,它所代表的就是互联网产品和人性本身的相互共鸣,并且这种共鸣在今天而言,显得越来越弥足珍贵。从交互设计到视觉设计,怎么样才算是“好的用户体验”?一直以来,大部分情况下的论调都停留在主观意识层面上,这也使“用户体验”的话题本身显得更加难以拿捏和扑朔迷离。本文将从“重新设计高铁票样式”的角度来切...

    2018-05-04
  • 【笔记】对话十五年设计老兵问答实录

    2017年10月28日,UXRen深圳分舵举办了《对话十五年设计老兵:提问&分享&讨论》的分享活动,本文基于嘉宾刘云天设计总监的问题回答整理而成。   活动笔记(by A.King & 绿宝): 问题1:你在腾讯10年的…

    交互专题 2017-11-13
  • 用交互体验方式感受人类智慧结晶

    2017年9月26日,中国科技馆“华夏之光”展厅经过为时半年的更新改造后,将面向公众进行试运行,并于10月1日正式重新开放。“华夏之光”展厅位于中国科技馆主展厅一层,设有“中国古代的技术创新”、“中国古代的科学探索”、“华夏科技与世界文明的交流”三大主题分区,围绕不同主题,讲述中华民族在生存发展过程中不断创造与发明、探索与发现、交流与融合的科技故事。此次封厅改造是在原有展览的基础上进行的局部性升级换代。“华夏之光”展厅维持原有展览框架,...

    2018-01-30
  • UCD,以用户为中心的设计

    前言:一直有在梳理自己的知识结构,也靠这些所谓经验做了几年行业培训,今年是从业的第十一年,我觉得差不多是时候把这些最初来自同行、互联网和书籍的知识再还给行业,我会把所有所得分章节逐渐整理发出,希望能对行业尽一份绵薄之力,同时也作为一种仪式,好让自己重新出发。任何项目都从一个idea开始,你走在路上,蹲在马桶上;吃着饭,看着电视,灵光一闪,觉得大致可以做一个什么东西来实现世界的爱与和平,这就是一个愿景的诞生;来源无法归纳,却是后面折腾的开始。
    然后就是“分析研究”,分析市场,分析技术,分析用户,一边分析一边验证愿景;顺利通过这个环节,得到的就是设计需求。需求的来源多元,组成亦是多元。需求得到,就要进行梳理,以确定下来;这就是“需求过滤”或者“需求定义”。
    接下来就是把需求转化成对应的功能和数据,这是产品的骨骼血肉,功能数据要满足需求。比如需求是解渴,对应的功能就能是可乐或者矿泉水,但不能是热干面。从这个环节起,产品从抽象变具体。
    功能数据有了,长什么样?我们要把它们设计出来。设计分成“概念设计”和“细节设计”两个阶段,设计又分为“交互设计”和“视觉设计”两条线,所以就有了“概念交互和视觉设计”及“细节交互和视觉设计”。
    设计过程中需要进行“测试验证”,验证的结果用来迭代设计,所以大家看到有个双箭头。设计好了,提交研发。在这个阶段,我们做“研发支持”,也就是传达设计需求给研发,并且做研发过程中针对突发情况进行及时的设计修改;比如某个提示的补漏之类的。
    最后是“设计验收”。一般来讲,刚研发出来的版本多少有些变形有些不符合设计需求,所以我们要验收。列出结果清单,打回去重新调整。调整到什么程度才可以,要看具体到项目周期和策略。举个例子:我们筛选好约好被试(测试用户),分配给他们分析产品和分析任务,比如对比京东和淘宝的支付流程,让他们回去好好体验一个礼拜,让用户熟悉产品以心里产生评价。然后回到我们实验室,再走一遍,这一遍是被观察。然后就是访谈,询问他们的各种维度的评价,比如对于收货地址选择方式的偏好,最后我们统计归纳。这就是让用户来帮我们分析。“其实你什么都没有做错,错在你太老了。我们最早看到Snapchat,外国13-18岁小孩在用,我们高管用了觉得好傻好无聊,看不到价值,只投了一点,后来涨得很快。这个公司我们副总去过,就是海边一个玻璃房,很小的公司,感觉一个石头就把他们击破了。当时只有2000万美金,我们没进去,现在远远超过我们想象,百亿美金。

    2017-05-31