瀑布流式網(wǎng)站的精美小細節

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

為什么選擇瀑布流？

既然pinterest式蜂擁而現，我們先從體驗角度看，瀑布流布局為什么好？
筆者淺見(jiàn)。隨著(zhù)讀圖時(shí)代快餐式消費的來(lái)臨，瀑布流對于圖片的展現，是高效而具有吸引力的，用戶(hù)一眼掃過(guò)的快速閱讀模式可以在短時(shí)間內獲得更多的信息量,而瀑布流里懶加載模式又避免里用戶(hù)鼠標點(diǎn)擊的翻頁(yè)操作,這么瀏覽起來(lái),隨著(zhù)鼠標的滾動(dòng),是不是最小的操作成本能獲得做多的內容體驗,是不是比較容易沉浸其中,不被打斷。有沒(méi)有逛起街來(lái)邊走邊看,被琳瑯滿(mǎn)目的商品吸引的感覺(jué)呢?
除此之外，瀑布流的主要特性便是錯落有致，定寬而不定高的設計讓頁(yè)面區別于傳統的矩陣式圖片布局模式，巧妙的利用視覺(jué)層級，視線(xiàn)的任意流動(dòng)又緩解了視覺(jué)疲勞。

Pinterest

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

1.吸頂式導航

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

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

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

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

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

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

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

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

5.Pin it 工具的便捷

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

Guang

Guang.com2012年初誕生，網(wǎng)站致力于幫助用戶(hù)發(fā)現喜歡，推薦更適合自己的消費。雖然它沒(méi)有類(lèi)似于Pin it 這樣典型的類(lèi)pinterest網(wǎng)站里的收藏工具，但是瀑布流也是它主體展現模式之一。

1.數字的魅力

從設計的整體感覺(jué)來(lái)講，guang是家熱鬧的網(wǎng)站，琳瑯滿(mǎn)目的商品像個(gè)大商場(chǎng)，而里面通過(guò)一些精確數字的體現，更加烘托了這種氛圍。“6600件你可能喜歡的寶貝”，”2876件推薦的寶貝”，精確的數字可以讓用戶(hù)清晰的意識到這兒有很多內容，進(jìn)來(lái)可以得到更多。

2.擬物化設計增加情趣感

主題街里慢悠悠的滾動(dòng)，加上道路感的間隔線(xiàn)，是不是有邊走邊逛的感覺(jué)。

小火箭式的返回頂部，是不是有“噌“一下快速的感覺(jué)？

網(wǎng)頁(yè)設計里適當利用些情趣化的小元素可以增添網(wǎng)站的趣味性，讓用戶(hù)覺(jué)得這是有愛(ài)的設計，有愛(ài)的網(wǎng)站。

3.功能型操作簡(jiǎn)單。

在瀑布流中，Guang里唯一的操作“喜歡”。喜歡承載了收藏，收集和整理的作用。簡(jiǎn)單的操作也方便了用戶(hù)對內容的管理。越簡(jiǎn)單的操作，用戶(hù)學(xué)習成本越低，則貢獻的內容就越多。

Huaban

花瓣網(wǎng)是較早的“類(lèi)Pinterest”網(wǎng)站之一，定位是基于興趣的社交分享網(wǎng)站，網(wǎng)站為用戶(hù)提供了一個(gè)簡(jiǎn)單地采集工具，幫助用戶(hù)將自己喜歡圖片重新組織和收藏?；ò暝谠O計與體驗上與Pinterest十分相似，但是也有一些自己的貼心細節設計。

1.Icon+Title的配合，讓導航更簡(jiǎn)潔。

title 屬性為：規定關(guān)于元素的額外信息。這些信息通常會(huì )在鼠標移到元素上時(shí)顯示一段工具提示文本（tooltip text）。 也就是鼠標懸停的時(shí)候，通過(guò)title的提示可以帶給用戶(hù)更多信息。

由于內容主導的網(wǎng)站，框架大多采取輕設計，因此花瓣的導航也極簡(jiǎn)化，能用icon的地方便不用文字。于是icon+title最大限度的節約了版面，減輕了架構，同時(shí)也不讓用戶(hù)迷惑。

2.時(shí)效性的專(zhuān)題頁(yè)設計-花瓣周刊

如何給用戶(hù)以最新最熱的內容呢，花瓣周刊是方式之一。通過(guò)一個(gè)簡(jiǎn)單的頁(yè)面聚合最流行的內容，也是幫用戶(hù)發(fā)掘興趣的手段之一。

3.右翻頁(yè)大一些

在首頁(yè)中，查看某個(gè)圖的詳情的時(shí)候，與Pinterest不同，花瓣采取的是落地頁(yè)面的形式，右側的左右翻頁(yè)可以幫用戶(hù)查看該畫(huà)板下的其它內容，而右箭頭更大些，展示了更多的點(diǎn)擊區域。通過(guò)差異化，下意識里幫助用戶(hù)去選擇點(diǎn)擊右箭頭實(shí)現右翻頁(yè),可以讓用戶(hù)在該畫(huà)板停留更久些。




重慶網(wǎng)絡(luò )公司