原文引自 medium 上的一篇文章 Keeping Things Organized。該譯文并非完整原文，內(nèi)容已做刪減和調(diào)整，并加入了部分譯者觀點(diǎn)。
如何有條不紊地構(gòu)建及維護(hù)設(shè)計(jì)組件庫(kù)？這可不是個(gè)簡(jiǎn)單的問(wèn)題。面對(duì)此問(wèn)題，向開發(fā)同學(xué)們學(xué)習(xí)是個(gè)不錯(cuò)的選擇。無(wú)論是設(shè)計(jì)元素的命名，還是組件的「封裝」，設(shè)計(jì)同學(xué)們都能從程序開發(fā)的通用做法中汲取新思路。下面，讓我們一起來(lái)了解讓設(shè)計(jì)組件庫(kù)井井有條的方法。
本期提綱：
- 原子設(shè)計(jì)
- 頁(yè)面結(jié)構(gòu)化
- 命名規(guī)范化
- 控件封裝
- Design Tokens
- 版本管理
構(gòu)建組件庫(kù)，最基本的思維模式即原子設(shè)計(jì)（Atomic Design）。其實(shí)，這個(gè)概念并不新鮮，開發(fā)同學(xué)也有類似的思維模式。
1. 基本概念
考察代碼是否有條理，最好從命名開始。BEM（Block Element Modifier）是一種前端開發(fā)所用的模塊化命名方法，它能使代碼的可讀性更高，也更便于協(xié)作。BEM 將事物分為 3 個(gè)層級(jí)來(lái)命名：
Block
一個(gè)有獨(dú)立意義的實(shí)體，對(duì)標(biāo)原子設(shè)計(jì)中的分子（molecules），如：
- header
- container
- menu
- chackbox
- input
命名方式為添加一個(gè)句號(hào)作為前綴，如：.block。
Element
Block 的一部分，沒(méi)有獨(dú)立意義，對(duì)標(biāo)原子設(shè)計(jì)中的原子（atoms），如：
- menu item
- list item
- checkbox caption
- header title
命名方式為在 block 名后添加兩個(gè)下劃線，如：.block__elem。
Modifier
用來(lái)定義 block 或 element 的樣式、表現(xiàn)或狀態(tài)的元素，如：
- disabled
- highlighted
- checked
- fixed
- size big
- color yellow。
命名方式為在 block 或 element 后添加兩個(gè)破折號(hào)，如：
- .block–mod
- .block__elem–mod
- .block–color-black
- .block–color-red。
這里為熟悉前端的設(shè)計(jì)師舉一個(gè)實(shí)際案例，以了解如何用 BEM 來(lái)寫下圖所示的三個(gè)按鈕：
HTML
<button class="button"> Normal button </button> <button class="button button--state-success"> Success button </button> <button class="button button--state-danger"> Danger button </button>
CSS
.button {
display: inline-block;
border-radius: 3px;
padding: 7px 12px;
border: 1px solid #D5D5D5;
background-image: linear-gradient(#EEE, #DDD);
font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
color: #FFF;
background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
border-color: #4A993E;
}
.button--state-danger {
color: #900;
}
2. 具體實(shí)踐
設(shè)計(jì)同學(xué)不需要嚴(yán)格踐行開發(fā)同學(xué)的 BEM 命名方式，但其對(duì)頁(yè)面各元素的分類是值得參考的。
結(jié)構(gòu)化頁(yè)面的基本原則是：
- 方便檢索控件（Components）
- 方便編輯控件
- 清晰地傳達(dá)控件狀態(tài)
1. 基本概念
以 React 或 TypeScipt 為例，開發(fā)同學(xué)會(huì)讓每個(gè)控件都用一個(gè)文件夾來(lái)將其歸納，如：
src/components/Button/Button.tsx
2. 具體實(shí)踐
- 讓每個(gè)控件都用一個(gè)頁(yè)面（Page）來(lái)將其歸納
- 將控件按命名排序
- 用 emoji 來(lái)表示控件狀態(tài)
其中，「?」表示控件可用，「?」表示控件需謹(jǐn)慎使用，表示「?」控件不可用。
這樣做，不僅能方便在頁(yè)面列表中快速找到所需控件，還能對(duì)控件的狀態(tài)了然于胸。
命名的理想效果是，設(shè)計(jì)稿中的命名與代碼中的命名一一對(duì)應(yīng)。雖不能完全做到，但還是需以此為終極目標(biāo)。關(guān)于命名，我們需先了解一些開發(fā)同學(xué)會(huì)用到的命名方式。
1. 基本概念
部分開發(fā)同學(xué)會(huì)采用 PascalCase（也被稱為 UpperCamelCase）這一命名慣例。它要求每個(gè)單詞的首字母都大寫。實(shí)際上，類似常用的命名方式還有：
- lowercase
- camelCase
- kebab-case
- snake_case
但從輸入效率和可讀性綜合考慮下來(lái)，PascalCase 對(duì)設(shè)計(jì)師比較友好。
2. 具體實(shí)踐
- 以 PascalCase 為基本命名方法
- 用簡(jiǎn)化后的 BEM 來(lái)構(gòu)建大的命名結(jié)構(gòu)
下面以 Button 這一控件為例，以示意如何為設(shè)計(jì)元素命名：
普通元素
使用 PascalCase 命名：
[Element]
如案例中的 IconContainer。
需進(jìn)一步描述的元素
當(dāng)相同類型的元素同時(shí)存在時(shí)（如有好幾個(gè)文字圖層），我們可能需要更詳細(xì)的的描述來(lái)幫助我們來(lái)區(qū)分它們（如有的文字圖層用作標(biāo)題，而有的用作正文）。
這種情況下，需用破折號(hào)連接追加的描述（描述采用 lowercase）：
[Element]-[description]
如案例中的 Vector-min-width。
使用了自動(dòng)布局的 frame
將其中的元素類型進(jìn)行枚舉，用破折號(hào)連接，并用「-stack」結(jié)尾（只有首個(gè)元素用 PascalCase，其他部分均用 lowercase）：
[Element]-[element]-[element]-"stack"
如案例中的 Icons-string-loader-stack，就是一個(gè)包含了 icon、string、loader、stack 的使用了自動(dòng)布局的 frame。
值得注意的是，枚舉的元素類型數(shù)量不應(yīng)超過(guò) 3。超過(guò) 3 個(gè)類型時(shí)，則按具體情況選擇 3 個(gè)類型來(lái)枚舉。
未使用自動(dòng)布局的 frame
用「-container」結(jié)尾：
[Description]-"container"
如案例中的 Loader-container。
和命名類似，我們希望設(shè)計(jì)稿中的控件的邏輯結(jié)構(gòu)也能與代碼一一對(duì)應(yīng)。由此，我們需要運(yùn)用以下幾個(gè)開發(fā)同學(xué)常用的概念。
1. 基本概念
API
API 的全稱為 Application Programming Interface。簡(jiǎn)單來(lái)說(shuō)，API 就像餐廳的菜單。菜單提供了你可以點(diǎn)的菜及其描述。一旦點(diǎn)好菜，餐廳就會(huì)為你上這道菜。你不需要了解和參與這道菜的制作過(guò)程。
對(duì)于設(shè)計(jì)師來(lái)說(shuō)，一個(gè)控件就相當(dāng)于一個(gè) API。使用組件庫(kù)的設(shè)計(jì)師一般都不需要了解和參與這個(gè)控件的制作過(guò)程。如下圖所示的 Button 控件就相當(dāng)于一個(gè) API：
Properties & Values
對(duì)于設(shè)計(jì)師來(lái)說(shuō)，定義控件的各個(gè)變量即為 properties，而變量具體的值則為 values。
Boolean
Boolean 是變量的一種類型，包括 true 和 false 這 2 個(gè)值。在 Figma 的面板中表現(xiàn)為一個(gè)開關(guān)（switch）。
Enum
Enum 的全稱為 enumeration，也是變量的一種類型。它包括了一組被命名的值。在 Figma 的面板中表現(xiàn)為一組聚合在 popup 中的值。
2. 具體實(shí)踐
下面兩張圖分別是 Button 這一控件分別在設(shè)計(jì)稿、代碼中的 prorerties 的表現(xiàn)：
可以看到，設(shè)計(jì)稿最終還是沒(méi)有和代碼保持完全一致。但這些不一致都是有意義的，下面我們展開來(lái)看。
變量的合并
對(duì)于設(shè)計(jì)師，適當(dāng)合并變量能讓控件更易用。
如：代碼中的 primary 和 inverted 兩個(gè)變量，在設(shè)計(jì)稿中被合并成了 Appearance 一個(gè)變量。
變量和值的命名
在代碼中，變量命名遵循 camelCase，值命名則遵循 lowercase。而對(duì)于設(shè)計(jì)師， 句首字母大寫（Sentence case）可讀性更高。
如：代碼中的 iconPosition 變量，在設(shè)計(jì)稿中被命名為 Icon position；代碼中 size 變量及其值 small、medium，在設(shè)計(jì)稿分別被命名為 Size、Small、Medium。
控件的拆分
在代碼中，按鈕有無(wú)圖標(biāo)由 iconOnly 這一布爾（boolean）變量來(lái)控制。但因 Figma 的技術(shù)及性能限制，設(shè)計(jì)師最好將代碼中的 Button 這一控件，在設(shè)計(jì)稿中拆分為 Button 和 IconButton 兩個(gè)控件：
Design tokens 是存儲(chǔ)樣式值（如色值、字重）的載體。使用它，能簡(jiǎn)化設(shè)計(jì)系統(tǒng)的構(gòu)建和使用，更能推進(jìn)設(shè)計(jì)與代碼的統(tǒng)一。如下圖所示的案例中，F(xiàn)AB 按鈕的顏色在設(shè)計(jì)稿和代碼中，均被統(tǒng)一表述為：
md.fab.container.color
1. 基本概念
Tokens 分為 3 個(gè)類型：
- Reference tokens；
- System tokens；
- Component tokens。
下面，我們以 Material Design（后續(xù)均以 md 簡(jiǎn)述）為例來(lái)一一解析。
Reference Tokens
這是最基礎(chǔ)的一類 tokens。
其命名以 .ref. 開頭，指向一個(gè)靜態(tài)值，如：表示顏色的十六進(jìn)制代碼（#E8DEF8）、字重（Roboto Medium）。
System Tokens
這是一種具備「環(huán)境感知」能力的 tokens，也被稱作 alias tokens。
其命名以 .sys. 開頭，通常指向多個(gè) reference tokens。具體指向哪個(gè) reference token，將由上下文關(guān)系（如設(shè)備是否為全面屏、是否為深色模式）來(lái)決定。
下圖所示的案例中，md.sys.color.background 這一 system token 就會(huì)根據(jù)系統(tǒng)是否為深色模式來(lái)指向不同的 reference tokens：
Component Tokens
這是表達(dá)組成控件的元素、值（如元素內(nèi)標(biāo)題的字體、圖標(biāo)的的各個(gè)樣式，或控件的具體狀態(tài)）的 tokens。
其命名以 .comp. 開頭，通常指向 reference token 或 system token
2. 具體實(shí)踐
Design tokens 的概念，能幫助設(shè)計(jì)師更有條理地理解和整理顏色變量、圖層樣式、控件等。
在代碼中，tokens 的命名用「.」分隔。但在設(shè)計(jì)稿中，因軟件限制，需用「/」來(lái)分隔。
同時(shí)，無(wú)論是 Figma 還是 Sketch，樣式和控件通常均采用樹狀結(jié)構(gòu)來(lái)進(jìn)行管理。因此，我們常常會(huì)遇到如下圖所示的繁瑣結(jié)構(gòu)：
為清晰又方便地枚舉樣式 ，我們可以用類似于代碼的句式來(lái)描述。如上圖所示的這一組顏色樣式就可以通過(guò)以下句式來(lái)輕松表述：
["? Light theme" | "? Dark theme"] / ["Rest" | "Hover" | "Pressed" | "Active" | "Focus" | "Disabled"] / ["Foreground" | "Background" | "Border"]
1. 版本號(hào)
對(duì)于組件庫(kù)的版本號(hào)，可采用如下格式：
[Major].[Minor].[Patch]
按此格式，就可以寫出類似于「v 1.8.0」的版本號(hào)。其中，major 只有全面更新時(shí)才會(huì)更替，minor 一般指月度版本，patch 則為更小的周版本等。
2. 更新日志
更重要的是，我們需要在版本更新時(shí)向大家清晰傳達(dá)此次更新的具體內(nèi)容。因此，我們需在合適的位置維護(hù)好組件庫(kù)的更新日志（Changelog）。而更新日志也可以結(jié)構(gòu)化如下：
Teams Component Library Update: (TCL [date])-[V#] ? What’s New [Component name with link] component [Component name with link] component [Component name with link] component ? What’s Modified Bug fix for [Component name with link] Thing updated for [Component name with link] ?? What’s Moved to Graveyard Old [Component name with link] component Old [Component name with link] component Old [Component name with link] component
其中，對(duì)于棄用的組件或樣式，我們可按如下格式對(duì)其名稱進(jìn)行標(biāo)注：
[Current name] / "?? DEPRECATED MIGRATE TO NEW VERSION ?? "
誠(chéng)然，本文提到的很多方法都是比較個(gè)性化的，大家在實(shí)際的設(shè)計(jì)工作中可以依據(jù)自己所處的團(tuán)隊(duì)、所用的應(yīng)用等因素來(lái)進(jìn)行靈活地調(diào)節(jié)。畢竟，設(shè)計(jì)好自己的工作流也是個(gè)很重要的設(shè)計(jì)課題。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。