面包屑導(dǎo)航什么時(shí)候不能用?

2 評(píng)論 8989 瀏覽 30 收藏 14 分鐘

本篇文章將詳細(xì)介紹面包屑導(dǎo)航的應(yīng)用場(chǎng)景及其在B端設(shè)計(jì)的應(yīng)用,能給產(chǎn)品設(shè)計(jì)的伙伴們提供一些參考思路,希望能對(duì)你有所啟發(fā)。

在我們的日?;ヂ?lián)網(wǎng)使用過(guò)程中,面包屑導(dǎo)航無(wú)處不在。從電商網(wǎng)站的商品分類(lèi),到各類(lèi)軟件應(yīng)用的操作路徑,面包屑導(dǎo)航為用戶(hù)提供了一種直觀且便捷的方式來(lái)理解和掌握應(yīng)用的層次結(jié)構(gòu)。

本文將深入探討面包屑導(dǎo)航在B端交互設(shè)計(jì)中的應(yīng)用。

一、是什么

1. 面包屑導(dǎo)航的定義

面包屑導(dǎo)航是一個(gè)在網(wǎng)頁(yè)或應(yīng)用中廣泛應(yīng)用的用戶(hù)界面設(shè)計(jì)元素。其名稱(chēng)來(lái)源于歐洲的一個(gè)古老童話故事《漢斯?fàn)柵c格蕾特》。在這個(gè)故事中,兩個(gè)孩子在深林中撒下面包屑,以便于找到回家的路。

在網(wǎng)頁(yè)或應(yīng)用設(shè)計(jì)中,面包屑導(dǎo)航的功能與此類(lèi)似,它通過(guò)顯示用戶(hù)當(dāng)前所處位置的路徑,幫助他們理解自己在整個(gè)網(wǎng)站或應(yīng)用結(jié)構(gòu)中的位置,并提供了一種快速返回到上一級(jí)或者更高級(jí)頁(yè)面的方式。

《漢斯?fàn)柵c格蕾特》是一則著名的德國(guó)童話,最早由格林兄弟收集并編寫(xiě)。故事的主要情節(jié)是講述兩個(gè)兄弟漢斯?fàn)柡透窭偬厥チ嘶丶业穆泛螅麄冊(cè)谏种忻月?,被一個(gè)惡魔所發(fā)現(xiàn)并帶到了一座巧克力屋子里。

這座屋子是由巧克力、糖果和面包等甜食制成的,但是它也是惡魔用來(lái)捕捉小孩子的陷阱。漢斯?fàn)柡透窭偬卦谔用搻耗У淖凡稌r(shí),利用小巧思和勇氣最終成功逃脫并回到了家中。

2. 面包屑常見(jiàn)應(yīng)用場(chǎng)景

面包屑導(dǎo)航在各種不同的應(yīng)用場(chǎng)景中發(fā)揮著關(guān)鍵作用,它們通常被設(shè)計(jì)來(lái)提供一種直觀的方式,讓用戶(hù)知道他們?cè)诰W(wǎng)站或應(yīng)用程序的整個(gè)結(jié)構(gòu)中的當(dāng)前位置。

以下是對(duì)幾個(gè)常見(jiàn)場(chǎng)景的更詳細(xì)的描述:

1)供應(yīng)鏈管理軟件

這類(lèi)軟件通常包括許多復(fù)雜的模塊,如庫(kù)存管理、訂單處理、供應(yīng)商管理等。在這種環(huán)境下,面包屑導(dǎo)航可以幫助用戶(hù)(如倉(cāng)庫(kù)經(jīng)理或物流人員)理解他們?cè)谲浖到y(tǒng)中的位置,以及如何回到前一個(gè)步驟或頁(yè)面。

例如,用戶(hù)可能需要從“主頁(yè) > 庫(kù)存管理 > 庫(kù)存查詢(xún)”這樣的路徑進(jìn)入庫(kù)存查詢(xún)功能,如果他們想要回到庫(kù)存管理主頁(yè)面,只需點(diǎn)擊面包屑導(dǎo)航中的“庫(kù)存管理”。

2)企業(yè)資源規(guī)劃(ERP)系統(tǒng)

ERP系統(tǒng)通常非常復(fù)雜,包含多個(gè)不同的模塊,如財(cái)務(wù)、人力資源、銷(xiāo)售、生產(chǎn)等。使用面包屑導(dǎo)航可以幫助用戶(hù)明確他們?cè)谶@復(fù)雜系統(tǒng)中的位置,并快速返回到上一級(jí)或其他相關(guān)模塊。

