2012年5月30日

瀑布流(Waterfall)排版研究



如果你看過或用過Pinterest這個全球第三大的社交網站,那你一定對瀑布流(WaterFall)排版不陌生,使用這種參差不齊的排版方式來展現源源不絕的產品、圖片是一個非常棒的作法,為什麼呢?

如果你不了解Pinterest,可以參考Inside Harlequin的文章

好處一 : 最大面積的利用螢幕空間 
好處二 : 最大範圍的搜尋


先來解釋何謂最大面積利用,通常waterfall排版都會依照瀏覽器當前大小(window)來作為排版的依據,如果你在22吋螢幕這樣的排版通常可以放置7~8個行,如果螢幕小了點,瀑布流會自動的調整行數,參考下圖說明

在13吋螢幕中,僅可顯示到5行









在23吋寬螢幕中,大約可以顯示大8行

使用這樣的方法,在展示作品/商品時,無非是一個最富經濟效益的方式,不再受螢幕大小的限制來決定展示的數量,相信這也是為什麼Pinsterest火紅的重點之一阿

第二,快速瀏覽,比較下面兩張圖片,何者瀏覽速度較佳

















相信你已經找到兩種方式呈現的優缺點了,第一張圖使用格子排版主要是以圖搜尋的方式尋找資料,如果圖片把內容展現的夠清楚,你或許連標題都不用看。而第二張圖片以列表呈現方式,這樣的方式較適合用來呈現文章,主要是以標題搜尋為主。Pinterest上的所呈現的內容為前者,使用圖片為主的搜尋方式。

以下是其他利用瀑布流呈現的網站
花瓣 (http://huaban.com/ )

發現啦! (http://markzhi.com/)

總結 : 
最近Pinterest非常的紅,許多廠商相繼的模仿學習,想要從中分一杯羹,瀑布流也許是當前最適合使用這樣場合的排版,但是領先者已經遠遠的在前方,要如何追上他們並超越,我想會是另一個方向,也許會是內容行銷吧!

補充說明 : 如果你想實現Pinterest瀑布流排版,你可以參考之前的文章isotope動態排版或是jQuery Masonry Plugin來實現。



















































































沒有留言:

ShareThis