60種分頁案例和好的實踐_網(wǎng)頁設(shè)計教程
推薦:建立用戶體驗過程的實用指南也許你剛剛來到一家公司,他們希望進(jìn)行一些“可用性”工作。你可能是一名UI設(shè)計師,業(yè)務(wù)分析師,或前端開發(fā)人員,一名產(chǎn)品經(jīng)理,或者負(fù)責(zé)用戶體驗部門的經(jīng)理或
作者:http://dancewithnet.com/
結(jié)構(gòu)和層次降低了復(fù)雜性并提高了可讀性。你的文章或站點組織的越深入,用戶就越輕易理解你觀點和得到你想傳達(dá)的信息。在網(wǎng)頁上,這點被通過多個方式做到。
在正文頭條和列舉被用做邏輯上獨立的數(shù)據(jù)塊來呈現(xiàn)信息。另一種解決方法是一種叫分頁的機(jī)制,它在給定文章的單一部分為用戶提供用于瀏覽的額外的導(dǎo)航選項。文章的這些地方除了“上一頁(previous)”和“下一頁(next)”按鈕外,還涉及到數(shù)字、提示和箭頭。
搜索引擎幾乎總是使用分頁,報紙往往利用它來導(dǎo)航有幾部分的大文章。還有一些情形,分頁也是博客(weblog)所需的。額外的導(dǎo)航能簡化一些站點頁面的訪問,例如讓用戶輕易的通過站點的存檔進(jìn)行瀏覽。
在大多數(shù)情況下,分頁優(yōu)于傳統(tǒng)的“上一頁、下一頁”導(dǎo)航方式,它通過站點給訪問者提供更快更方便的導(dǎo)航。它不是必須的,但是一個有用的好特性。
讓我們來看一些好的分頁實踐,何時和如何執(zhí)行分頁的一些例子。
分頁設(shè)計的好實踐(來自Faruk Ates的7個方面)
- 提供大面積的可點擊區(qū)域
- 別使用下劃線
- 標(biāo)明當(dāng)前頁面
- 隔開網(wǎng)頁鏈接
- 提供上一頁和下一頁鏈接
- 使用首頁和末頁鏈接(在能適用的地方)
- 把首頁和末頁放在外面
相關(guān)參考資料
- Pagination 101,F(xiàn)aruk Ates已經(jīng)完成關(guān)于分頁的終稿。
- Some Styles For Your Pagination,可以隨意下載隨意適用的分頁樣式。
- 假如你的博客是基于wordpress的,你可以安裝插件WP-PageNavi來產(chǎn)生分頁。它非常輕易安裝,但需要你修改一些你用主題的源碼。
錯誤#1:分頁選項不可見
因為分頁的是主要目的是充當(dāng)一個改進(jìn)后的導(dǎo)航,它必需讓訪問者清楚他們在哪兒、他們已經(jīng)去了哪兒和他們下一步能去哪兒。這個三個事實讓用戶完整的理解這個系統(tǒng)如何的工作和這個導(dǎo)航應(yīng)該如何被使用。
但最重要的是,導(dǎo)航選項應(yīng)該是可見的。hugg.com不遵循這個方針。鏈接顏色和白色背景對比度非常低。沒有提供鼠標(biāo)懸停效果。

錯誤#2:分頁不直觀
假如你不得不在一個相當(dāng)復(fù)雜(但漂亮)的導(dǎo)航和一個簡單但包含必要功能的導(dǎo)航間選擇,一直傾向簡單的方法。假如用戶不理解分頁背后的機(jī)制,他們將不能使用它,因此他們也不會使用你的網(wǎng)站。
Helium.com是這個錯誤的很好例子�?匆幌孪旅娼貓D:這些箭頭代表什么?代表你訪問過的那頁或代表你正在訪問的那頁?為什么這個鏈接到第二頁有一個白色背景?為什么箭頭有不同的顏色?這是不直觀的。

