|
今天小池提出一個(gè)問(wèn)題討論，如何使分頁(yè)做的更友好。做了一些調(diào)研和思考，做了些總結(jié)。
分頁(yè)在電商網(wǎng)站3級(jí)頁(yè)、搜索結(jié)果頁(yè)面等信息量大的頁(yè)面是很重要的。我們?cè)谠O(shè)計(jì)時(shí)要考慮：
- 分頁(yè)的長(zhǎng)度
- 首末頁(yè)存在的必要
- 自定義頁(yè)面的必要
設(shè)置場(chǎng)景去驗(yàn)證可用性。
1 用戶(hù)模糊搜索一個(gè)關(guān)鍵字，往往會(huì)出現(xiàn)很多相關(guān)的結(jié)果。用戶(hù)會(huì)逐頁(yè)的去翻頁(yè)去尋找，此時(shí)用戶(hù)會(huì)使用“上一頁(yè)、下一頁(yè)”或附近的數(shù)字進(jìn)行逐頁(yè)檢索。
根據(jù)心智模型 ，保持用戶(hù)點(diǎn)擊的連貫性�！吧弦豁�(yè)、下一頁(yè)”距離相對(duì)固定，讓用戶(hù)使用上一頁(yè)下一頁(yè)不斷切換時(shí)很方便；分頁(yè)長(zhǎng)度不宜過(guò)長(zhǎng)，過(guò)長(zhǎng)會(huì)導(dǎo)致用戶(hù)視線(xiàn)游離；也不宜過(guò)短，過(guò)短會(huì)導(dǎo)致頁(yè)碼顯示過(guò)少，給用戶(hù)造成網(wǎng)站信息較少的錯(cuò)覺(jué)。
京東這一點(diǎn)可用性較好，“上一頁(yè)、下一頁(yè)”距離相對(duì)固定。同時(shí)頁(yè)碼數(shù)量顯示適中。新蛋、淘寶距離不定且距離較長(zhǎng)，容易使用戶(hù)實(shí)現(xiàn)游離，可用性不好。
2 用戶(hù)往往會(huì)選擇根據(jù)價(jià)格從低到高排列或銷(xiāo)量從高到低排列來(lái)作為自己的購(gòu)買(mǎi)參考。用戶(hù)翻頁(yè)到后面20幾頁(yè)發(fā)現(xiàn)銷(xiāo)量越來(lái)越不好，價(jià)格越來(lái)越高，此時(shí)他會(huì)想返回第一頁(yè)去看。此場(chǎng)景說(shuō)明首頁(yè)是有存在的必要
京東、蘇寧沒(méi)有給出回到第一頁(yè)的快捷途徑
上述例子中有2中快捷途徑：
a / 第一頁(yè)始終顯示
b/給用戶(hù)一個(gè)自定義頁(yè)碼，用戶(hù)輸入頁(yè)碼直達(dá)。
3 實(shí)際情況表明，在這種信息量大的頁(yè)面上，用戶(hù)往往不知道具體頁(yè)碼上的具體內(nèi)容，不會(huì)去自定義某個(gè)頁(yè)碼去查看，會(huì)逐頁(yè)或間隔兩、三頁(yè)去查看 ，翻到一定頁(yè)數(shù)時(shí)用戶(hù)發(fā)覺(jué)結(jié)果越來(lái)越背離自己的初衷，所以會(huì)返回第一頁(yè)或重新檢索。同時(shí)要顯示出最后一頁(yè)，系統(tǒng)需要計(jì)算出所有的頁(yè)數(shù)，在商品很多時(shí)，會(huì)導(dǎo)致頁(yè)面性能降低。
在設(shè)計(jì)時(shí)，我們要注意:
- 少就是多，精簡(jiǎn)。避免花哨
- 以方便用戶(hù)使用最先。避免為交互而交互
優(yōu)點(diǎn)，符合用戶(hù)在模糊結(jié)果是翻頁(yè)的情景，視覺(jué)焦點(diǎn)相隨聚集；始終顯示第一頁(yè)，給用戶(hù)快速回來(lái)的途徑；用用省略號(hào)表示還有沒(méi)有顯示出來(lái)的頁(yè)面，引導(dǎo)用戶(hù)去查看；交互方式良好，做到了精簡(jiǎn)，沒(méi)有附加花哨交互。
根據(jù)上述理由，以及蘇寧VI色，給出蘇寧易購(gòu)分頁(yè)的優(yōu)化方案，拋磚引玉。求PK，求調(diào)教…
從谷歌圖片檢索的弱化分頁(yè)，讓用戶(hù)順著屏幕一直不間斷的瀏覽下去，到輕博客點(diǎn)點(diǎn)網(wǎng)隨著用戶(hù)的滑動(dòng)自動(dòng)加載更多的內(nèi)容，這些微妙的交互可以讓我們的體驗(yàn)更加愉悅也使我堅(jiān)信交互設(shè)計(jì)師是可以用戶(hù)做更多的，是很有價(jià)值的。
原文：http://www.ue-ui.com/about-page.html
本文鏈接：http://m.95time.cn/design/doc/2011/8500.asp 
出處：ue-ui
責(zé)任編輯：bluehearts
|
