中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：給組件命名是B端設計工作的基礎工作之一，那么如何給涉及資產庫中的組件命名呢？本篇文章作者結合自身工作經驗為你解答，作者講述了組件的命名方式和注意事項，一起來學習一下吧。

很多 B 端的設計師同學都已經養成了做組件的習慣，在你的設計資產庫（Design Kit）里面，組件是怎樣命名的呢？是否有注意到一些細節、遵循一些原則呢？看過本文，相信你會獲得答案。

一、組件的命名方式

設計系統的基礎工作之一就是給組件命名。這個工作看上去并不起眼，似乎還有些機械重復，但實際上卻需要具備嚴謹的邏輯和對細節的錙銖必較。

組件的命名方式并不唯一，你可以按照你對組件構成的理解，來規劃你的命名邏輯。下圖以我工作中用到的一款組件庫為例，呈現出組件的命名邏輯：

可以看到，我們在命名時分了 5 個層級，依次是類別，元件，模式，等級，狀態。

1. 類別

類別指的是組件最本質的作用和寬泛的應用場景。

通常我們會分為：通用、導航、數據錄入、數據展示、反饋等幾個類別，類別以及其中的部分組件如下圖所示：

2. 元件 / 組件

元件即具體的、單一的組件，比如 “導航” 這個類別下就包括了固釘（返回頂部）、面包屑、下拉菜單、導航菜單、分頁、頁頭、步驟條等幾個組件：

3. 模式

目前的模式通常會分成暗黑模式（Dark Mode）和淺色模式（Light Mode）兩種，但隨著對用戶體驗的不斷重視，未來也有可能會出現 “護眼模式”、“色盲模式”、“高對比度模式”等模式。

4. 等級

等級的分類和數量由組件的基本功能和在產品的具體需求決定，有些組件比如 “分頁器”、“面包屑”通常只有一個等級，在命名的時候就可以不體現；而有些組件如 “按鈕”、“標簽頁” 、“導航”則會有多個等級：

5. 狀態

狀態即組件在交互時的變化樣式，通常包括普通（默認）、懸?。☉彝＃Ⅻc擊、失效（禁用）等，根據不同組件的特性，也可能會包括危險提示、聚焦等狀態。

根據上述這個規則，我們就可以對所有組件進行有規律的命名，下圖中組件懸停狀態的命名為：Navigation/Sidemenu/Light/Primary/hover：

二、組件命名的注意事項

在給組件命名的時要注意以下幾點：

1. 含義清晰

組件的命名能夠清晰的體現組件的性質和狀態，不要僅僅使用數字 1、2、3 來代替狀態。

舉個例子，你的產品品牌色主色名稱的結尾應該是：“……brand/primary”，而不是 “brand/blue1”，或 “brand/ #E60326”。

除了色板，我們對于組件也是要盡量清晰的描述組件的類別和狀態，而不是它的外觀。

比如按鈕在“懸停狀態”的時候是淺藍色，你命名到 “懸?！钡臓顟B就可以了，這時你的按鈕名稱后半部分應為：“……/button/primary/hover”，不需要提及按鈕的顏色變化。

這種命名結構可以最大程度上確保組件與系統一起發展，如果當主按鈕的顏色發生變化，你也不必在整個系統和組件中更新其名稱。

2. 遵守邏輯

命名結構要有邏輯，名稱根據一定的邏輯結構進行推導，以便于當組件有新增、或組件庫有革新時可以順暢的添加和修改。

由于不同組件的等級和狀態千差萬別，建議你也可以先梳理出上文圖中的命名邏輯層級表，按照表單進行工作，簡單清晰，也方便團隊的其他設計師一同協作。

3. 良好習慣

養成良好的工作習慣，建立標準的工作流程和規范，包括：

• 用斜杠 “/”分隔單詞；
• 不要隨意添加空格；
• 僅使用小寫字母；
• 盡量使用英文單詞；
• 修改內容后及時同步給團隊等等。

本文由@ 元堯 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。