如何設(shè)計(jì)更好的面包屑導(dǎo)航

沒有人會(huì)對(duì)面包屑導(dǎo)航感到特別興奮。這些微小的路徑碎片說明了用戶當(dāng)前在網(wǎng)站錯(cuò)綜復(fù)雜的層次結(jié)構(gòu)中的位置。它們的設(shè)計(jì)看起來很明顯，他們?cè)陧撁嫔系奈恢靡彩侨绱?，看起來面包屑發(fā)光不需要太多的創(chuàng)新。
事實(shí)證明，有很多細(xì)微的小細(xì)節(jié)可以使面包屑變得混亂或無限地更有用。在本文中，我們將仔細(xì)研究其中的一些。我們將探索我們何時(shí)真正需要面包屑，用戶如何使用它們，以及如何更好地設(shè)計(jì)它們以加快用戶在我們網(wǎng)站上的導(dǎo)航。
讓我們首先探索人們?nèi)绾螢g覽網(wǎng)站，以及面包屑究竟如何幫助我們的旅程。如何瀏覽網(wǎng)站每個(gè)可用性測(cè)試都表明，沒有單一的、通用的和完善的網(wǎng)站瀏覽方式。根據(jù)手頭的任務(wù)和訪問頻率，用戶應(yīng)用非常不同的導(dǎo)航模式。在某些網(wǎng)站上，幾乎不使用搜索但主導(dǎo)航得到很多關(guān)注的情況并不少見。在其他方面，類別幾乎沒有任何點(diǎn)擊，但搜索查詢卻在屋頂。有時(shí)面包屑恰好是整個(gè)網(wǎng)站上最受歡迎的導(dǎo)航選擇。

澳大利亞郵政服務(wù)在一個(gè)頁面上結(jié)合了大量的導(dǎo)航模式。它們都有不同的用途，并且運(yùn)行良好。
以澳大利亞郵政為例，各種導(dǎo)航需要協(xié)同工作。全局導(dǎo)航欄、主導(dǎo)航、面包屑、側(cè)邊欄和選項(xiàng)卡。用戶可以在各個(gè)級(jí)別之間跳轉(zhuǎn)，他們可以使用面包屑輕松地向后移動(dòng)，使用頂部的水平導(dǎo)航向前移動(dòng)，使用側(cè)邊欄導(dǎo)航橫向移動(dòng)以及使用選項(xiàng)卡在頁面的各個(gè)部分中切換上下文。
我們很少逐個(gè)瀏覽每個(gè)部分，甚至很少注意到網(wǎng)站上所有可用的導(dǎo)航。對(duì)于經(jīng)常訪問的網(wǎng)站，例如新聞網(wǎng)站，我們將使用非常有限的一組頁面和功能。事實(shí)上，我們可能無法記住我們單擊了哪些功能和部分，但我們可能會(huì)記住它們?cè)诮缑嬷械奈恢谩?p>

一旦你登陸頁面，你將如何理解你在哪里？在這里，面包屑有很大幫助。示例：冰島郵政服務(wù)
當(dāng)我們登陸一個(gè)我們以前從未訪問過的網(wǎng)站時(shí)，例如國家歌劇網(wǎng)站，我們首先評(píng)估選項(xiàng)和功能的廣度。這通常是通過上下滾動(dòng)頁面來實(shí)現(xiàn)的——先是慢，然后是更快——并熟悉導(dǎo)航菜單。我們點(diǎn)擊側(cè)邊欄，在選項(xiàng)卡之間切換并打開大型下拉菜單。我們只是四處游蕩，相信導(dǎo)航路標(biāo)和我們極其不可靠的預(yù)感。我們掃描、識(shí)別模式并相信我們的直覺。
有時(shí)，如果我們找不到我們所追求的東西，我們的旅程就會(huì)變成對(duì)各種頁面和類別的瘋狂探索——通常是緊張的、混亂的、耗時(shí)的和令人沮喪的。如果有任何事情沒有按預(yù)期工作，我們就不再使用它，因?yàn)槲覀儾辉傩湃嗡?。一旦我們真的沒有任何選擇，我們就會(huì)完全放棄。

有時(shí)，重新設(shè)計(jì)的網(wǎng)站會(huì)導(dǎo)致流量大幅下降。這不是因?yàn)槌隽耸裁磫栴}。相反：我們?cè)谟脩羲诘牡胤接鲆娪脩簦苯语@示答案，因此無需訪問網(wǎng)站。
但是，當(dāng)幾乎不使用導(dǎo)航和搜索時(shí)，不一定是因?yàn)?a href="http://www.bm7419.com/">網(wǎng)站設(shè)計(jì)或構(gòu)建不佳。相反：內(nèi)容可能組織得非常好，以至于人們實(shí)際上很快就找到了他們需要的東西——甚至可能在首先訪問網(wǎng)站之前，僅僅通過瀏覽谷歌的搜索結(jié)果。一旦他們這樣做了，就沒有太多理由留在網(wǎng)站上。
雖然我們經(jīng)常關(guān)注退出率和跳出率以及在頁面上花費(fèi)的時(shí)間，但這些指標(biāo)很少能揭示用戶在網(wǎng)站上所做的事情的完整故事。有人在給定頁面上花費(fèi) 4:30 分鐘這一事實(shí)不一定是一個(gè)好的指標(biāo)。有人在 30 秒內(nèi)離開這一事實(shí)并不一定是壞事。
為了跟蹤用戶對(duì)導(dǎo)航（和搜索）的理解和使用情況，我們需要跟蹤用戶在手頭任務(wù)上的成功程度。您可以將其視為在較長時(shí)間內(nèi)建立和研究的設(shè)計(jì) KPI 。值得收集有關(guān)以用戶為中心的指標(biāo)的見解，例如：任務(wù)完成率， 任務(wù)完成時(shí)間， 第一次分享的時(shí)間， 客戶支持查詢， 負(fù)面評(píng)論的比率， 提交數(shù)據(jù)的準(zhǔn)確性因此，我們的任務(wù)是為用戶鋪平道路，讓他們清楚、明確、明確地幫助他們完成任務(wù)。這通常意味著支持三個(gè)導(dǎo)航方向：前向?qū)Ш?、后向?qū)Ш胶蛡?cè)向?qū)Ш健?p>

對(duì)于導(dǎo)航樹較淺的網(wǎng)站，面包屑可以集成到標(biāo)題和標(biāo)題中。手工藝委員會(huì)就是這樣做的。轉(zhuǎn)發(fā)導(dǎo)航我們?cè)L問網(wǎng)站是有原因的，在某些網(wǎng)站上，它可以像檢查銀行賬戶或探索大型數(shù)據(jù)集一樣具體。因此，一旦我們最終進(jìn)入主頁或儀表板，我們就會(huì)在網(wǎng)站的層次結(jié)構(gòu)中向前移動(dòng)，從非常廣泛的頁面到非常具體的頁面，以嘗試完成我們已經(jīng)著手完成的任務(wù)。

結(jié)合了多種導(dǎo)航方向——通過主導(dǎo)航、側(cè)邊欄導(dǎo)航、頁內(nèi)導(dǎo)航和面包屑導(dǎo)航，可以輕松向前、向后和橫向?qū)Ш?。一次全部?br />在導(dǎo)航方面，我們從主頁移動(dòng)到一個(gè)類別，再到子類別，再到進(jìn)一步的頁面內(nèi)導(dǎo)航，以找到我們最終需要點(diǎn)擊的特定功能。如果幸運(yùn)的話，我們可以跳過整個(gè)旅程，并更早地從大型下拉菜單或號(hào)召性用語中獲得該功能。作為設(shè)計(jì)師，我們越能縮短意圖和行動(dòng)之間的距離，用戶體驗(yàn)就會(huì)越好。
向后導(dǎo)航不過，我們并不總是有一個(gè)特定的任務(wù)。通常情況下，我們的目標(biāo)是多方面的，我們會(huì)改變主意，忽略事物，做出自發(fā)的決定，并因閃爍的通知而分心。因此，我們的數(shù)字旅程很少是嚴(yán)格線性的，尤其是當(dāng)網(wǎng)站上的導(dǎo)航有些復(fù)雜時(shí)。
在這種情況下，我們最終會(huì)倒退。事實(shí)上，我們后退是為了重新定位自己，選擇一條探索的路線，然后朝著另一個(gè)方向前進(jìn)。然后我們?cè)俅翁瑯拥奈璧福淮斡忠淮?，直到我們?shí)現(xiàn)了我們的意圖。在許多方面，這個(gè)過程類似于寫一篇這樣的文章。有一個(gè)總體思路可以推動(dòng)文章向前發(fā)展，但也有絆腳石和重新考慮讓你退縮。
在網(wǎng)絡(luò)上，尤其是當(dāng)我們最終進(jìn)入一個(gè)似乎無處可尋、內(nèi)容過時(shí)、沒有提供急需功能的頁面，或者當(dāng)我們的搜索查詢過于模糊而無法提供準(zhǔn)確和相關(guān)的結(jié)果時(shí)，就會(huì)發(fā)生這種情況。

德意志銀行的導(dǎo)航不會(huì)突出顯示用戶當(dāng)前所在的位置。
我們經(jīng)常使用的一個(gè)簡單測(cè)試是給用戶一個(gè) URL，并要求他們解釋他們目前在網(wǎng)站的哪個(gè)部分，并找到相似或相關(guān)的部分。在上面的德意志銀行示例中，這會(huì)有點(diǎn)困難，因?yàn)閷?dǎo)航中沒有當(dāng)前頁面的亮點(diǎn)。

