中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

網(wǎng)站設(shè)計(jì)中的面包屑實(shí)例和最佳做法。

2019-07-28    分類(lèi): 網(wǎng)站設(shè)計(jì)

網(wǎng)站建設(shè)中有很多頁(yè)面,面包屑導(dǎo)航可以大大提高用戶使用的方式找到自己的方式解決。在可用性方面,面包屑降低網(wǎng)站的訪問(wèn)者,以獲得更高級(jí)別的頁(yè)面需要采取一些行動(dòng),他們提高網(wǎng)站欄目和頁(yè)面的可檢索性。他們也是一個(gè)有效的視覺(jué)援助,表示位置的用戶在網(wǎng)站的層次結(jié)構(gòu),使登陸頁(yè)面的上下文信息的重要來(lái)源。

什么是網(wǎng)站的面包屑?

一個(gè)“面包屑”(或“面包屑”)是一種輔助導(dǎo)航方案,揭示了在一個(gè)網(wǎng)站或Web應(yīng)用程序的用戶的位置。一詞源于糖果屋的童話其中兩個(gè)標(biāo)題的孩子丟棄面包屑,形成一條小道回到自己的家鄉(xiāng)。就像這個(gè)故事,面包屑在現(xiàn)實(shí)世界中的應(yīng)用,為用戶提供了一個(gè)方法來(lái)跟蹤路徑返回到原來(lái)的著陸點(diǎn)。


Delicious.com上的面包屑

您通常可以找到網(wǎng)站有大量的內(nèi)容以分層方式組織的面包屑。你也可以看到他們?cè)赪eb應(yīng)用程序有多個(gè)步驟,它們的功能類(lèi)似一個(gè)進(jìn)度條。在其最簡(jiǎn)單的形式,面包屑是橫向排列“大于”符號(hào)(>)分隔的文本鏈接;符號(hào)表示它旁邊的頁(yè)面上的鏈接,頁(yè)面相對(duì)水平。

在這篇文章中,我們將探討在網(wǎng)站上使用面包屑,面包屑小徑應(yīng)用到自己的網(wǎng)站討論的一些好實(shí)踐。

當(dāng)你應(yīng)該使用面包屑?

使用面包屑導(dǎo)航的大型網(wǎng)站和網(wǎng)站,分層排列 頁(yè)面。一個(gè)優(yōu)秀的方案是電子商務(wù)網(wǎng)站,其中種類(lèi)繁多的產(chǎn)品分為邏輯類(lèi)別。

您不應(yīng)該使用單級(jí)網(wǎng)站,有沒(méi)有邏輯層次或分組的面包屑。一個(gè)偉大的方式來(lái)確定,如果一個(gè)網(wǎng)站將受益于面包屑導(dǎo)航是構(gòu)建一個(gè)網(wǎng)站地圖或圖表,代表網(wǎng)站的導(dǎo)航結(jié)構(gòu),然后分析面包屑是否會(huì)提高用戶的內(nèi)和類(lèi)別之間的導(dǎo)航能力。

面包屑導(dǎo)航應(yīng)該被視為一個(gè)額外的功能,而不應(yīng)取代有效的主導(dǎo)航菜單。這是一個(gè)方便的功能; 二級(jí)導(dǎo)航方案,允許用戶建立他們?cè)谀睦?,以及你的網(wǎng)站來(lái)瀏覽周?chē)牧硪环N方式。

面包屑的類(lèi)型

主要有三種類(lèi)型的面包屑。

基于位置的
基于位置的面包屑顯示的用戶,他們是在網(wǎng)站的層次結(jié)構(gòu)。它們通常用于有多個(gè)級(jí)別(通常是兩個(gè)以上的級(jí)別)的導(dǎo)航方案。在下面的例子(SitePoint),每一個(gè)文本鏈接是一個(gè)網(wǎng)頁(yè),是一個(gè)級(jí)別高于其右側(cè)。


基于屬性的
基于屬性的面包屑路徑顯示一個(gè)特定頁(yè)面的屬性。例如,在新蛋,面包屑小徑顯示某個(gè)特定頁(yè)面上顯示的項(xiàng)目的屬性:


