2026-1-18 清陽 B端ui設計文章及欣賞
假如你是第一次到大型公司入職，進入陌生且龐大的建筑群中迷失了方向：哪里是1號樓？哪里是A座？哪里刷門禁？餐廳在哪里？這時，你就需要一個準確的導視系統，幫你在空間中定位，并且找到前進的方向。
同理，當我們使用某個軟件系統時，也會面臨同樣的問題。當用戶帶著問題和目的進入了系統，會自動去尋找目標功能入口，提供這些信息和入口的便是導航。
導航菜單在B端任意一個產品中都是不可缺少的，且每一個導航菜單的位置基本都是固定的。解決了用戶“我在哪兒”“到哪兒去”的問題，并且引導用戶進行頁面間的跳轉操作，快速找到目標。
根據導航的觸達范圍，在B端場景中常用的導航可以分類六個類型：
1、全局導航
2、局部導航
3、頁內導航
4、下鉆類導航
5、返回類導航
6、聯想類導航
其中全局導航可以覆蓋整個網站的通路，往往表現為網站的一級分類，它不一定包含全局信息，但是可以讓用去渠到目標關鍵節點上。全局導航對用戶體驗的影響共有兩點：
1、呈現內容和功能的架構。全局導航相當于整個網站的骨架，支撐著內容和功能組成的身體，構建內容和功能的整體認知，扁平化用戶的任務路徑，幫助用戶了解當前位置和目標路徑。
2、突出核心功能。將核心功能放在用戶最能接觸到的位置，適度隱藏次要功能。
并且全局導航和首頁內容共同塑造了用戶對于網站的第一印象，同時強化品牌形象。
一、全局導航的基礎樣式
導航菜單是由多個菜單項集合組成的。菜單項由容器+選項內容（圖標+文字或文字）組成，交互行為是點擊菜單熱區后跳轉到相應目標頁面。
用戶的瀏覽動線一般是左上到右下，所以全局導航一般被設置在頁面左側或頁面頂部。按照導航選項的權重或者優先級一般分為三種樣式：
1、橫向導航
橫向導航置于頁面頂部，橫向水平延展，從左到右選項優先級遞減。橫向導航視覺干擾小，可以將較大的屏幕空間給到內容展示。但拓展性較低，更適合官網等結構簡單的產品。
2、縱向（垂直）導航
縱向導航置于頁面左側，垂直延展，選項優先級由上而下遞減。用戶可以在不同選項中快速切換，操作效率較高；縱向空間可以容納更多菜單選項，并且可以延展二級分類。拓展性比較高，適合專注操作的后臺類產品。
但縱向導航占用面積較大，視覺比較突出，瀏覽過程中打斷感比較強。有些網站為了減小視覺面積，也經常使用折疊模式的縱向導航。
3、縱橫式導航
同時使用橫向和縱向導航，通常橫向導航是一級導航，用于展示全局類目和功能；縱向導航為二級導航，提供具體的功能和內容。
這種導航可以容納更多的信息層級，信息密度較高。但菜單面積較大，視覺復雜度較高。適合操作比較復雜的后臺類產品，比如云產品。
二、全局導航的拓展能力
全局導航為了容納更多的信息量，就擁有強大的拓展能力，主要來承接導航菜單的深度和廣度。
1、深度指導航的層級數目，層級越多，深度越大。
根據用戶需求和使用場景梳理產品架構，當層級過多時，需要對功能進行分組。比如哪些功能需求是互相關聯，可以組合在一起的，這時就需要考慮用一個集合頁面來承接這些功能。
當層級大于2個時，可以利用面包屑導航，用戶可以根據面包屑導航看到當前操作的位置和軌跡，并且方便返回到任意位置。
2、廣度指導航每一層級包含的菜單數目，數目越多，廣度越大。
合理規劃導航廣度，就可以用到“簡約四策略”，分別是刪除、組織、隱藏、轉移。
1）刪除：刪除不必要的功能。精簡功能，刪除多余文字，精簡按鈕等，讓用戶集中注意力，避免在冗余的功能中喪失目標感。
2）組織：組織必須提供的功能。在視覺層面上，做到信息分層清晰；在產品層面上，做到根據內容做功能分組，讓用戶更方便查閱和尋找。分塊越少，選擇越少，用戶負擔就越小。
3）隱藏：隱藏非核心功能。不常用但不能少的功能，可以選擇隱藏，利用漸進式的展示方式，只要不讓用戶找太久，就是有效的隱藏。
4）轉移：轉移非擅長的功能。利用設備轉移、軟件轉移、向用戶轉移，比如將一些因為屏幕大小影響展示的功能在手機端進行隱藏，只在電腦端做展示。
三、設計要點
1、全局導航需要有足夠的視覺權重，如果菜單選項不是特別復雜，盡量不使用全局折疊的形式。一般默認展開，不需要時可以折疊。
2、保持結構簡潔，導航層級如果太深，比如三級導航，影響導航的可見性。
3、控制一級導航菜單數量，以免視覺溢出過多。保證文本易于辨識，使用已于理解的圖標，減少重復文字，精簡菜單名稱。
導航如我們前進路上的指示標，指引用戶方向并承載產品內容，也是B端產品系統中不可缺少的一環。產品擁有清晰、一致的導航，也要兼顧導航菜單選項的可見性和用戶操作效率，讓用戶有目標感、良好的體驗感，做一個與用戶心智模型匹配的導航系統。
轉載：京東體驗設計中心