默認(rèn)情況下，當(dāng)前導(dǎo)航級(jí)別不會(huì)在導(dǎo)航欄中突出顯示。
事實(shí)證明，我們處于導(dǎo)航的第三級(jí)。通常“spareandanlegen”應(yīng)該處于活動(dòng)狀態(tài)并在頁面上突出顯示，但事實(shí)并非如此。只有當(dāng)我們打開一個(gè)懸停菜單時(shí)，我們才能發(fā)現(xiàn)當(dāng)前頁面實(shí)際上是什么。在德意志銀行，向后導(dǎo)航有點(diǎn)麻煩。橫向?qū)Ш?/strong>好像來回走動(dòng)還不夠，有時(shí)我們還會(huì)橫著走——在各個(gè)級(jí)別、部分、頁面和子類別之間猛烈地上下跳躍。這通常發(fā)生在我們想要探索類似的主題或相關(guān)頁面，或者探索以某種方式與當(dāng)前頁面相關(guān)的更多信息時(shí)。
當(dāng)我們?yōu)g覽可用選項(xiàng)但尚未下定決心時(shí)，也會(huì)發(fā)生這種情況?；旧希覀兲剿?、瀏覽和點(diǎn)擊，試圖創(chuàng)建一個(gè)我們面前的綜合圖片。

奧地利郵政服務(wù)支持橫向?qū)Ш?，右?cè)有附加信息側(cè)邊欄。
正如我們所做的那樣，我們需要指引我們朝著正確方向前進(jìn)的路標(biāo)。事實(shí)上，考慮到發(fā)生了多少運(yùn)動(dòng)，對(duì)我們的導(dǎo)航方式進(jìn)行一致且可預(yù)測(cè)的跟蹤肯定會(huì)有所幫助。事實(shí)上，這正是面包屑提供的。
乍一看，面包屑似乎只對(duì)向后導(dǎo)航有幫助，但我們經(jīng)常使用它們向后移動(dòng)，找到更好的路線并再次向前移動(dòng)。通過這種方式，它們服務(wù)于所有方向的導(dǎo)航，并且做得很好。
上面列出的所有選項(xiàng)確實(shí)提供了方向感，但它們也需要相當(dāng)多的水平或垂直空間才能做到這一點(diǎn)。在整個(gè)用戶旅程中，它們需要是可見的，以引導(dǎo)用戶從一個(gè)頁面移動(dòng)到下一個(gè)頁面。如果它們?cè)谄渲幸粋€(gè)頁面上突然消失，用戶很可能會(huì)迷路。在搜索結(jié)果中添加健康劑量的噪音和稍微繁瑣的導(dǎo)航，我們不應(yīng)該對(duì)用戶在查找他們正在尋找的內(nèi)容時(shí)遇到問題感到驚訝。
相比之下，面包屑簡潔、緊湊、集中，并且可以很好地完成工作。它們不是顯示所有級(jí)別的導(dǎo)航，而是指示頁面所在的位置，以及對(duì)其所有父級(jí)的快速訪問，一直到主頁。有時(shí)這正是我們所需要的：不多也不少。面包屑清單并非每個(gè)面包屑導(dǎo)航都會(huì)出現(xiàn)并且工作方式相似。我們已經(jīng)看到了一些非常不同的模式和細(xì)微的細(xì)節(jié)，其中面包屑的設(shè)計(jì)和實(shí)現(xiàn)有所不同。
像往常一樣，這里是設(shè)計(jì)更好的面包屑時(shí)要考慮的一些重要指南的一般清單：面包屑總是需要補(bǔ)充主導(dǎo)航。 面包屑最適合全局導(dǎo)航。 它們也可能出現(xiàn)在主標(biāo)題上方。 分隔符應(yīng)指向右側(cè)（在 RTL 接口中）。 面包屑應(yīng)該是可見的，無需滾動(dòng)。 避免“禁用”面包屑并將所有面包屑變成鏈接。 如果面包屑位于標(biāo)題上方，則可以刪除當(dāng)前頁面。 否則，為了清楚起見，將當(dāng)前頁面包含在面包屑中。 在移動(dòng)設(shè)備上，如果需要，使用手風(fēng)琴顯示完整路徑。 當(dāng)前頁面的父頁面應(yīng)該始終可見。對(duì)于您的用戶來說，橫向面包屑

可能是一個(gè)非常令人驚訝和有用的發(fā)現(xiàn)。

當(dāng)前標(biāo)題：如何設(shè)計(jì)更好的面包屑導(dǎo)航
網(wǎng)頁路徑：http://www.bm7419.com/news/237937.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有面包屑導(dǎo)航等

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)