DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 設計分享總結:如何使分頁做的更友好
設計分享總結:如何使分頁做的更友好
編輯:關於網頁技巧     

破洛洛文章簡介:圖錄足跡,漸淺入深

今天小池提出一個問題討論,如何使分頁做的更友好。做了一些調研和思考,做了些總結。

分頁在電商網站3級頁、搜索結果頁面等信息量大的頁面是很重要的。我們在設計時要考慮:

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



設置場景去驗證可用性。

1  用戶模糊搜索一個關鍵字,往往會出現很多相關的結果。用戶會逐頁的去翻頁去尋找,此時用戶會使用“上一頁、下一頁”或附近的數字進行逐頁檢索。
根據心智模型 ,保持用戶點擊的連貫性。“上一頁、下一頁”距離相對固定,讓用戶使用上一頁下一頁不斷切換時很方便;分頁長度不宜過長,過長會導致用戶視線游離;也不宜過短,過短會導致頁碼顯示過少,給用戶造成網站信息較少的錯覺。
京東這一點可用性較好,“上一頁、下一頁”距離相對固定。同時頁碼數量顯示適中。新蛋、淘寶距離不定且距離較長,容易使用戶實現游離,可用性不好。


2  用戶往往會選擇根據價格從低到高排列或銷量從高到低排列來作為自己的購買參考。用戶翻頁到後面20幾頁發現銷量越來越不好,價格越來越高,此時他會想返回第一頁去看。此場景說明首頁是有存在的必要
京東、蘇寧沒有給出回到第一頁的快捷途徑
上述例子中有2中快捷途徑:
a / 第一頁始終顯示
b/給用戶一個自定義頁碼,用戶輸入頁碼直達。


3  實際情況表明,在這種信息量大的頁面上,用戶往往不知道具體頁碼上的具體內容,不會去自定義某個頁碼去查看,會逐頁或間隔兩、三頁去查看 ,翻到一定頁數時用戶發覺結果越來越背離自己的初衷,所以會返回第一頁或重新檢索。同時要顯示出最後一頁,系統需要計算出所有的頁數,在商品很多時,會導致頁面性能降低。


在設計時,我們要注意:

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



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

根據上述理由,以及蘇寧VI色,給出蘇寧易購分頁的優化方案,拋磚引玉。求PK,求調教…


從谷歌圖片檢索的弱化分頁,讓用戶順著屏幕一直不間斷的浏覽下去,到輕博客點點網隨著用戶的滑動自動加載更多的內容,這些微妙的交互可以讓我們的體驗更加愉悅


也使我堅信交互設計師是可以用戶做更多的,是很有價值的。

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