一、開篇：被忽視的導(dǎo)航組件如何影響全局效率

1. 開端

工作中需要從 0 開始設(shè)計(jì)一個(gè)后臺(tái)管理系統(tǒng)，但是由于產(chǎn)品框架不明確，以及需要在設(shè)計(jì)頁(yè)面的過程中增加或刪減菜單。考慮到后期的增刪改查及全局同步，所以將導(dǎo)航欄設(shè)置為組件。

但是在后期使用的過程中，發(fā)現(xiàn)簡(jiǎn)單的設(shè)置為組件并不能使其達(dá)到我想要的效果：全局同步更新以及靈活變動(dòng)展開狀態(tài)與數(shù)量、圖標(biāo)、文本內(nèi)容。

當(dāng)然我敢肯定是可以實(shí)現(xiàn)的！因?yàn)榇髲S設(shè)計(jì)系統(tǒng)中的導(dǎo)航組件可以實(shí)現(xiàn)，所以找了很多資料去尋找如何才能達(dá)到我想要的效果。

And，最終我發(fā)現(xiàn)一個(gè)問題：前期做法是對(duì)的，只是改動(dòng)的時(shí)候沒有在母組件中修改，所以無法同步。

同時(shí)在查找資料的過程中學(xué)到了很多新知識(shí)。

2. 問題本質(zhì)

全局同步≠機(jī)械復(fù)制。

是的，對(duì)于我想要的效果沒實(shí)現(xiàn)之前，笨辦法就是每一個(gè)設(shè)計(jì)稿都復(fù)制粘貼修改一下。

除了類似于導(dǎo)航欄全局同步的需求，多端適配也是一個(gè)比較常見的問題了。這類需求的隱藏成本其實(shí)蠻大的，所以！學(xué)起來呀！

本文主要以 MasterGo 工具搭建 B 端側(cè)邊導(dǎo)航組件為例，從基礎(chǔ)知識(shí)點(diǎn)開始詳細(xì)講解如何搭建設(shè)計(jì)系統(tǒng)。

更多干貨：

二、需求溯源：為什么需要系統(tǒng)化導(dǎo)航設(shè)計(jì)

1. 現(xiàn)代應(yīng)用的復(fù)雜場(chǎng)景

對(duì)于移動(dòng)端來說，目前市場(chǎng)上的尺寸種類較多，雖然我們?nèi)粘Ｗ鲈O(shè)計(jì)稿的時(shí)候只需要設(shè)計(jì)一個(gè)尺寸，然后進(jìn)行適配就可以了，但是我們也需要考慮到響應(yīng)式導(dǎo)航的自動(dòng)化適配方式。畢竟一致的導(dǎo)航結(jié)構(gòu)、流暢的適配方式，都有助于用戶使用產(chǎn)品。

尤其是近幾年來，隨著折疊屏設(shè)備的普及，移動(dòng)端折疊屏適配也算是當(dāng)前移動(dòng)應(yīng)用開發(fā)中的一個(gè)重要議題。作為設(shè)計(jì)師，如何在不同尺寸和形態(tài)的屏幕上提供良好的用戶體驗(yàn)應(yīng)當(dāng)是我們所需要關(guān)注的焦點(diǎn)。

同時(shí)，Web 端響應(yīng)式布局的需求也是不可忽視的。比如在 Arco Design System 中，對(duì)于不同大小菜單寬度限制在 160px 到 400px 之間，可以通過拖動(dòng)實(shí)現(xiàn)導(dǎo)航欄寬度的變化。小紅書網(wǎng)頁(yè)版也對(duì)不同的屏幕寬度進(jìn)行了限制，最大尺寸時(shí)左側(cè)導(dǎo)航欄右側(cè)內(nèi)容展示五列，尺寸較小時(shí)整體布局改為底部固定導(dǎo)航欄。

知識(shí)點(diǎn)：

響應(yīng)式布局：根據(jù)設(shè)備、屏幕尺寸和分辨率，自動(dòng)調(diào)整頁(yè)面元素的大小、位置和顯示方式，從而為用戶提供優(yōu)質(zhì)瀏覽體驗(yàn)的一種技術(shù)。響應(yīng)式布局的解決方案大致有流式布局、彈性布局、網(wǎng)格布局、媒體查詢布局。

流式布局：借助百分比來定義元素的寬度，高度則按照內(nèi)容自適應(yīng)。如此一來，元素會(huì)依據(jù)屏幕寬度按比例縮放，從而保證在不同屏幕尺寸下布局的一致性。

彈性布局 Flexbox：彈性布局是一種一維布局模型，它提供了強(qiáng)大的空間分布和對(duì)齊能力。通過設(shè)置容器和子元素的屬性，可以輕松實(shí)現(xiàn)元素的水平和垂直對(duì)齊、空間分配等。在 figma 工具中，可以使用 Auto Layout 實(shí)現(xiàn)。MasterGo 工具中，可使用自動(dòng)布局中的換行功能實(shí)現(xiàn)。

宮格/網(wǎng)格布局（Grid）：二維布局模型，可將頁(yè)面劃分為行和列，再把元素精準(zhǔn)放置到網(wǎng)格的特定位置。它能實(shí)現(xiàn)復(fù)雜的布局，且易于控制和維護(hù)。

媒體查詢布局：利用 CSS 的媒體查詢功能，依據(jù)不同的屏幕尺寸和設(shè)備特性，應(yīng)用不同的 CSS 規(guī)則，從而實(shí)現(xiàn)不同的布局效果。

自適應(yīng)布局：根據(jù)不同設(shè)備的屏幕大小和分辨率，自動(dòng)調(diào)整網(wǎng)頁(yè)的布局和樣式，以提供最佳的視覺效果和用戶體驗(yàn)。自適應(yīng)布局通常使用 CSS 媒體查詢和其他技術(shù)來檢測(cè)設(shè)備的屏幕大小，并根據(jù)不同的屏幕尺寸應(yīng)用不同的樣式規(guī)則，即需要為不同的屏幕尺寸設(shè)計(jì)和維護(hù)多個(gè)布局版本。自適應(yīng)布局的解決方案大致有固定布局、流體布局、彈性布局、混合布局、柵格系統(tǒng)。

