Results for tag "pinterest"

[新创意] Pinterest瀑布流之后还有什么

瀑布流现在很流行,国内各种各样的网站都在上,让人有满天飞瀑的感觉。可如果单纯站在使用者角度,你对瀑布流的感觉如何呢?你觉得它异常惊艳么?我问过很多使用者,其实大家都没有这样的感觉。大家只是觉得,从表面上看,比起之前的图片网站,瀑布流只是浏览方便一些罢了,只有在玩一段时间之后,才有种说不清的吸引力出来。专业人士的解释不同,他们大多认为,瀑布流本身,只是一种页面布局方式,它的根本是在兴趣图谱。那么,我们尝试分析一下,藏在瀑布流后面的兴趣图谱,究竟是怎么回事。
从瀑布流反推回源头我们可以先从表现层的瀑布流开始,向它的源头去反推一下:
首先,最外层,是瀑布流本身,它是由各种各样的图片组成的一种页面布局方式;
在此基础上,我们反推一步,看看图的来源,瀑布流中的图片是用户自己上传,或在网络上采集的,这些图片是他们喜欢的;
再反推一步,图片是被用户自己按“主题”编辑和聚合起来的(也就是画板、专辑);
最后,我们发现,这些主题,是用户自己的兴趣使然,也就是,所谓的兴趣图谱,是表现在各种主题上的,用户间是通过兴趣图谱来寻找共鸣、建立联系的。


Pinterest用户动机是什么?

那么,Pinterest这样的网站,核心是在兴趣,这似乎已经没什么异议。但关键是,兴趣这个东西,它究竟是什么?它为什么突然就被这么多的人喜欢并看好?

这里我们可能需要了解一个英文单词:motivation。一般我们把它翻译成动机,也有很多心理学的专业书籍里,把它叫激励。在心理学中,Motivation是指由特定需要引起的,并想要满足这各种需要的心理状态和意愿,它是行为的前奏。为了更好的了解动机,心理学家总是通过分类来使我们更清晰地认识它。一种最基本的动机分类方法,是划分内在动机(intrinsic motivation)和外在动机(extrinsic motivation)。

内在动机指来自人本身的内心的需要,外在动机则相反。简单说,一个孩子,当他因为喜爱和兴趣而努力学习时,这是内在动机在起作用,而当他仅仅是为了考试拿高分时,这是外在动机在起作用。也就是,当需要的刺激来自外部时,就产生外在动机。

金钱奖励,也是一种比较常见的外在动机。外在动机同样也可以促成良好的行为及结果,比如为了养家糊口而去做我们不喜欢的工作但取得了很好的成绩,可很多时候,这种行为并非是我们真正自愿的,它不是发自心底的。外在动机常常让我们感觉很累,很有压力。

该回到兴趣了。兴趣本身,无疑是一种在动机。兴趣这样的内在动机往往可以激发人的正面情绪,比如快乐、幸福等情绪,正面情绪总是导致积极和主动地参与,它能提高人的行动效率。做自己喜欢做的事,是很多人的理想,有时候我们还说“有钱难买我愿意”,其实也是这种情况。为你搭建兴趣图谱的平台,就是要创造这样一种你可以自愿投入、主动参与的机会,并且,它还能带给你快乐。

另一方面,要说说情绪(Emotions)这个东西。情绪是社会化网络里很关键的一个东西,这是因为,情绪是人类所特有的,它既是一种个人体验,也是人际间(社会)交流的主要动力,因为,情绪还是具有高度传染性的。情绪即可以通过已有的关系网络传染(传播),也可以通过“共同兴趣”这个关系纽带去传染,并随之拓展新的关系网络。一个社交网络,在很大的程度上来说,它就是一个人类情绪的网络,它充满着人们的喜怒哀乐,人们在社交网络上的各种行为,你大多都可以理解为是各种情绪在扩散和传播,在Pinterest上,在五彩缤纷的图片背后,让你愉悦的情绪一定是无所不在的。

现在你可以闭上眼睛想象一下,在瀑布流后面还有什么在流动?是人们色彩纷呈“兴趣”,激发出某种让你愉悦的情绪,是这些情绪在网络间缓缓流动。如果说兴趣首先是个体的,它是Pinterest的发动机的话,那么由兴趣所引发的情绪,尤其是哪些让你感觉快乐的情绪,则是随后在群体间蔓延的,它是Pinterest的一路风景。

