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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#專欄作家#

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

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

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