固定布局：在固定布局中，網(wǎng)頁(yè)的寬度是固定的，通常以像素為單位。這種布局在特定的屏幕分辨率下看起來很完美，但在其他分辨率下可能會(huì)出現(xiàn)滾動(dòng)條或元素變形的問題。不過可以通過結(jié)合媒體查詢，針對(duì)不同設(shè)備設(shè)置不同的固定寬度，以實(shí)現(xiàn)一定程度的自適應(yīng)。

流體布局：也稱為流式布局，它使用百分比來定義元素的寬度，而不是固定的像素值。元素的寬度會(huì)根據(jù)屏幕的大小按比例縮放，從而在不同屏幕尺寸下保持布局的相對(duì)一致性。

彈性布局：使用相對(duì)單位來定義元素的大小和間距。這些單位是相對(duì)于父元素或根元素的字體大小而言的，因此當(dāng)屏幕大小改變時(shí)，元素的大小會(huì)根據(jù)字體大小的變化而相應(yīng)地調(diào)整。

混合布局：混合布局結(jié)合了上述幾種布局類型的特點(diǎn)，根據(jù)不同的頁(yè)面區(qū)域和設(shè)計(jì)需求，靈活選擇使用固定布局、流體布局或彈性布局。

柵格系統(tǒng)：把頁(yè)面劃分成一系列等寬的列與行，形成規(guī)則的網(wǎng)格結(jié)構(gòu)，再依據(jù)設(shè)計(jì)需求將頁(yè)面元素放置于這些網(wǎng)格之中。

對(duì)于自適應(yīng)布局與響應(yīng)式布局的區(qū)別：

自適應(yīng)布局是為不同尺寸的設(shè)備（如手機(jī)、平板、桌面）預(yù)先定義固定的布局版本，當(dāng)檢測(cè)到設(shè)備類型或屏幕尺寸時(shí)，加載對(duì)應(yīng)的預(yù)設(shè)布局。

響應(yīng)式布局是基于流式布局 + 媒體查詢的布局，通過一個(gè)靈活的布局結(jié)構(gòu)，隨屏幕尺寸的變化實(shí)時(shí)調(diào)整元素的排列、大小和位置，實(shí)現(xiàn) “一個(gè)布局適配所有設(shè)備”。

2. 高效協(xié)同的必選項(xiàng)

動(dòng)態(tài)導(dǎo)航欄

動(dòng)態(tài)導(dǎo)航欄通常指的是具有交互效果和自適應(yīng)功能的導(dǎo)航欄，能夠根據(jù)用戶的操作（如點(diǎn)擊、懸停）或屏幕尺寸的變化做出相應(yīng)的動(dòng)態(tài)響應(yīng)。

以 B 端后臺(tái)的側(cè)邊導(dǎo)航欄為例，列舉以下幾個(gè)常見的實(shí)現(xiàn)痛點(diǎn)。

權(quán)限管理：B 端后臺(tái)管理系統(tǒng)通常有著比較復(fù)雜的權(quán)限體系，不同角色的用戶可訪問和操作的功能不同，側(cè)邊導(dǎo)航欄需要根據(jù)用戶的角色類別精準(zhǔn)展示其可訪問的菜單。用戶角色發(fā)生改變，側(cè)邊導(dǎo)航欄實(shí)時(shí)更新。要保證導(dǎo)航欄及時(shí)更新的同時(shí)，流暢準(zhǔn)確的渲染相應(yīng)的菜單。

多級(jí)菜單：后臺(tái)管理系統(tǒng)的功能較多，對(duì)應(yīng)的側(cè)邊導(dǎo)航欄包含多級(jí)菜單。想要實(shí)現(xiàn)多級(jí)菜單的展開、收起、定位功能，需要認(rèn)真設(shè)計(jì)其布局與交互。尤其是在設(shè)計(jì)初期，考慮到未來的發(fā)展，可以采用模塊化的設(shè)計(jì)方式，方便后期添加新的菜單。

交互體驗(yàn)：部分產(chǎn)品為了提供較高的用戶體驗(yàn)，可能會(huì)在側(cè)邊導(dǎo)航欄中添加一些動(dòng)畫效果，例如菜單的展開與收起過程中的過渡動(dòng)畫。快速響應(yīng)與流暢性是需要重點(diǎn)考慮的。

主題定制：不同的企業(yè)或用戶對(duì)于 B 端后臺(tái)的界面風(fēng)格或配色有著不同的需求，這里就需要實(shí)現(xiàn)側(cè)邊欄主題的定制功能了。普遍是更改顏色或字體樣式，部分產(chǎn)品也會(huì)涉及到布局或圖標(biāo)的更改。要確保在各種主題下導(dǎo)航欄都可以保持良好的視覺效果和可用性。

設(shè)計(jì)走查

交付設(shè)計(jì)稿后需要檢查是否有統(tǒng)一設(shè)計(jì)風(fēng)格與樣式，如若使用組件庫(kù)就不需要擔(dān)心這個(gè)問題了，且后續(xù)需要修改也可實(shí)現(xiàn)修改一處全局同步。同時(shí)，設(shè)計(jì)走查也是必不可少的。

設(shè)計(jì)走查可大致分為界面布局、色彩視覺、交互操作、信息呈現(xiàn)四個(gè)部分，以 B 端后臺(tái)側(cè)邊欄為例，列舉一些高頻雷區(qū)：

界面布局：空間利用不合理，元素間距過大或過小，不同屏幕尺寸與分辨率的適配問題。

色彩視覺：色彩過多頁(yè)面視覺雜亂，色彩對(duì)比度不足無法識(shí)別重要信息，色彩搭配不協(xié)調(diào)影響用戶視覺體驗(yàn)。