小结
互联网从出现一直走到今天,它之所以如此的受人青睐,正是因为它在不断激发人们的内在动机。有时候我们觉得,网络比现实更能满足我们心底的需要。实际上,所有网上火爆的应用都是如此,从早期的网络聊天、在线游戏、免费音乐下载,一直到现在的社会化网络,到Pinterest,都没有脱离这个发展主轴,这些应用都可以使我们从一些现实的、外在的压力中解脱出来,它使我们感觉轻松,感觉自在,感觉快乐,回归自我。

所以,很多网络应用的外在形式,是可以不断地变化与进化,它可以是曾经的文字交流、音乐下载、视频分享,也可以是现在是图片瀑布流,而这些应用的内在本质,都是满足来自我们的内心的那个声音,增加我们的快乐体验(情绪)。也许,单从这一点上来说,互联网从未改变

浅谈瀑布流

随着pinterest的走红,瀑布流式的布局被越来越多的网站所使用,这种布局确实有很多好处,图片列表页有很强大的视觉感染力,而且还提高了用户“发现好图”的效率。瀑布流的实现有很多种方式,之前淘宝UED有篇文章详细的介绍过各种方式的优劣。今天我们主要讨论一下绝对排序来实现瀑布流的方式 即 Pinterest 采用的方式。
瀑布流网站
首先说下瀑布流的排序算法,参考demo1,思路非常简单,我们把瀑布流拆成三个部分来看:容器、列、格子
1.先计算当前屏幕最多能容纳几列瀑布,其值为 “向下取整(屏幕可见区域宽度/(格子宽度+间距))”;
2.为了保证容器的居中,将容器的宽度设置为 列数* (格子宽度+间距) – 间距,这里需要注意的是 当容器的宽度计算出来之后再显示,否则会造成页面宽度的抖动,影响体验。;
3.排序开始,先把前N(N为列数)个格子分别放到每一列中,然后每次寻找高度最小的一列,把格子放进去(left值为列序号*(格子宽度+间距),top值为 列高+间距),并刷新列的高度,遍历所有格子直到所有的格子都被排序。
最后将事件句柄绑定到window.onload和window.onresize上,一个瀑布流布局的页面就出来了。
这样的排序算法看起来很美好,可真正结合异步加载数据应用到页面里还要解决以下几个问题
1.当缩放浏览器窗口时会不断地触发事件,如果每次都响应的话会狂耗性能,需要在缩放动作结束后再执行重排方法。
2.页面滚动到底部请求数据成功之后只对新增的节点重排。
3.如果服务器无法给出图片高度,需要在图片加载完毕之后再进行重排。
第一个问题我是用setTimeout和clearTimeout来解决的,思路是窗口变化之后开始计时,如果窗口还在变换则从新开始计时,窗口不再变化则延时(很短的时间)触发重排事件。暂时只想到这个,这里应该还有更好的方法。
代码如下
var re;
window.onresize = function() {
clearTimeout(re);
re = setTimeout(resize,100);
};
第二个问题在于如果每次有新的数据加载,都要对整个容器内的节点进行重排,非常消耗性能。解决思路:
1.将列保存在全局数组中,每次重排或者新增格子之后更新数组的数据,这样下次执行排序算法的时候可以直接调用。
2.将新增格子保存在数组中作为参数传递给排序算法,仅对新格子进行遍历和操作。
第三个问题是如果服务器无法给出图片尺寸,那么必须在图片完全加载完毕之后才可进行排序(因为高度是实时获取的,图片不全高度有误差),这里没有什么好办法,只能遍历图片,每张图片加载成功后执行一个回调函数,将加载成功的图片数量+1,当加载成功的图片数量等于图片总数的时候执行排序方法。缺点是有一张图片加载不成共就无法看到所有的,真正项目中还是需要在异步加载数据的时候获取图片尺寸。
好了,以上就是在这次瀑布流实现过程中遇到的问题和解决方法,由一开始加载3-4屏就卡死到现在可以无限加载(ff,chrome),深感优化js的必要性和无限性。一点小心得写在这里权当抛砖引玉,大家对瀑布流实现的优化有什么见解欢迎一起交流讨论。