從資料出發:分頁還是捲軸?

scroll-and-pagination

在設計資料量比較大的網站或是應用程式的時候,我們常常會遇到的問題是要考慮要採用分頁(Pagination)的方式、還是移動捲軸(Scrolling)便自動載入來呈現資料。Facebook 和 Twitter 的頁面在載入新資訊的時候,都是採用自動載入的方式。在 Pinterest 開始流行之後,許多網站都設計採用這種被匿稱為瀑布流的設計。但是我們依然可以看到許多網站,例如搜尋引擎巨擘 Google、和照片分享平台 Flickr,則依舊還是使用分頁的方式呈現搜尋結果。

 

分頁還是捲軸?

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

答案應該是「It depend…」。在設計社群類型的網站的時候,所需要呈現的資料是非常即時的,使用者第一個想看到的應該都是最新發生的消息、朋友最新的狀態,然後才是逐次的慢慢閱讀到他還沒看過的訊息。這種依照時間排序,變動性質非常大的資料,如果採用分頁的方式呈現,每一個頁碼所代表的內容改變性很大,若採用分頁可能是比較不好的方法。想像一下你每次打開一本書翻到第 38 頁的時候看到的都是不同的內容,應該是很困擾的一件事。

相對的,Google 和 Flickr 所呈現出來的資料是搜尋結果,和好友動態訊息比起來相對變化性低。使用者在每次翻頁的時候都會留下使用印象。當使用者在第三頁找到資料,而下次又需要這筆資料的時候,他會透過頁碼大概記得這筆資料的正確位置,而不用使用滾輪來上下捲動來尋找他所需要的資料。

google pagination

flickr pagination

 

兩者結合?

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

wikipedia pagination

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

iOS 聯絡資訊

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

 

資料才是本質

捲軸式的呈現時,使用者往往會多看個幾頁,得到的資訊相對比較多,但想想若設計的是有一兩萬筆資料的網站,要讓使用者在這一兩萬筆資料中滾來滾去找到他想要的東西就可能有點難度了。其實資料才是呈現的本質,兩者的設計各有優點與缺點。當然,無論是採用捲軸還是分頁,都是根據資料的形態來呈現才能找到最適合的方法。

 

延伸閱讀:

幫 UI 分類,我們是如何記憶的?

替視覺設計「動線」

向左走、向右走?表單元素的排列組合

 

Image via Renaud Camus, CC License.

很久以前有一個邪惡的國王,他會將他的每個死刑犯都關在陰暗的地窖中。直到行刑的那天,國王的劊子手會將死刑犯帶到刑場中,國王會給他兩個選擇:「你可以馬上就死在劊子手...
你曾經想過家中零零種種的電器用品的操作介面為什麼長這樣嗎?這樣的介面設計是合理並且容易使用的嗎?人類是善於歸納過去經驗的動物,我們在面對新的產品時,會主動尋找符...
「如果你不夠小心,在 Photoshop 中旋轉圖像時,可能會毀了你辛苦完成的作品!」 ~ Marc Edward 在 Photoshop 中旋轉圖像時(這邊指...
世界頂尖創意公司 IDEO 的掌門人 Tim Brown 在他所出版的書「設計思考改變世界」中提到: 在我十歲的時候,我就瞭解到,製作原型的本事是建立在經年累月...
為了研究與應用色彩,人們將千變萬化的色彩按照它們各自的特性,依照—定的規律秩序排列、並加以命名,我們稱之為色彩的體系。幫助我們將色彩組織化、以更確實精確的方法去...
大家小時候應該都有看過或聽過糖果屋(收錄於格林童話)的故事吧?故事裡的小兄妹在森林裡面邊走邊撒下麵包屑,希望可以在迷路的時候沿著麵包屑回到家,結果麵包屑被森林裡...
© 2013 Desiring Clicks. All Rights Reserved.
Top