图片瀑布流差异化设计尝试

从pinterest后，瀑布流果然也逃不出国人的魔掌，成为了不少网站竞相模仿的对象。从效果上来看，这样的布局确实给人以耳目一新的感觉。美丽说、蘑菇街、花瓣也已经成为大家非常喜爱的网站，其中瀑布流功不可没。

 

虽然好处不少，但千篇一律的样式始终会让人感觉到审美疲劳。一般的瀑布流都是像这样:

 

 

其缺点也比较明显：

 

1. 凌乱。看着似乎是非常丰富的内容，但是感觉却眼花缭乱。整个中间部分全部是热点区域，加大了用户的心理压力。
2. 图片仅展示，一般没有什么效果。
3. 信息动态显示用处不大。图片内容才是这类站点的主要信息点，文字在首页的效果基本可以忽略不计。

 

OK，从这三点出发，咱们试试设计新的一个瀑布流。让它与现有瀑布产生差异。

 

1. 加大图片宽度。减少每行列数。3列为宜，减少一屏中的信息量，避免用户的疲劳感。
2. 加点效果，比如信息我们不用单独放在下方，用鼠标滑入后显示一个透明遮罩来显示基本信息即可（标题、时间啥的就行，不要太多，多了也没人看，最佳效果是用不着任何辅助能让用户看图即点），类似部分网站Banner上的效果。另外，Metro效果在也可以考虑，就是win8的磁片效果，但要控制好翻转频率，否则图片过多的情况下会非常乱，或者程序进行随机指定带翻转效果的图片，不要全部都在翻转。再或者黑白与彩色图的转换，同样运用鼠标滑动的效果。效果这方面可以做不少文章。
3. 信息动态可以去掉，通过2中的效果显示部分实用信息即可，其他信息可显示分享数、评论数，直接盖在图片左右上方，用文字或者趣味图片的效果均可。

 

其实这些就是对现有的大部分网站做了一个减法，并非大范围的改动。我们将图片的中心效果放大，同时减少一屏中信息数量以减轻用户浏览压力。

 

将信息点完全交给图片自己，让图片产生最大价值。改变现在雷同的图片下面就是动态的布局，将传统效果应用上来，让用户先集中在图，然后看到字，或者直接进入，最大程度减弱文字效果。

 

其实，凌乱的感觉大部分是渗透在各个图片中的文字所带的。适当调整好间距，对于凌乱的感觉应该能够减轻不少。

 

 

当然，这只是一种构想，目的仅是差异化的设计而已，并且加上自己的体验结果，具体效果如何应在实践中再次检验，此处不多说，作为参考留存。

 

这类网站可以运用到许多的产品中，但目前基本上做的比较好的都是购物导航站，像旅游、交友、生活信息、团购导航，以及我原来准备自己做的书评网站都可以用瀑布流的方式来实现。

 

就拿书评站来说，首页的瀑布页面设计想必是以上方的思想为主，内容页面当然是图书的截图，然后下方显示搜集到的相关读书笔记链接/日志链接/等等。左右两侧可能放置购买链接。与购物导航相比，这个站还是以评论组合为主，购买链接只是其次。首页上方还不能少的便是搜索栏，并在瀑布往下流的时候随着滚动，方便查找相关书籍。

 

而旅游网站其实也可以获得很好的表现效果，在首页的瀑布可以采用完全混排，也就是宽高都不限的显示模式，只要塞满页面即可，这里主要是考虑相机的长宽比的问题。由此可能会给前端工程师带来很大的挑战，但效果相对于简单的一行几列的瀑布来说会好很多。内容页面辅以用户旅游日志，随机显示一篇完整的日志并在显著位置列出其他用户日志的相关链接。

 

其他类型的网站当然也可以任凭大家想像。而页面的规划则可以多多根据相关类型站的特点进行框架设计。

 

最后想说一句，产品同质化的严重阻碍了我们的创新，而如何走出不一样的路是我们永恒的话题，能有人抄的产品或许才是被认可的。如果我们不创新，那么早晚要淹死在这瀑布，但只要有那么一颗心，即使效果并不好，也不会妨碍我们思维的下一次飞跃，积累终会迎来飞跃。

 

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

使用Word2007发布，如图片未显示或提示有附件但无附件下载地址的，请移步至独立博客查看完整文章！

文章修改及增加内容仅在独立博客中更改！

我的独立博客：壊小子 - http://www.zyblog.net/

本文链接：http://www.zyblog.net/post-88.html

欢迎转载，转载请注明本文来源。