模仿pinterest时注意图片的稀疏比例

尹广磊 · 发表于 2011-11-16 13:14:22

现在模仿http://pinterest.com/ 的网站越来越多，
这种版面比较适合做导购网站，图片书签也行。

但是注意，pinterest上每条图片下面跟着的那几条文字评论，
对于稀疏整个版面上图片内容的密集度起到了非常重要的作用。
控制你在一屏内基本只能看到二行图片，基本符合7±2的原则。

Pinterest - Home.jpg

-------------------------------------------------------------

看看模仿不好会怎么样？
http://huaban.com/

图片信息过密，一屏内看三行图片，内容量过载，眼珠子满屏幕转悠。
所以模仿时要注意啦，控制一屏内信息总量，或者创建一个比较窄的视线通道。
可以从左到右，只扫上下两行内容。

花瓣.jpg

inuyah · 发表于 2011-11-16 14:03:36

确实第一张图看着舒服，第二张太密集了

inuyah · 发表于 2011-11-16 17:50:00

注意到个现象，如果是第二级的图片（同类型的图片），会比较密集。

尹广磊 · 发表于 2011-11-16 19:17:19

3# inuyah

即便频道里是密了一些了，不过基本上还是一屏内只能看到二行。
相对来说，问题还不是很严重。

Hanami · 发表于 2011-11-17 16:41:16

1# 尹广磊

学习了

小企鹅 · 发表于 2011-11-30 10:25:53

现在腾讯的相册做得也不错。

joybat · 发表于 2012-1-12 17:43:49

这种浏览模式的创意是可以的，不过这种方式似乎很容易被淘汰。。。

renguang · 发表于 2012-4-25 19:58:40

有木有大牛做个原型！

猪也会咬人 · 发表于 2012-4-26 11:25:47

挺喜欢看版主的分析，学习了

garnetwing · 发表于 2012-5-8 15:15:04

想请问各位大牛一个问题。
pinterest的页面比例控制，也就是图片后跟随的评论文字的长度，是通过什么做到的？
每张图的评论应该都不少，此网站是通过什么原则来对这些长短不一的图片，及其评论进行排版的呢？

[交互亮点] 模仿pinterest时注意图片的稀疏比例

评分