亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

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

1. 開端

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

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

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

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

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

2. 問題本質(zhì)

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

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

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

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

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

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

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

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

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

?知識點：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.1. 動態(tài)導(dǎo)航欄

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

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

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

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

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

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

2.2. 設(shè)計走查

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

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

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

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

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

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

三、設(shè)計系統(tǒng)核心要點

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

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

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

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

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

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

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

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

原子化組件構(gòu)建法則是一種將界面設(shè)計和開發(fā)分解成最小可復(fù)用單元的方法。常見的原子化組件構(gòu)建法則：單一職責(zé)、高內(nèi)聚性、低耦合性、可復(fù)用性、可組合性、可維護(hù)性、語義化、遵循設(shè)計規(guī)范。

?知識點：

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

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

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

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

原子設(shè)計模式實驗室：https://patternlab.io/

2. 自動化布局

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

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

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

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

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

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

3. 變體(Variants)

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

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

變體的核心作用：

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

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

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

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

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

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

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

1. Arco Design System（2.5.2）

1.1. 基本資料

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

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

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

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

1.2. 基本組件

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)/菜單-子菜單-箭頭-向右）

1.3. 變體組件

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

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

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

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

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

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

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

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

1.4. 設(shè)計邏輯

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

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

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

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

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

2. Ant Design 5.0

2.1. 基本資料

【設(shè)計】

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

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

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

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

很多菜單時使用，建議菜單多于 6 項時使用；

可以承載多個層級，但建議 1-3 個層級；

企業(yè)級產(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è)計規(guī)則：

一級導(dǎo)航項偏左靠近 logo 放置，輔助菜單偏右放置。

頂部導(dǎo)航（大部分系統(tǒng)）：一級導(dǎo)航高度 64px，二級導(dǎo)航 48px。

頂部導(dǎo)航（展示類頁面）：一級導(dǎo)航高度 80px，二級導(dǎo)航 56px。

頂部導(dǎo)航高度的范圍計算公式為：48+8n。

側(cè)邊導(dǎo)航寬度的范圍計算公式：200+8n。

視覺：

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

組件概述：

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

2.2. 簡介

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

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

斷點寬度 breakpoint width：xs: '480px',sm: '576px',md: '768px',lg: '992px',xl: '1200px',xxl: '1600px'

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

3.1. 前綴法則

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

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

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

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

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

3.2. 語義化命名示例

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

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

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

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

常見位置或?qū)蛹夑P(guān)鍵詞：

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

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

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

完整命名示例：

Nav_Top_WithSearch → 頂部帶搜索的導(dǎo)航欄

Nav_Side_Collapsible → 可折疊的側(cè)邊導(dǎo)航

Form_Login → 登錄表單

Form_Register_WithCaptcha → 帶驗證碼的注冊表單

Card_Product_Horizontal → 水平布局的產(chǎn)品卡片

Card_News_WithImage → 帶圖片的新聞卡片

 Layout_Main_Column → 主內(nèi)容區(qū)列布局 

Layout_Footer_Fixed → 固定底部的布局

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

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

1.駝峰命名法（CamelCase）

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

格式：
大駝峰（PascalCase）：也可稱為帕斯卡命名法，每個單詞首字母大寫，其余小寫（如UserProfile、HttpRequest）。
小駝峰（camelCase）：首個單詞小寫，后續(xù)單詞首字母大寫（如userName、isLoading）。

2.蛇形命名法（Snake_case）

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

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

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

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

3.烤串命名法（Kebab-case）

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

也可以將其稱呼為連字符命名法（Hyphen Case）、脊柱命名法（Spinal Case）、破折號命名法（Dash Case）、Lisp Case。

格式：單詞全部小寫，用連字符-分隔（如user-profile、error-message）。

4.匈牙利命名法（Hungarian Notation）

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

格式：在變量名前加類型前綴，后接描述性名稱（如strUserName、intCount）。

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

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

一致性原則：

全局統(tǒng)一前綴和分隔符（如使用_或-）。

