欧美日韩精品乱国产538,a无码免费在线观看,久久精品一区二区东京热,狠狠躁天天躁无码字幕

精典藝術(shù) 主流聲音 您的位置: 首頁>設(shè)計(jì)·新媒體
 關(guān)鍵詞推薦
 瀏覽中國(guó)網(wǎng)欄目

60種分頁案例和好的實(shí)踐

藝術(shù)中國(guó) | 時(shí)間: 2009-03-12 09:43:47 | 文章來源: 設(shè)計(jì)之家

結(jié)構(gòu)和層次降低了復(fù)雜性并提高了可讀性。你的文章或站點(diǎn)組織的越深入,用戶就越容易理解你觀點(diǎn)和得到你想傳達(dá)的信息。在網(wǎng)頁上,這點(diǎn)被通過多個(gè)方式做到。

在正文頭條和列舉被用做邏輯上獨(dú)立的數(shù)據(jù)塊來呈現(xiàn)信息。另一種解決方法是一種叫分頁的機(jī)制,它在給定文章的單一部分為用戶提供用于瀏覽的額外的導(dǎo)航選項(xiàng)。文章的這些地方除了“上一頁(previous)”和“下一頁(next)”按鈕外,還涉及到數(shù)字、提示和箭頭。

搜索引擎幾乎總是使用分頁,報(bào)紙往往利用它來導(dǎo)航有幾部分的大文章。還有一些情形,分頁也是博客(weblog)所需的。額外的導(dǎo)航能簡(jiǎn)化一些站點(diǎn)頁面的訪問,例如讓用戶容易的通過站點(diǎn)的存檔進(jìn)行瀏覽。

在大多數(shù)情況下,分頁優(yōu)于傳統(tǒng)的“上一頁、下一頁”導(dǎo)航方式,它通過站點(diǎn)給訪問者提供更快更方便的導(dǎo)航。它不是必須的,但是一個(gè)有用的好特性。

讓我們來看一些好的分頁實(shí)踐,何時(shí)和如何執(zhí)行分頁的一些例子。

分頁設(shè)計(jì)的好實(shí)踐(來自Faruk Ates的7個(gè)方面)

提供大面積的可點(diǎn)擊區(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)生分頁。它非常容易安裝,但需要你修改一些你用主題的源碼。

錯(cuò)誤#1:分頁選項(xiàng)不可見

因?yàn)榉猪摰氖侵饕康氖浅洚?dāng)一個(gè)改進(jìn)后的導(dǎo)航,它必需讓訪問者清楚他們?cè)谀膬骸⑺麄円呀?jīng)去了哪兒和他們下一步能去哪兒。這個(gè)三個(gè)事實(shí)讓用戶完整的理解這個(gè)系統(tǒng)如何的工作和這個(gè)導(dǎo)航應(yīng)該如何被使用。

但最重要的是,導(dǎo)航選項(xiàng)應(yīng)該是可見的。hugg.com不遵循這個(gè)方針。鏈接顏色和白色背景對(duì)比度非常低。沒有提供鼠標(biāo)懸停效果。

錯(cuò)誤#2:分頁不直觀

如果你不得不在一個(gè)相當(dāng)復(fù)雜(但漂亮)的導(dǎo)航和一個(gè)簡(jiǎn)單但包含必要功能的導(dǎo)航間選擇,一直傾向簡(jiǎn)單的方法。如果用戶不理解分頁背后的機(jī)制,他們將不能使用它,因此他們也不會(huì)使用你的網(wǎng)站。

Helium.com是這個(gè)錯(cuò)誤的很好例子。看一下下面截圖:這些箭頭代表什么?代表你訪問過的那頁或代表你正在訪問的那頁?為什么這個(gè)鏈接到第二頁有一個(gè)白色背景?為什么箭頭有不同的顏色?這是不直觀的。

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

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

創(chuàng)造性的方案可能是用戶友好的

對(duì)于設(shè)計(jì)者來說,一個(gè)元素被使用的越頻繁,想在沒有使設(shè)計(jì)不直觀的冒險(xiǎn)下去介紹一些創(chuàng)新方法越難。因此,分頁設(shè)計(jì)有各種不同的模式,但使用革命性的方法很少見。

然后,創(chuàng)造性的方法可以是用戶有好的。例如:Dirty.ru使用了一個(gè)滑塊分頁菜單,用戶能拖動(dòng)滑塊去獲得更多的可利用的選項(xiàng),那意思是鏈接到這個(gè)站點(diǎn)的的更舊頁面。

Erweiterungen.de,德文版的官方火狐擴(kuò)展網(wǎng)站,一旦用戶點(diǎn)擊“…”按鈕就提供更多的導(dǎo)航選項(xiàng)。

圖庫

雖然“標(biāo)準(zhǔn)”分頁——彼此相連被鏈接的藍(lán)色數(shù)字——對(duì)于大部分的網(wǎng)頁界面是非常普通的,設(shè)計(jì)往往通過色彩、形式、背景和形狀進(jìn)行實(shí)驗(yàn)。

分頁看起來很好不需要以迷惑用戶注意為目標(biāo),作為站點(diǎn)導(dǎo)航的一部分,它提供給用戶一個(gè)重要的功能,因而需要有效的使用。盡管如此,視覺線索是有幫助的。在大多數(shù)設(shè)計(jì)中,傳統(tǒng)使用的顏色被藍(lán)色和灰色主宰。

簡(jiǎn)單列舉

使用色彩和形狀

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

帶手工頁碼輸入框的分頁

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

與眾不同的方案

原文

Pagination Gallery: Examples And Good Practices

打印文章    收 藏    歡迎訪問藝術(shù)中國(guó)論壇 >>
發(fā)表評(píng)論
昵 稱 匿名

 

相關(guān)文章


  • <sup id="q8qqq"></sup>
    
    <cite id="q8qqq"><ul id="q8qqq"></ul></cite>
  • <noscript id="q8qqq"><optgroup id="q8qqq"></optgroup></noscript>
    <nav id="q8qqq"><code id="q8qqq"></code></nav>
  • <small id="q8qqq"></small>