DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 交互用戶體驗:電子商務網站的產品分頁設計
交互用戶體驗:電子商務網站的產品分頁設計
編輯:關於網頁技巧     

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

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

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

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

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

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

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

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

 

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved