編輯導(dǎo)語(yǔ)：組件，是許多B端設(shè)計(jì)師在日常的工作議題，組件仍有很多使用不當(dāng)?shù)那闆r。那么該如何讓相關(guān)方都能夠正確地使用組件、理解規(guī)范呢？本文本著更好記和更好用的原則，講述組件的使用規(guī)范，希望對(duì)你有所幫助。

組件是很多 B 端設(shè)計(jì)師在日常工作中繞不開(kāi)的話題。如果你也是一名組件設(shè)計(jì)師，想必也會(huì)遇到這樣的問(wèn)題：

• 最近寫(xiě)完了一套組件的使用規(guī)范，但是團(tuán)隊(duì)成員畫(huà)設(shè)計(jì)稿總不遵守，好多人總是用錯(cuò)。
• 設(shè)計(jì)稿即使是用了組件，很多細(xì)節(jié)也不一樣，比如同樣場(chǎng)景下的卡片間距，有的設(shè)計(jì)師用8px，有的用12px…
• 我已經(jīng)發(fā)布了新規(guī)范，為什么總有設(shè)計(jì)師說(shuō)不知道，依然用以前的舊規(guī)范？

相信你已經(jīng)發(fā)現(xiàn)了，不管我們將組件規(guī)范制定得多么詳細(xì)，總是有使用者以我們難以預(yù)測(cè)到的方式，對(duì)組件進(jìn)行不正確應(yīng)用。

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

一、從組件規(guī)范的形式入手

優(yōu)化組件本身，通過(guò)一些方法讓組件的使用規(guī)范更直觀地體現(xiàn)，讓「用對(duì)」比「用錯(cuò)」更容易。

1. 細(xì)節(jié)提示，所見(jiàn)即所得

你可以將大家經(jīng)常會(huì)用錯(cuò)的細(xì)節(jié)，作為組件的一部分，提示在組件上。比如，將一些使用方法和注意事項(xiàng)寫(xiě)到組件旁邊，或者直接設(shè)計(jì)到組件中變成占位符文字。舉個(gè)例子：

以「信息提示條（Alert）」這個(gè)組件為例，我們組設(shè)計(jì)師在做業(yè)務(wù)需求時(shí)，發(fā)現(xiàn)有些需求內(nèi)容不需要標(biāo)題，于是就要將組件中的標(biāo)題去掉。但很多設(shè)計(jì)師出于方便快捷，直接把信息提示的內(nèi)容寫(xiě)在了標(biāo)題的位置上，而把標(biāo)題下方的文字刪掉了。這樣就讓提示條中的文字內(nèi)容變成了標(biāo)題，有了加粗的效果：

而一些開(kāi)發(fā)就按照設(shè)計(jì)師的稿子，也給文字做了加粗，這就導(dǎo)致產(chǎn)品中的提示條樣式很不統(tǒng)一。

發(fā)現(xiàn)這個(gè)問(wèn)題之后，組件的設(shè)計(jì)師就對(duì)組件進(jìn)行了優(yōu)化，直接把使用方式寫(xiě)進(jìn)了組件的占位符文案中，提示設(shè)計(jì)師：“如果沒(méi)有標(biāo)題，請(qǐng)使用內(nèi)容處的文字樣式，不要加粗?！?/p>

這樣就可以使組件的使用規(guī)范清晰直觀地體現(xiàn)，降低這類問(wèn)題出現(xiàn)的概率。

2. 簡(jiǎn)化規(guī)則，好記才好用

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

我們的一款產(chǎn)品，在排版時(shí)用到的間距大小有很多種，為的是追求好看的視覺(jué)效果。但在實(shí)際設(shè)計(jì)的過(guò)程中會(huì)發(fā)現(xiàn)，很多設(shè)計(jì)師根據(jù)業(yè)務(wù)需求，刪掉組件模塊中一行內(nèi)容或者一組內(nèi)容，與上、下方不同組的內(nèi)容間距就很不容易確定，設(shè)計(jì)師會(huì)自己根據(jù)經(jīng)驗(yàn)來(lái)排布內(nèi)容，這就在間距上產(chǎn)生了很多不一致和不確定性。

