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

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

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

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

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

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

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

二、元素的組合

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

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

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

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

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

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

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

四、無(wú)障礙規(guī)范

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

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

五、多語(yǔ)言規(guī)范

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

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

六、DesignToken 的使用

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

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

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

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

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