分頁的可用性問題及實作
November 24th, 2007 in User Experience.
幾乎所有中、大型網站幾乎都會用到 分頁。Smashing Magazine 早前發表了Pagination Gallery: Examples And Good Practices，裡面收集了大量 分頁的設計。先看看文中提到的好分頁設計的7個必備要素:
好的分頁設計應該…
- 提供大面積的可點擊區域
- 別使用底線
- 標明當前頁面
- 隔開鏈接
- 提供上一頁和下一頁鏈接
- 使用「第一頁」和「末頁」鏈接
- 把首頁和末頁放在外面
至於其他細節我就無謂重提。今天我想說的是，不少網站的分頁設計有一個很 Common 的錯誤，包括 Smashing Magazine 裡面所收集的。怪就怪在這個錯誤我從來都沒看過其他人有所提及，搞得我都不知道究竟是眾人皆醉我獨醒，還是我的思路有錯…在這裡寫出來，請大家為我解惑。
下面是 Smashing Magazine 收集的其中一個分頁設計:
問題出在 “Previous” 和 “Next” 。
- 你能說出 “Next” 所指的是第 6 頁，還是顯示第 10 ~ 19 頁嗎? 為甚麼?
- 如果 “Next” 是指第 6 頁，這個設計本身已有另一個鏈接是指向第 6 頁。這豈不是犯了可用性的大忌: 一個 Function 多種說法嗎?
- 如果 “Next” 是指第 6 頁，這個鏈接為甚麼會置於第 9 頁之後呢? 完全無視用戶的心理模型… Orz
- 第 1 頁之前的那個 “Previous”，是指第 1 頁之前的那一頁 - 第 0 頁嗎? Orz…
- 如果是顯示第 10 ~ 19 頁… 你就猜錯了…
難道這不是個很明顯的交互設計錯誤嗎，完全把用戶的心理模型忽略掉… 上面這個設計還有數個可用性設計錯誤，但本文只想專注於 Previous and Next，所以未有提及。我找到的唯一一個用這個設計的理由是 - Google 的分頁設計也是這樣的… 亦因此，我從沒都沒點過 Google 的 Next button，因為我實在不想去猜這個 button 是做甚麼的…
知錯亦要能改，下面是我設計的分頁:
這個設計跟傳統的分頁設計最大的不同地方在於:
- 超級突出了所在頁面
- 上﹑下一頁的位置改置於當前頁面的左右兩方
- 用顏色、大小來表示頁面之間的層次關系。
關於第 3 點，我想再詳解一下。這個設計的底色有共有 4 種不同深淺(透明度)，分別是:
- 100% - 當前頁面
- 90% - 上﹑下一頁
- 70% - 頁碼
- 50% - 第一頁、末頁
由於上﹑下一頁跟當前頁面關係最「密切」，它們的顏色亦最相近。其他頁面跟當前頁面距離較遠，用色也較淺。第一頁、末頁離當前頁面最遠，底色自然最淺。button 大小亦同理。看看窗外，你會發覺景物越遠，就越小越模糊(淺)。亦因此不要讓頁碼的長度來決定 button 的大小，不然會改變了頁面之間的關系 (好像說得太嚴重了…orz)。
8 Responses
Your design is very nice.
很好的經驗分享~~非常受用~~
^^~
嗯，說一下。
上一頁，下一頁的說法跟瀏覽器的「返回上一頁」也有相沖的地方，如果有誰想到更好的說法請留個言。
今天不看您這邊文章還沒發現您說的事情，其實您說的也沒錯
這樣的設計，的確是怪怪的
也不知道一開始是誰先帶頭這樣設計的
只不過..這樣的用法我想…已經很讓大家很習慣了
所以一看就知道說哪個按鈕的功能是幹嘛的
反倒是您設計的分頁按鈕，讓我花時間想了一下該怎麼用
如果要大家改變這樣的設計，我想可能要先改變大家的 習慣 吧
這個設計很不錯 , 使用者可以比較直覺的知道
怎麼使用, 但是依照這個範例如果使用者
想要跳到第35頁, 他就只能按35次下一頁,
或許可以增加一個一次翻10頁的設計.
the button color is also important, great comment!
呵呵，受教了，很有启发！
Kayue你的设计很好，但从技术实现起来会否影响页面的性能呢？
我也確實沒有點過google的next page按鈕，我一直是直接點數字的。。。