交互操作：不同的交互方式需要用戶適應(yīng)新的操作習(xí)慣，同一類型不同場(chǎng)景下的交互行為不一致，菜單操作區(qū)域過小或不明顯。

信息呈現(xiàn)：菜單層級(jí)過多或分類不清晰。重要信息不突出難以快速找到，內(nèi)容在不同環(huán)境下顯示錯(cuò)位。

三、設(shè)計(jì)系統(tǒng)核心要點(diǎn)

1. 原子化組件設(shè)計(jì)

原子化組件是基于原子設(shè)計(jì)理論的一種設(shè)計(jì)方法，指將界面設(shè)計(jì)和開發(fā)進(jìn)行高度模塊化和精細(xì)化拆分，其認(rèn)為界面是由一系列最小的不可再分的原子元素組成，這些原子元素具有明確的功能和獨(dú)立樣式，我們可以通過組合這些原子元素來構(gòu)建復(fù)雜的界面。

按照原子設(shè)計(jì)理論，對(duì)界面元素進(jìn)行劃分，可分為原子（Atoms）、分子（Molecules）、組織（Organisms）、模板（Templates）、頁(yè)面（Pages）。

原子：構(gòu)成界面不可再拆解的最基本元素，具有單一功能和明確樣式，比如圖標(biāo)、文字、顏色。

分子：由一個(gè)或多個(gè)原子組成，有具體功能的組件，比如導(dǎo)航欄。

組織：由分子或原子組合成的復(fù)雜組件，比如登錄注冊(cè)流程。

模板：由原子、分子、組織組合而成，形成頁(yè)面的基本結(jié)構(gòu)，不包含具體的內(nèi)容數(shù)據(jù)，比如導(dǎo)航欄、側(cè)邊欄。

頁(yè)面：在模板的基礎(chǔ)上，填充具體的內(nèi)容和數(shù)據(jù)后形成完整的頁(yè)面，是用戶最終看到的交互實(shí)際頁(yè)面，比如個(gè)人頁(yè)面。

原子化組件構(gòu)建法則是一種將界面設(shè)計(jì)和開發(fā)分解成最小可復(fù)用單元的方法。

常見的原子化組件構(gòu)建法則：?jiǎn)我宦氊?zé)、高內(nèi)聚性、低耦合性、可復(fù)用性、可組合性、可維護(hù)性、語義化、遵循設(shè)計(jì)規(guī)范。

知識(shí)點(diǎn)：

組件化設(shè)計(jì)指將界面劃分為多個(gè)獨(dú)立可復(fù)用的組件，組件具有獨(dú)有的功能與樣式，且可以獨(dú)立開發(fā)、測(cè)試與維護(hù)。原子化組件是組件化設(shè)計(jì)的細(xì)化，組件化設(shè)計(jì)涵蓋的范圍更廣。

原子設(shè)計(jì) Atomic Design 是由 Brad Frost 提出的界面設(shè)計(jì)方法論，它將界面設(shè)計(jì)分解為不同層次的組件，從簡(jiǎn)單到復(fù)雜逐步構(gòu)建出完整的界面，以提高設(shè)計(jì)的效率、一致性和可維護(hù)性。

Brad Frost 官網(wǎng)： https://bradfrost.com/Brad Frost

演講視頻： https://vimeo.com/109130093?&signup=true#_=_

原子設(shè)計(jì)模式實(shí)驗(yàn)室： https://patternlab.io/

2. 自動(dòng)化布局

在設(shè)計(jì)系統(tǒng)中，自動(dòng)化布局（Auto Layout）是一種通過約束和規(guī)則自動(dòng)管理界面元素位置與尺寸的技術(shù)，可實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)，適配不同屏幕尺寸和設(shè)備。

前段時(shí)間，Sketch 發(fā)布新功能，終于支持自動(dòng)化布局啦。

像 Figma、MasterGo、即時(shí)設(shè)計(jì)這類在線工具都是一直支持自動(dòng)化布局功能的，將元素編組后啟用 Auto Layout，通過設(shè)置 “間距”“排列方式”“彈性尺寸” 實(shí)現(xiàn)動(dòng)態(tài)布局。

其嵌套邏輯可以簡(jiǎn)單理解為：先為單個(gè)元素創(chuàng)建自動(dòng)布局（比如按鈕），再將多個(gè)按鈕放入父級(jí)自動(dòng)布局（比如按鈕組），以實(shí)現(xiàn)層級(jí)化約束。

具體的自動(dòng)化布局約束，例如水平排列、垂直排列、換行排列、水平間距、左右間距、上下間距，該如何設(shè)置或許是新手遇到的較大的問題。這里有個(gè)小妙招，就是先設(shè)想一下增加或減少內(nèi)容的時(shí)候，希望頁(yè)面如何變化。或者先創(chuàng)建固定尺寸的容器，然后在容器上添加自動(dòng)布局。

舉個(gè)例子：我希望我的按鈕固定高度，寬度隨著按鈕文案變化，這時(shí)候就可以設(shè)置按鈕高度固定，設(shè)定左右間距數(shù)值，水平方向選擇適應(yīng)內(nèi)容。同理，整體頁(yè)面的自動(dòng)布局也是一樣的。

3. 變體(Variants)

在設(shè)計(jì)系統(tǒng)中，變體指的是基于同一基礎(chǔ)組件或元素，通過調(diào)整特定屬性（如尺寸、顏色、狀態(tài)、樣式等）形成的不同表現(xiàn)形式。它們既能保持核心功能的一致性，又能滿足多樣化的使用場(chǎng)景需求，是提升設(shè)計(jì)系統(tǒng)靈活性和復(fù)用性的關(guān)鍵機(jī)制。

舉個(gè)例子：變體=籃子，組件或元素=籃子里的蛋。我想要什么品種什么顏色的蛋，直接從籃子里挑選就可以了呀。

變體的核心作用：

統(tǒng)一與靈活并存：通過預(yù)設(shè)規(guī)則管理變體，避免設(shè)計(jì)混亂，同時(shí)支持場(chǎng)景化適配。

提升效率：減少重復(fù)設(shè)計(jì)，使用時(shí)可直接調(diào)用不同變體參數(shù)，而非重新構(gòu)建組件。

變體的設(shè)計(jì)原則：

一致性：所有變體需遵循設(shè)計(jì)系統(tǒng)的基礎(chǔ)規(guī)范（如間距、字體、圓角等）。

可維護(hù)性：通過組件庫(kù)工具集中管理變體參數(shù)，便于后續(xù)統(tǒng)一更新。

場(chǎng)景導(dǎo)向：變體需對(duì)應(yīng)真實(shí)使用場(chǎng)景（如不同設(shè)備、用戶角色、業(yè)務(wù)流程），避免無意義的冗余設(shè)計(jì)，不然到時(shí)候只會(huì)成為一個(gè)龐大的垃圾。

四、標(biāo)桿解析：大廠設(shè)計(jì)系統(tǒng)導(dǎo)航設(shè)計(jì)

1. Arco Design System（2.5.2）

基本資料

官網(wǎng)鏈接： https://www.arco.design/react/components/menu

組件所在分類與命名：導(dǎo)航-Menu

菜單包含內(nèi)容：頂部導(dǎo)航菜單、深色模式導(dǎo)航、縮起內(nèi)嵌菜單、內(nèi)嵌菜單、不同大小菜單、懸浮菜單、懸浮按鈕菜單。

不同大小菜單寬度限制：160-400px

基本組件

menu-icon/fold（菜單-圖標(biāo)/折疊）、menu-icon/unfold（菜單-圖標(biāo)/展開）
menu-icon/menu-submenu-arrow-down（菜單-圖標(biāo)/菜單-子菜單-箭頭-向下）、menu-icon/menu-submenu-arrow-up（菜單-圖標(biāo)/菜單-子菜單-箭頭-向上）、menu-icon/menu-submenu-arrow- right（菜單-圖標(biāo)/菜單-子菜單-箭頭-向右）

變體組件

vertical-menu-item/Put away（垂直菜單項(xiàng)/收起）→組件屬性：懸停、選中、禁用；屬性值：false、true

vertical-menu-item/1st-level（垂直菜單項(xiàng)/1 級(jí)）→組件屬性：選中、懸停、子菜單、展開、數(shù)量、分組、替換文本

.vertical-menu-item/group（垂直菜單項(xiàng)/組）→組件屬性：懸停、選中、禁用、替換文本

vertical-menu-item/2rd-level（垂直菜單項(xiàng)/2 級(jí)）→組件屬性：選中、懸停、禁用、分組、數(shù)量、替換文本

pop-menu-item/1st-level（彈出菜單項(xiàng)/1 級(jí)）→組件屬性：選中、懸停、子菜單、展開、數(shù)量、分組、替換文本

.pop-menu-item/group（.pop 菜單項(xiàng)/組）→組件屬性：懸停、選中、禁用、替換文本

pop-menu-item/2nd-level（彈出菜單項(xiàng)/2 級(jí)）→組件屬性：選中、懸停、分組、數(shù)量、替換文本

menu（菜單）→組件屬性：類型、數(shù)量、收起；類型：垂直（指?jìng)?cè)邊導(dǎo)航）、懸浮（指?jìng)?cè)邊導(dǎo)航的折疊icon）、水平（指水平導(dǎo)航）

設(shè)計(jì)邏輯

側(cè)邊導(dǎo)航欄所包含的元素有菜單、子菜單、圖標(biāo)、文本，整體的狀態(tài)包含垂直菜單展開狀態(tài)與折疊狀態(tài)，菜單的狀態(tài)包含默認(rèn)、懸停、選中、禁用。

除去以上必備內(nèi)容，部分產(chǎn)品也會(huì)有不同風(fēng)格或定制皮膚，例如暗夜模式、淺色模式。

側(cè)邊導(dǎo)航欄通常承載 2-3 級(jí)導(dǎo)航，用于展示主要功能模塊。若內(nèi)容較多，為避免將所有功能平鋪，需要對(duì)內(nèi)容進(jìn)行邏輯分組，例如將用戶管理、權(quán)限管理等組合為系統(tǒng)管理。

一級(jí)導(dǎo)航欄普遍為圖標(biāo)與文字組合，二級(jí)導(dǎo)航欄普遍為文字縮緊顯示，三級(jí)導(dǎo)航欄普遍為進(jìn)一步縮進(jìn)，但目前我看到的使用三級(jí)導(dǎo)航欄的產(chǎn)品較少。

在側(cè)邊導(dǎo)航欄的頁(yè)面設(shè)計(jì)時(shí)，導(dǎo)航欄內(nèi)容較多時(shí)也可以使用分割線或空白區(qū)域區(qū)分不同功能模塊，對(duì)于重要的菜單也可以置頂顯示。

2. Ant Design 5.0

基本資料

「設(shè)計(jì)」

官網(wǎng)鏈接： https://ant-design.antgroup.com/docs/spec/navigation-cn

所在分類與命名：設(shè)計(jì)模式→全局規(guī)則→導(dǎo)航

垂直導(dǎo)航較橫向的導(dǎo)航更靈活，易于向下擴(kuò)展， 且允許的標(biāo)簽長(zhǎng)度較長(zhǎng)。類目數(shù)量不限，可配合滾動(dòng)條使用，適合信息層級(jí)多、操作切換頻率高的管理性質(zhì)的應(yīng)用。

所在分類與命名：設(shè)計(jì)模式-探索→全局規(guī)則→導(dǎo)航

