文档章节

新随笔(一) 从用户心理体验谈慎用瀑布流布局设计

半饱即好
 半饱即好
发布于 2014/06/24 11:07
字数 1184
阅读 1168
收藏 5

新随笔(一) 从用户心理体验谈慎用瀑布流布局设计


最早使用瀑布流布局技术的是Pinterest,瀑布流设计确实带给用户更新鲜的视觉体验,很容易引导用户不停滚动鼠标,感觉丰富的内容永远不会结束,瀑布流的设计有他很明显的优点,但同时也有他的缺点,并不是所有网站都适用。


社交网站和移动设备适用于瀑布流设计


移动界面由于手机屏幕狭窄,列表项垂直排列,需要单手频繁的滚动,当用户向下滚动内容,自动加载更多的内容,而无需等待页面预加载。这样,用户会感觉到响应很及时,现在微博、微信均采用此方式,


社交网站之所以采用瀑布流设计,是因为他们有频繁更新的实时内容,能够让用户时刻感受当下的变化。所以,瀑布流就像一条河,用户会不停地被引导去刷新内容,瀑布流非常适合移动开发APP布局设计,瀑布流似乎是专门为移动开发而生的。


目前,瀑布流布局设计使用很广,但,我感觉并不适用于所有的网站。


1。内容(图片)搜索类网站要慎用:


用户使用搜索,是为了找到他们需要的信息。用户并不希望看到一个永无休止的搜索结果,分析表明,当用户在搜索引擎上搜索信息时,只有6%的人会看第二页。94%的用户一般在第一页中就跳转了。


如果是切换到瀑布流设计,那用户会在什么时候选择停止呢? 信息量过载,用户会感觉找不到答案,瀑布流将把一个简单的浏览体验变得更加复杂。


寻找认为最好的搜索结果可能需要一分钟或一个小时,这取决于用户。但是当用户决定停止时,他往往需要知道他到底查看了多少页。知道搜索结果的数量可以帮助用户控制自己尽快做出决定。


还有,在Web页面时,分页会让信息清晰有序。比如,我们从一个分页的列表中点击一个内容,我们知道如果点击“返回”将返回刚才的页面,我们还可以继续从上次的位置继续选择。


但如果是瀑布流,用户将失去控制的感觉,因为是滚动列表,在概念上是无限的。 当列表无限滚动时,本质上没有了第一页。用户反而不敢轻易跳转,因为,他害怕找不到刚才的起点。并且,无限的结果诱惑着用户不断向下滚动鼠标,因此,在搜索应用中采用瀑布流的设计实际上效率是低于分页的。


2。电子商务网站不能用瀑布流布局设计


电子商务网站采用瀑布流设计,我认为会很大程度的影响到购买成交量,因为用户会一直被无限的产品诱惑这不断滚动鼠标,而不愿意轻易点击,浩如烟海的产品虽然会让用户感觉到产品很丰富,但很快用户将意识到他很难做出选择,他们会认为最好的还在下面,这实际上破坏了用户的自我控制和选择的感受,反而会导致成交率下降。


因此,电子商务网站应放弃瀑布流布局设计,并要做好页面长度的控制,太长反而会让用户感到疲惫,并且,请为用户留下页码。


瀑布流是一个很好的创新体验,可以极大地提高内容加载的效率,让内容看起来更丰富,但它需要被正确使用,千万不要分散用户的注意力,让用户感到无法控制自己的决定。


6座网--技能树形图的方式展示不同级别职位所需要的职业技能,以及学习资源 

© 著作权归作者所有

共有 人打赏支持
半饱即好
粉丝 21
博文 19
码字总数 31614
作品 0
东城
私信 提问
加载中

评论(1)

sdgsdg
sdgsdg
分析的好,我在手机上使用百度时就有这种感觉:已经向下滑动好几页了,这时一旦跳转却没找到目标内容,返回后又得得重新开始。
响应式布局页面之瀑布流布局浅析

瀑布流式布局(简称瀑布流)最先在网站上应用 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网等页面都采用了这种布局。那么什么是瀑布流呢?瀑布流的好处在哪? 瀑布流...

H_J
2014/03/14
0
0
超酷的响应式dribbble设计作品瀑布流布局效果

日期:2013-2-21 来源:GBin1.com 在线演示 相信做设计的朋友肯定都知道dribbble.com,它是一个非常棒的设计师分享作品的网站,全世界数以万计的设计高手和行家都在这个网站上分享自己的作品...

gbin1
2013/02/27
8
0
网页瀑布流效果实现的几种方式

前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb it 起由 最近,在搭建个人博客时,其中的Demo展示页面想用瀑布流形式展现,发现现有...

撒网要见鱼
2016/11/13
0
0
瀑布流布局(基于多栏列表流体布局实现)

转在前面:(淘宝UED) 3) 绝对定位。即 Pinterest ,Mark之,KISSY 采用的方式: 可谓是最优的一种方案,方便添加数据内容,窗口变化,列数/数据块都会自动调整; 线上例子。 缺点: 需要实现...

林文安
2012/05/31
0
0
Android端实现多人音视频聊天应用(二):实现多人通话

作者:声网用户,资深Android工程师吴东洋 本系列文章分享了基于Agora SDK 2.1实现多人视频通话的实践经验。 在上一篇《Android 多人视频聊天应用的开发(一)一对一聊天》中我们学习了如何使...

agora
2018/08/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周五乱弹 —— 姑娘馋的口水都留下来了。

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @且无需多言 :分享Fall Out Boy的单曲《Disloyal Order Of Water Buffaloes》 《Disloyal Order Of Water Buffaloes》- Fall Out Boy 手机党...

小小编辑
32分钟前
7
4
vue 对对象的属性进行修改时,不能渲染页面 vue.$set()

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化 原因如下: **受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),...

Js_Mei
今天
2
0
开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
12
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
8
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部