中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：面包屑導(dǎo)航這個(gè)概念來自童話故事“漢賽爾和格萊特”，當(dāng)漢賽爾和格萊特穿過森林時(shí)，不小心迷路了，但是他們發(fā)現(xiàn)在沿途走過的地方都撒下了面包屑，讓這些面包屑來幫助他們找到回家的路。面包屑是作為輔助和補(bǔ)充的導(dǎo)航方式（secondary navigation scheme），它能讓用戶知道在網(wǎng)站或應(yīng)用中所處的位置并能方便地回到原先的地點(diǎn)。本文主要講面包屑導(dǎo)航是如何設(shè)計(jì)的。

一、摘要

通過反映您網(wǎng)站信息層次結(jié)構(gòu)的面包屑來支持尋路功能。在移動(dòng)設(shè)備上，請(qǐng)避免使用太小的面包屑或?qū)⑵渫ㄟ^多行來顯示。

面包屑是一個(gè)重要的導(dǎo)航元素，它支持尋路——讓用戶知道自己在網(wǎng)站的層次結(jié)構(gòu)中的當(dāng)前位置。

它是表示當(dāng)前頁面及其“祖先”（父頁面、祖父母頁面等）的鏈接列表，通常可以一直返回到網(wǎng)站主頁。NN/g從1995年就開始推薦使用面包屑，因?yàn)樗鼈優(yōu)橛脩籼峁┝撕芏嗪锰帲谟脩艚缑嫔蠋缀鯖]有任何成本。

面包屑通常在頁面頂部，全局導(dǎo)航的正下方，以一系列鏈接的形式來指示軌跡。

主頁（或?qū)哟谓Y(jié)構(gòu)的根節(jié)點(diǎn)）是第一個(gè)鏈接，鏈接之間通常用符號(hào)“>”或“/”隔開；盡管沒有功能上的區(qū)別，兩者都可以接受，但仍推薦使用“>”字符。

REI.com：“1??”–顯示在頁面頂部的典型位置，即全局導(dǎo)航欄的下方。路徑顯示了當(dāng)前頁面在網(wǎng)站層次結(jié)構(gòu)中的位置。路徑中的每個(gè)項(xiàng)目都是指向父頁面的鏈接；“>”字符分隔面包屑。當(dāng)然，在此示例中，面包屑路徑中忽略了主頁和當(dāng)前頁面，不建議這樣做。

如果用戶在瀏覽完該路徑的所有父頁面后訪問了一個(gè)深層次頁面，那么他們將非常清楚地了解自己在網(wǎng)站的信息層次結(jié)構(gòu)中的位置。但是當(dāng)他們跳過其中的一些級(jí)別時(shí)（例如，他們是通過單擊外部鏈接–如搜索引擎結(jié)果，到達(dá)網(wǎng)站的），面包屑導(dǎo)航也會(huì)幫助他們找到其他可能更相關(guān)的頁面。

深層次的頁面通常顯示相對(duì)狹窄的特定主題的內(nèi)容，但是面包屑軌跡可以引導(dǎo)用戶找到當(dāng)前頁面的多個(gè)父頁面中的更多內(nèi)容。

二、PC端使用面包屑的準(zhǔn)則

1. 面包屑不應(yīng)取代區(qū)域內(nèi)的全局導(dǎo)航欄或本地導(dǎo)航

面包屑是用來補(bǔ)充其他導(dǎo)航組件的，比如一個(gè)橫跨每個(gè)頁面頂部的全局導(dǎo)航欄，或者一個(gè)通常位于左側(cè)的本地導(dǎo)航欄；面包屑會(huì)補(bǔ)充但不會(huì)取代那些主要的導(dǎo)航形式。

Travelsouthdakota.com顯示了面包屑路徑，該路徑也用作部分導(dǎo)航。與傳統(tǒng)的面包屑路徑（將是：Home/Explore/Rineries/Cultural Immersion）不同，該面包屑軌跡包含一個(gè)第1層項(xiàng)目（Explore）和其他父頁面（More Interneries）。導(dǎo)向父頁面的鏈接是一個(gè)下拉菜單，包含當(dāng)前頁面的同級(jí)（圖下）。而一個(gè)更好的設(shè)計(jì)應(yīng)該是有一個(gè)單獨(dú)的UI模塊用于本地導(dǎo)航，使用戶能夠訪問網(wǎng)站當(dāng)前部分的平行頁面。

2. 面包屑應(yīng)顯示網(wǎng)站層次結(jié)構(gòu)中的當(dāng)前位置，而不是歷史記錄