很多菜單時(shí)使用，建議菜單多于 6 項(xiàng)時(shí)使用；可以承載多個(gè)層級(jí)，但建議 1-3 個(gè)層級(jí)；企業(yè)級(jí)產(chǎn)品推薦使用側(cè)欄導(dǎo)航，其可見性更好易于掃讀，各菜單重要性受菜單排列順序影響較小。

「組件」

官網(wǎng)鏈接： https://ant-design.antgroup.com/components/layout-cn

組件所在分類與命名：布局-Layout 布局

包含內(nèi)容：頂部導(dǎo)航菜單、深色模式導(dǎo)航、縮起內(nèi)嵌菜單、內(nèi)嵌菜單、不同大小菜單、懸浮菜單、懸浮按鈕菜單。

設(shè)計(jì)規(guī)則：

1. 一級(jí)導(dǎo)航項(xiàng)偏左靠近 logo 放置，輔助菜單偏右放置。
2. 頂部導(dǎo)航（大部分系統(tǒng)）：一級(jí)導(dǎo)航高度 64px，二級(jí)導(dǎo)航 48px。
3. 頂部導(dǎo)航（展示類頁(yè)面）：一級(jí)導(dǎo)航高度 80px，二級(jí)導(dǎo)航 56px。
4. 頂部導(dǎo)航高度的范圍計(jì)算公式為：48+8n。
5. 側(cè)邊導(dǎo)航寬度的范圍計(jì)算公式：200+8n。

視覺：

12px、14px 是導(dǎo)航的標(biāo)準(zhǔn)字號(hào)，14 號(hào)字體用在一、二級(jí)導(dǎo)航中。字號(hào)可以考慮導(dǎo)航項(xiàng)的等級(jí)做相應(yīng)選擇。

組件概述：

Sider：側(cè)邊欄，自帶默認(rèn)樣式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。

簡(jiǎn)介

側(cè)邊兩列式布局。頁(yè)面橫向空間有限時(shí)，側(cè)邊導(dǎo)航可收起。

側(cè)邊導(dǎo)航在頁(yè)面布局上采用的是左右的結(jié)構(gòu)，一般主導(dǎo)航放置于頁(yè)面的左側(cè)固定位置，輔助菜單放置于工作區(qū)頂部。內(nèi)容根據(jù)瀏覽器終端進(jìn)行自適應(yīng)，能提高橫向空間的使用率，但是整個(gè)頁(yè)面排版不穩(wěn)定。側(cè)邊導(dǎo)航的模式層級(jí)擴(kuò)展性強(qiáng)，一、二、三級(jí)導(dǎo)航項(xiàng)目可以更為順暢且具關(guān)聯(lián)性的被展示，同時(shí)側(cè)邊導(dǎo)航可以固定，使得用戶在操作和瀏覽中可以快速的定位和切換當(dāng)前位置，有很高的操作效率。但這類導(dǎo)航橫向頁(yè)面內(nèi)容的空間會(huì)被犧牲一部分。

斷點(diǎn)寬度 breakpoint width：xs: '480px'，sm: '576px'，md: '768px'，lg: '992px'，xl: '1200px'，xxl: '1600px'

3. 命名規(guī)范深度解析

前綴法則

前綴用于標(biāo)識(shí)組件的使用場(chǎng)景、層級(jí)關(guān)系或復(fù)用范圍，常見于大型項(xiàng)目或組件庫(kù)中。例如 iOS/Android、App/Web/Base。

Base 前綴：作為原子組件的基礎(chǔ)組件，不依賴特定業(yè)務(wù)邏輯，且可跨項(xiàng)目復(fù)用。

Web 前綴：Web 端專用組件，依賴瀏覽器的特性，包含特定的 Web 端交互邏輯。

App 前綴：移動(dòng)端專用組件，依賴移動(dòng)設(shè)備特性，包含原生交互與觸控操作邏輯。iOS 前綴：移動(dòng)端蘋果設(shè)備專用組件，例如頂部狀態(tài)欄與底部 Home 條。

Android 前綴：移動(dòng)端安卓設(shè)備專用組件，例如頂部狀態(tài)欄。

語義化命名示例

語義化命名通過層級(jí)關(guān)系、功能描述和特性標(biāo)簽，清晰表達(dá)組件的用途與結(jié)構(gòu)。

命名結(jié)構(gòu)解析：Nav_Top_WithSearch=組件類型_位置或?qū)蛹?jí)_特性或修飾詞

常見組件類型關(guān)鍵詞：

Nav 導(dǎo)航，Header 頭部，F(xiàn)ooter 底部，Sidebar 側(cè)邊欄，Card 卡片，Modal 模態(tài)框，List 列表，F(xiàn)orm 表單，Button 按鈕。

常見位置或?qū)蛹?jí)關(guān)鍵詞：

Top 頂部，Bottom 底部，Left 左側(cè)，Right 右側(cè)，Main 主內(nèi)容區(qū)，Sub 次級(jí)/子級(jí)。

常見特性或修飾詞關(guān)鍵詞：

WithSearch 帶搜索功能，F(xiàn)ixed 固定定位，Collapsible 可折疊，Responsive 響應(yīng)式，Dropdown 下拉式，Gradient 漸變樣式

完整命名示例：

1. Nav_Top_WithSearch → 頂部帶搜索的導(dǎo)航欄
2. Nav_Side_Collapsible → 可折疊的側(cè)邊導(dǎo)航
3. Form_Login → 登錄表單
4. Form_Register_WithCaptcha → 帶驗(yàn)證碼的注冊(cè)表單
5. Card_Product_Horizontal → 水平布局的產(chǎn)品卡片
6. Card_News_WithImage → 帶圖片的新聞卡片
7. Layout_Main_Column → 主內(nèi)容區(qū)列布局
8. Layout_Footer_Fixed → 固定底部的布局

命名規(guī)范的深層原則

想要找到合適的命名規(guī)范，我們需要先了解幾個(gè)基本的命名方法。

① 駝峰命名法（CamelCase）

