轉載藍藍設計(  www.li-bodun.cn )是一家專注而深入的設計機構 ，為期望卓越的國內外企業提供有效的   BS界面設計 、  cs界面設計 、  ipad界面設計  、  包裝設計 、  圖標定制 、  用戶體驗 、交互設計、  網站建設 、平面設計服務

來源：http://cued.xunlei.com/log028

如果您想訂閱本博客內容，每天自動發到您的郵箱中，          請點這里

 

說說目前常用的三種分類顯示信息方法：

常規翻頁          信息滾動翻頁         滾動條

前者是橫向翻頁方式，后兩者是縱向的信息翻頁。分頁作為很小的一個組件，大多數網站都不會花費什么精力去設計，設計也大同小異，用戶已經使用習慣學習成本為0，但如果能夠在細節上做的更細致貼心一些，用戶的使用體驗會有所提升。

一、 先來看常規翻頁

1) 組成結構

• 上頁+頁碼+下頁

•  跳轉到__頁/第__頁”；

•  確認”按鈕；

•  支持鍵盤操作；

2) 使用情景

當網頁內容較多、不能在限定區域內顯示完全時；
為了方便用戶在多個頁面間跳轉和快速定位（尤其是按順序翻頁），通過翻頁設計提供多個頁面間的導航。
在電商網站3級頁、搜索結果頁面等信息量大的頁面是很重要的。

•   分頁的內容是什么類型？

•   頁面數量有多少？

•   查看最多的是哪些頁面？

•    手動全部翻一遍的幾率

•   是否會不按順序翻頁，為什么？

•   是否會查看已翻過的翻頁？

•   翻頁是否在列表頂部和底部都出現？

•   “最后一頁”是否一定要有？

•   列表頂部什么情況下有翻頁？

按照用戶心理模型，瀏覽郵箱內容時是反復瀏覽型，且頁面較長，此時需要在頂部添加翻頁，但電商網站搜索結果頁和新浪微博的用戶是在瀏覽到頁面底部時才會有翻頁動作，因此不必在頂部放翻頁。

•   是否可以mouseover就顯示頁面內容？什么時候可以？

設計前考慮完以上問題，針對情況進行取舍設計。

3) 交互分析

•   Google翻頁

搜索結果首次只提供10個頁碼；
設計猜想：google開發者認為一般用戶在這10頁內就能找到想要的內容。

點擊任何一頁碼繼續瀏覽，發現后續提供的頁碼是：當前頁+9；
設計猜想：當用戶往下點擊頁碼時，google開發者認為前10頁內容不能滿足用戶，于是將搜索范圍放大。
 

但最多提供20個頁碼；
設計猜想：但考慮到網頁寬度還是不能繼續無限制增加頁碼個數，于是設定最多一次提供20個頁碼。

 •   Baidu翻頁

始終有第”1“頁，中間用”…“表示未顯示的頁碼；
設計猜想：用戶翻到后面頁碼也找不到想要的內容時，會返回第一頁重新查找，此時第“1”頁是home的作用。

選中頁碼和mouseover頁碼樣式始終在一個位置不變，不需移動鼠標就可點擊下一頁，而后頁碼自動替換狀態；
設計猜想：瞄準頁碼點擊較困難，可以減少用戶瞄準位置的次數。但沒有做完美，用戶每刷新一個頁面，還是要滾動瀏覽器條到下方瞄準頁碼位置。這個微小的友好交互可以運用到輪播圖設計中，減少鼠標瞄準操作。
但也最多提供20個頁碼；

 •   Sina微博小分頁

滾動翻頁與翻頁的結合使用；

上頁與下頁放在一起更便于點擊；

通常情況下用戶按“下一頁”的情況最多，那么上頁樣式可以更簡單些；

4) 用戶心智模型分析

•   以Taobao搜索結果列表頁為例：

用戶輸入關鍵詞進行模糊搜索，然后出現相關結果列表，用戶需要逐頁翻看查找，此時“上一頁”“下一頁”使用最多,因此要設計的便于點擊切換；或間隔兩三頁查看，因此樣式上要區分查看過的頁碼和未查看過的；前幾頁瀏覽的幾率最大，當翻到后面相關內容越來越少，用戶會想要返回第一頁，因此最好一直顯示首頁；頁碼數量不宜過長，不要導致用戶視覺辨識困難；也不宜過短，以免給用戶造成網站信息較少的錯覺。

