設(shè)計系統(tǒng)中的文件怎么命名？ (BEM) 命名，和原子設(shè)計命名法

通常在設(shè)計系統(tǒng)建設(shè)過程中，通用的文件命名格式以快速找到所需的的組件和所處的位置很重要，這也是一種基本的規(guī)范，允許您以您和您的團隊可以高效工作的方式命名您的文件，特別是當(dāng)你擁有大量所需UI組件（文件、層、文件夾、屏幕、對象......）時，這有助于快速定位到他們，下面一起看看在設(shè)計系統(tǒng)建設(shè)中的文件怎么命名的？命名規(guī)則是怎樣的？

命名約定的結(jié)構(gòu)
合理規(guī)劃設(shè)計組件的命名結(jié)構(gòu)很重要，不僅有助于在大量實體之間快速定位，還可以讓您了解它們之間的關(guān)系。在定義命名約定時，其中涉及兩件事：
1、對UI組件進行分組
2、命名單個組件

基于原子設(shè)計的理念，給出如下的命名結(jié)構(gòu)：

結(jié)構(gòu)：序號_UI組件名稱_版本（如有）
01_UI組件名稱
02_UI組件名稱/分子
03_UI組件名稱/分子/原子

示例：
01_留言卡
02_留言卡/按鈕-標(biāo)準(zhǔn)
03_留言卡/按鈕-標(biāo)準(zhǔn)/顏色、排版

 (BEM) 模型：
BEM 代表塊、元素和修飾符。在設(shè)計和開發(fā)中廣泛用于命名組件和元素。

讓我們看一下BEM 結(jié)構(gòu)：
B （Block）代表塊，稱為模式或組件，自包含元素，如導(dǎo)航、菜單......等元素，或任何獨立實體，如按鈕。
塊元素本身就有意義。
命名：組件/標(biāo)題 
比如：導(dǎo)航菜單， 命名為 “Header”,   底部， 命名為 “Footer”


E （Element）代表元素，指的是構(gòu)成組件的單個實體。
命名：組件/標(biāo)題/h1

M （Modifier）代表修飾符， 是指允許在組件中進行更改的元素。
命名：組件/按鈕/主要

1.命名設(shè)計中的組件
命名約定使您的UI設(shè)計界面更易于被不同崗位的同事認(rèn)識，UI設(shè)計系統(tǒng)也更易于理解，在任何原型制作工具中，都可以使用相同的父子約定。

按照以下步驟命名設(shè)計中的組件：

顏色：
結(jié)構(gòu)：顏色/顏色名稱/用途/變化
示例：color/Deep blue/primary/default

排版：
結(jié)構(gòu)：類別/類型/大小/樣式/對齊方式
示例： mobile/para/16px/bold/right；

圖像：
結(jié)構(gòu)：圖標(biāo)/大小/圖標(biāo)名稱/圖標(biāo)狀態(tài)
示例：Icon/20px/Delete/Active

2.組件的命名約定
系統(tǒng)中的藍色主按鈕應(yīng)命名為 button/primary/default，但不要提及其顏色。當(dāng)默認(rèn)顏色發(fā)生變化時，此命名結(jié)構(gòu)可幫助您改進組件。
結(jié)構(gòu)：組件/類型/元素/變體b．
例子：nav/header/mobile/dark;   cards/media-block/complex/web

3. 設(shè)計模式的命名約定
結(jié)構(gòu)：模式/模式類型/狀態(tài)
示例：Patterns/table/empty

4.開始創(chuàng)建屏幕中的所有組件和設(shè)計模式，并根據(jù)定義的命名約定進行命名

BEM 是在設(shè)計中命名組件的最佳方式，因為它有助于可擴展和自適應(yīng)命名，但是采用原子設(shè)計的命名方法也仍然用于對組件進行命名，根據(jù)個人所需和項目情況選擇。

實踐總結(jié)：
1、在項目開始之前，規(guī)劃好命名規(guī)則和約定
2、規(guī)劃具有與特定的文件夾、文件或組件相關(guān)的命名
3、避免文件、文件夾和組件的長名稱
4、通過在開頭給出阿拉伯?dāng)?shù)字（01_Wireframes、02_Visuals），確保按照您遵循的過程對文件夾中的所有文件進行排序
5、擁有所有文件和文件夾的版本名稱，并將所有相似類型的文件收集到一個文件夾中
6、確保在設(shè)計工具上的屏幕之前確定圖層的命名規(guī)則
7、在創(chuàng)建圖層、元素和組件時一定要命名它們
8、使用設(shè)計和開發(fā)團隊看得懂和理解的名稱。
9、用連字符或正斜杠分隔單詞