互動使用者體驗:電子商務網站的產品分頁設計

文章描述：關於網站分頁的那點事兒.

本文所描述的分頁是指電子商務網站的產品分頁，如果想要直接瞭解本文的精髓，請直接參照下面的附圖，不言自明。

電子商務網站的產品分頁設計是很小塊的設計，絕大多數的網站不會在這裡花費什麼精力，但是，如果能在細節上做的更貼心一些，對使用者的購買體驗還是有所提升的，畢竟使用者每次購買都會多次使用該功能模組。

首先要說的是，分頁是使用者普遍接受的產品頁面瀏覽方式，設計也是大同小異，使用者的學習成本為零。

現在的電商網站通常選擇在產品頁的上下部分均放置分頁，下面是完整的分頁功能，上面是簡化功能。產品頁下面需要完整的分頁功能很好理解，因為使用者都是瀏覽完該頁產品再翻頁，所以把完整功能置於底部。那什麼時候使用者需要在產品頁上面使用分頁功能呢？那是在使用者不想看產品頁內容就翻頁的時候，是在使用者想瞭解自己所處位置的時候，另外由於產品頁上部的分頁模組常常和產品篩選條件模組放於一處，所以這裡的功能需要盡量簡化、節約空間，好的設計可參照下圖中的樂淘，如果使用者體驗做的更好一點，這裡可以再加入產品頁第一頁的連結，畢竟使用者返回第一頁的需求是硬性需求。

對於產品頁下部的分頁設計，各個網站最大的區別就是是否放置自訂選擇頁的設計。使用者看頁面的習慣分兩種，一種是按照順序往後看的，另一種是挑頁面去看的。由於現在電商網站的產品篩選條件比較豐富，使用者很少從後面的產品頁往前面的產品頁瀏覽或是直接看中間的產品頁，如果網站沒有要增強後面產品的曝光需求，可以拿掉自訂選擇頁模組（註：淘寶應該還是很需要這個模組的）。

在產品頁比較多的情況下，使用者瀏覽到中間的頁面會出現如何進行分頁導向的問題。解決辦法分兩種，一種是中間放置五個頁碼，兩邊是開始頁和最後頁，中間省略符號，此類做法可以參照下圖中的樂淘分頁設計，令一種做法是類似淘寶、噹噹的設計，由於已經有自訂選擇頁設計，可以簡化前面頁碼，省略掉一個省略符號以及第一頁的頁碼。兩者的結合體可以參見下圖中的1號店和凡客，看起來元素有點冗餘了。

另外，從方便使用者使用的角度來說，分頁的頁碼點擊地區應該大一些，反例請參考下圖的凡客，在凡客你必須把滑鼠移到頁碼的數字上面才可以點擊，悲劇。

產品分頁可以說的內容不是太多，暫時先說到這裡，關於電商網站的設計文章會陸續出爐，歡迎關註：）

 

 常見電子商務網站產品分頁說明圖