分頁的可用性問題及實作 (網頁設計,web design,user experience,用戶體驗)

分頁的可用性問題及實作 (網頁設計,web design,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)。