駝峰命名法起源于 Perl 語言。 在早期編程中，由于編程環(huán)境和工具的限制，開發(fā)者需要一種方式將多個(gè)單詞組成的變量或函數(shù)名寫在一起，且不使用空格或下劃線，駝峰命名法因其清晰緊湊的特點(diǎn)被廣泛接受。Perl 語言普遍使用大小寫混合格式，而 Larry Wall 等人所著的暢銷書《Programming Perl》封面圖片是一匹駱駝，“駝峰命名法”由此得名。后來，這種命名法被 Java 等語言廣泛采用，逐漸成為更通用的命名方法。格式：大駝峰（PascalCase）：也可稱為帕斯卡命名法，每個(gè)單詞首字母大寫，其余小寫（如 UserProfile、HttpRequest）。小駝峰（camelCase）：首個(gè)單詞小寫，后續(xù)單詞首字母大寫（如 userName、isLoading）。

② 蛇形命名法（Snake_case）

蛇形命名法的歷史可追溯至 20 世紀(jì) 60 到 70 年代，當(dāng)時(shí)編程語言（如 Fortran、C）和操作系統(tǒng)（如 UNIX）的文本處理能力有限，文件名和標(biāo)識(shí)符通常要求使用全小寫字母。為了區(qū)分由多個(gè)單詞組成的標(biāo)識(shí)符，開發(fā)者選擇用下劃線_連接單詞，形成了類似 “蛇形” 的視覺效果。也可以將其稱呼為下劃線命名法（Underscore Case）。

同時(shí)還要注意區(qū)分小寫蛇形（Lower Snake Case）與 SCREAMING_SNAKE_CASE。

小寫蛇形命名法強(qiáng)調(diào)所有字母小寫的變體（如 user_name），SCREAMING_SNAKE_CASE 特指全大寫的蛇形命名（如 MAX_LENGTH），常用于常量或環(huán)境變量，也被稱為 “大喊蛇形”。格式：

用下劃線_分隔（如 user_id、calculate_total）。

③ 烤串命名法（Kebab-case）

烤串命名法的歷史可追溯至 1990 年代 HTML 和 CSS 的誕生。由于 HTML 和 CSS 對(duì)大小寫不敏感（早期瀏覽器處理不一致），開發(fā)者傾向于使用全小寫字母，并通過連字符-連接多單詞標(biāo)識(shí)符。

也可以將其稱呼為連字符命名法（Hyphen Case）、脊柱命名法（Spinal Case）、破折號(hào)命名法（Dash Case）、Lisp Case。格式：?jiǎn)卧~全部小寫，用連字符-分隔（如 user-profile、error-message）。

④ 匈牙利命名法（Hungarian Notation）

匈牙利命名法由計(jì)算機(jī)科學(xué)家查爾斯?西蒙尼（Charles Simonyi）在 1970 年代開發(fā)，他后來成為微軟的首席程序員（Excel 和 Word 的早期開發(fā)者）。該命名法最初用于系統(tǒng)編程，尤其是在沒有強(qiáng)大類型系統(tǒng)的語言（如匯編、早期 C 語言）中，幫助開發(fā)者快速識(shí)別變量的實(shí)際類型或物理意義。也可以將其稱呼為 Apps Hungarian（應(yīng)用匈牙利命名法）、Systems Hungarian（系統(tǒng)匈牙利命名法）、反向匈牙利命名法（Reverse Hungarian Notation）、裝飾性匈牙利命名法（Hungarian Applied to Everything）。格式：在變量名前加類型前綴，后接描述性名稱（如 strUserName、intCount）。

以上四種命名法，目前較為常見是前三種命名法，那些大廠公開的設(shè)計(jì)規(guī)范文件中，多數(shù)使用蛇形命名法或者烤串命名法。不過我個(gè)人更喜歡使用蛇形命名法，視覺上更容易分辨不同的單詞。

除了命名方法，還需要注意的一些命名規(guī)范原則：

一致性原則：

1. 全局統(tǒng)一前綴和分隔符（如使用_或-）。
2. 相同類型組件使用相同前綴（如所有導(dǎo)航組件以 Nav_開頭）。

最小必要原則：

1. 避免冗余描述（如 Button_Component 中的 Component）。
2. 保持命名簡(jiǎn)潔，優(yōu)先使用行業(yè)通用縮寫（如 Ctrl 表示 Controller）。

可搜索性原則：

1. 命名包含足夠信息，使用者可通過關(guān)鍵詞快速定位組件。
2. 避免使用模糊詞匯（如 Widget、Util）。

與架構(gòu)對(duì)齊原則：

1. 命名應(yīng)反映目錄結(jié)構(gòu)（如 components/nav/Nav_Top_WithSearch）。
2. 設(shè)計(jì)系統(tǒng)中的組件名稱要保持一致。

五、實(shí)戰(zhàn)：從 0 到 1 構(gòu)建導(dǎo)航系統(tǒng)

1. 需求分析

動(dòng)手做之前，我們需要先了解到導(dǎo)航中需要呈現(xiàn)出來哪些內(nèi)容。換言之就是需要我們與業(yè)務(wù)部分溝通，梳理后臺(tái)涉及的核心業(yè)務(wù)場(chǎng)景，繪制業(yè)務(wù)流程圖（起碼在腦子里有個(gè)流程啊喂）。
其次，后臺(tái)中不同用戶角色可查看與操作的模塊不同。可以通過了解角色的工作目標(biāo)、操作習(xí)慣確定其權(quán)限范圍。

最后根據(jù)調(diào)研結(jié)果確定導(dǎo)航風(fēng)格與樣式，開始動(dòng)手。

2. 組件庫(kù)搭建

建立原子屬性庫(kù)

不同體量的組件庫(kù)所包含的具體內(nèi)容上會(huì)有所差異，但是大體上是差不太多的。

先創(chuàng)建基礎(chǔ)元素：

顏色 Colors

