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