當(dāng)前位置:工程項(xiàng)目OA系統(tǒng) > 泛普各地 > 北京OA系統(tǒng) > 北京網(wǎng)站建設(shè)公司
網(wǎng)頁設(shè)計(jì)中的面包屑實(shí)例和做法.
申請(qǐng)免費(fèi)試用、咨詢電話:400-8352-114
2012年09月15日 TAG: 網(wǎng)頁設(shè)計(jì)網(wǎng)站上有很多的網(wǎng)頁,面包屑導(dǎo)航可以大大提高用戶使用的方式找到自己的方式解決。在可用性方面,面包屑數(shù)量減少網(wǎng)站的訪問者,以獲得更高級(jí)別的頁面需要采取的行動(dòng),并提高網(wǎng)站的部分和頁面的可查找性。這也是一種有效的視覺援助,表示用戶在該網(wǎng)站的層次結(jié)構(gòu)的位置,使其成為一個(gè)偉大的登陸頁面的上下文信息來源。
什么是面包屑?
一個(gè)“面包屑”(或“面包屑導(dǎo)航”)是一種輔助導(dǎo)航計(jì)劃的網(wǎng)站或Web應(yīng)用程序中顯示用戶的位置。一詞來源于Hansel和Gretel童話在這兩個(gè)標(biāo)題的兒童輟學(xué)面包屑形成了一條回到自己的家鄉(xiāng)。就像在故事中,面包屑在現(xiàn)實(shí)世界的應(yīng)用中為用戶提供了一種方法來跟蹤路徑返回到原來的著陸點(diǎn)。
面包屑上Delicious.com
您通??梢哉业骄W(wǎng)站有大量的內(nèi)容,以分層方式組織的面包屑。你也可以看到他們的Web應(yīng)用程序中有多個(gè)步驟,它們的功能類似一個(gè)進(jìn)度條。在其最簡單的形式中,面包屑是水平布置的“大于”符號(hào)(>)分隔的文本鏈接;符號(hào)表示該頁面相對(duì)水平它旁邊的頁面的鏈接。
在這篇文章中,我們將探討使用面包屑在網(wǎng)站上討論的一些最佳做法應(yīng)用到自己的網(wǎng)站瀏覽路徑。
你應(yīng)該在什么時(shí)候使用面包屑?
使用面包屑導(dǎo)航的大型網(wǎng)站和分層排列 的網(wǎng)站頁面。一個(gè)優(yōu)秀的方案是電子商務(wù)網(wǎng)站,在種類繁多的產(chǎn)品分為邏輯分類。
沒有邏輯等級(jí)或分組的單級(jí)網(wǎng)站,您應(yīng)不使用面包屑。一個(gè)偉大的方式來確定,如果一個(gè)網(wǎng)站將受益于面包屑導(dǎo)航是建立一個(gè)網(wǎng)站地圖或圖網(wǎng)站的導(dǎo)航結(jié)構(gòu),然后分析,是否面包屑會(huì)提高用戶的內(nèi)部和類別之間的導(dǎo)航能力。
面包屑導(dǎo)航應(yīng)該被視為一個(gè)額外的功能,而不應(yīng)取代有效的主導(dǎo)航菜單。這是一個(gè)方便的功能; 輔助導(dǎo)航方案,允許用戶建立他們?cè)谀睦锏牧硪环N方式來瀏覽你的網(wǎng)站。
面包屑的類型
主要有三種類型的面包屑。
基于位置的
基于位置的面包屑的用戶,他們是在網(wǎng)站的層次結(jié)構(gòu)。它們通常被用于有多個(gè)級(jí)別(通常是兩個(gè)以上的水平)的導(dǎo)航方案。在下面的例子(來自SitePoint),每一個(gè)文字鏈接是高于在它的右邊是一個(gè)級(jí)別的頁面。
基于屬性的
屬性為基礎(chǔ)的瀏覽路徑顯示一個(gè)特定頁面的屬性。例如,在新蛋,面包屑小徑顯示一個(gè)特定的頁面上顯示的項(xiàng)目的屬性:
此頁面顯示所有計(jì)算機(jī)的屬性,正在生產(chǎn)的連李有一個(gè)MicroATX的小塔的外形。
基于路徑的
路徑為基礎(chǔ)的瀏覽路徑向用戶展示他們已經(jīng)采取的步驟,到達(dá)一個(gè)特定的頁面。基于路徑的面包屑是動(dòng)態(tài)的,因?yàn)樗鼈冿@示之前到達(dá)當(dāng)前頁面上的用戶訪問過的網(wǎng)頁。
使用面包屑的好處
這里只是一些使用面包屑導(dǎo)航的好處。
方便用戶
面包屑主要是用來給用戶瀏覽一個(gè)網(wǎng)站的輔助手段。提供一個(gè)大型的多級(jí)網(wǎng)站的所有網(wǎng)頁上的面包屑導(dǎo)航,用戶可以更方便地瀏覽到更高級(jí)別的類別。
減少返回到更高級(jí)別的頁面,
而不是使用瀏覽器的“返回”按鈕或網(wǎng)站的主導(dǎo)航返回到一個(gè)更高層次的頁面的點(diǎn)擊或行動(dòng),用較少的點(diǎn)擊數(shù),用戶現(xiàn)在可以使用面包屑。
通常不養(yǎng)豬的屏幕空間,
因?yàn)樗麄兺ǔK綖閷?dǎo)向,明明白白風(fēng)格,瀏覽路徑不會(huì)占用很大的空間在頁面上。做的好處是,他們幾乎沒有負(fù)面影響的內(nèi)容過載,超過任何底片,如果使用得當(dāng)。
降低跳出率的
瀏覽路徑可以是一個(gè)偉大的方式來吸引首次細(xì)讀的網(wǎng)站后,查看登陸頁面的訪客。例如,假設(shè)用戶通過谷歌搜索到一個(gè)頁面,看到一個(gè)面包屑的線索,可能會(huì)吸引到更高級(jí)別的頁面,用戶點(diǎn)擊查看相關(guān)主題的利益。這反過來,降低了整體的網(wǎng)站跳出率。
在面包屑導(dǎo)航實(shí)施的誤區(qū)
使用瀏覽路徑是一個(gè)相當(dāng)簡單的事情,有一些指導(dǎo)原則考慮,才決定他們?cè)诰W(wǎng)站上實(shí)施。讓我們來看看,以避免一些常見的錯(cuò)誤。
使用面包屑時(shí),你并不需要
在實(shí)施面包屑的一個(gè)常見的錯(cuò)誤是使用他們沒有任何好處。
另外,在上述的例子中,Slicethepie風(fēng)險(xiǎn)壓倒性的用戶提供太多的導(dǎo)航選項(xiàng)。(1)主導(dǎo)航,面包屑導(dǎo)航(2)和(3)輔助導(dǎo)航是非常接近的。在此應(yīng)用程序中的面包屑導(dǎo)航為用戶提供了方便,因?yàn)闆]有添加輔助導(dǎo)航較低級(jí)別的頁面位于它下面的。此外,單擊上的面包屑導(dǎo)航(“音樂”)第二級(jí)鏈接將帶您回到第一個(gè)選項(xiàng)卡(“聽”),其中錯(cuò)誤地認(rèn)為,第一個(gè)選項(xiàng)卡是在一個(gè)更高的水平比其他兩個(gè)(“搜索“和”藝術(shù)家名人堂“)。
作為主要的導(dǎo)航瀏覽路徑
如前所述,使用面包屑導(dǎo)航作為一個(gè)可選的援助。
在上面的例子中,mefeedia不提供一個(gè)觀看影片的主導(dǎo)航菜單。雖然有文字的腳注部分中的鏈接導(dǎo)航,導(dǎo)航菜單在身體的頁面,很難瀏覽到該網(wǎng)站的其他部分。
如果你直接到達(dá)一個(gè)視頻網(wǎng)頁上 - 比方說,例如,通過谷歌搜索結(jié)果 - 唯一的導(dǎo)航選項(xiàng),則可能是面包屑導(dǎo)航?;蛘撸绻阋呀?jīng)被瀏覽一個(gè)網(wǎng)站的網(wǎng)頁,并達(dá)到一個(gè)頁面不顯示主導(dǎo)航菜單,你必須按“返回”按鈕,在您的瀏覽器,進(jìn)入主菜單。
使用面包屑網(wǎng)頁時(shí),有多個(gè)類別,
瀏覽路徑有一個(gè)線性的結(jié)構(gòu),因此,使用他們的將是困難的,如果你的網(wǎng)頁不能被歸類成整齊的類別。決定是否使用面包屑,在很大程度上取決于你如何設(shè)計(jì)你的網(wǎng)站的層次結(jié)構(gòu)。當(dāng)較低級(jí)別的頁面(或可以)在一個(gè)以上的父類,面包屑的痕跡是無效的,不準(zhǔn)確的和用戶感到困惑。
面包屑導(dǎo)航的設(shè)計(jì)注意事項(xiàng)
當(dāng)設(shè)計(jì)一個(gè)面包屑導(dǎo)航計(jì)劃,要考慮幾件事情。讓我們來看看一些可能出現(xiàn)的問題,當(dāng)你的工作與面包屑。
應(yīng)使用單獨(dú)的鏈接項(xiàng)目
的普遍接受和分離瀏覽路徑中的超鏈接是最容易識(shí)別的符號(hào)“大于”符號(hào)(>)。通常情況下,“>”符號(hào)是用來表示層次結(jié)構(gòu),在父類的格式>兒童類。
使用的其它符號(hào)的箭頭指向正確的,正確的角度引號(hào)(“)和斜線(/)。
的選擇取決于美學(xué)的網(wǎng)站和使用的痕跡的類型。例如,對(duì)于基于路徑的面包屑了該書不一定有一個(gè)分層之間的相互關(guān)系,使用一個(gè)“大于”符號(hào)可能無法準(zhǔn)確地傳達(dá)他們的關(guān)系。
它應(yīng)該是多大?
你不希望你的面包屑主宰的頁面。一個(gè)面包屑導(dǎo)航功能只是作為一種輔助手段,用戶(方便),其大小應(yīng)傳達(dá)給用戶,因此應(yīng)該至少是較小的,或不太突出,比主導(dǎo)航菜單。
您的面包屑導(dǎo)航的大小時(shí)要遵循的一個(gè)很好的經(jīng)驗(yàn)法則是,它不應(yīng)該是抓住用戶的注意,當(dāng)?shù)竭_(dá)一個(gè)頁面上的第一個(gè)項(xiàng)目。
應(yīng)該在哪里面包屑的位置?
主導(dǎo)航菜單瀏覽路徑通常顯示在下面的頁面的上半部分,如果使用一個(gè)水平的菜單布局。
面包屑展示
現(xiàn)在,我們已經(jīng)討論了誰,什么,何時(shí),何地,為何,hows的瀏覽路徑,我們應(yīng)該看看一些活生生的實(shí)例。在下面的章節(jié)中,你會(huì)發(fā)現(xiàn)偉大的網(wǎng)站,使用瀏覽路徑的幾個(gè)例子。
1。經(jīng)典的基于文本的面包屑
TypePad等設(shè)計(jì)助理
美國航空航天局
雀巢有效地使用一個(gè)面包屑導(dǎo)航的文字是明顯小于其余的頁面上的文字,使其不顯眼的。
馬群的Trucs
大橋55
Overstock.com使用標(biāo)準(zhǔn)“大于”符號(hào)基于屬性的面包屑導(dǎo)航。產(chǎn)品屬性復(fù)選框,使用戶可以取消他們來過濾出來。
2。更換其他符號(hào)“>”
TechRadar英國BP使用指向右邊的三角形。
的PSDTUTS和Martique使用斜線。
Minx的鼠標(biāo)采用直角引號(hào)表示頁面層次結(jié)構(gòu)。
Jakob Nielsen的的AlertBox使用右箭頭。
目標(biāo)使用分號(hào)(:)分隔。
3。除了簡單的文本鏈接
面包屑設(shè)計(jì)的一個(gè)趨勢(shì)基本上說,“面包屑沒有簡單的”。在這些設(shè)計(jì)中,你會(huì)看到精美的時(shí)尚面包屑的整體設(shè)計(jì)很好地結(jié)合起來。
Grooveshark
雅虎電視
IDEO
蘋果商店
Coolspotters
Devlounge
LottaNZB
Pixelpoodle
guardian.co.uk
4。面包屑多步過程
聲明跟蹤使用一個(gè)面包屑導(dǎo)航注冊(cè)一個(gè)帳戶,以及一個(gè)進(jìn)度指示器,以指示所涉及的步驟。
Flickr的使用面包屑的線索,在Flickr旅游的節(jié)數(shù)來表示。
5。面包屑子導(dǎo)航
這里有一些例子的鏈接,點(diǎn)擊時(shí)或上空盤旋,打開一個(gè)子導(dǎo)航面板中列出了額外的屬性或位置的瀏覽路徑。
【MarketWatch有一個(gè)飛子導(dǎo)航菜單,當(dāng)你將鼠標(biāo)懸停在一個(gè)面包屑鏈接。
保富圖具有獨(dú)特的面包屑導(dǎo)航:面包屑鏈接點(diǎn)擊打開它下面的一個(gè)區(qū)域,它為用戶提供了額外的屬性來選擇。
英國克蘭菲爾德大學(xué)也有類似的飛行痕跡的計(jì)劃,該計(jì)劃具有雙重功能:為用戶的位置指標(biāo),作為一個(gè)強(qiáng)大的和互動(dòng)的輔助導(dǎo)航計(jì)劃。
孤獨(dú)星球也有一個(gè)飛出來的面包屑導(dǎo)航,您可以在其中更改屬性。
一個(gè)面包屑鏈接點(diǎn)擊該項(xiàng)目的頁面,而點(diǎn)擊向下箭頭,打開額外的選項(xiàng)。
MSDN有面包屑的線索,打開一個(gè)可滾動(dòng)的子導(dǎo)航列表中,當(dāng)用戶將鼠標(biāo)懸停在鏈接上。
食物與飲料具有多級(jí)子導(dǎo)航方案。
6。互動(dòng)面包屑
美味讓你刪除項(xiàng)目中的關(guān)鍵字標(biāo)簽的痕跡線索,以幫助您快速找到書簽。
7。實(shí)驗(yàn)的例子
Booreiland使用面包屑風(fēng)格的導(dǎo)航方案,其主菜單,讓游客快速了解他們目前正在觀看。
用戶界面設(shè)計(jì)師AEN譚的的AEN UI談?wù)撘环N設(shè)計(jì)模式,被稱為“ Tabcrumbs,標(biāo)簽和面包屑導(dǎo)航方案,結(jié)合“ 。
本文作者來自北京北京信,轉(zhuǎn)載請(qǐng)注明出處:北京北京信(http://52tianma.cn/)
選擇北京網(wǎng)站建設(shè)公司-北京信,優(yōu)質(zhì)服務(wù),絕對(duì)不容錯(cuò)過 !
1. 優(yōu)秀的網(wǎng)絡(luò)資源,穩(wěn)定的網(wǎng)站和速度保證 (配送雙線獨(dú)立ip空間,國際A級(jí)BGP機(jī)房,99.5% 的主機(jī)在線時(shí)間) 2. 7年北京網(wǎng)站建設(shè)經(jīng)驗(yàn),優(yōu)秀的技術(shù)和設(shè)計(jì)水平,更放心 3. 全程省心服務(wù),不必?fù)?dān)心自己不懂網(wǎng)絡(luò),更省心。
- 1關(guān)于網(wǎng)站建設(shè)的分頁模式。
- 2北京網(wǎng)站建設(shè)設(shè)-工商今年重點(diǎn)抽檢網(wǎng)購商品 問題企業(yè)將狠罰
- 3網(wǎng)站設(shè)計(jì)導(dǎo)航驗(yàn)收標(biāo)準(zhǔn)!
- 4什么是用戶習(xí)慣?
- 5雜志社網(wǎng)站建設(shè)需求
- 6網(wǎng)站建設(shè)要及時(shí)更新且認(rèn)真回復(fù)!
- 7網(wǎng)站建設(shè)公司應(yīng)該具備的。
- 8擴(kuò)大盈利,擴(kuò)大影響與挖掘客戶
- 9優(yōu)秀的兒童網(wǎng)站的設(shè)計(jì)!
- 10網(wǎng)站建設(shè)的盈利探討。
- 11網(wǎng)站建設(shè)程序開發(fā)規(guī)范。
- 12建設(shè)一個(gè)網(wǎng)站要注意什么!
- 13北京網(wǎng)站建設(shè)設(shè)-朝鮮人的網(wǎng)絡(luò)使用狀況如何?外國大使館外蹭WiFi
- 14網(wǎng)站建設(shè)域名代表的是你的品牌。
- 15網(wǎng)站優(yōu)化是否能夠跟上搜索引擎的步伐呢?
- 16網(wǎng)站建設(shè)是一種有效行銷方式。
- 17網(wǎng)站建設(shè)是技術(shù)活有經(jīng)驗(yàn)才靠譜.
- 18北京網(wǎng)站建設(shè),北京網(wǎng)站制作怎么看百度這幾天調(diào)整
- 19北京網(wǎng)站建設(shè)設(shè)-數(shù)據(jù)信息幫大忙 鐵路警方破獲網(wǎng)絡(luò)倒票案件161起
- 20北京網(wǎng)站建設(shè)設(shè)-124家網(wǎng)站被引向賭博廣告網(wǎng)址 某政府網(wǎng)站在內(nèi)
- 21提升權(quán)重,加大數(shù)量并堅(jiān)持質(zhì)量
- 22關(guān)于網(wǎng)站的交互設(shè)計(jì)!
- 23手機(jī)版網(wǎng)站建設(shè)的原則。
- 24目前常用的網(wǎng)絡(luò)推廣有哪些?
- 25共建良好生態(tài)環(huán)境,服務(wù)美好網(wǎng)絡(luò)生活
- 26看到SEO,就是做內(nèi)容,做外鏈
- 27注冊(cè)網(wǎng)站域名需要注意什么?
- 28模板建站的特點(diǎn)!
- 29如何做好企業(yè)站的網(wǎng)絡(luò)優(yōu)化
- 30建設(shè)網(wǎng)站中動(dòng)態(tài)表單的價(jià)值。
成都公司:成都市成華區(qū)建設(shè)南路160號(hào)1層9號(hào)
重慶公司:重慶市江北區(qū)紅旗河溝華創(chuàng)商務(wù)大廈18樓