作為整個(gè)設(shè)計(jì)系統(tǒng)所使用的顏色，包括主色、輔助色、狀態(tài)色、文字色等，確保設(shè)計(jì)的一致性以及后續(xù)的可維護(hù)性。由于使用到語義 Token，所以需要由原子顏色開始，完善色階。在命名方面可以按個(gè)人習(xí)慣處理，但要注意識(shí)別性與維護(hù)性。

字體 Font

定義設(shè)計(jì)系統(tǒng)中所使用的字體族、字重、字號(hào)、行高等樣式規(guī)范，為文字排版提供統(tǒng)一的標(biāo)準(zhǔn)。

陰影 Shadows

定義設(shè)計(jì)系統(tǒng)中的陰影效果（非必選項(xiàng)），包括陰影的大小、顏色、偏移度、模糊程度等，為界面元素增加立體感。目前 B 端后臺(tái)中，彈窗較多使用陰影。

圓角

定義設(shè)計(jì)系統(tǒng)中按鈕、圖片、卡片等的圓角像素。不同的圓角所呈現(xiàn)的風(fēng)格不同。同時(shí)也需要注意多個(gè)卡片套用時(shí)，圓角數(shù)值使用同心圓更為美觀。

圖標(biāo) Icon

包含設(shè)計(jì)系統(tǒng)中所使用的圖標(biāo)庫(kù)，為界面提供清晰易懂的圖形符號(hào)，增強(qiáng)用戶的識(shí)別和操作體驗(yàn)。圖標(biāo)設(shè)計(jì)要統(tǒng)一風(fēng)格與大小粗細(xì)，且具有強(qiáng)識(shí)別性。

元素狀態(tài) Focus

定義用戶在交互過程中元素所呈現(xiàn)的樣式與效果，提高用戶的操作可加性與反饋。普遍 B 端導(dǎo)航包含未選中、點(diǎn)擊、選中、懸浮、禁用這五種狀態(tài)。

頁(yè)面布局

定義設(shè)計(jì)系統(tǒng)中的布局規(guī)則，統(tǒng)一頁(yè)面設(shè)計(jì)的間距，提高整體穩(wěn)定性與統(tǒng)一性。

組合分子組件

本步驟指將多個(gè)原子組件組合成具有功能的獨(dú)立模塊。

側(cè)邊導(dǎo)航欄大致可拆分為以下幾個(gè)類型的組件：

基礎(chǔ)導(dǎo)航組件

導(dǎo)航項(xiàng)（Navigation Item）：最核心的組件，通常以文字 + 圖標(biāo)組合的形式呈現(xiàn)，每個(gè)導(dǎo)航項(xiàng)對(duì)應(yīng)一個(gè)頁(yè)面、功能模塊或分類（如 “首頁(yè)”“數(shù)據(jù)中心”“設(shè)置”）。可支持交互狀態(tài)普遍包含默認(rèn)態(tài)、hover 態(tài)（懸停效果）、點(diǎn)擊態(tài)（懸停后按下效果）、激活態(tài)（當(dāng)前選中頁(yè)）、禁用態(tài)（不可點(diǎn)擊）。

分組標(biāo)題（Group Title）：用于對(duì)導(dǎo)航項(xiàng)進(jìn)行分類聚合，提升信息層級(jí)（如 “核心功能”“系統(tǒng)管理”“幫助中心”）。通常不具備點(diǎn)擊交互，僅作為視覺分隔和說明。菜單較少時(shí)不會(huì)使用分組標(biāo)題。

折疊 / 展開按鈕（Collapse/Expand Button）：當(dāng)導(dǎo)航項(xiàng)分組較多時(shí)，用于折疊或展開某一組導(dǎo)航，節(jié)省空間。圖標(biāo)多為箭頭，點(diǎn)擊后切換分組的顯示狀態(tài)。

輔助功能組件

搜索框（Search Box）：用于快速檢索導(dǎo)航項(xiàng)或全局內(nèi)容，尤其適用于導(dǎo)航項(xiàng)數(shù)量較多的場(chǎng)景（如大型管理系統(tǒng)）。通常包含輸入框和搜索圖標(biāo)，支持實(shí)時(shí)聯(lián)想或回車搜索。
用戶信息區(qū)（User Profile）：展示當(dāng)前登錄用戶的頭像、用戶名、角色等信息，常位于側(cè)邊欄頂部或底部。

可點(diǎn)擊展開下拉菜單，包含 “個(gè)人中心”“退出登錄” 等操作。

快捷操作按鈕（Quick Action Button）：提供高頻功能的直達(dá)入口，如 “新建”“消息通知”“幫助” 等，通常以圖標(biāo)按鈕或懸浮按鈕形式呈現(xiàn)。

交互與狀態(tài)組件

分隔線（Divider）：用于區(qū)分不同功能模塊或?qū)Ш椒纸M，增強(qiáng)視覺層次感（水平或垂直分隔線）。

徽章/小紅點(diǎn)（Badge）：附加在導(dǎo)航項(xiàng)旁，顯示未讀消息數(shù)、更新提示等（如 “消息” 旁的紅色數(shù)字 “5”）。

加載狀態(tài)（Loading Indicator）：當(dāng)導(dǎo)航項(xiàng)內(nèi)容需要異步加載時(shí)，顯示骨架屏或旋轉(zhuǎn)圖標(biāo)，提升用戶等待體驗(yàn)。

適配性組件

側(cè)邊欄切換按鈕（Toggle Button）：用于在移動(dòng)端或窄屏模式下隱藏 / 顯示側(cè)邊欄（如漢堡菜單按鈕），提升空間利用率。

響應(yīng)式折疊菜單：在屏幕寬度較小時(shí)，自動(dòng)將多級(jí)導(dǎo)航折疊為下拉菜單或抽屜式導(dǎo)航，保證交互流暢性。

構(gòu)建響應(yīng)式模板

