SPARKFUL
죄송합니다. 이 페이지는 해당 언어로 번역이 되어 있지 않습니다. 열심히 노력 중이니 조금만 기다려주시면 감사하겠습니다!

Blog

Insights from the SPARKFUL teams

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

Wei-Fan Chenuser-interface-design
name

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

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

該選用分頁、還是捲軸?

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

答案應該是:「It depends......」。

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

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

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

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

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

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

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

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

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


圖片來源

  1. Renaud Camus, CC Licensed
Wei-Fan Chen
Wei-Fan Chen
CEO / SPARKFUL and Fourdesire
喜歡開發與創作各種有意義且有目的的遊戲以改變社會。 《玩心設計》作者、偶爾寫部落客與擔任講師。樂於參與大學和行業活動,興趣涵蓋遊戲設計、遊戲理論、行為設計、人機介面和交互設計。熱衷於雲端運算,同時也是一個活躍的獨立遊戲開發者 🎉
divider
관련 게시물
name

電影色彩學:這些經典電影如何運用「色彩」引導觀眾情緒

電影裡的弦外之音無論是電影、圖畫或任何形式的創作中,「色彩」都是非常基本且重要的元素。好的色彩運用可以讓人一眼看出創作者想表達的情緒。因此,如何恰當的運用色彩是一項相當重要的課題。平常在看電影的時候,除了關心劇情,也可以...더 많은 기사 읽기
name

藏於字句間的創作:產品中的在地化翻譯

產品辛苦開發了,但要吸引其他語言使用者的使用,並不是那麼簡單的一件事。即使產品已經在某個國家(例如台灣)有了足夠的使用者數量,也不是翻譯成日文,就會憑空冒出許多日本的使用者。網路是連結的,但社群不是許多人...더 많은 기사 읽기
name

完形心理學的視覺法則

我們的眼睛和大腦在觀察事物、接收影像刺激的時候,會有一些特別的傾向。這些傾向常常可以幫助我們快速的辨別事物,有時候也會產生所謂的「錯覺」。完形心理學重要的概念便是「整體不等於個體的總合」,舉例來說:當我們在觀察另一個人...더 많은 기사 읽기