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

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

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

本文就分析給你一些經驗，來看看在組件做好后還需要做的六項自查內容——

一、組件的狀態

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

• 將做好的組件帶入到具體的業務場景中進行檢驗；
• 參考競品中已有的相關案例做補充；
• 參考知名設計系統中類似的功能組件做優化；
• 模擬使用組件的完整流程；
• 調動其他設計師為你提供特殊的使用場景和案例。

二、元素的組合

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

你需要檢查和思考的內容包括：

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

三、柵格布局和自適應方案

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

為了保證產品頁面在不同尺寸的設備端順暢使用，我們需要在組件層面就做好柵格布局規范和自適應方案，也即給出幾個關鍵斷點下的組件變化形態或規范。

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

四、無障礙規范

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

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

五、多語言規范

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

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

六、DesignToken 的使用

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

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

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

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

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