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