于是我們對(duì)間距的數(shù)值規(guī)范做了簡(jiǎn)化，合并和刪減了很多數(shù)據(jù)。這樣視覺(jué)效果看上去只是有微弱的變化，但實(shí)際在應(yīng)用的過(guò)程中卻減少了很多不必要的麻煩。

二、從組件的發(fā)布流程入手

真正好用的組件庫(kù)，不僅僅在于將每一個(gè)組件設(shè)計(jì)得專業(yè)、嚴(yán)謹(jǐn)，也在于組件的發(fā)布，以及后續(xù)使用組件的方式和方法。組件庫(kù)的建設(shè)，其實(shí)也是在做「人與人之間的連接」，幫助研發(fā)人員養(yǎng)成高效、專業(yè)的工作習(xí)慣。

1. 對(duì)于設(shè)計(jì)師，規(guī)范發(fā)布機(jī)制

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

• 組件規(guī)范發(fā)布的時(shí)間有規(guī)律，可以一周/兩周/一月發(fā)布一次，給大家建立穩(wěn)定感和確定性。
• 組件規(guī)范發(fā)布的方式要正式，可以以例會(huì)、月報(bào)的形式發(fā)布，并有固定的、規(guī)范的文檔記錄。
• 設(shè)計(jì)師對(duì)規(guī)范的掌握情況要檢測(cè)，可以在發(fā)布組件規(guī)范后用簡(jiǎn)單的「小考測(cè)試」等形式，對(duì)設(shè)計(jì)師的組件規(guī)范掌握情況做檢測(cè)。即使是簡(jiǎn)單的選擇題，也可以幫助設(shè)計(jì)師強(qiáng)化對(duì)于組件的理解和記憶。

2. 對(duì)于開(kāi)發(fā)，同步關(guān)鍵內(nèi)容

組件及其規(guī)范的更新也要及時(shí)同步給開(kāi)發(fā)，讓他們了解設(shè)計(jì)細(xì)節(jié)，一定程度上能夠保證設(shè)計(jì)稿的還原度。這個(gè)過(guò)程中你需要注意：

• 同步關(guān)鍵細(xì)節(jié)。也就是「挑內(nèi)容」同步，把關(guān)鍵細(xì)節(jié)上的變更和修改相關(guān)的內(nèi)容總結(jié)出來(lái)，給到開(kāi)發(fā)。大部分開(kāi)發(fā)不會(huì)關(guān)注你的設(shè)計(jì)規(guī)范推導(dǎo)過(guò)程，只需要知道結(jié)果。
• ?同步文檔位置和使用方式。當(dāng)開(kāi)發(fā)對(duì)于細(xì)節(jié)不確定時(shí)，可以自行查找和理解設(shè)計(jì)理念。
• 協(xié)商線上產(chǎn)品的修改進(jìn)度。很多組件在更新后，以前的舊頁(yè)面可能不會(huì)及時(shí)同步。這個(gè)時(shí)候設(shè)計(jì)和開(kāi)發(fā)就要協(xié)商好整體的更新范圍和進(jìn)度，彼此有個(gè)預(yù)期。

以上，希望這些建議對(duì)你建設(shè)組件庫(kù)有幫助。

#專欄作家#

元堯，微信公眾號(hào)：長(zhǎng)弓小子，人人都是產(chǎn)品經(jīng)理專欄作家。一線互聯(lián)網(wǎng)大廠B端體驗(yàn)設(shè)計(jì)師，清華大學(xué)美術(shù)學(xué)院本碩連讀。曾負(fù)責(zé)國(guó)內(nèi)最大開(kāi)源組件庫(kù)Ant Design組件的設(shè)計(jì)和運(yùn)營(yíng)工作，目前負(fù)責(zé)國(guó)際業(yè)務(wù)線B端產(chǎn)品體驗(yàn)設(shè)計(jì)和組件庫(kù)的搭建工作。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議。