不直觀的設(shè)計源于結(jié)構(gòu)、層次和深思熟慮后的設(shè)計決定的缺乏。空白導(dǎo)航像過度擁擠方案一樣不直觀。

沒有間隔的網(wǎng)頁鏈接難以掃描和瀏覽。Make-Believe.org是個這樣的例子,其設(shè)計是不直觀的。

創(chuàng)造性的方案可能是用戶友好的
對于設(shè)計者來說,一個元素被使用的越頻繁,想在沒有使設(shè)計不直觀的冒險下去介紹一些創(chuàng)新方法越難。因此,分頁設(shè)計有各種不同的模式,但使用革命性的方法很少見。
然后,創(chuàng)造性的方法可以是用戶有好的。例如:Dirty.ru使用了一個滑塊分頁菜單,用戶能拖動滑塊去獲得更多的可利用的選項,那意思是鏈接到這個站點的的更舊頁面。

Erweiterungen.de,德文版的官方火狐擴(kuò)展網(wǎng)站,一旦用戶點擊“…”按鈕就提供更多的導(dǎo)航選項。
圖庫
雖然“標(biāo)準(zhǔn)”分頁——彼此相連被鏈接的藍(lán)色數(shù)字——對于大部分的網(wǎng)頁界面是非常普通的,設(shè)計往往通過色彩、形式、背景和外形進(jìn)行實驗。
分頁看起來很好不需要以迷惑用戶注重為目標(biāo),作為站點導(dǎo)航的一部分,它提供給用戶一個重要的功能,因而需要有效的使用。盡管如此,視覺線索是有幫助的。在大多數(shù)設(shè)計中,傳統(tǒng)使用的顏色被藍(lán)色和灰色主宰。
簡單列舉

使用色彩和外形
設(shè)計者通常用顏色高亮去顯示當(dāng)前頁,以區(qū)分它和其它頁。頁碼也被給于外形:長方形、圓形或者按鈕。當(dāng)前頁通常是不被鏈接的。







































帶手工頁碼輸入框的分頁
在一些情況下,用戶可以通過輸入框手工提供想瀏覽的頁碼。這對選項數(shù)目有限的分頁來說是很常見的,例如在這些設(shè)計里你不能跳到你想去的上一頁。


與眾不同的方案

原文
Pagination Gallery: Examples And Good Practices
分享:網(wǎng)頁設(shè)計如何促進(jìn)內(nèi)衣品牌建設(shè)內(nèi)衣,作為人體的貼身服飾,從羞于露面到大大方方展示出來,在一群營銷高手的推波助瀾下,風(fēng)生水起,高速發(fā)展,催生了一個趨于成熟的熱點產(chǎn)業(yè)。在這個產(chǎn)業(yè)的營
- 中國互聯(lián)網(wǎng)黑色產(chǎn)業(yè)人數(shù)近10萬 5分鐘1起網(wǎng)絡(luò)入侵
- 馬云最后的發(fā)布會:打假,打出阿里的新未來
- 實踐分享:ACCESS數(shù)據(jù)庫導(dǎo)入mysql數(shù)據(jù)庫
- ACCESS數(shù)據(jù)庫轉(zhuǎn)ORACLE數(shù)據(jù)庫分享
- CDN.net免費CDN申請使用教程:100GB流量香港日本新加坡節(jié)點
- WordPress 教程:為插件自定義數(shù)據(jù)表
- 如何使用查找我的iPhone教程
- 微信公眾平臺教程(二) 消息管理與群發(fā)
- 中國IPv4地址今年將告罄 IPv6期待打破政策局
- 移動廣告野蠻成長:75%投放在iOS平臺
- 災(zāi)難面前,互聯(lián)網(wǎng)公司可以如何做的更好?
- 富士康500萬部iPhone遭蘋果退貨 損失10億元
- 相關(guān)鏈接:
- 教程說明:
網(wǎng)頁設(shè)計教程-60種分頁案例和好的實踐
。








