注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学会珍惜

You've been saying for the longest time

 
 
 

日志

 
 

Pinterest“瀑布流”布局引发的心理学研究  

2012-05-24 18:08:55|  分类: 视觉设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

转自:TMT未来趋势

如果你经常网上冲浪,这样参差不齐的多栏布局,是不是很眼熟啊?这就是瀑布流布局

类似的布局似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest (貌似是最早使用这种布局的网站了)Mark之,蘑菇街,点点网,以及淘宝最新上线的“哇哦” 等等。

这种布局适合于小数据块,每个数据块内容相近且没有侧重。通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。所以,我们给这样的布局起了一个形象的名字 — 瀑布流式布局

Pinterest很红。根据comScore的数据,20121Pinterest的独立访客数达到1170万,是除google+外最快达到千万用户的网站,稳居美国社交网站第七把交椅(前六位是FacebooktwitterLinkedinmyspacegoogle+tumblr),而国内也是山寨者众多。

Pinterest为什么会红?原因是多方面的,比如对用户来说极低的参与成本、更灵活的订阅机制减少了信息噪声、Repin操作形成病毒性的扩散机制等,但是更受人瞩目的就是其独特的“瀑布流”图片布局。这种布局诟病者不少,但是我却很喜欢,因为虽然这个创意来自于网站创始人在生活中的灵光一现,但是却恰好符合人的视觉心理学规律,下面就分析一番:

这里首先要从人眼感知文本内容和图片内容的差异说起。人阅读文字是一种串行模式,必须一个词一个词按确定的顺序线性地读下来;而人观赏图片是并行模式,他可以在众多图片中快速地扫视,然后选择其中自己感兴趣的部分,这种方式比线性模式找到感兴趣内容的效率要高得多。

所以很多典型的产品界面模式遵从了这种差异,比如:

1 、搜索引擎的搜索结果页,若是网页搜索结果都是线性排列,若是图片搜索结果都是矩阵排列(googlebing的图片搜索结果页甚至去掉了所有的文本信息,只有在鼠标悬停在某张图片才会出现文本,这种设计正是凸显图片并行浏览的优势);

2 SNS类产品、微博的feed页面都是线性排列。不过这里有个问题,如果是纯文本feed(如知乎),线性排列是最佳模式,而图文内容皆有的feed(如微博和SNS),你会发现浏览图片的效率比较低,因为图片内容不适合线性排。

那么传统的图片展现是以矩阵模式为主,搞一个交错型的瀑布流模式是怎么回事呢? 这里首先要了解一下人眼的扫视路径的影响因素是什么。这方面的认识取自认知心理学中有关“视觉搜索visual search)”领域的大量研究。目前心理学家的共识时,影响视觉搜索效率的因素主要是两个:一个是人既有的经验和习惯,是一种自上而下的影响;另一个是画面本身的视觉显著性,是一种自下而上的影响。对于前者,我们都知道人一般是从上往下、从左往右看,所以一个矩阵式的多图片页面,其扫视路径差不多受这种习惯影响而有些僵化。对于后者,画面本身的视觉显著性(动态、颜色及其整体美感等)构成了一个“显著性地图(saliency map)”,用户的注意力首先会被画面中视觉上最显著的部分所牵引。所以自下而上的因素(图片本身的因素)容易使用户可以更高效地选择到优质的视觉内容,而矩形模式下的扫视习惯会干扰自下而上的因素发挥作用。

举个例子来说,在搜索引擎的图片搜索结果页面中,如果有一张好图位于页面的右下角位置,你可能会先在页面左上部徘徊几下才能逐渐找到这种图片;而在瀑布流布局中,你则能更快地找到这张图片。 所以说,线性模式是文本内容最好的布局方式;瀑布流模式则是图片内容(迄今为止)最好的布局方式。

Pinterest更妙的一点是,用户可以按自己的偏好选择图片视觉搜索的方式:虽然网页默认有5列图片,但当你把网页缩小时,页面中每张图片缩小,同时列数增加(最多可增加到10列),每页同时呈现的图片数量就会增加,这对一些用户来说就可以增加搜索的效率。

正由于瀑布流模式是一种十分高效的图片浏览界面,所以吸引了很多用户将它作为收集和欣赏图片的工具,也正是这点,成为了Pinterest快速流行的最大动力。

  评论这张
 
阅读(189)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018