2012-5-13 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( m.gyxygd.cn )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源：http://cued.xunlei.com/log028
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
說(shuō)說(shuō)目前常用的三種分類顯示信息方法：
常規(guī)翻頁(yè) 信息滾動(dòng)翻頁(yè) 滾動(dòng)條
前者是橫向翻頁(yè)方式，后兩者是縱向的信息翻頁(yè)。分頁(yè)作為很小的一個(gè)組件，大多數(shù)網(wǎng)站都不會(huì)花費(fèi)什么精力去設(shè)計(jì)，設(shè)計(jì)也大同小異，用戶已經(jīng)使用習(xí)慣學(xué)習(xí)成本為0，但如果能夠在細(xì)節(jié)上做的更細(xì)致貼心一些，用戶的使用體驗(yàn)會(huì)有所提升。
一、 先來(lái)看常規(guī)翻頁(yè)
1) 組成結(jié)構(gòu)
題-112.jpg)
• 上頁(yè)+頁(yè)碼+下頁(yè)
• 跳轉(zhuǎn)到__頁(yè)/第__頁(yè)”；
• 確認(rèn)”按鈕；
• 支持鍵盤(pán)操作；
2) 使用情景
當(dāng)網(wǎng)頁(yè)內(nèi)容較多、不能在限定區(qū)域內(nèi)顯示完全時(shí)；
為了方便用戶在多個(gè)頁(yè)面間跳轉(zhuǎn)和快速定位（尤其是按順序翻頁(yè)），通過(guò)翻頁(yè)設(shè)計(jì)提供多個(gè)頁(yè)面間的導(dǎo)航。
在電商網(wǎng)站3級(jí)頁(yè)、搜索結(jié)果頁(yè)面等信息量大的頁(yè)面是很重要的。
• 分頁(yè)的內(nèi)容是什么類型？
• 頁(yè)面數(shù)量有多少？
• 查看最多的是哪些頁(yè)面？
• 手動(dòng)全部翻一遍的幾率
• 是否會(huì)不按順序翻頁(yè)，為什么？
• 是否會(huì)查看已翻過(guò)的翻頁(yè)？
• 翻頁(yè)是否在列表頂部和底部都出現(xiàn)？
• “最后一頁(yè)”是否一定要有？
• 列表頂部什么情況下有翻頁(yè)？
按照用戶心理模型，瀏覽郵箱內(nèi)容時(shí)是反復(fù)瀏覽型，且頁(yè)面較長(zhǎng)，此時(shí)需要在頂部添加翻頁(yè)，但電商網(wǎng)站搜索結(jié)果頁(yè)和新浪微博的用戶是在瀏覽到頁(yè)面底部時(shí)才會(huì)有翻頁(yè)動(dòng)作，因此不必在頂部放翻頁(yè)。
• 是否可以mouseover就顯示頁(yè)面內(nèi)容？什么時(shí)候可以？
設(shè)計(jì)前考慮完以上問(wèn)題，針對(duì)情況進(jìn)行取舍設(shè)計(jì)。
3) 交互分析
• Google翻頁(yè)
搜索結(jié)果首次只提供10個(gè)頁(yè)碼；
設(shè)計(jì)猜想：google開(kāi)發(fā)者認(rèn)為一般用戶在這10頁(yè)內(nèi)就能找到想要的內(nèi)容。
題-61.jpg)
點(diǎn)擊任何一頁(yè)碼繼續(xù)瀏覽，發(fā)現(xiàn)后續(xù)提供的頁(yè)碼是：當(dāng)前頁(yè)+9；
設(shè)計(jì)猜想：當(dāng)用戶往下點(diǎn)擊頁(yè)碼時(shí)，google開(kāi)發(fā)者認(rèn)為前10頁(yè)內(nèi)容不能滿足用戶，于是將搜索范圍放大。
但最多提供20個(gè)頁(yè)碼；
設(shè)計(jì)猜想：但考慮到網(wǎng)頁(yè)寬度還是不能繼續(xù)無(wú)限制增加頁(yè)碼個(gè)數(shù)，于是設(shè)定最多一次提供20個(gè)頁(yè)碼。
• Baidu翻頁(yè)
始終有第”1“頁(yè)，中間用”…“表示未顯示的頁(yè)碼；
設(shè)計(jì)猜想：用戶翻到后面頁(yè)碼也找不到想要的內(nèi)容時(shí)，會(huì)返回第一頁(yè)重新查找，此時(shí)第“1”頁(yè)是home的作用。
選中頁(yè)碼和mouseover頁(yè)碼樣式始終在一個(gè)位置不變，不需移動(dòng)鼠標(biāo)就可點(diǎn)擊下一頁(yè)，而后頁(yè)碼自動(dòng)替換狀態(tài)；
設(shè)計(jì)猜想：瞄準(zhǔn)頁(yè)碼點(diǎn)擊較困難，可以減少用戶瞄準(zhǔn)位置的次數(shù)。但沒(méi)有做完美，用戶每刷新一個(gè)頁(yè)面，還是要滾動(dòng)瀏覽器條到下方瞄準(zhǔn)頁(yè)碼位置。這個(gè)微小的友好交互可以運(yùn)用到輪播圖設(shè)計(jì)中，減少鼠標(biāo)瞄準(zhǔn)操作。
但也最多提供20個(gè)頁(yè)碼；
• Sina微博小分頁(yè)
題-13.jpg)
滾動(dòng)翻頁(yè)與翻頁(yè)的結(jié)合使用；
題-14.jpg)
上頁(yè)與下頁(yè)放在一起更便于點(diǎn)擊；
題-15.jpg)
通常情況下用戶按“下一頁(yè)”的情況最多，那么上頁(yè)樣式可以更簡(jiǎn)單些；
4) 用戶心智模型分析
• 以Taobao搜索結(jié)果列表頁(yè)為例：
用戶輸入關(guān)鍵詞進(jìn)行模糊搜索，然后出現(xiàn)相關(guān)結(jié)果列表，用戶需要逐頁(yè)翻看查找，此時(shí)“上一頁(yè)”“下一頁(yè)”使用最多,因此要設(shè)計(jì)的便于點(diǎn)擊切換；或間隔兩三頁(yè)查看，因此樣式上要區(qū)分查看過(guò)的頁(yè)碼和未查看過(guò)的；前幾頁(yè)瀏覽的幾率最大，當(dāng)翻到后面相關(guān)內(nèi)容越來(lái)越少，用戶會(huì)想要返回第一頁(yè)，因此最好一直顯示首頁(yè)；頁(yè)碼數(shù)量不宜過(guò)長(zhǎng)，不要導(dǎo)致用戶視覺(jué)辨識(shí)困難；也不宜過(guò)短，以免給用戶造成網(wǎng)站信息較少的錯(cuò)覺(jué)。
• 新浪微博信息列表翻頁(yè)用戶心智模型：
題-2.jpg)
用戶瀏覽的信息是關(guān)注的信息，會(huì)像讀報(bào)紙一樣逐頁(yè)的瀏覽下去，因此“上一頁(yè)”“下一頁(yè)”用的次數(shù)最多；其次是跳轉(zhuǎn)翻頁(yè)，為體現(xiàn)輕量微博的概念，將傳統(tǒng)翻頁(yè)的中間頁(yè)碼部分簡(jiǎn)化成下拉菜單，既能標(biāo)識(shí)當(dāng)前頁(yè)位置又能翻頁(yè)切換跳轉(zhuǎn)；
5) 總結(jié)
缺點(diǎn)是會(huì)打斷用戶閱讀，影響用戶關(guān)注的主要內(nèi)容。
優(yōu)點(diǎn)是條理清晰，便于分段查找信息，后臺(tái)請(qǐng)求壓力小；
與別的組件一樣，分頁(yè)不是單獨(dú)存在的也要結(jié)合使用環(huán)境來(lái)交互設(shè)計(jì)。
二、 信息滾動(dòng)翻頁(yè)
題-5.jpg)
題-3.jpg)
GOOGLE圖片
• “無(wú)限滾動(dòng)翻頁(yè)”，當(dāng)用戶瀏覽到頁(yè)面底部，自動(dòng)刷新頁(yè)面展示新的信息；
• 連續(xù)翻過(guò)很多頁(yè)后，當(dāng)再無(wú)內(nèi)容可以展示時(shí)，自動(dòng)出現(xiàn)關(guān)聯(lián)信息按鈕“查看更多信息”，引導(dǎo)用戶去瀏覽其他相關(guān)信息；
• 或需要點(diǎn)擊一下才可翻頁(yè)；
• 頁(yè)面過(guò)長(zhǎng)時(shí)須提供“回到頂部”按鈕；
題-4.jpg)
更多貼近用戶心智模型，方便閱讀瀏覽。缺點(diǎn)是當(dāng)一段信息不能及時(shí)刷新出來(lái)時(shí)，無(wú)法跳躍瀏覽其下面的信息。
三、 滾動(dòng)條
1) 滾動(dòng)條與橫向分頁(yè)優(yōu)先級(jí)
當(dāng)同時(shí)使用滾動(dòng)條和翻頁(yè)時(shí)，該如何設(shè)計(jì)。
翻頁(yè)與滾動(dòng)條的相輔相成，都是頁(yè)面過(guò)長(zhǎng)，為分段呈現(xiàn)內(nèi)容的方法;
• 翻頁(yè)在滾動(dòng)條內(nèi)部
設(shè)計(jì)猜想：滾動(dòng)條到部方出現(xiàn)翻頁(yè)。大概出自瀏覽器，滾動(dòng)條內(nèi)放頁(yè)面翻頁(yè)；
QQ郵箱
題-71.jpg)
例如瀏覽器，是因?yàn)檐浖c其內(nèi)容的嵌套關(guān)系；
• 有翻頁(yè)也滾動(dòng)條，滾動(dòng)內(nèi)容不宜過(guò)長(zhǎng)（PC端產(chǎn)品）
設(shè)計(jì)猜想：滾動(dòng)條需要拖動(dòng)滑塊瀏覽，如果滑塊過(guò)短便更不容易操作；統(tǒng)計(jì)過(guò)IE、FF、Office等常用軟件，一般滑塊高度到8px時(shí)就不再縮小。當(dāng)滑塊高度只剩8px時(shí)，滾動(dòng)條的拖動(dòng)體驗(yàn)就相當(dāng)?shù)牟睢?/span>
• 移動(dòng)端產(chǎn)品則貌似無(wú)限制
設(shè)計(jì)猜想：不需拖動(dòng)鼠標(biāo)，移動(dòng)端上手動(dòng)點(diǎn)擊是最方便常用的操作；
題-8.jpg)
2) 分頁(yè)不一定是click跳轉(zhuǎn)的
有上下翻頁(yè)同時(shí)能快速拖動(dòng)瀏覽不同頁(yè)的信息，適用于內(nèi)容能夠粗略瀏覽的頁(yè)面；
四、 總結(jié)
1) 從信息的結(jié)構(gòu)來(lái)看，傳統(tǒng)翻頁(yè)是橫向信息分段顯示，而“無(wú)限滾動(dòng)翻頁(yè)”屬于縱向信息遞增顯示（隨滾動(dòng)頁(yè)面信息增長(zhǎng)）。
• 區(qū)分訪問(wèn)過(guò)/未訪問(wèn)過(guò)的頁(yè)碼樣式，能更好的幫助用戶記憶，不重復(fù)瀏覽；
• 鏈接的可點(diǎn)擊區(qū)域盡量大，方便用戶點(diǎn)擊，頁(yè)碼間距足夠避免用戶誤點(diǎn)擊；
題-25.jpg)
• 清晰標(biāo)識(shí)當(dāng)前頁(yè)位置，一般處于頁(yè)碼中部；
• 可提供批量翻頁(yè)（如，下10頁(yè)）；
• 頁(yè)面過(guò)長(zhǎng)時(shí)，增加“返回頂部”;
• 不需要“上一頁(yè)”“下一頁(yè)”時(shí)就不顯示，如后者比前者使用更頻繁，前者可簡(jiǎn)化成符號(hào)>；
• 顯示總頁(yè)數(shù)（當(dāng)不顯示總數(shù)時(shí)，翻到最后一頁(yè)就不能再翻頁(yè)了）；
• “上一頁(yè)”“下一頁(yè)”位置固定；
• 頁(yè)碼數(shù)量不宜過(guò)長(zhǎng)（一下呈現(xiàn)過(guò)多導(dǎo)致視覺(jué)混亂，用戶翻看頁(yè)碼困難）或過(guò)短（特別是搜索結(jié)果，會(huì)造成網(wǎng)站信息較少的印象）；
• 盡量使用首頁(yè)和末頁(yè)鏈接，且放在普通頁(yè)碼區(qū)外的固定位置；
• 除放第一頁(yè)外，可選擇放前面三頁(yè)的頁(yè)碼，視覺(jué)上穩(wěn)定些；
• 避免花哨交互，精簡(jiǎn)；
題-27.jpg)
• 頁(yè)碼過(guò)多時(shí)，允許跳轉(zhuǎn)翻頁(yè)；
2) 同方向分頁(yè)的Tab與翻頁(yè)很少同時(shí)使用，滾動(dòng)翻頁(yè)與滾動(dòng)條也是如此。但橫向與縱向的組件可以交叉配合使用，比如滾動(dòng)條與翻頁(yè)。
3) 沒(méi)有規(guī)定橫向的一定是翻頁(yè)，縱向的一定是滾動(dòng)條，可以發(fā)散開(kāi)來(lái)：橫向?yàn)闈L動(dòng)條，縱向翻頁(yè)，但此種方式似乎不便于操作。
所有組件的靈魂是用戶操作方式。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.gyxygd.cn