作為一名B 端的組件設(shè)計師，如果你的組件設(shè)計團(tuán)隊成員用了都能挑出很多毛病，不認(rèn)可你的組件，那么我們該如何應(yīng)對呢？作者總結(jié)了一些經(jīng)驗，分享了在組件做好后還需要做的六項自查內(nèi)容，希望能給你一些幫助。

作為 B 端的組件設(shè)計師，你做出的組件需要經(jīng)得住其他設(shè)計師的考驗。有同學(xué)就曾問過我這樣的問題：

“我每次做完組件之后，發(fā)布給團(tuán)隊成員使用，都會被大家挑出這樣或那樣的問題，比如組件的狀態(tài)和用法細(xì)節(jié)想得不全，得大家提醒過后才發(fā)現(xiàn)，再不斷地修改。請問元堯姐，一般我們做完一個組件之后，怎樣能夠確保自己能夠注意到更多的細(xì)節(jié)，而不會被其他使用者反復(fù)的挑出問題？”

本文就分析給你一些經(jīng)驗，來看看在組件做好后還需要做的六項自查內(nèi)容——

一、組件的狀態(tài)

我們所熟知的組件最常用的狀態(tài)有默認(rèn)、懸停、點(diǎn)擊、禁用等等。但不同功能的組件也還會有其他的特殊狀態(tài)。想要盡可能地找到這些特殊狀態(tài)，你可以嘗試：

• 將做好的組件帶入到具體的業(yè)務(wù)場景中進(jìn)行檢驗；
• 參考競品中已有的相關(guān)案例做補(bǔ)充；
• 參考知名設(shè)計系統(tǒng)中類似的功能組件做優(yōu)化；
• 模擬使用組件的完整流程；
• 調(diào)動其他設(shè)計師為你提供特殊的使用場景和案例。

二、元素的組合

除了組件不同的交互狀態(tài)，還要注意組件中元素在操作時的組合方式。通常來說每一個業(yè)務(wù)組件都會由幾個基礎(chǔ)組件和元素構(gòu)成。舉個例子，下圖是我們在某業(yè)務(wù)中的氣泡提示組件：

你需要檢查和思考的內(nèi)容包括：

• 元素是否能夠根據(jù)不同的場景，進(jìn)行增、刪、改、挪，如果能，哪些元素可以改，哪些元素不可改；
• 元素之間的搭配是否存在互斥關(guān)系，如果有，則需要在組件層面做好互斥規(guī)范；
• 新增元素在組件內(nèi)的排版布局規(guī)范，需要具體給出。

三、柵格布局和自適應(yīng)方案

通常情況下，每一個組件都需要考慮其柵格布局和自適應(yīng)規(guī)則。如果你看過我們之前的文章：柵格布局中的斷點(diǎn)應(yīng)該如何使用？就會明白我們所做的組件的尺寸，其實是在產(chǎn)品頁面在某一個特定斷點(diǎn)下的組件尺寸。

為了保證產(chǎn)品頁面在不同尺寸的設(shè)備端順暢使用，我們需要在組件層面就做好柵格布局規(guī)范和自適應(yīng)方案，也即給出幾個關(guān)鍵斷點(diǎn)下的組件變化形態(tài)或規(guī)范。

這個規(guī)范忌繁瑣，一要考慮周全，二要讓他人看得懂。比如下圖就是我們對于卡片組件在 1600px 和 640px 斷點(diǎn)下所做的約束中的部分內(nèi)容：

四、無障礙規(guī)范

由于我們團(tuán)隊做的是國際化產(chǎn)品，所以對于無障礙設(shè)計的要求格外高?，F(xiàn)在越來越多的產(chǎn)品也在布局出海戰(zhàn)略，因此設(shè)計師對于組件無障礙設(shè)計的了解也是有必要的。你可以從以下幾個方面來檢驗組件：

• 組件中的每個元素和特征是否符合無障礙標(biāo)準(zhǔn)；
• 組件中幾個元素的組合方式是否符合無障礙標(biāo)準(zhǔn)；
• 組件的交互形式和操作反饋是否符合無障礙標(biāo)準(zhǔn)；
• 特殊情況下，增加了背景色之后的組件是否符合無障礙標(biāo)準(zhǔn)。

五、多語言規(guī)范

對于國際化產(chǎn)品來說，組件的多語言方案也很重要，其所搭建的產(chǎn)品頁面可以更好地符合不同語言環(huán)境下的使用要求。你可以從以下幾個方面來做檢查：

• 組件在變換成其他語言后，樣式和布局上是否有變化；
• 組件中的插畫、圖標(biāo)、顏色等是否能夠在其他國家和地區(qū)的文化環(huán)境中適用；
• 組件是否遵循了產(chǎn)品本身所規(guī)定的不同語言的字體使用規(guī)范。

六、DesignToken 的使用

如果你希望組件能夠做到統(tǒng)一的迭代和調(diào)配，那么綁定 Design Token 就很重要。綁定 Token 過程同時也是對組件中元素特征使用的正確性進(jìn)行校驗。

我曾經(jīng)在Design Token 在設(shè)計系統(tǒng)中的意義與應(yīng)用一文中介紹過 Token 的價值和意義。我們知道，每一個組件的背后其實都對應(yīng)了一連串的Token。以提示條組件為例，組件的每一個色彩特征都能找到背后對應(yīng)的 Token 值：

這樣在未來我們想要更新組件的色彩特征時，就不需要一個個修改組件，而是通過更改 Token 所對應(yīng)的色值，對于色彩做一次性全部更新，節(jié)省了大量的時間和操作成本。而想要達(dá)到這種效果，你就需要在設(shè)計組件時檢查以下內(nèi)容：

• 組件所使用的字體、顏色等特征的用法是否正確；
• 組件的每一個特征是否都跟現(xiàn)有的 Token相綁定；
• 同類型組件是否綁定了同一個Token。

做組件本來就不是一件簡單的事情。我們并不需要在第一時間就將組件所有的細(xì)節(jié)做到盡善盡美。你可以以任何一種方式做好組件的變更記錄，便于日后的版本改進(jìn)和追查。先盡可能保證組件的可用性，小步迭代，慢慢提升它的易用性和全面性。