产品观察:Pinterest瀑布流背后的心理学

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

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

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

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

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

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

  那么传统的图片展现是以矩阵模式为主,搞一个交错型的瀑布流模式是怎么回事呢?

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

  举个例子来说,在搜索引擎的图片搜索结果页面中,如果有一张好图位于页面的右下角位置,你可能会先在页面左上部徘徊几下才能逐渐找到这种图片;而在瀑布流布局中,你则能更快地找到这张图片。

  所以说,线性模式是文本内容最好的布局方式;瀑布流模式则是图片内容(迄今为止)最好的布局方式。

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

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

  文章来源:采铜学心录

时间: 2024-09-19 13:43:30

产品观察:Pinterest瀑布流背后的心理学的相关文章

网站模式分析:Pinterest“瀑布流”背后的心理学

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 Pinterest很红.根据comScore的数据,2012年1月Pinterest的独立访客数达到1170万,是除google+外最快达到千万用户的网站,稳居美国社交网站第七把交椅(前六位是Facebook.twitter.Linkedin.myspace.google+.tumblr),而国内也是山寨者众多. Pinterest为什么会红

Pinterest瀑布流的网页呈现方式有什么特点

如果是田字格,人的视觉需要从上到下.从左到右的逐块浏览--全部都看,然后大脑再筛选过滤--这更适合有目的性完整性的信息获取,比如在淘宝搜索一个商品时提供的列表或大图两种视图. 但是在一些随意性浏览发现的服务中,这种有点半强迫意味的田字格相当于增加了视觉和大脑的负担,会让原本随意性的浏览变得不随意. pinterest的信息特点决定了用户只能是大量.随意.快速.偶然性.蜻蜓点水式的信息获取,瀑布流对这种信息来说更加便利. 这种瀑布流的内容呈现是点水式随意浏览的极致方案. 它的采用前提有三个: 一是

Pinterest采用瀑布流的方式网页设计

文章描述:浅谈个人在瀑布流网页的实现中遇到的问题和解决方法. 先上Demo 瀑布流排序 : http://cued.xunlei.com/demos/publ/demo1.html 瀑布流+无限拖 http://cued.xunlei.com/demos/publ/demo2.html 随着pinterest的走红,瀑布流式的布局被越来越多的网站所使用,这种布局确实有很多好处,图片列表页有很强大的视觉感染力,而且还提高了用户"发现好图"的效率.瀑布流的实现有很多种方式,之前淘宝UED有

读图年代:微博进行瀑布流的交互方式

"读图年代"将新浪微博与类似 Pinterest 瀑布流的交互方式相结合,让用户感觉到了不一样的阅读体验. 极客公园曾经探讨过Pinterest模式的流行是否意味着读图时代已经来到我们的面前,无可否认,读图已经成为一个热门话题,各种应用也是层出不穷.今天介绍的"读图年代"将类似 Pinterest 化的瀑布流阅读方式引进到新浪微博之中,使得用户可以轻松阅读微博海量信息,同时将各类信息集合并分类以方便用户浏览,以节省搜索的时间成本. "读图年代"的

“动态流、瀑布流、奖章”,三种流行的产品要素

根据我的研究和发现,得出了三种流行的产品要素"动态流.瀑布流.奖章",而我称之为产品三俗,因为容易流行而被滥用.而PM选择它们有可能是因为"时髦""标配""别人都在用",但是这很糟糕.又恰好动态流和奖章其实我都折腾过,所以多多少少吃过一点亏,现总结如下. ▎动态流 其实动态流能够给产品带来的好处有很多,比如以用户为节点实现了近乎于完美的信息分发网络.但是,在采用这个设计之前,我觉得我们首先应该要理解,在用户层面上,其本质就是&

说说瀑布流式网站里那些可人的小细节

瀑布流式布局,想必设计师们已不再陌生,随着pinterest自2011年开始走红,瀑布流式的布局被越来越多的网站所使用.花瓣网.堆糖网.布兜.发现啦,美丽说,蘑菇街,人人逛街,凡客达人等,复制Pinterest的网站在中国蜂拥而现,粗略估计已有几十家之多. 为什么选择瀑布流? 既然pinterest式蜂拥而现,我们先从体验角度看,瀑布流布局为什么好? 笔者浅见.随着读图时代快餐式消费的来临,瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑

瀑布流-关于CSS子级float,父级高度变化的问题

问题描述 关于CSS子级float,父级高度变化的问题 网页结构说明: <body> <div id="header">...</div> <div id="main"> <div id="left" class="fleft">...</div> <div id="middle" class="fleft"&

详解javascript实现瀑布流绝对式布局_javascript技巧

瀑布流也应该算是流行几年了吧.首先是由Pinterest掀起的浪潮,然后国内设计如雨后春笋般,冒出很多瀑布流的例子,比如,蘑菇街,Mark之(不过最近涉黄,好像被喝茶了),还有淘宝的 "哇哦". 这些都是很棒的例子, 今天我们就聊一聊瀑布流.一.绝对式布局: JS实现原理 其实瀑布式主要的难点就在于,如果将图片整齐的排列在对应的列下,以及什么时候开始刷新加载图片. 而图片整齐的排列的主要逻辑和算法即,先获取容器内可以放多少列,然后,通过计算,存放第一列的高度,再遍历剩下(除第一列的元素

基于jquery瀑布流插件实现相册无限滚动

类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网,以及淘宝最新上线的"哇哦" 等等.通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.所以,我们给这样的布局起了一个形象的名字 - 瀑布流式布局. Masonry是一款很好用的jquery网页布局插件,它可以去掉不同高度div之间的空白,让你的网页看上去更加的整齐.漂亮! 官网插件下载地址以及详解地址: http://ma