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

電子商務(wù)網(wǎng)站的產(chǎn)品分頁設(shè)計是很小塊的設(shè)計，絕大多數(shù)的網(wǎng)站不會在這里花費什么精力，但是，如果能在細(xì)節(jié)上做的更貼心一些，對用戶的購買體驗還是有所提升的，畢竟用戶每次購買都會多次使用該功能模塊。

首先要說的是，分頁是用戶普遍接受的產(chǎn)品頁面瀏覽方式，設(shè)計也是大同小異，用戶的學(xué)習(xí)成本為零。

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

對于產(chǎn)品頁下部的分頁設(shè)計，各個網(wǎng)站最大的區(qū)別就是是否放置自定義選擇頁的設(shè)計。用戶看頁面的習(xí)慣分兩種，一種是按照順序往后看的，另一種是挑頁面去看的。由于現(xiàn)在電商網(wǎng)站的產(chǎn)品篩選條件比較豐富，用戶很少從后面的產(chǎn)品頁往前面的產(chǎn)品頁瀏覽或是直接看中間的產(chǎn)品頁，如果網(wǎng)站沒有要增強后面產(chǎn)品的曝光需求，可以拿掉自定義選擇頁模塊（注：淘寶應(yīng)該還是很需要這個模塊的）。

在產(chǎn)品頁比較多的情況下，用戶瀏覽到中間的頁面會出現(xiàn)如何進行分頁導(dǎo)向的問題。解決辦法分兩種，一種是中間放置五個頁碼，兩邊是開始頁和最后頁，中間省略號，此類做法可以參照下圖中的樂淘分頁設(shè)計，令一種做法是類似淘寶、當(dāng)當(dāng)?shù)脑O(shè)計，由于已經(jīng)有自定義選擇頁設(shè)計，可以簡化前面頁碼，省略掉一個省略號以及第一頁的頁碼。兩者的結(jié)合體可以參見下圖中的1號店和凡客，看起來元素有點冗余了。

另外，從方便用戶使用的角度來說，分頁的頁碼點擊區(qū)域應(yīng)該大一些，反例請參考下圖的凡客，在凡客你必須把鼠標(biāo)移到頁碼的數(shù)字上面才可以點擊，悲劇。

產(chǎn)品分頁可以說的內(nèi)容不是太多，暫時先說到這里，關(guān)于電商網(wǎng)站的設(shè)計文章會陸續(xù)出爐，歡迎關(guān)注：）

來源：http://www.shui-mo.com/2011/06/19/websitepage/

今天小池提出一個問題討論，如何使分頁做的更友好。做了一些調(diào)研和思考，做了些總結(jié)。

分頁在電商網(wǎng)站3級頁、搜索結(jié)果頁面等信息量大的頁面是很重要的。我們在設(shè)計時要考慮：

• 分頁的長度
• 首末頁存在的必要
• 自定義頁面的必要

設(shè)置場景去驗證可用性。

1 ?用戶模糊搜索一個關(guān)鍵字，往往會出現(xiàn)很多相關(guān)的結(jié)果。用戶會逐頁的去翻頁去尋找，此時用戶會使用“上一頁、下一頁”或附近的數(shù)字進行逐頁檢索。
根據(jù)心智模型 ，保持用戶點擊的連貫性。“上一頁、下一頁”距離相對固定，讓用戶使用上一頁下一頁不斷切換時很方便；分頁長度不宜過長，過長會導(dǎo)致用戶視線游離；也不宜過短，過短會導(dǎo)致頁碼顯示過少，給用戶造成網(wǎng)站信息較少的錯覺。
京東這一點可用性較好，“上一頁、下一頁”距離相對固定。同時頁碼數(shù)量顯示適中。新蛋、淘寶距離不定且距離較長，容易使用戶實現(xiàn)游離，可用性不好。
2 ?用戶往往會選擇根據(jù)價格從低到高排列或銷量從高到低排列來作為自己的購買參考。用戶翻頁到后面20幾頁發(fā)現(xiàn)銷量越來越不好，價格越來越高，此時他會想返回第一頁去看。此場景說明首頁是有存在的必要
京東、蘇寧沒有給出回到第一頁的快捷途徑
上述例子中有2中快捷途徑：
a / 第一頁始終顯示
b/給用戶一個自定義頁碼，用戶輸入頁碼直達。
3 ?實際情況表明，在這種信息量大的頁面上，用戶往往不知道具體頁碼上的具體內(nèi)容，不會去自定義某個頁碼去查看，會逐頁或間隔兩、三頁去查看 ，翻到一定頁數(shù)時用戶發(fā)覺結(jié)果越來越背離自己的初衷，所以會返回第一頁或重新檢索。同時要顯示出最后一頁，系統(tǒng)需要計算出所有的頁數(shù)，在商品很多時，會導(dǎo)致頁面性能降低。

在設(shè)計時，我們要注意:

• 少就是多，精簡。避免花哨
• 以方便用戶使用最先。避免為交互而交互

優(yōu)點，符合用戶在模糊結(jié)果是翻頁的情景，視覺焦點相隨聚集；始終顯示第一頁，給用戶快速回來的途徑；用用省略號表示還有沒有顯示出來的頁面，引導(dǎo)用戶去查看；交互方式良好，做到了精簡，沒有附加花哨交互。

根據(jù)上述理由，以及蘇寧VI色，給出蘇寧易購分頁的優(yōu)化方案，拋磚引玉。求PK，求調(diào)教…

從谷歌圖片檢索的弱化分頁，讓用戶順著屏幕一直不間斷的瀏覽下去，到輕博客點點網(wǎng)隨著用戶的滑動自動加載更多的內(nèi)容，這些微妙的交互可以讓我們的體驗更加愉悅
也使我堅信交互設(shè)計師是可以用戶做更多的，是很有價值的。

來源：http://www.ue-ui.com/about-page.html