瀑布流式布局，想必設(shè)計(jì)師們已不再陌生，隨著pinterest自2011年開(kāi)始走紅，瀑布流式的布局被越來(lái)越多的網(wǎng)站所使用�；ò昃W(wǎng)、堆糖網(wǎng)、布兜、發(fā)現(xiàn)啦，美麗說(shuō)，蘑菇街，人人逛街，凡客達(dá)人等，復(fù)制Pinterest的網(wǎng)站在中國(guó)蜂擁而現(xiàn)，粗略估計(jì)已有幾十家之多。 

為什么選擇瀑布流？

 既然pinterest式蜂擁而現(xiàn)，我們先從體驗(yàn)角度看，瀑布流布局為什么好？

筆者淺見(jiàn)。隨著讀圖時(shí)代快餐式消費(fèi)的來(lái)臨，瀑布流對(duì)于圖片的展現(xiàn)，是高效而具有吸引力的，用戶(hù)一眼掃過(guò)的快速閱讀模式可以在短時(shí)間內(nèi)獲得更多的信息量,而瀑布流里懶加載模式又避免里用戶(hù)鼠標(biāo)點(diǎn)擊的翻頁(yè)操作,這么瀏覽起來(lái),隨著鼠標(biāo)的滾動(dòng),是不是最小的操作成本能獲得做多的內(nèi)容體驗(yàn),是不是比較容易沉浸其中,不被打斷。有沒(méi)有逛起街來(lái)邊走邊看,被琳瑯滿(mǎn)目的商品吸引的感覺(jué)呢?

除此之外，瀑布流的主要特性便是錯(cuò)落有致，定寬而不定高的設(shè)計(jì)讓頁(yè)面區(qū)別于傳統(tǒng)的矩陣式圖片布局模式，巧妙的利用視覺(jué)層級(jí)，視線的任意流動(dòng)又緩解了視覺(jué)疲勞。

Pinterest

Pinterest于2011年誕生，如今每月獨(dú)立訪問(wèn)用戶(hù)數(shù)量已突破1100萬(wàn)，平均每位用戶(hù)每月在網(wǎng)站上逗留98分鐘，這一時(shí)長(zhǎng)在諸多社交平臺(tái)中僅次于Tumblr和Facebook。Pinterest作為瀑布流布局的鼻祖，必然引導(dǎo)瀑布流設(shè)計(jì)的方向。

1.吸頂式導(dǎo)航

為什么使用吸頂式導(dǎo)航呢？用戶(hù)在瀑布流模式下一目十行去瀏覽，如果快速切換到分類(lèi)，又要回到頂部，然后再選取分類(lèi)，吸頂式導(dǎo)航可以讓用戶(hù)輕松切換分類(lèi)，設(shè)計(jì)要點(diǎn)，吸頂式導(dǎo)航不可以太寬，色彩上不可以太搶眼，只需要保證用戶(hù)在需要時(shí)，它悄悄的在就可以。

2.評(píng)論的錨點(diǎn)定位

pinterest起初設(shè)計(jì)是評(píng)論框全部默認(rèn)展示的， 意在鼓勵(lì)用戶(hù)輸入評(píng)論。而在最近的改版中，pinterest的評(píng)論框的設(shè)計(jì)改為:當(dāng)圖片和已有評(píng)論長(zhǎng)度較小時(shí)，評(píng)論框默認(rèn)收起，點(diǎn)擊評(píng)論的操作button后，錨點(diǎn)定位到評(píng)論框，同時(shí)光標(biāo)閃動(dòng)，提示用戶(hù)輸入文字。而圖片和已有評(píng)論較長(zhǎng)時(shí)（接近或大于一屏的高度），默認(rèn)評(píng)論框打開(kāi)，因?yàn)橛脩?hù)如果靠評(píng)論的button打開(kāi)評(píng)論框需要回滾較多距離，成本太高。

3.輕巧的點(diǎn)擊查看大圖設(shè)計(jì)

點(diǎn)擊空白區(qū)域收起，再次點(diǎn)擊大圖跳轉(zhuǎn)到圖片來(lái)源網(wǎng)站。非常適合輕松隨意的閱讀尤其是當(dāng)用戶(hù)適應(yīng)此處的設(shè)計(jì)邏輯后，很容易產(chǎn)生沉浸式瀏覽，同時(shí)又滿(mǎn)足了查看細(xì)節(jié)的需要。

4.占位加載，保持視覺(jué)體驗(yàn)的順暢

用戶(hù)在不斷滾動(dòng)鼠標(biāo)滾輪瀏覽的過(guò)程中，網(wǎng)速并不總是盡如人意的，因此采用占位加載形式（預(yù)加載出圖片高度的灰度圖），不讓加載過(guò)程中畫(huà)面過(guò)于跳動(dòng)，

可以讓用戶(hù)視覺(jué)體驗(yàn)平緩些，視覺(jué)過(guò)度流暢，盡量小的干擾用戶(hù)瀏覽的行為。

5.Pin it 工具的便捷

Pinterest模式為首的瀑布流網(wǎng)站另一利器便為Pin it 工具。用戶(hù)在各式網(wǎng)站的瀏覽中，用Pin it先為自己收藏內(nèi)容，其次為網(wǎng)站創(chuàng)造內(nèi)容。而且可以將pinterest作為用戶(hù)的一個(gè)在線圖片收藏夾，當(dāng)用戶(hù)喜歡的內(nèi)容在這兒了，流量也就不用擔(dān)心了。

標(biāo)簽： 瀑布流布局 瀑布流 吸頂式導(dǎo)航 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。