此頁(yè)面顯示所有計(jì)算機(jī)的情況下,有由李蓮和制造的MicroATX規(guī)格迷你塔的外形屬性。

為基于路徑
基于路徑的痕跡步道用戶展示他們已經(jīng)采取的步驟到達(dá)一個(gè)特定頁(yè)面?;诼窂降拿姘际莿?dòng)態(tài)的,因?yàn)樗鼈冿@示之前到達(dá)當(dāng)前頁(yè)面上的用戶已經(jīng)訪問(wèn)過(guò)的網(wǎng)頁(yè)。

使用面包屑的好處

這里只是一些使用面包屑導(dǎo)航的好處。

主要是用來(lái)方便用戶的面包屑導(dǎo)航網(wǎng)站給用戶提供了輔助手段。通過(guò)提供一個(gè)大型的多級(jí)網(wǎng)站的所有網(wǎng)頁(yè)上的面包屑,用戶可以更方便地導(dǎo)航到更高級(jí)別的類(lèi)別。

減少點(diǎn)擊或行動(dòng),返回到更高級(jí)別的頁(yè)面,
而不是使用瀏覽器的“后退”按鈕或網(wǎng)站的主導(dǎo)航返回到一個(gè)更高級(jí)別的頁(yè)面,用戶現(xiàn)在可以使用面包屑用更少的點(diǎn)擊次數(shù)。

通常不養(yǎng)豬的屏幕空間,
因?yàn)樗麄兪堑湫偷乃椒较蚝惋L(fēng)格明明白白,面包屑小徑不占用很大的空間在頁(yè)面上。這樣做的好處是,他們很少在內(nèi)容超載方面沒(méi)有負(fù)面影響,他們超過(guò)任何底片,如果使用得當(dāng)。

降低跳出率
面包屑小徑可以是一個(gè)偉大的方式來(lái)吸引首次細(xì)讀一個(gè)網(wǎng)站后,瀏覽登陸頁(yè)面的訪問(wèn)者。例如,假設(shè)到達(dá)用戶通過(guò)谷歌搜索頁(yè)面上,看到一個(gè)面包屑,可能會(huì)吸引更高級(jí)別的頁(yè)面,用戶點(diǎn)擊查看相關(guān)主題的利益。這反過(guò)來(lái),降低了整體網(wǎng)站的跳出率。

面包屑實(shí)施中的誤區(qū)

使用面包屑小徑,是一個(gè)相當(dāng)簡(jiǎn)單的事情,也有一些指引,以考慮才決定落實(shí)到網(wǎng)站上。讓我們來(lái)看看一些常見(jiàn)的錯(cuò)誤,以避免。

使用面包屑導(dǎo)航,當(dāng)你不需要
在實(shí)施面包屑一個(gè)常見(jiàn)的錯(cuò)誤時(shí)使用它們沒(méi)有任何好處。


在上面的例子中,Slicethepie風(fēng)險(xiǎn)壓倒性的用戶有太多的導(dǎo)航選項(xiàng)。(1)主導(dǎo)航,面包屑(2)和(3)輔助導(dǎo)航是非常并攏。面包屑在此應(yīng)用程序?yàn)橛脩籼峁┝朔奖?,因?yàn)闆](méi)有添加低級(jí)頁(yè)面坐在它下面的二級(jí)導(dǎo)航。此外,面包屑(“音樂(lè)”)第二級(jí)鏈接點(diǎn)擊帶您回到第一個(gè)標(biāo)簽(“聽(tīng)”),錯(cuò)誤地認(rèn)為,第一個(gè)選項(xiàng)卡是在一個(gè)更高的水平比其他兩個(gè)(“搜索藝術(shù)家“和”名人堂“)。

使用面包屑小徑主導(dǎo)航
如前所述,使用面包屑導(dǎo)航作為一個(gè)可選的援助。


