【编者按】本文转自微博 UDC，作者为曳尾鱼。瀑布流式布局，想必设计师们已不再陌生，随着 pinterest 的走红，瀑布流被越来越多的网站所使用。

        花瓣网、堆糖网、布兜、发现啦，美丽说，蘑菇街，人人逛街，凡客达人等，复制 Pinterest 的网站在中国蜂拥而现，粗略估计已有几十家之多。而这些设计中的那些可人细节就是打动用户的关键。

        为什么选择瀑布流？

        既然 pinterest 式蜂拥而现，我们先从体验角度看，瀑布流布局为什么好？

        笔者浅见。随着读图时代快餐式消费的来临，瀑布流对于图片的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式可以在短时间内获得更多的 信息量，而瀑布流里懒加载模式又避免里用户鼠标点击的翻页操作，这么浏览起来，随着鼠标的滚动，是不是最小的操作成本能获得做多的内容体验，是不是比较容 易沉浸其中，不被打断。有没有逛起街来边走边看，被琳琅满目的商品吸引的感觉呢?

        除此之外，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式，巧妙的利用视觉层级，视线的任意流动又缓解了视觉疲劳。

        Pinterest

        Pinterest 于 2011 年诞生，如今每月独立访问用户数量已突破 1100 万，平均每位用户每月在网站上逗留 98 分钟，这一时长在诸多社交平台中仅次于 Tumblr 和 非死book。Pinterest 作为瀑布流布局的鼻祖，必然引导瀑布流设计的方向。

        1. 吸顶式导航

        为什么使用吸顶式导航呢？用户在瀑布流模式下一目十行去浏览，如果快速切换到分类，又要回到顶部，然后再选取分类，吸顶式导航可以让用户轻松切换分类，设计要点，吸顶式导航不可以太宽，色彩上不可以太抢眼，只需要保证用户在需要时，它悄悄的在就可以。

        2. 评论的锚点定位

        pinterest 起初设计是评论框全部默认展示的， 意在鼓励用户输入评论。而在最近的改版中，pinterest 的评论框的设计改为:当图片和已有评论长度较小时，评论框默认收起，点击评论的操作 button 后，锚点定位到评论框，同时光标闪动，提示用户输入文字。而图片和已有评论较长时（接近或大于一屏的高度），默认评论框打开，因为用户如果靠评论的 button 打开评论框需要回滚较多距离，成本太高。

        3. 轻巧的点击查看大图设计

        点击空白区域收起，再次点击大图跳转到图片来源网站。非常适合轻松随意的阅读尤其是当用户适应此处的设计逻辑后，很容易产生沉浸式浏览，同时又满足了查看细节的需要。

        4. 占位加载，保持视觉体验的顺畅

        用户在不断滚动鼠标滚轮浏览的过程中，网速并不总是尽如人意的，因此采用占位加载形式（预加载出图片高度的灰度图），不让加载过程中画面过于跳动，

        可以让用户视觉体验平缓些，视觉过度流畅，尽量小的干扰用户浏览的行为。

        5. Pin it 工具的便捷

        Pinterest 模式为首的瀑布流网站另一利器便为 Pin it 工具。用户在各式网站的浏览中，用 Pin it 先为自己收藏内容，其次为网站创造内容。而且可以将 pinterest 作为用户的一个在线图片收藏夹，当用户喜欢的内容在这儿了，流量也就不用担心了。

        Huaban

        花瓣网是较早的“类 Pinterest”网站之一，定位是基于兴趣的社交分享网站，网站为用户提供了一个简单地采集工具，帮助用户将自己喜欢图片重新组织和收藏。花瓣在设计与体验上与 Pinterest 十分相似，但是也有一些自己的贴心细节设计。

        1. Icon+Title 的配合，让导航更简洁。

        title 属性为：规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。 也就是鼠标悬停的时候，通过 title 的提示可以带给用户更多信息。

        由于内容主导的网站，框架大多采取轻设计，因此花瓣的导航也极简化，能用 icon 的地方便不用文字。于是 icon+title 最大限度的节约了版面，减轻了架构，同时也不让用户迷惑。

        2. 时效性的专题页设计-花瓣周刊

        如何给用户以最新最热的内容呢，花瓣周刊是方式之一。通过一个简单的页面聚合最流行的内容，也是帮用户发掘兴趣的手段之一。

        3. 右翻页大一些

        在首页中，查看某个图的详情的时候，与 Pinterest 不同，花瓣采取的是落地页面的形式，右侧的左右翻页可以帮用户查看该画板下的其它内容，而右箭头更大些，展示了更多的点击区域。通过差异化，下意识里帮助 用户去选择点击右箭头实现右翻页，可以让用户在该画板停留更久些。

        Guang

        Guang.com2012年初诞生，网站致力于帮助用户发现喜欢，推荐更适合自己的消费。虽然它没有类似于 Pin it 这样典型的类 pinterest 网站里的收藏工具，但是瀑布流也是它主体展现模式之一。

        1. 数字的魅力

        从设计的整体感觉来讲，guang 是家热闹的网站，琳琅满目的商品像个大商场，而里面通过一些精确数字的体现，更加烘托了这种氛围。“6600件你可能喜欢的宝贝”，”2876件推荐的宝贝”，精确的数字可以让用户清晰的意识到这儿有很多内容，进来可以得到更多。

        2. 拟物化设计增加情趣感

        主题街里慢悠悠的滚动，加上道路感的间隔线，是不是有边走边逛的感觉。

        小火箭式的返回顶部，是不是有“噌“一下快速的感觉？

        网页设计里适当利用些情趣化的小元素可以增添网站的趣味性，让用户觉得这是有爱的设计，有爱的网站。

        3. 功能型操作简单。

        在瀑布流中，Guang 里唯一的操作“喜欢”。喜欢承载了收藏，收集和整理的作用。简单的操作也方便了用户对内容的管理。越简单的操作，用户学习成本越低，则贡献的内容就越多。

        小结：

        俗话说，细节决定成败，用户体验为王的时代里，用一些温馨的小细节，打动你的用户，留住你的用户，可以让用户下意识里在你的网站呆的时间更久，使用更惬意。

        当然，每个细节的产生都取决于场景，使用的人群及设计目的三个方面。回到本源，设计最终是产品需求的实现而服务的，而在产品一整个生命周期里， 需求是在不断优化和变动的。网站随着用户群的变化及数据的体现也在不断的修正细节，互联网产品用户体验设计经验的积累永远是要无止境体验和不断的实验及探 索。这种更新迭代是此类分析文章无法企及的，抛出此小稿，全当献丑了，欢迎大家随意拍砖！

        原文链接：微博 UDC