組件的命名方式
設(shè)計(jì)系統(tǒng)的基礎(chǔ)工作之一就是給組件命名。這個(gè)工作看上去并不起眼，似乎還有些機(jī)械重復(fù)，但實(shí)際上卻需要具備嚴(yán)謹(jǐn)?shù)?strong>邏輯和對(duì)細(xì)節(jié)的錙銖必較。
組件的命名方式并不唯一，你可以按照你對(duì)組件構(gòu)成的理解，來規(guī)劃你的命名邏輯。下圖以我工作中用到的一款組件庫為例，呈現(xiàn)出組件的命名邏輯：
可以看到，我們?cè)诿麜r(shí)分了 5 個(gè)層級(jí)，依次是類別，元件，模式，等級(jí)，狀態(tài)。
1、類別
類別指的是組件最本質(zhì)的作用和寬泛的應(yīng)用場景。通常我們會(huì)分為：通用、導(dǎo)航、數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋等幾個(gè)類別，類別以及其中的部分組件如下圖所示：
2、元件 / 組件
元件即具體的、單一的組件，比如 “導(dǎo)航” 這個(gè)類別下就包括了固釘（返回頂部）、面包屑、下拉菜單、導(dǎo)航菜單、分頁、頁頭、步驟條等幾個(gè)組件：
3、模式
目前的模式通常會(huì)分成暗黑模式（Dark Mode）和淺色模式（Light Mode）兩種，但隨著對(duì)用戶體驗(yàn)的不斷重視，未來也有可能會(huì)出現(xiàn) “護(hù)眼模式”、“色盲模式”、“高對(duì)比度模式” 等模式。
4、等級(jí)
等級(jí)的分類和數(shù)量由組件的基本功能和在產(chǎn)品的具體需求決定，有些組件比如 “分頁器”、“面包屑” 通常只有一個(gè)等級(jí)，在命名的時(shí)候就可以不體現(xiàn)；而有些組件如 “按鈕”、“標(biāo)簽頁” 、“導(dǎo)航” 則會(huì)有多個(gè)等級(jí)：
5、狀態(tài)
狀態(tài)即組件在交互時(shí)的變化樣式，通常包括普通（默認(rèn)）、懸?。☉彝＃?、點(diǎn)擊、失效（禁用）等，根據(jù)不同組件的特性，也可能會(huì)包括危險(xiǎn)提示、聚焦等狀態(tài)。
根據(jù)上述這個(gè)規(guī)則，我們就可以對(duì)所有組件進(jìn)行有規(guī)律的命名，下圖中組件懸停狀態(tài)的命名為：Navigation/Sidemenu/Light/Primary/hover
組件命名的注意事項(xiàng)
組件的命名能夠清晰的體現(xiàn)組件的性質(zhì)和狀態(tài)，不要僅僅使用數(shù)字 1、2、3 來代替狀態(tài)。舉個(gè)例子，你的產(chǎn)品品牌色主色名稱的結(jié)尾應(yīng)該是：“……brand/primary”，而不是 “brand/blue1”，或 “brand/ #E60326”。
除了色板，我們對(duì)于組件也是要盡量清晰的描述組件的類別和狀態(tài)，而不是它的外觀。比如按鈕在“懸停狀態(tài)”的時(shí)候是淺藍(lán)色，你命名到 “懸?！?nbsp;的狀態(tài)就可以了，這時(shí)你的按鈕名稱后半部分應(yīng)為：“……/button/primary/hover”，不需要提及按鈕的顏色變化。
這種命名結(jié)構(gòu)可以最大程度上確保組件與系統(tǒng)一起發(fā)展，如果當(dāng)主按鈕的顏色發(fā)生變化，你也不必在整個(gè)系統(tǒng)和組件中更新其名稱。
2. 遵守邏輯
命名結(jié)構(gòu)要有邏輯，名稱根據(jù)一定的邏輯結(jié)構(gòu)進(jìn)行推導(dǎo)，以便于當(dāng)組件有新增、或組件庫有革新時(shí)可以順暢的添加和修改。
由于不同組件的等級(jí)和狀態(tài)千差萬別，建議你也可以先梳理出上文圖中的命名邏輯層級(jí)表，按照表單進(jìn)行工作，簡單清晰，也方便團(tuán)隊(duì)的其他設(shè)計(jì)師一同協(xié)作。
3. 良好習(xí)慣
養(yǎng)成良好的工作習(xí)慣，建立標(biāo)準(zhǔn)的工作流程和規(guī)范，包括：
- 用斜杠 “/” 分隔單詞
- 不要隨意添加空格
- 僅使用小寫字母
- 盡量使用英文單詞
- 修改內(nèi)容后及時(shí)同步給團(tuán)隊(duì)等等
在公眾號(hào)后臺(tái)回復(fù) “組件”，會(huì)看到更多與之相關(guān)的干貨講解。如果你還有其他與組件相關(guān)的問題，歡迎向我提問。
原文鏈接：長弓小子（公眾號(hào)）
作者：元堯
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》工作經(jīng)驗(yàn)｜設(shè)計(jì)資產(chǎn)庫中的組件，應(yīng)該如何命名？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)