📖 ZKIZ Archives

網站設計：「瀑布流」比較好，還是「下一頁」比較好？

http://www.iheima.com/archives/40669.html

在設計資料量比較大的網站或是應用程式時，我們常常會遇到的問題是要採用分頁(Pagination)，還是移動捲軸(Scrolling)便自動載入、呈現資料。

Facebook 和Twitter 的頁面在載入新資訊的時候，都是採用移動捲軸自動載入的方式;Pinterest 開始流行之後，許多網站設計都採用這種被暱稱為「瀑布流」的設計。但是我們依然可以看到許多網站，例如搜索引擎巨擘Google、和照片分享平台Flickr，依舊還是使用分頁的方式呈現搜索結果。

該選用分頁、還是捲軸?

到底這兩種呈現資料的方式有什麼差別?哪一個又比較好呢?

答案應該是：「It depends……」。

在設計社交類型的網站的時候，所需要呈現的資料是非常即時的，使用者第一個想看到的應該都是最新發生的消息、朋友最新的狀態，然後才是逐次的慢慢閱讀到他還沒看過的訊息。

這種依照時間排序、變動性質非常大的資料，如果採用分頁的方式呈現，每一個頁碼所代表的內容改變性很大，若採用分頁可能是比較不好的方法。想像一下，你每次打開一本書、翻到第38頁的時候，看到的都是不同的內容，應該是很困擾的一件事。

相對的，Google 和Flickr 所呈現出來的資料是搜索結果，和好友動態訊息比起來相對變化性低。

使用者在每次翻頁的時候都會留下使用印象。當使用者在第三頁找到資料，而下次又需要這筆資料的時候，他會透過頁碼大概記得這筆資料的正確位置，而不用使用滾輪來上下捲動來尋找他所需要的資料。

1

2

能把兩者結合嗎?

若資料的類型是可以被索引(index)的，例如導演的名單可以透過姓氏的字首索引、電影名稱可以透過字數索引，那麼把索引製作成分頁也是一種不錯的方法。使用者可以快速的從「J」這個分頁中快速的找到魔戒的導演Peter Jackson。

3

也有許多應用程序更進一步的結合了兩種呈現方式，在iOS 的「聯絡資訊」軟體上，所呈現的就是採用移動捲動的方式呈現你的通訊錄;但是在畫面的右手邊加上了筆劃與英文字母，除了可以快速的透過手指滑動手機屏幕尋找資料，也可以透過這種查找索引的方式快速找到需要的資料。

4

如果網站或應用程序所呈現出來的資料可以選擇或編輯，若採用分頁的方式，假設使用者在畫面上點選了三個選項，然後點選下一頁，這時候使用者可能會對於前一頁的三個選項是否還在勾選中感到有點困惑。此時採用捲軸呈現資料也許是比較方便的作法。

資料型態，才是設計呈現方式的本質

捲軸式的呈現時，使用者往往會多看個幾頁，得到的資訊相對比較多;但想想，若設計的是有一、兩萬筆資料的網站，要讓使用者在這一、兩萬筆資料中滾來滾去找到他想要的東西，可能就有點難度了。

其實資料才是呈現的本質，分頁和移動捲軸兩者的設計各有優點與缺點。當然，無論是採用哪種，都得根據資料的形態來呈現，才能找到最適合的方法。

PermaLink: https://articles.zkiz.com/?id=55636
Next Page
ZKIZ Archives @ 2019