面包屑不應(yīng)該顯示在網(wǎng)站訪問期間所瀏覽的頁面的歷史記錄（歷史記錄可以通過瀏覽器本身的后退按鈕返回）；

它們旨在顯示網(wǎng)站內(nèi)的層次結(jié)構(gòu)。我們已經(jīng)注意到這一點(diǎn)很多年了，但它仍然需要反復(fù)強(qiáng)調(diào)；

試圖按順序顯示用戶訪問過的頁面列表，很快就會(huì)變得冗長(zhǎng)和令人困惑，并且重復(fù)很多，同時(shí)，對(duì)于直接從外部鏈接進(jìn)入深度頁面的用戶來說，這是面包屑的主要用途之一。

3. 對(duì)于多層次網(wǎng)站，面包屑應(yīng)在網(wǎng)站的多層次結(jié)構(gòu)中顯示一條路徑

面包屑對(duì)多層次網(wǎng)站（其中一個(gè)頁面有多個(gè)父級(jí)）形成了固有的張力。在這種情況下，我們不建議顯示兩個(gè)或多個(gè)面包屑路徑，來反映多層次結(jié)構(gòu)中的不同路徑，因?yàn)樗鼈儠?huì)混淆用戶并在頁面頂部占用大量空間。

如果一個(gè)頁面有多個(gè)不同的父級(jí)，請(qǐng)?jiān)诰W(wǎng)站層次結(jié)構(gòu)中標(biāo)識(shí)該頁面的規(guī)范路徑，并在面包屑中顯示該路徑。

不要試圖對(duì)面包屑路徑進(jìn)行個(gè)性化設(shè)置，這樣它就可以在網(wǎng)站層次結(jié)構(gòu)中反映每個(gè)用戶的個(gè)人路徑，因?yàn)檫@會(huì)和搜索引擎本身功能相混淆。您仍然需要在層次結(jié)構(gòu)中指定一條路徑作為來自外部鏈接的訪問者的主要路徑。

4. 將當(dāng)前頁面作為面包屑路徑中的最后一項(xiàng)包含在內(nèi)

5. 在面包屑路徑中，與當(dāng)前頁面相對(duì)應(yīng)的面包屑不應(yīng)是鏈接

不應(yīng)該把對(duì)應(yīng)當(dāng)前頁面的路徑（最后一個(gè)面包屑）做成鏈接形式，因?yàn)辄c(diǎn)擊它不會(huì)有任何情況出現(xiàn)。為了避免混淆用戶，在視覺上區(qū)分當(dāng)前頁面和前面鏈接的面包屑，最好使用下劃線或藍(lán)色文本。

在英國紅十字會(huì)的網(wǎng)站上，并沒有在視覺上區(qū)分“Volunteer in emergencies”和其他面包屑，它本身不是一個(gè)鏈接。

信息架構(gòu)（information architecture）

6. 面包屑應(yīng)僅包含網(wǎng)站頁面，而不應(yīng)包含IA中的邏輯類別

面包屑軌跡中的每個(gè)節(jié)點(diǎn)都應(yīng)該是指向父頁面的鏈接（與當(dāng)前頁面相對(duì)應(yīng)的鏈接除外）。

如果全局導(dǎo)航中的某些子類別標(biāo)簽沒有專用于它們的單獨(dú)頁面，則不要在面包屑軌跡中包含這些子類別。

“單擊并跳轉(zhuǎn)”的能力是用戶理解面包屑的關(guān)鍵部分，因此所有項(xiàng)目（除了當(dāng)前頁面）都應(yīng)該代表用戶可以訪問的地方。

Newegg.com：全局導(dǎo)航（上）的子類別沒有自己特定的頁面，例如，Commercial Networking? 1??。在“Wired Networking”頁面（下）上，2??不包括“Commercial Networking”?，因?yàn)樵撟宇悇e沒有相關(guān)聯(lián)的頁面。

7. 對(duì)于層級(jí)結(jié)構(gòu)僅有1或2層的網(wǎng)站，或結(jié)構(gòu)呈線性的網(wǎng)站，面包屑不是必需的（或是無用的）

對(duì)于只有1級(jí)或2級(jí)類別的平行層次結(jié)構(gòu)的站點(diǎn)，不需要面包屑作為路徑引導(dǎo)。在這種情況下，請(qǐng)考慮清楚地指明頁面所在的頂級(jí)菜單或類別。

麻省理工學(xué)院的主網(wǎng)站具有統(tǒng)一的層次結(jié)構(gòu)，每個(gè)模塊只有一頁。盡管它在頁面頂部具有面包屑，但此面包屑不是必需的。在主導(dǎo)航中，頁面的位置已經(jīng)突出顯示了。