建立好以上組件，接下來就可以組合組件構(gòu)建側(cè)邊導(dǎo)航欄的模板啦。
根據(jù)不同的布局方式，可將其分為以下幾種模板樣式：

按屏幕尺寸適配的核心模板

a.桌面端（≥1024px）：全展示模式

布局特點(diǎn)：固定或可折疊的寬側(cè)邊欄，完整顯示導(dǎo)航項(xiàng)文字、圖標(biāo)、分組標(biāo)題等所有元素。

核心組件：完整導(dǎo)航項(xiàng)（圖標(biāo) + 文字）、分組標(biāo)題 + 折疊按鈕、用戶信息區(qū)、搜索框（可選）

交互邏輯：支持 hover 展開子菜單、點(diǎn)擊切換激活態(tài)，可手動(dòng)折疊為 “僅圖標(biāo)模式”（節(jié)省橫向空間）。

b.平板端（768px-1023px）：精簡(jiǎn)展示模式

布局特點(diǎn)：側(cè)邊欄寬度縮小，優(yōu)先保留核心導(dǎo)航項(xiàng)，次要功能折疊或隱藏。

核心優(yōu)化：部分分組標(biāo)題隱藏，僅通過圖標(biāo)區(qū)分功能；子菜單默認(rèn)折疊，點(diǎn)擊父項(xiàng)才展開（避免占滿屏幕）；可通過滑動(dòng)手勢(shì)收起 / 呼出側(cè)邊欄。

c.移動(dòng)端（≤767px）：抽屜式 / 懸浮式模式

布局特點(diǎn)：默認(rèn)隱藏側(cè)邊欄，通過觸發(fā)按鈕（如 “漢堡菜單”）呼出，覆蓋在內(nèi)容區(qū)上方。或?qū)?cè)邊導(dǎo)航欄改為固定底部導(dǎo)航欄。

核心設(shè)計(jì)：全屏抽屜式導(dǎo)航（占滿屏幕高度，寬度約 80%），避免手指操作誤觸；導(dǎo)航項(xiàng)簡(jiǎn)化為 “大圖標(biāo) + 短文字”，增強(qiáng)觸控友好性；頂部添加 “關(guān)閉按鈕”（×），支持右滑手勢(shì)關(guān)閉；次要功能（如搜索、用戶信息）移至導(dǎo)航頂部，便于快速訪問。

按交互方式分類的響應(yīng)式模板

a.固定 + 折疊切換模板

適用場(chǎng)景：桌面端為主，需兼顧窄屏設(shè)備的管理系統(tǒng)。
響應(yīng)邏輯：

大屏：固定寬側(cè)邊欄（如 240px），顯示完整內(nèi)容。

中屏：點(diǎn)擊 “折疊按鈕” 后縮為 “圖標(biāo)模式”（如 80px），hover 時(shí)彈出完整文字提示。

小屏：自動(dòng)隱藏，點(diǎn)擊頂部漢堡按鈕呼出抽屜式導(dǎo)航。

b.自適應(yīng)寬度模板

適用場(chǎng)景：內(nèi)容型網(wǎng)站（如博客、文檔平臺(tái)），側(cè)邊欄包含多級(jí)分類。

響應(yīng)邏輯：

1. 隨屏幕寬度自動(dòng)調(diào)整側(cè)邊欄寬度（如從 300px 逐漸縮至 200px）。
2. 當(dāng)寬度不足時(shí)，優(yōu)先隱藏文字，保留圖標(biāo) + 徽章（如消息通知的數(shù)字）。
3. 超小屏?xí)r轉(zhuǎn)為底部彈出式導(dǎo)航（避免遮擋內(nèi)容）。

c.混合式導(dǎo)航模板

適用場(chǎng)景：功能復(fù)雜的 App（如電商后臺(tái)、CRM 系統(tǒng)），需平衡導(dǎo)航完整性和屏幕空間。
響應(yīng)邏輯：

桌面端：左側(cè)固定側(cè)邊欄 + 頂部快捷導(dǎo)航。

平板端：左側(cè)可隱藏側(cè)邊欄 + 底部標(biāo)簽欄（高頻功能）。

移動(dòng)端：抽屜式側(cè)邊欄 + 底部 Tab 欄（核心功能入口），兩者聯(lián)動(dòng)（如點(diǎn)擊 Tab 欄 “我的”，側(cè)邊欄同步定位到個(gè)人中心）。

響應(yīng)式模板的設(shè)計(jì)要點(diǎn)：

1. 優(yōu)先級(jí)排序：移動(dòng)端優(yōu)先保留高頻核心功能（如 “首頁(yè)”“消息”“我的”），次要功能（如 “幫助中心”）可放入 “更多” 菜單。
2. 交互一致性：不同設(shè)備上的導(dǎo)航項(xiàng)點(diǎn)擊、切換邏輯保持統(tǒng)一（如激活態(tài)樣式一致），降低用戶學(xué)習(xí)成本。
3. 過渡動(dòng)畫：側(cè)邊欄展開 / 收起時(shí)添加平滑動(dòng)畫（如滑動(dòng)、淡入淡出），避免突兀的界面跳轉(zhuǎn)。

六、結(jié)語

這篇文章拖拖拉拉的寫了兩個(gè)月...在找資料的過程中，發(fā)現(xiàn)了一個(gè)新的知識(shí)點(diǎn)「亞原子設(shè)計(jì)」，是由原子設(shè)計(jì) Atomic Design 的作者 Brad Frost 提出的，之后會(huì)去認(rèn)真了解一下。

and，導(dǎo)航相關(guān)的知識(shí)點(diǎn)還有蠻多的沒學(xué)明白，就沒得寫筆記了...

最后，end.

大概亞原子設(shè)計(jì)=亞原子語義設(shè)計(jì)=語義設(shè)計(jì)=語義 Token

亞原子微粒指原子的一部分，同時(shí)還有一個(gè)理論叫“亞原子語義學(xué)”。