導讀編輯導語：組件，是許多B端設計師在日常的工作議題，組件仍有很多使用不當的情況。那么該如何讓相關方都能夠正確地使用組件、理解規范呢？本文本著更好記和更好用的原....

編輯導語：組件，是許多B端設計師在日常的工作議題，組件仍有很多使用不當的情況。那么該如何讓相關方都能夠正確地使用組件、理解規范呢？本文本著更好記和更好用的原則，講述組件的使用規范，希望對你有所幫助。

組件是很多 B 端設計師在日常工作中繞不開的話題。如果你也是一名組件設計師，想必也會遇到這樣的問題：

• 最近寫完了一套組件的使用規范，但是團隊成員畫設計稿總不遵守，好多人總是用錯。
• 設計稿即使是用了組件，很多細節也不一樣，比如同樣場景下的卡片間距，有的設計師用8px，有的用12px…
• 我已經發布了新規范，為什么總有設計師說不知道，依然用以前的舊規范？

相信你已經發現了，不管我們將組件規范制定得多么詳細，總是有使用者以我們難以預測到的方式，對組件進行不正確應用。

那么該如何確保相關方都能夠正確地使用組件、理解規范呢？本文的一些建議希望對你有幫助。

一、從組件規范的形式入手

優化組件本身，通過一些方法讓組件的使用規范更直觀地體現，讓「用對」比「用錯」更容易。

1. 細節提示，所見即所得

你可以將大家經常會用錯的細節，作為組件的一部分，提示在組件上。比如，將一些使用方法和注意事項寫到組件旁邊，或者直接設計到組件中變成占位符文字。舉個例子：

以「信息提示條（Alert）」這個組件為例，我們組設計師在做業務需求時，發現有些需求內容不需要標題，于是就要將組件中的標題去掉。但很多設計師出于方便快捷，直接把信息提示的內容寫在了標題的位置上，而把標題下方的文字刪掉了。這樣就讓提示條中的文字內容變成了標題，有了加粗的效果：

而一些開發就按照設計師的稿子，也給文字做了加粗，這就導致產品中的提示條樣式很不統一。

發現這個問題之后，組件的設計師就對組件進行了優化，直接把使用方式寫進了組件的占位符文案中，提示設計師：“如果沒有標題，請使用內容處的文字樣式，不要加粗?！?/p>

這樣就可以使組件的使用規范清晰直觀地體現，降低這類問題出現的概率。

2. 簡化規則，好記才好用

能夠減少和簡化組件使用規范的內容，也可以提升組件使用的正確率。能用一條約束就不要用多條。從簡單開始，在大家能夠熟練應用之后，再視情況做添加。舉個例子：

我們的一款產品，在排版時用到的間距大小有很多種，為的是追求好看的視覺效果。但在實際設計的過程中會發現，很多設計師根據業務需求，刪掉組件模塊中一行內容或者一組內容，與上、下方不同組的內容間距就很不容易確定，設計師會自己根據經驗來排布內容，這就在間距上產生了很多不一致和不確定性。

于是我們對間距的數值規范做了簡化，合并和刪減了很多數據。這樣視覺效果看上去只是有微弱的變化，但實際在應用的過程中卻減少了很多不必要的麻煩。

二、從組件的發布流程入手

真正好用的組件庫，不僅僅在于將每一個組件設計得專業、嚴謹，也在于組件的發布，以及后續使用組件的方式和方法。組件庫的建設，其實也是在做「人與人之間的連接」，幫助研發人員養成高效、專業的工作習慣。

1. 對于設計師，規范發布機制

組件的更新和迭代都需要發布，你可以在發布的過程中注意：

• 組件規范發布的時間有規律，可以一周/兩周/一月發布一次，給大家建立穩定感和確定性。
• 組件規范發布的方式要正式，可以以例會、月報的形式發布，并有固定的、規范的文檔記錄。
• 設計師對規范的掌握情況要檢測，可以在發布組件規范后用簡單的「小考測試」等形式，對設計師的組件規范掌握情況做檢測。即使是簡單的選擇題，也可以幫助設計師強化對于組件的理解和記憶。

2. 對于開發，同步關鍵內容

組件及其規范的更新也要及時同步給開發，讓他們了解設計細節，一定程度上能夠保證設計稿的還原度。這個過程中你需要注意：

• 同步關鍵細節。也就是「挑內容」同步，把關鍵細節上的變更和修改相關的內容總結出來，給到開發。大部分開發不會關注你的設計規范推導過程，只需要知道結果。
• 同步文檔位置和使用方式。當開發對于細節不確定時，可以自行查找和理解設計理念。
• 協商線上產品的修改進度。很多組件在更新后，以前的舊頁面可能不會及時同步。這個時候設計和開發就要協商好整體的更新范圍和進度，彼此有個預期。

以上，希望這些建議對你建設組件庫有幫助。

#專欄作家#

元堯，長弓小子，人人都是產品經理專欄作家。一線互聯網大廠B端體驗設計師，清華大學美術學院本碩連讀。曾負責國內最大開源組件庫Ant Design組件的設計和運營工作，目前負責國際業務線B端產品體驗設計和組件庫的搭建工作。

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

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