例如,在進(jìn)行報(bào)銷(xiāo)審批的時(shí)候,用戶(hù)可能會(huì)沿著“主頁(yè) > 財(cái)務(wù)管理 > 報(bào)銷(xiāo)審批”這樣的路徑進(jìn)行,面包屑導(dǎo)航就能幫助用戶(hù)輕松地在這些模塊間導(dǎo)航。

3)項(xiàng)目管理軟件

在項(xiàng)目管理軟件中,面包屑導(dǎo)航對(duì)于快速定位任務(wù)和項(xiàng)目非常有用。例如,一個(gè)項(xiàng)目經(jīng)理可以通過(guò)“主頁(yè) > 我的項(xiàng)目 > 項(xiàng)目A > 任務(wù)3”這樣的路徑找到他需要關(guān)注的具體任務(wù)。

在這個(gè)過(guò)程中,面包屑導(dǎo)航提供了一個(gè)清晰的視覺(jué)指示,幫助用戶(hù)理解他們?cè)陧?xiàng)目和任務(wù)結(jié)構(gòu)中的位置。

4)CRM系統(tǒng)

在客戶(hù)關(guān)系管理(CRM)系統(tǒng)中,面包屑導(dǎo)航可以幫助銷(xiāo)售人員、客服代表等用戶(hù)快速了解他們?cè)谙到y(tǒng)中的位置,比如正在查看哪個(gè)客戶(hù)的詳情,或者正在編輯哪個(gè)銷(xiāo)售機(jī)會(huì)。

例如,“主頁(yè) > 客戶(hù)列表 > 客戶(hù)A > 銷(xiāo)售機(jī)會(huì)1”這樣的面包屑導(dǎo)航就可以為用戶(hù)提供他們所需的上下文信息。

5)梳理

在所有這些B端產(chǎn)品中,面包屑導(dǎo)航都起到了非常重要的作用,它們能幫助用戶(hù)理解他們?cè)趶?fù)雜系統(tǒng)中的位置,并提供快速回溯的路徑,從而提高用戶(hù)的效率和滿(mǎn)意度。

3. 面包屑導(dǎo)航的優(yōu)勢(shì)與價(jià)值

面包屑導(dǎo)航是一種在網(wǎng)站或應(yīng)用中提供用戶(hù)導(dǎo)航的方式,它通過(guò)展示用戶(hù)當(dāng)前位置在整個(gè)網(wǎng)站或應(yīng)用結(jié)構(gòu)中的上下文來(lái)提供指引。

面包屑導(dǎo)航有以下的價(jià)值和優(yōu)勢(shì):

1)用戶(hù)導(dǎo)航

面包屑導(dǎo)航為用戶(hù)提供了一個(gè)清晰、直觀的導(dǎo)航路徑,使他們可以很容易地了解自己在網(wǎng)站或應(yīng)用中的位置。它也為用戶(hù)提供了返回前一個(gè)視圖或者跳轉(zhuǎn)到上一級(jí)目錄的快捷方式。

2)提高用戶(hù)體驗(yàn)

面包屑導(dǎo)航增加了用戶(hù)的控制感,因?yàn)橛脩?hù)可以清楚地看到自己在應(yīng)用或網(wǎng)站中的位置,以及如何到達(dá)當(dāng)前頁(yè)面。這種透明度可以提高用戶(hù)體驗(yàn),讓用戶(hù)覺(jué)得更容易使用和理解網(wǎng)站或應(yīng)用。

3)節(jié)省時(shí)間

面包屑導(dǎo)航提供了一種快速回溯的方式,讓用戶(hù)可以直接跳回他們之前訪問(wèn)過(guò)的頁(yè)面,而無(wú)需使用瀏覽器的后退按鈕或重新導(dǎo)航。這可以節(jié)省用戶(hù)的時(shí)間,尤其在復(fù)雜的網(wǎng)站或應(yīng)用中。

4)提高網(wǎng)站的SEO

搜索引擎可以通過(guò)面包屑導(dǎo)航更好地理解網(wǎng)站的結(jié)構(gòu)和內(nèi)容。這可以提高網(wǎng)站在搜索結(jié)果中的排名,使更多的用戶(hù)能夠找到網(wǎng)站。