•   新浪微博信息列表翻頁用戶心智模型：

用戶瀏覽的信息是關注的信息，會像讀報紙一樣逐頁的瀏覽下去，因此“上一頁”“下一頁”用的次數最多；其次是跳轉翻頁，為體現輕量微博的概念，將傳統翻頁的中間頁碼部分簡化成下拉菜單，既能標識當前頁位置又能翻頁切換跳轉；

5) 總結

缺點是會打斷用戶閱讀，影響用戶關注的主要內容。
優點是條理清晰，便于分段查找信息，后臺請求壓力小；

與別的組件一樣，分頁不是單獨存在的也要結合使用環境來交互設計。

二、 信息滾動翻頁

 

GOOGLE圖片

•    “無限滾動翻頁”，當用戶瀏覽到頁面底部，自動刷新頁面展示新的信息；

•    連續翻過很多頁后，當再無內容可以展示時，自動出現關聯信息按鈕“查看更多信息”，引導用戶去瀏覽其他相關信息；

•    或需要點擊一下才可翻頁；

•   頁面過長時須提供“回到頂部”按鈕；

更多貼近用戶心智模型，方便閱讀瀏覽。缺點是當一段信息不能及時刷新出來時，無法跳躍瀏覽其下面的信息。

三、 滾動條

1) 滾動條與橫向分頁優先級

當同時使用滾動條和翻頁時，該如何設計。
翻頁與滾動條的相輔相成，都是頁面過長，為分段呈現內容的方法;

•   翻頁在滾動條內部

設計猜想：滾動條到部方出現翻頁。大概出自瀏覽器，滾動條內放頁面翻頁；

QQ郵箱

例如瀏覽器，是因為軟件與其內容的嵌套關系；

•   有翻頁也滾動條，滾動內容不宜過長（PC端產品）

設計猜想：滾動條需要拖動滑塊瀏覽，如果滑塊過短便更不容易操作；統計過IE、FF、Office等常用軟件，一般滑塊高度到8px時就不再縮小。當滑塊高度只剩8px時，滾動條的拖動體驗就相當的差。

•   移動端產品則貌似無限制

設計猜想：不需拖動鼠標，移動端上手動點擊是最方便常用的操作；

2) 分頁不一定是click跳轉的

有上下翻頁同時能快速拖動瀏覽不同頁的信息，適用于內容能夠粗略瀏覽的頁面；

四、 總結

1) 從信息的結構來看，傳統翻頁是橫向信息分段顯示，而“無限滾動翻頁”屬于縱向信息遞增顯示（隨滾動頁面信息增長）。

•   區分訪問過/未訪問過的頁碼樣式，能更好的幫助用戶記憶，不重復瀏覽；

•    鏈接的可點擊區域盡量大，方便用戶點擊，頁碼間距足夠避免用戶誤點擊；

•   清晰標識當前頁位置，一般處于頁碼中部；

•   可提供批量翻頁（如，下10頁）；

•   頁面過長時，增加“返回頂部”;

•   不需要“上一頁”“下一頁”時就不顯示，如后者比前者使用更頻繁，前者可簡化成符號>；

•   顯示總頁數（當不顯示總數時，翻到最后一頁就不能再翻頁了）；

•    “上一頁”“下一頁”位置固定；

•   頁碼數量不宜過長（一下呈現過多導致視覺混亂，用戶翻看頁碼困難）或過短（特別是搜索結果，會造成網站信息較少的印象）；

•   盡量使用首頁和末頁鏈接，且放在普通頁碼區外的固定位置；

•   除放第一頁外，可選擇放前面三頁的頁碼，視覺上穩定些；

•    避免花哨交互，精簡；

•   頁碼過多時，允許跳轉翻頁；

2) 同方向分頁的Tab與翻頁很少同時使用，滾動翻頁與滾動條也是如此。但橫向與縱向的組件可以交叉配合使用，比如滾動條與翻頁。
3) 沒有規定橫向的一定是翻頁，縱向的一定是滾動條，可以發散開來：橫向為滾動條，縱向翻頁，但此種方式似乎不便于操作。

所有組件的靈魂是用戶操作方式。