NPR設(shè)有一個(gè)有關(guān)顏色歷史的微型站點(diǎn)，該站點(diǎn)被設(shè)計(jì)為線性體驗(yàn)，用戶可以按順序依次瀏覽每個(gè)頁面。該站點(diǎn)的結(jié)構(gòu)是非分層的，因此不需要包含面包屑路徑（也沒有價(jià)值）。

8. 面包屑路徑應(yīng)該以指向主頁的鏈接開始

就像我們的全局導(dǎo)航一樣，仍然需要鏈接到首頁（Home）。但是，請(qǐng)注意，不建議在全局導(dǎo)航和面包屑路徑中同時(shí)存在Home鏈接–兩者存一就可以。

俄勒岡州政府網(wǎng)站上有一個(gè)面包屑軌跡，省略了指向主頁（Home）的鏈接。

但是，在這種情況下，這是可以接受的，因?yàn)樵撜军c(diǎn)還在全局導(dǎo)航中包含一個(gè)“Home”鏈接–不必同時(shí)存在該主頁鏈接，但需要在兩個(gè)地方之一中顯示它。

三、在移動(dòng)端使用面包屑的準(zhǔn)則

不幸的是，在移動(dòng)設(shè)備上，使用面包屑的成本遠(yuǎn)超所獲得的收益。

1. 不要使用多行面包屑

在移動(dòng)端，面包屑可能是以多行的形式存在，并在已經(jīng)擁擠的移動(dòng)顯示屏上占用寶貴的空間。

多行面包屑路徑無法很好地說明鏈路的結(jié)構(gòu)（尤其是某個(gè)標(biāo)簽單獨(dú)占據(jù)了一行，而其他標(biāo)簽可能在一行中有兩個(gè)或更多）。

REI.com的移動(dòng)網(wǎng)站使用多行面包屑，它使路徑名稱折行，甚至在其他移動(dòng)設(shè)備（圖為iPhone X）上會(huì)顯示不全（隱藏）。

2. 不要使用太小或太擁擠的面包屑

一些網(wǎng)站試圖通過使面包屑鏈接更小或更靠近，來節(jié)省屏幕空間占用。

不幸的是，該解決方案在觸摸屏上不起作用：觸摸屏點(diǎn)擊目標(biāo)的熱區(qū)至少為1cm X 1cm。

3. 考慮縮短面包屑路徑，使其僅包括最后一個(gè)級(jí)別

在某些頁面上，指向某個(gè)級(jí)別的單個(gè)面包屑可能是主要用戶目標(biāo)所必需的所有內(nèi)容。

例如：在電子商務(wù)網(wǎng)站上，如果用戶登陸產(chǎn)品詳細(xì)信息頁面（例如：通過Google搜索），則她可能希望查看該類別中的其他產(chǎn)品選項(xiàng)以進(jìn)行比較，因此將面包屑鏈接到層次結(jié)構(gòu)中的父級(jí)可以支持此常見任務(wù)。該解決方案避免了過長(zhǎng)而擁擠的面包屑軌跡，也節(jié)省了寶貴的移動(dòng)觸摸屏空間。

請(qǐng)注意，此建議與第8條（面包屑路徑應(yīng)該以指向主頁的鏈接開始）不沖突，這條準(zhǔn)則只能在移動(dòng)設(shè)備上執(zhí)行。在桌面上（有更多空間），始終顯示完整記錄，依然遵循第8條準(zhǔn)則。

Bestbuy.com：移動(dòng)網(wǎng)站（上）顯示出一條截?cái)嗟拿姘架壽E1??，允許訪問直接父頁面。

桌面網(wǎng)站（下）顯示了完整的痕跡2??。移動(dòng)設(shè)備上的這種方案支持路徑找尋，也可避免占用寶貴的空間。

四、總結(jié)

面包屑是導(dǎo)航的輔助形式，可幫助用戶訪問層次結(jié)構(gòu)中其他路徑的內(nèi)容。

當(dāng)用戶通過外部鏈接到達(dá)網(wǎng)站而不是從首頁開始時(shí)，它們特別有用。確保面包屑路徑中的所有標(biāo)簽都是鏈接，并且隨著您逐步深入網(wǎng)站，每個(gè)節(jié)點(diǎn)都變得更加具體。

在移動(dòng)設(shè)備上，面包屑可能會(huì)占用過多空間或難以點(diǎn)擊。在您的用戶任務(wù)允許的情況下，請(qǐng)考慮縮短面包屑路徑。

原文地址：https://www.nngroup.com/articles/breadcrumbs/

原文作者：佩奇·勞布海默

本文由 @Henry-Lee 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議