5)可擴(kuò)展性

面包屑導(dǎo)航為增加新的頁(yè)面或子分類(lèi)提供了方便,因?yàn)樗鼈兛梢院苋菀椎靥砑拥浆F(xiàn)有的導(dǎo)航結(jié)構(gòu)中。

6)減少錯(cuò)誤

通過(guò)提供一個(gè)清晰的路徑,面包屑導(dǎo)航可以幫助減少用戶(hù)的導(dǎo)航錯(cuò)誤。例如,如果用戶(hù)誤入一個(gè)頁(yè)面,他們可以通過(guò)面包屑導(dǎo)航快速找到正確的路徑。

7)空間有效

面包屑導(dǎo)航通常只占用很小的屏幕空間,但能提供大量的導(dǎo)航信息。

二、面包屑導(dǎo)航在B端設(shè)計(jì)中的重要性

面包屑導(dǎo)航在企業(yè)級(jí)(B端)設(shè)計(jì)中具有重要的作用,主要表現(xiàn)在以下幾個(gè)方面:

1)快速定位

由于企業(yè)級(jí)應(yīng)用往往涉及復(fù)雜的任務(wù)和多級(jí)信息處理,面包屑導(dǎo)航能夠幫助用戶(hù)快速定位自己在應(yīng)用中的位置,提供了回到上一層級(jí)或之前視圖的便捷路徑,從而大大提高了操作效率和生產(chǎn)力。

2)快速查找

面包屑導(dǎo)航對(duì)于處理復(fù)雜工作流程和功能模塊的支持,使用戶(hù)能夠清晰理解當(dāng)前的模塊和功能路徑,從而更好地掌握和管理復(fù)雜的工作流程,特別是在跨部門(mén)協(xié)作、項(xiàng)目管理和信息查找等任務(wù)中顯得尤為重要。

3)減少空間迷茫

面包屑導(dǎo)航能夠提供更好的用戶(hù)體驗(yàn),減少用戶(hù)的迷茫感,并增強(qiáng)用戶(hù)在使用過(guò)程中的滿(mǎn)意度。

同時(shí),面包屑導(dǎo)航也是新員工快速理解應(yīng)用程序結(jié)構(gòu)和功能的有效工具,有助于降低企業(yè)的培訓(xùn)成本。

4)防錯(cuò)原則

面包屑導(dǎo)航在數(shù)據(jù)處理中提供了數(shù)據(jù)的完整性和上下文理解,幫助用戶(hù)避免誤操作和數(shù)據(jù)錯(cuò)誤。

三、面包屑導(dǎo)航不適用的場(chǎng)景

在企業(yè)級(jí)(B端)設(shè)計(jì)中,盡管面包屑導(dǎo)航可以在許多場(chǎng)景中提高用戶(hù)體驗(yàn)和操作效率,但同樣存在一些場(chǎng)景下可能并不適合使用面包屑導(dǎo)航,包括:

1)流程性應(yīng)用

某些B端應(yīng)用具有線性的工作流程,如順序化的任務(wù)或向?qū)搅鞒?,在這種情況下面包屑導(dǎo)航可能并不適用,因?yàn)橛脩?hù)可以通過(guò)界面上的進(jìn)度指示器或?qū)Ш桨粹o來(lái)了解自己的當(dāng)前位置。

2)單一功能模塊

在某些B端設(shè)計(jì)中,用戶(hù)主要在一個(gè)功能模塊內(nèi)完成工作,比如某些專(zhuān)門(mén)用于數(shù)據(jù)輸入或數(shù)據(jù)查看的應(yīng)用,這種情況下,使用面包屑導(dǎo)航可能會(huì)顯得冗余。

3)數(shù)據(jù)驅(qū)動(dòng)的應(yīng)用

在一些數(shù)據(jù)驅(qū)動(dòng)的應(yīng)用中,如大數(shù)據(jù)分析或機(jī)器學(xué)習(xí)平臺(tái),用戶(hù)的工作流程可能不是線性的,也不遵循特定的層級(jí)結(jié)構(gòu),而是根據(jù)數(shù)據(jù)和結(jié)果的反饋動(dòng)態(tài)調(diào)整。在這樣的應(yīng)用中,面包屑導(dǎo)航可能無(wú)法提供有效的導(dǎo)航幫助。

考慮到在一些具體的應(yīng)用場(chǎng)景中,面包屑導(dǎo)航可能并不適用,以下是一些例子:

Salesforce是一個(gè)龐大的系統(tǒng),包含了許多不同的模塊,如銷(xiāo)售、服務(wù)、市場(chǎng)等。其中,例如在創(chuàng)建銷(xiāo)售機(jī)會(huì)或者服務(wù)案例的流程中,面包屑導(dǎo)航可能并不適用,因?yàn)檫@些流程通常是線性的,用戶(hù)需要按照特定的步驟依次完成,使用面包屑導(dǎo)航可能會(huì)導(dǎo)致用戶(hù)跳過(guò)某些必要的步驟。

Tableau 是一款數(shù)據(jù)可視化工具,用戶(hù)的工作流程主要是圍繞數(shù)據(jù)源、視圖、報(bào)告等進(jìn)行,而這些元素之間并不具有明確的層級(jí)關(guān)系。例如,用戶(hù)可能需要在多個(gè)數(shù)據(jù)源和視圖之間反復(fù)切換,使用面包屑導(dǎo)航可能無(wú)法有效地反映出用戶(hù)的操作歷史和當(dāng)前位置。

Zoom 主要提供在線視頻會(huì)議服務(wù),用戶(hù)的主要操作可能是加入會(huì)議、發(fā)起會(huì)議、分享屏幕等,這些操作并不構(gòu)成層級(jí)關(guān)系,而是并列的關(guān)系。在這種情況下,使用面包屑導(dǎo)航可能并不適合。

四、替代面包屑導(dǎo)航的其他設(shè)計(jì)策略

替代面包屑導(dǎo)航的其他策略需要考慮的不僅是導(dǎo)航的問(wèn)題,更要關(guān)注如何提高用戶(hù)的操作效率和滿(mǎn)足特定的業(yè)務(wù)需求。

一個(gè)可能的替代方案是設(shè)計(jì)一個(gè)儀表盤(pán),這樣可以集中展示關(guān)鍵信息,并提供到重要功能的快速導(dǎo)航,如Google Analytics的儀表盤(pán)設(shè)計(jì)。

還可以考慮創(chuàng)建專(zhuān)門(mén)的導(dǎo)航面板,特別是在那些涉及復(fù)雜工作流程或大量數(shù)據(jù)的應(yīng)用中,用戶(hù)可以在導(dǎo)航面板中執(zhí)行各種操作。

在復(fù)雜的業(yè)務(wù)流程中,上下文導(dǎo)航也是一種有效的替代方案,它可以顯示用戶(hù)當(dāng)前的位置和相關(guān)信息,幫助用戶(hù)理解和掌握他們的上下文環(huán)境。

任務(wù)導(dǎo)向的UI設(shè)計(jì)也是一種可能的替代方案,它可以通過(guò)指導(dǎo)用戶(hù)完成特定任務(wù),而不是簡(jiǎn)單地提供信息導(dǎo)航,來(lái)提高用戶(hù)的工作效率。

五、結(jié)論

經(jīng)過(guò)全文的探討,我們對(duì)面包屑導(dǎo)航在B端交互設(shè)計(jì)中的應(yīng)用及其局限性有了更為深入的理解。

我們明確了面包屑導(dǎo)航作為一個(gè)普遍存在的設(shè)計(jì)元素,其在幫助用戶(hù)理解和導(dǎo)航應(yīng)用結(jié)構(gòu)方面的重要作用,同時(shí),也認(rèn)識(shí)到其在特定場(chǎng)景下的限制。

在簡(jiǎn)單的、用戶(hù)交互少的、內(nèi)容多樣性較高的場(chǎng)景,或者用戶(hù)易于迷失的應(yīng)用中,過(guò)度依賴(lài)面包屑導(dǎo)航可能并不是最佳的選擇。

對(duì)于面包屑導(dǎo)航,沒(méi)有放之四海而皆準(zhǔn)的規(guī)則,設(shè)計(jì)師的聰明才智和經(jīng)驗(yàn)的積累,才是最為重要的。

專(zhuān)欄作家

一只雞腿,微信公眾號(hào):B端設(shè)計(jì)一只雞腿,人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。一個(gè)吃貨的B端設(shè)計(jì)師。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash,基于 CC0 協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 總結(jié)的很好

    來(lái)自浙江 回復(fù)
    1. 謝謝夸獎(jiǎng)

      來(lái)自上海 回復(fù)