瀑布流式布局，想必設(shè)計師們已不再陌生，隨著pinterest自2011年開始走紅，瀑布流式的布局被越來越多的網(wǎng)站所使用。花瓣網(wǎng)、堆糖網(wǎng)、布兜、發(fā)現(xiàn)啦，美麗說，蘑菇街，人人逛街，凡客達人等，復(fù)制Pinterest的網(wǎng)站在中國蜂擁而現(xiàn)，粗略估計已有幾十家之多。
為什么選擇瀑布流?
既然pinterest式蜂擁而現(xiàn)，我們先從體驗角度看，瀑布流布局為什么好?
筆者淺見。隨著讀圖時代快餐式消費的來臨，瀑布流對于圖片的展現(xiàn)，是高效而具有吸引力的，用戶一眼掃過的快速閱讀模式可以在短時間內(nèi)獲得更多的信息量,而瀑布流里懶加載模式又避免里用戶鼠標(biāo)點擊的翻頁操作,這么瀏覽起來,隨著鼠標(biāo)的滾動,是不是最小的操作成本能獲得做多的內(nèi)容體驗,是不是比較容易沉浸其中,不被打斷。有沒有逛起街來邊走邊看,被琳瑯滿目的商品吸引的感覺呢?
除此之外，瀑布流的主要特性便是錯落有致，定寬而不定高的設(shè)計讓頁面區(qū)別于傳統(tǒng)的矩陣式圖片布局模式，巧妙的利用視覺層級，視線的任意流動又緩解了視覺疲勞。
Pinterest于2011年誕生，如今每月獨立訪問用戶數(shù)量已突破1100萬，平均每位用戶每月在網(wǎng)站上逗留98分鐘，這一時長在諸多社交平臺中僅次于Tumblr和Facebook。Pinterest作為瀑布流布局的鼻祖，必然引導(dǎo)瀑布流設(shè)計的方向。
1.吸頂式導(dǎo)航
為什么使用吸頂式導(dǎo)航呢?用戶在瀑布流模式下一目十行去瀏覽，如果快速切換到分類，又要回到頂部，然后再選取分類，吸頂式導(dǎo)航可以讓用戶輕松切換分類，設(shè)計要點，吸頂式導(dǎo)航不可以太寬，色彩上不可以太搶眼，只需要保證用戶在需要時，它悄悄的在就可以。
2.評論的錨點定位
pinterest起初設(shè)計是評論框全部默認展示的， 意在鼓勵用戶輸入評論。而在最近的改版中，pinterest的評論框的設(shè)計改為:當(dāng)圖片和已有評論長度較小時，評論框默認收起，點擊評論的操作button后，錨點定位到評論框，同時光標(biāo)閃動，提示用戶輸入文字。而圖片和已有評論較長時(接近或大于一屏的高度)，默認評論框打開，因為用戶如果靠評論的button打開評論框需要回滾較多距離，成本太高。
3.輕巧的點擊查看大圖設(shè)計
點擊空白區(qū)域收起，再次點擊大圖跳轉(zhuǎn)到圖片來源網(wǎng)站。非常適合輕松隨意的閱讀尤其是當(dāng)用戶適應(yīng)此處的設(shè)計邏輯后，很容易產(chǎn)生沉浸式瀏覽，同時又滿足了查看細節(jié)的需要。
4.占位加載，保持視覺體驗的順暢
用戶在不斷滾動鼠標(biāo)滾輪瀏覽的過程中，網(wǎng)速并不總是盡如人意的，因此采用占位加載形式(預(yù)加載出圖片高度的灰度圖)，不讓加載過程中畫面過于跳動，
可以讓用戶視覺體驗平緩些，視覺過度流暢，盡量小的干擾用戶瀏覽的行為。
5.Pin it 工具的便捷
Pinterest模式為首的瀑布流網(wǎng)站另一利器便為Pin it 工具。用戶在各式網(wǎng)站的瀏覽中，用Pin it先為自己收藏內(nèi)容，其次為網(wǎng)站創(chuàng)造內(nèi)容。而且可以將pinterest作為用戶的一個在線圖片收藏夾，當(dāng)用戶喜歡的內(nèi)容在這兒了，流量也就不用擔(dān)心了。
Huaban
花瓣網(wǎng)是較早的“類Pinterest”網(wǎng)站之一，定位是基于興趣的社交分享網(wǎng)站，網(wǎng)站為用戶提供了一個簡單地采集工具，幫助用戶將自己喜歡圖片重新組織和收藏。花瓣在設(shè)計與體驗上與Pinterest十分相似，但是也有一些自己的貼心細節(jié)設(shè)計。
1.Icon+Title的配合，讓導(dǎo)航更簡潔。
title 屬性為：規(guī)定關(guān)于元素的額外信息。這些信息通常會在鼠標(biāo)移到元素上時顯示一段工具提示文本(tooltip text)。 也就是鼠標(biāo)懸停的時候，通過title的提示可以帶給用戶更多信息。
由于內(nèi)容主導(dǎo)的網(wǎng)站，框架大多采取輕設(shè)計，因此花瓣的導(dǎo)航也極簡化，能用icon的地方便不用文字。于是icon+title最大限度的節(jié)約了版面，減輕了架構(gòu)，同時也不讓用戶迷惑。
2.時效性的專題頁設(shè)計-花瓣周刊
如何給用戶以最新最熱的內(nèi)容呢，花瓣周刊是方式之一。通過一個簡單的頁面聚合最流行的內(nèi)容，也是幫用戶發(fā)掘興趣的手段之一。
3.右翻頁大一些
在首頁中，查看某個圖的詳情的時候，與Pinterest不同，花瓣采取的是落地頁面的形式，右側(cè)的左右翻頁可以幫用戶查看該畫板下的其它內(nèi)容，而右箭頭更大些，展示了更多的點擊區(qū)域。通過差異化，下意識里幫助用戶去選擇點擊右箭頭實現(xiàn)右翻頁,可以讓用戶在該畫板停留更久些。
Guang
Guang.com2012年初誕生，網(wǎng)站致力于幫助用戶發(fā)現(xiàn)喜歡，推薦更適合自己的消費。雖然它沒有類似于Pin it 這樣典型的類pinterest網(wǎng)站里的收藏工具，但是瀑布流也是它主體展現(xiàn)模式之一。
1.數(shù)字的魅力
推薦閱讀
<b>網(wǎng)站設(shè)計分析：移動網(wǎng)頁設(shè)計的信息組織</b>
如何開始移動設(shè)計 對于我們中很多人來說，移動端設(shè)計是一個嶄新的機會。但是，如果你過去是桌面端的網(wǎng)頁設(shè)計師，如何將經(jīng)驗轉(zhuǎn)換到移動網(wǎng)頁端呢?當(dāng)然，已有的一些工具，經(jīng)驗，技能仍然適用，只需開始思考下如何在手機>>>詳細閱讀
本文標(biāo)題：<b>說說瀑布流式網(wǎng)站里那些可人的小細節(jié)</b>
地址：http://www.brh9h.cn/a/22/20120706/73849.html
網(wǎng)友點評
精彩導(dǎo)讀
科技快報
品牌展示