網(wǎng)頁設(shè)計中如何正確使用面包屑導(dǎo)航
在當(dāng)今的數(shù)字化時代，公司網(wǎng)站已成為企業(yè)形象和業(yè)務(wù)發(fā)展的重要平臺。而在網(wǎng)站設(shè)計中，面包屑導(dǎo)航是一個不可或缺的元素。它不僅可以幫助用戶更好地理解網(wǎng)站的結(jié)構(gòu)，還可以提高網(wǎng)站的易用性和用戶體驗。下面是小編帶大家一起來認(rèn)識網(wǎng)頁設(shè)計中如何正確使用面包屑導(dǎo)航。
網(wǎng)頁設(shè)計中如何正確使用面包屑導(dǎo)航 1
在網(wǎng)頁設(shè)計中，面包屑類似于Hansel想到的目的。面包屑作為您的網(wǎng)站導(dǎo)航中的輔助導(dǎo)航，以幫助訪客放心，從一個頁面到另一個頁面后失去他們的方式。像老童話一樣，它有助于向用戶展示他們登陸的位置以及他們最后的位置。
一旦面包屑被集成到網(wǎng)站的層次結(jié)構(gòu)中，用戶可以深入到產(chǎn)品類別中，并返回到他們開始的地方，而不會出現(xiàn)“Back”按鈕的瘋狂。
面包屑還可以作為圖形控制元素，幫助經(jīng)驗較少的游客在電子商務(wù)網(wǎng)站上瀏覽。對于這樣的.網(wǎng)站，內(nèi)部結(jié)構(gòu)必須被智能地設(shè)計。使用面包屑，網(wǎng)上購物平臺不僅要為訪客提供便利，而且還可以防止?jié)撛诳蛻粢騺G失而放棄網(wǎng)頁。
面包屑導(dǎo)航
面包屑是通過確定他們當(dāng)前的位置和他們在途中訪問的地方來引導(dǎo)游客的有效手段。它們作為網(wǎng)站層次結(jié)構(gòu)中的視覺輔助。但是，在客戶使用體驗方面，面包屑可幫助他們回答這3個問題。
我在哪里?
面包屑讓用戶知道他們在網(wǎng)站上的行蹤，開始他們的旅程。
我去哪里？
它通過建議他們下一步去向用戶提供幫助。由于結(jié)構(gòu)已經(jīng)放在它們的前面，用戶不再需要搜索和查找類別或網(wǎng)站部分。
我應(yīng)該去那里嗎？
面包屑有助于促進更好的瀏覽和向用戶展示內(nèi)容價值。例如，如果客戶登陸網(wǎng)頁尋找產(chǎn)品，他可能會發(fā)現(xiàn)其他可能證明是符合他需求的產(chǎn)品。這有助于減少網(wǎng)站的跳出率。
網(wǎng)頁設(shè)計中如何正確使用面包屑導(dǎo)航 2
削減動作
為了達(dá)到更高級別的頁面，面包屑幫助減少了不。網(wǎng)站訪問者到達(dá)那里所需的操作。訪問者可以簡單地使用面包屑來導(dǎo)航，而不是不斷地使用“后退”按鈕或網(wǎng)站的主要導(dǎo)航。
需要最小空間
它只需要一條橫線填充文本鏈接。這通過占用最小的空間并允許網(wǎng)站上的其他元素呼吸來促進健康的網(wǎng)頁設(shè)計結(jié)構(gòu)。這也有助于提高網(wǎng)站的加載速度。
每個用戶都知道如何操作面包屑
它易于理解，不需要任何技術(shù)知識與他們互動。該文本解釋了用戶在哪里，可以去。這是一個自我說明的`導(dǎo)航系統(tǒng)，通用于每個用戶的理解。
網(wǎng)頁設(shè)計中如何正確使用面包屑導(dǎo)航 3
構(gòu)建站點地圖以顯示您的網(wǎng)站的導(dǎo)航結(jié)構(gòu)是確定您的網(wǎng)站是否可以受益于面包屑的最佳方式之一。然后，您可以通過試用來分析，并測試面包屑導(dǎo)航是否幫助用戶通過您的網(wǎng)站內(nèi)容。
當(dāng)需要在類別和干凈的線性結(jié)構(gòu)中進行組織時，最好使用面包屑。在大多數(shù)電子商務(wù)網(wǎng)站中，使用相同的標(biāo)準(zhǔn)將大量各種產(chǎn)品分類為邏輯類別。不得將面包屑用于沒有用于分組內(nèi)容或產(chǎn)品的任何邏輯層次結(jié)構(gòu)的網(wǎng)站。
何時避免使用它們
如果面包屑對網(wǎng)站的結(jié)構(gòu)至關(guān)重要，那么還有一些情況應(yīng)該避免。當(dāng)有一個網(wǎng)站是單層結(jié)構(gòu)，沒有任何明確的分組指示，那么它的網(wǎng)站的最大利益，以避免添加面包屑。像我們上面提到的那樣，圖表或站點地圖在確定網(wǎng)站的導(dǎo)航架構(gòu)方面是非常有幫助的。
面包屑只有在主導(dǎo)航支持的情況下才有用。面包屑作為肌肉，而主導(dǎo)航是把它們放在一起的骨架。沒有他們的完整的運動，網(wǎng)站層次結(jié)構(gòu)不能有效地發(fā)揮作用。
面包屑類型
你應(yīng)該知道三種類型的面包屑，位置，路徑和屬性。
基于位置
基于位置的面包屑用于展示網(wǎng)站的基本結(jié)構(gòu)。它們允許用戶瀏覽具有多個級別和全面內(nèi)容跟蹤的網(wǎng)站。這種類型的面包屑對于訪問網(wǎng)站和外部來源的訪問者是非常有用的，并且進入更深層次的內(nèi)容。例如，如果您正在搜索特定類型的產(chǎn)品，并點擊Google顯示的搜索結(jié)果，那么進入網(wǎng)頁后，您會發(fā)現(xiàn)自己在許多類別之間。面包屑將幫助您確定您的位置，并瀏覽層次結(jié)構(gòu)中的可能性。那些含有深層次內(nèi)容的網(wǎng)站非常適合基于位置的面包屑。一個理想的例子是eBay。
基于路徑
這些面包屑對于網(wǎng)站的歷史軌跡導(dǎo)航很重要。基于路徑的面包屑基本上顯示用戶訪問的每個路徑，以達(dá)到其當(dāng)前位置。通常，這樣的面包屑鏈接是動態(tài)生成的.。基于路徑的插件可以幫助用戶在網(wǎng)站上瀏覽大量時間，但對于大多數(shù)用戶來說，這些用戶對于大部分用戶來說都是令人困惑的。由于大多數(shù)訪問者自行瀏覽，從一頁到另一頁。瀏覽器中的“后退”按鈕可以解決大部分需求來更改路徑。這使得對于那些已經(jīng)在網(wǎng)站內(nèi)部深入網(wǎng)站頁面的訪問者來說，這樣做是無用的。
基于屬性
電子商務(wù)網(wǎng)站最受益于基于屬性的面包屑。他們幫助根據(jù)具體頁面或產(chǎn)品列出類別。這種類型的面包屑非常有助于鼓勵用戶了解產(chǎn)品之間的關(guān)系。例如，如果網(wǎng)站正在銷售牛仔褲，他們將使用基于屬性的面包屑來幫助客戶從Regular fit，Slim fit或Skinny牛仔褲導(dǎo)航。
網(wǎng)頁設(shè)計中如何正確使用面包屑導(dǎo)航 4
設(shè)計面包屑導(dǎo)航時，請務(wù)必牢記以下事項。面包屑導(dǎo)航是額外的幫助，以改善您的用戶在您的網(wǎng)站的體驗。
避免重復(fù)的元素
如果您真的要在您的網(wǎng)站上添加面包屑，那么您也可以以正確的方式進行排除。首先，您需要消除面包屑之間可能出現(xiàn)的任何重復(fù)元素。可悲的是，我已經(jīng)在許多頂級網(wǎng)站中看到這些網(wǎng)頁，其中相同的頁面分為多個類別或顯示的內(nèi)容級別。這不僅使訪問者感到困惑，而且還反映在您的網(wǎng)站上。
SEO兼容性
面包屑不僅僅是您的訪問者的導(dǎo)航控件，也是您的SEO練習(xí)的重要資產(chǎn)。您可以使用面包屑中的關(guān)鍵字來提升您在搜索引擎上的.排名。建議您為您的網(wǎng)站類別選擇SEO友好名稱，以便搜索引擎可以輕松地在其結(jié)果中列出導(dǎo)航痕跡。
使用面包屑作為替代導(dǎo)航
雖然面包屑是幫助用戶從一個點到另一個點的優(yōu)秀來源，但重要的是應(yīng)將其作為次要來源。面包屑是增強訪客可用性的另一個特征，在任何情況下都不能取代網(wǎng)站的主要導(dǎo)航結(jié)構(gòu)。
無縫鏈接當(dāng)前頁面在導(dǎo)航導(dǎo)航
雖然在導(dǎo)覽痕跡上顯示訪問者的當(dāng)前位置是可選的，但您必須確保線性結(jié)構(gòu)中顯示的鏈接不可展開或可點擊。只會讓訪問者感到困惑，向他們顯示他們當(dāng)前所在頁面的鏈接。
添加分隔符
使用分隔符是一個很好的做法，給你一個干凈，明亮的外觀，你的導(dǎo)航痕跡。如果用戶進入更深層次并創(chuàng)建易于理解和交互的動態(tài)結(jié)構(gòu)，則可以防止文本太近。
您可以使用>符號表示層次結(jié)構(gòu)，因為它通常用于類別格式，如衣服>襯衫>領(lǐng)子襯衫等。其他符號包括箭頭(→)，直角引號()和斜杠(/)。
介紹面包屑的大小和填充
在設(shè)計面包屑時，您必須考慮填充和目標(biāo)尺寸。一個面包屑到另一個的間距必須明顯，否則訪客可能無法有效地使用它們。同時，確保面包屑的大小不會損害其周圍的其他元素，因此主導(dǎo)航不會受到影響。
不要把焦點放在面包屑的設(shè)計上，而不是它所需要的
不要使用鮮艷的色彩或花哨的字體代表你的面包屑。盡管在用戶登陸頁面后，面包痕跡對于用戶來說非常重要，但不應(yīng)該是他們注意到的第一件事。將痕跡添加到導(dǎo)航痕跡導(dǎo)航可能會導(dǎo)致用戶忽略網(wǎng)站的主導(dǎo)航。這可能會使用戶不必進入頁面的真正意圖，并導(dǎo)致商店潛在的轉(zhuǎn)換丟失。Google是最好的例子。擁有這么多級別的搜索內(nèi)容，它顯示了一個簡單的導(dǎo)航痕跡導(dǎo)航軌跡，沒有任何花哨的字體或顏色，以便用戶可以輕松地定位和與面包屑交互。
應(yīng)避免哪種類型?
關(guān)于是否使用基于位置/屬性的面包屑或基于路徑的面包屑來顯示網(wǎng)站層次結(jié)構(gòu)，這是一個有爭議的論據(jù)。這是一個經(jīng)驗法則，面包屑不能顯示用戶的歷史，而是站點層次結(jié)構(gòu)。在我們的評估和意見中，您可能不應(yīng)該再打擾基于路徑的面包屑了。一方面，它對于UX不起作用，因為它可能會導(dǎo)致訪問者混淆，因為不同級別之間缺少層次結(jié)構(gòu)。這就是為什么位置和屬性的面包屑比基于路徑的面包屑更喜歡。
最后的想法
面包屑與網(wǎng)站上的任何其他元素一樣重要。現(xiàn)在，該技術(shù)已經(jīng)允許存儲更多的數(shù)據(jù)，更快的互聯(lián)網(wǎng)速度，甚至更快的加載時間，導(dǎo)航可以在更高等級的層次上更全面地顯示，而不會打亂汗水。在面包屑的幫助下，您的網(wǎng)站不僅可以產(chǎn)生更好的用戶體驗，還可以從客戶獲得更大的銷售。更平滑和不復(fù)雜的導(dǎo)航意味著更容易訪問產(chǎn)品頁面，并阻礙較少的結(jié)帳過程。
網(wǎng)頁設(shè)計中如何正確使用面包屑導(dǎo)航 5
一、了解面包屑導(dǎo)航的作用
面包屑導(dǎo)航，顧名思義，它像一個面包屑軌跡，為用戶提供他們在網(wǎng)站中的位置。通過面包屑導(dǎo)航，用戶可以輕松地回到之前的頁面，同時也能夠快速找到他們想要的信息。因此，正確的使用面包屑導(dǎo)航可以提高用戶的滿意度和忠誠度。
二、合理規(guī)劃面包屑導(dǎo)航的結(jié)構(gòu)
在設(shè)計面包屑導(dǎo)航時，首先要對網(wǎng)站的結(jié)構(gòu)進行深入的分析和理解。根據(jù)網(wǎng)站的內(nèi)容和功能，確定面包屑導(dǎo)航的層級和分類。確保面包屑導(dǎo)航能夠清晰地反映出網(wǎng)站的層次關(guān)系，同時也要考慮到用戶的瀏覽習(xí)慣和需求。
三、優(yōu)化面包屑導(dǎo)航的顯示效果
面包屑導(dǎo)航的顯示效果對于用戶體驗至關(guān)重要。一般來說，面包屑導(dǎo)航應(yīng)該放置在網(wǎng)站的頂部或側(cè)邊欄，以便用戶可以輕松地找到。同時，面包屑導(dǎo)航的字體大小、顏色、以及布局也應(yīng)該符合網(wǎng)站的整體設(shè)計風(fēng)格。為了更好地提高用戶體驗，可以嘗試將面包屑導(dǎo)航與當(dāng)前頁面的'主題或背景色進行統(tǒng)一。
四、實現(xiàn)動態(tài)面包屑導(dǎo)航
隨著網(wǎng)站的內(nèi)容和結(jié)構(gòu)的變化，面包屑導(dǎo)航也應(yīng)該相應(yīng)地調(diào)整。實現(xiàn)動態(tài)面包屑導(dǎo)航的方法有很多種，比如根據(jù)用戶的瀏覽行為動態(tài)改變面包屑導(dǎo)航，或者在網(wǎng)站更新時自動更新面包屑導(dǎo)航。這樣可以為用戶提供更加個性化和友好的體驗。
【網(wǎng)頁設(shè)計中如何正確使用面包屑導(dǎo)航】相關(guān)文章：
如何正確使用導(dǎo)航儀10-14
如何使用網(wǎng)頁設(shè)計中的圖片敘事11-01
如何使用Dreamweaver設(shè)計網(wǎng)頁02-10