工作經驗|設計資產庫中的元件,應該如何命名?

語言: CN / TW / HK

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

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

一、元件的命名方式

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

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

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

1. 類別

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

通常我們會分為:通用、導航、資料錄入、資料展示、反饋等幾個類別,類別以及其中的部分元件如下圖所示:

2. 元件 / 元件

元件即具體的、 單一的 元件 ,比如 “導航” 這個類別下就包括了固釘(返回頂部)、麵包屑、下拉選單、導航選單、分頁、頁頭、步驟條等幾個元件:

3. 模式

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

4. 等級

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

5. 狀態

狀態即元件在 互動時的變化樣式 ,通常包括普通(預設)、懸浮(懸停)、點選、失效(禁用)等,根據不同元件的特性,也可能會包括危險提示、聚焦等狀態。

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

二、元件命名的注意事項

在給元件命名的時要注意以下幾點:

1. 含義清晰

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

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

除了色板,我們對於元件也是要儘量清晰的 描述元件的類別和狀態,而不是它的外觀

比如按鈕在“懸停狀態”的時候是淺藍色,你命名到 “懸停”的狀態就可以了,這時你的按鈕名稱後半部分應為:“……/button/primary/hover”,不需要提及按鈕的顏色變化。

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

2. 遵守邏輯

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

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

3. 良好習慣

養成良好的工作習慣,建立標準的工作流程和規範,包括:

  • 用斜槓 “/”分隔單詞;
  • 不要隨意新增空格;
  • 僅使用小寫字母;
  • 儘量使用英文單詞;
  • 修改內容後及時同步給團隊等等。

本文由@ 元堯 原創釋出於人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash,基於CC0協議。