在上面的例子中,MeFeedia稱(chēng)不提供主導(dǎo)航菜單觀看視頻。雖然有文本鏈接導(dǎo)航,頁(yè)腳部分,有沒(méi)有導(dǎo)航菜單在身體的頁(yè)面,使得它很難瀏覽到網(wǎng)站的其他部分。


如果你直接到達(dá)一個(gè)視頻頁(yè)面上 - 比方說(shuō),例如,通過(guò)谷歌搜索結(jié)果 - 唯一的導(dǎo)航選項(xiàng),你可能有面包屑?;蛘?,如果你已經(jīng)被瀏覽一個(gè)網(wǎng)站的頁(yè)面,并達(dá)到一個(gè)頁(yè)面不顯示在主導(dǎo)航菜單,你會(huì)打在你的瀏覽器中的“后退”按鈕,進(jìn)入主菜單。

使用面包屑當(dāng)頁(yè)面有多個(gè)類(lèi)別
面包屑小徑有一個(gè)線性的結(jié)構(gòu),因此,使用他們的將是困難的,如果你的網(wǎng)頁(yè)不能被歸類(lèi)成整齊的類(lèi)別。決定是否使用面包屑,在很大程度上取決于你如何設(shè)計(jì)你的網(wǎng)站層次結(jié)構(gòu)。當(dāng)較低級(jí)別的頁(yè)面(或者可以放)在一個(gè)以上的父類(lèi),面包屑小徑是無(wú)效的,不準(zhǔn)確的,對(duì)用戶造成混淆。

面包屑導(dǎo)航設(shè)計(jì)注意事項(xiàng)

當(dāng)設(shè)計(jì)一個(gè)面包屑導(dǎo)航計(jì)劃,請(qǐng)記住幾件事情。讓我們來(lái)看看一些可能出現(xiàn)的問(wèn)題與面包屑,當(dāng)你工作。

應(yīng)使用單獨(dú)的鏈接項(xiàng)目?
普遍接受和分離面包屑小徑中的超鏈接是最知名的象征“大于”符號(hào)(>)。通常情況下,“>”符號(hào)是用來(lái)表示層次結(jié)構(gòu),如父類(lèi)的格式>兒童類(lèi)。


使用的其它符號(hào)的箭頭指向靠右邊,右邊角引號(hào)(“)和斜線(/)。


選擇依賴于網(wǎng)站和美學(xué)的使用痕跡。例如,對(duì)于基于路徑的面包屑鏈接并不一定有一個(gè)層次之間的相互關(guān)系,使用“大于”符號(hào),可能無(wú)法準(zhǔn)確傳達(dá)他們的關(guān)系。

它應(yīng)該是多大?
你不希望你的面包屑主宰頁(yè)面。了面包屑功能只是作為一種輔助手段,以用戶(方便),其大小應(yīng)傳達(dá)到用戶,因此至少應(yīng)該較小,或較不突出,比主導(dǎo)航菜單。


拇指遵循你的面包屑的大小時(shí),一個(gè)很好的規(guī)則是,它不應(yīng)該是抓住用戶的注意力,當(dāng)?shù)竭_(dá)頁(yè)面上的第一個(gè)項(xiàng)目。

應(yīng)該在哪里設(shè)面包屑
面包屑路徑通常顯示在頁(yè)面的上半部分,下面的主導(dǎo)航菜單,如果一個(gè)水平菜單布局。

面包屑展示

現(xiàn)在,我們已經(jīng)討論了誰(shuí),什么,何時(shí),何地,為何與如何做的面包屑小徑,我們應(yīng)該看看一些活生生的實(shí)例。在下面的章節(jié)中,你會(huì)發(fā)現(xiàn)偉大的網(wǎng)站,使用面包屑小徑的幾個(gè)例子。

1。經(jīng)典的基于文本的面包屑

TypePad等設(shè)計(jì)助手

美國(guó)航空航天局

雀巢采用了面包屑,其明顯小于其余的頁(yè)面上的文字文本,有效地使其不顯眼。

馬錢(qián)德Trucs的

橋55

