作為一名B 端的元件設計師，如果你的元件設計團隊成員用了都能挑出很多毛病，不認可你的元件，那麼我們該如何應對呢？作者總結了一些經驗，分享了在元件做好後還需要做的六項自查内容，希望能給你一些幫助。
作為 B 端的元件設計師，你做出的元件需要經得住其他設計師的考驗。有同學就曾問過我這樣的問題：
“我每次做完元件之後，釋出給團隊成員使用，都會被大家挑出這樣或那樣的問題，比如元件的狀态和用法細節想得不全，得大家提醒過後才發現，再不斷地修改。請問元堯姐，一般我們做完一個元件之後，怎樣能夠確定自己能夠注意到更多的細節，而不會被其他使用者反複的挑出問題？”
本文就分析給你一些經驗，來看看在元件做好後還需要做的六項自查内容——
一、元件的狀态
我們所熟知的元件最常用的狀态有預設、懸停、點選、禁用等等。但不同功能的元件也還會有其他的特殊狀态。想要盡可能地找到這些特殊狀态，你可以嘗試：
- 将做好的元件帶入到具體的業務場景中進行檢驗；
- 參考競品中已有的相關案例做補充；
- 參考知名設計系統中類似的功能元件做優化；
- 模拟使用元件的完整流程；
- 調動其他設計師為你提供特殊的使用場景和案例。
二、元素的組合
除了元件不同的互動狀态，還要注意元件中元素在操作時的組合方式。通常來說每一個業務元件都會由幾個基礎元件和元素構成。舉個例子，下圖是我們在某業務中的氣泡提示元件：
你需要檢查和思考的内容包括：
- 元素是否能夠根據不同的場景，進行增、删、改、挪，如果能，哪些元素可以改，哪些元素不可改；
- 元素之間的搭配是否存在互斥關系，如果有，則需要在元件層面做好互斥規範；
- 新增元素在元件内的排版布局規範，需要具體給出。
三、栅格布局和自适應方案
通常情況下，每一個元件都需要考慮其栅格布局和自适應規則。如果你看過我們之前的文章：栅格布局中的斷點應該如何使用？就會明白我們所做的元件的尺寸，其實是在産品頁面在某一個特定斷點下的元件尺寸。
為了保證産品頁面在不同尺寸的裝置端順暢使用，我們需要在元件層面就做好栅格布局規範和自适應方案，也即給出幾個關鍵斷點下的元件變化形态或規範。
這個規範忌繁瑣，一要考慮周全，二要讓他人看得懂。比如下圖就是我們對于卡片元件在 1600px 和 640px 斷點下所做的限制中的部分内容：
四、無障礙規範
由于我們團隊做的是國際化産品，是以對于無障礙設計的要求格外高。現在越來越多的産品也在布局出海戰略，是以設計師對于元件無障礙設計的了解也是有必要的。你可以從以下幾個方面來檢驗元件：
- 元件中的每個元素和特征是否符合無障礙标準；
- 元件中幾個元素的組合方式是否符合無障礙标準；
- 元件的互動形式和操作回報是否符合無障礙标準；
- 特殊情況下，增加了背景色之後的元件是否符合無障礙标準。
五、多語言規範
對于國際化産品來說，元件的多語言方案也很重要，其所搭建的産品頁面可以更好地符合不同語言環境下的使用要求。你可以從以下幾個方面來做檢查：
- 元件在變換成其他語言後，樣式和布局上是否有變化；
- 元件中的插畫、圖示、顔色等是否能夠在其他國家和地區的文化環境中适用；
- 元件是否遵循了産品本身所規定的不同語言的字型使用規範。
六、DesignToken 的使用
如果你希望元件能夠做到統一的疊代和調配，那麼綁定 Design Token 就很重要。綁定 Token 過程同時也是對元件中元素特征使用的正确性進行校驗。
我曾經在Design Token 在設計系統中的意義與應用一文中介紹過 Token 的價值和意義。我們知道，每一個元件的背後其實都對應了一連串的Token。以提示條元件為例，元件的每一個色彩特征都能找到背後對應的 Token 值：
這樣在未來我們想要更新元件的色彩特征時，就不需要一個個修改元件，而是通過更改 Token 所對應的色值，對于色彩做一次性全部更新，節省了大量的時間和操作成本。而想要達到這種效果，你就需要在設計元件時檢查以下内容：
- 元件所使用的字型、顔色等特征的用法是否正确；
- 元件的每一個特征是否都跟現有的 Token相綁定；
- 同類型元件是否綁定了同一個Token。
做元件本來就不是一件簡單的事情。我們并不需要在第一時間就将元件所有的細節做到盡善盡美。你可以以任何一種方式做好元件的變更記錄，便于日後的版本改進和追查。先盡可能保證元件的可用性，小步疊代，慢慢提升它的易用性和全面性。
專欄作家
元堯，微信公衆号：長弓小子，人人都是産品經理專欄作家。一線網際網路大廠B端體驗設計師，清華大學美術學院本碩連讀。曾負責國内最大開源元件庫Ant Design元件的設計和營運工作，目前負責國際業務線B端産品體驗設計群組件庫的搭建工作。
本文原創釋出于人人都是産品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協定。
該文觀點僅代表作者本人，人人都是産品經理平台僅提供資訊存儲空間服務。