相同類型組件使用相同前綴（如所有導(dǎo)航組件以Nav_開頭）。

最小必要原則：

避免冗余描述（如Button_Component中的Component）。

保持命名簡潔，優(yōu)先使用行業(yè)通用縮寫（如Ctrl表示Controller）。

可搜索性原則：

命名包含足夠信息，使用者可通過關(guān)鍵詞快速定位組件。

避免使用模糊詞匯（如Widget、Util）。

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

命名應(yīng)反映目錄結(jié)構(gòu)（如components/nav/Nav_Top_WithSearch）。

設(shè)計系統(tǒng)中的組件名稱要保持一致。

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

1. 需求分析

動手做之前，我們需要先了解到導(dǎo)航中需要呈現(xiàn)出來哪些內(nèi)容。換言之就是需要我們與業(yè)務(wù)部分溝通，梳理后臺涉及的核心業(yè)務(wù)場景，繪制業(yè)務(wù)流程圖（起碼在腦子里有個流程啊喂）。

其次，后臺中不同用戶角色可查看與操作的模塊不同?？梢酝ㄟ^了解角色的工作目標(biāo)、操作習(xí)慣確定其權(quán)限范圍。

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

2. 組件庫搭建

2.1. 建立原子屬性庫

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

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

顏色Colors

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

字體Font

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

陰影Shadows

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

圓角

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

圖標(biāo)Icon

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

元素狀態(tài)Focus

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

頁面布局

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

2.2. 組合分子組件

本步驟指將多個原子組件組合成具有功能的獨立模塊。

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

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

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

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

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

2.輔助功能組件

搜索框（Search Box）：用于快速檢索導(dǎo)航項或全局內(nèi)容，尤其適用于導(dǎo)航項數(shù)量較多的場景（如大型管理系統(tǒng)）。通常包含輸入框和搜索圖標(biāo)，支持實時聯(lián)想或回車搜索。

用戶信息區(qū)（User Profile）：展示當(dāng)前登錄用戶的頭像、用戶名、角色等信息，常位于側(cè)邊欄頂部或底部。

可點擊展開下拉菜單，包含 “個人中心”“退出登錄” 等操作。

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

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

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

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

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

4.適配性組件

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

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

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

建立好以上組件，接下來就可以組合組件構(gòu)建側(cè)邊導(dǎo)航欄的模板啦。

根據(jù)不同的布局方式，可將其分為以下幾種模板樣式：

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

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

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

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

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

b.平板端（768px-1023px）：精簡展示模式

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

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

c.移動端（≤767px）：抽屜式 / 懸浮式模式

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

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

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

a.固定 + 折疊切換模板

適用場景：桌面端為主，需兼顧窄屏設(shè)備的管理系統(tǒng)。

響應(yīng)邏輯：

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

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

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

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

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

響應(yīng)邏輯：

隨屏幕寬度自動調(diào)整側(cè)邊欄寬度（如從 300px 逐漸縮至 200px）。

當(dāng)寬度不足時，優(yōu)先隱藏文字，保留圖標(biāo) + 徽章（如消息通知的數(shù)字）。

超小屏?xí)r轉(zhuǎn)為底部彈出式導(dǎo)航（避免遮擋內(nèi)容）。

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

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

響應(yīng)邏輯：

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

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

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

?響應(yīng)式模板的設(shè)計要點：

優(yōu)先級排序：移動端優(yōu)先保留高頻核心功能（如 “首頁”“消息”“我的”），次要功能（如 “幫助中心”）可放入 “更多” 菜單。

交互一致性：不同設(shè)備上的導(dǎo)航項點擊、切換邏輯保持統(tǒng)一（如激活態(tài)樣式一致），降低用戶學(xué)習(xí)成本。

過渡動畫：側(cè)邊欄展開 / 收起時添加平滑動畫（如滑動、淡入淡出），避免突兀的界面跳轉(zhuǎn)。

六、結(jié)語

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

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

最后，end.

————補充————

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

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

Powered by Froala Editor