Overstock.com使用標(biāo)準(zhǔn)“大于”符號(hào)基于屬性的面包屑。產(chǎn)品屬性復(fù)選框,使用戶可以將它們?nèi)∠^(guò)濾他們。

2。更換與其他符號(hào)“>”

TechRadar英國(guó)BP使用指向右邊的三角形。

的PSDTUTS和Martique使用斜線。

Minx的鼠標(biāo)采用了直角引號(hào)表示頁(yè)面層次結(jié)構(gòu)。

雅各布尼爾森的AlertBox的使用右箭頭。

目標(biāo)使用分號(hào)(:)分隔。

3。除了簡(jiǎn)單的文本鏈接

面包屑設(shè)計(jì)目前的趨勢(shì)之一,基本上說(shuō),“面包屑沒(méi)有簡(jiǎn)單的”。在這些設(shè)計(jì)中,你會(huì)看到精美的集成以及與整體設(shè)計(jì)風(fēng)格的面包屑。

Grooveshark

雅虎電視

IDEO

蘋(píng)果商店

4。多步過(guò)程的面包屑

報(bào)表跟蹤采用了面包屑,注冊(cè)一個(gè)帳號(hào),以及一個(gè)進(jìn)度指示器,以指示所涉及的步驟。

Flickr的使用痕跡線索,在Flickr旅游節(jié)說(shuō)明人數(shù)。

5。面包屑子導(dǎo)航

這里有一些例子的鏈接,點(diǎn)擊時(shí)或上空盤(pán)旋,打開(kāi)一個(gè)子導(dǎo)航面板中列出的附加屬性或地點(diǎn)的面包屑小徑。

市場(chǎng)有一個(gè)飛子導(dǎo)航菜單,你將鼠標(biāo)懸停在一個(gè)面包屑鏈接出現(xiàn)。

保富圖具有獨(dú)特的面包屑:面包屑鏈接,點(diǎn)擊打開(kāi)它下面的區(qū)域,為用戶提供了額外的屬性來(lái)選擇。

克蘭菲爾德大學(xué)也有類(lèi)似的飛出痕跡的計(jì)劃,該計(jì)劃具有雙重功能:作為一個(gè)位置指示器,以便使用者,作為一個(gè)強(qiáng)大的和互動(dòng)的輔助導(dǎo)航計(jì)劃。

孤獨(dú)星球也有一個(gè)飛出來(lái)的面包屑,您可以在其中更改屬性。

點(diǎn)擊面包屑鏈接,帶你到該項(xiàng)目的頁(yè)面,而點(diǎn)擊向下箭頭,打開(kāi)額外的選項(xiàng)。

MSDN有面包屑的線索,打開(kāi)一個(gè)可滾動(dòng)的子導(dǎo)航列表,當(dāng)用戶將鼠標(biāo)懸停在一個(gè)鏈接。

wowhead上有一個(gè)多層次的子導(dǎo)航計(jì)劃。

6?;?dòng)式面包屑

美味讓您刪除項(xiàng)目中的關(guān)鍵字標(biāo)簽的痕跡線索,以幫助您快速找到書(shū)簽。

本文作者來(lái)自重慶網(wǎng)站建設(shè)公司-創(chuàng)新互聯(lián),轉(zhuǎn)載請(qǐng)注明出處!

當(dāng)前名稱(chēng):網(wǎng)站設(shè)計(jì)中的面包屑實(shí)例和最佳做法。
標(biāo)題來(lái)源:http://m.rwnh.cn/news25/80175.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)
平南县| 三门峡市| 屯昌县| 长宁区| 汕尾市| 宜兴市| 刚察县| 兴城市| 武义县| 报价| 鱼台县| 邳州市| 奇台县| 桐庐县| 芦山县| 濮阳县| 台南市| 阿合奇县| 隆德县| 西藏| 广东省| 齐河县| 中牟县| 新干县| 尖扎县| 枞阳县| 商水县| 武安市| 若尔盖县| 理塘县| 博乐市| 保德县| 永新县| 常德市| 潮安县| 定日县| 永善县| 固镇县| 武功县| 乐安县| 西藏|