看到 這篇 ,是一篇比較無限捲動(也就是有載入更多功能的頁面)和換頁的操作體驗的文章,有一些心得就來寫一下吧!
無限捲動 / 載入更多 (Infinite-scrolling)
無限捲動比較適合在「不太需要定位現在位置」的情境之下使用,
例如:
- 瀏覽社群網站:Facebook, Twitter
- 瀏覽圖庫或搜尋結果:如 Dribbble, Pinterest, Google 的圖片搜尋
類似這一類的內容,使用者對「列表中的單一資訊」的重視度大於「當前在列表中的位置」,只要有辦法取得單一資訊的前往方法,都不是什麼太大的問題。
目前所在位置資訊 - Location Hash
當然,當使用情境中有需要用到列表中的位置資訊的話,
服務本身也需要提供前往該位置的方式。
像是 Google 的圖片搜尋,當捲動多頁一點、選中一個圖片的話,網址中會被新增一個 # 標示位置資訊:
# imgrc=TCzIUatmlfq74M%3A
方便使用者在分享給他人的時候,能夠前往期望的位置。
換頁 (Pagination)
和無限捲動相反,換頁的功能在「目前在列表中的位置」很重要的情境之下,就需要被用到。例如:
- 搜尋結果
- 商品列表
- 部落格文章列表
- 報表系統
- 下載列表 ...
但是只要有類似這樣的情境,基本上就會用到
我想問問看第幾頁的第幾項
當使用換頁的機能的時候,也必須注意要把換頁的操作設計的容易操作、在介面上容易辨識現在在第幾頁、容易前往自己想要去的頁數等。
前幾年有印象有看到一些部落格把他們家的列表用無限捲動的方式呈現,
當想要再看到某個有興趣的區塊,就一定都要「從頭」開始捲動,真的有點麻煩 ...
可是我還是想用無限載入 ...
這時候就要有辦法讓使用者,可以透過網址加上頁碼參數的方式,直接前往該頁,像是在網址加入 query string :
?page=10
這樣就可以直接前往第 10 頁。
(當然在網站端也要去控制使用者輸入超過總頁數的頁碼的這件例外。)
注意點
切換環境
「無限捲動」對於不要讓使用者切換操作環境幫上很大的忙,
因為可以不用跳轉,就可以透過非同步載入讓下一頁的內容出現。
但是當適合「分頁」的網站,如部落格,想要以「無限捲動」呈現這個效果的話,
就必需要提供方便、顯而易見的方式讓使用者可以前往。
行動裝置上的 App
對於行動裝置來說,不要跳離目前環境顯然就更重要了。
這時候在分頁性質內容所需的「需要知道列表中的當前位置」這件事,
就比較被削弱了,
在 app 的操作環境、通常沒有「網址」這個元素。
原先在網頁環境有分頁功能的服務,切換到 app 上之後,通常就會以無限載入的方式呈現,
在 app 環境和操作習慣裡面,使用者會更加重視他看到「哪篇文章寫了什麼」,而不是「他看到第幾頁的第幾篇寫了什麼東西」,如 Tumbler 的 app 。
在行動裝置 app 的環境裡,還真的比較少看到有用到分頁機制的服務,
做得好的實例就要再找找看了。
今天就先到這裡唄