作為一名B 端的組件設計師，如果你的組件設計團隊成員用了都能挑出很多毛病，不認可你的組件，這就是說俺們該如何應對呢？編著者小結了一些體驗，分享了在組件做好后還需求做的陸項自查情節，冀望能給你一些臂助。

作為 B 端的組件設計師，你做出的組件需求經得住任何設計師的練就。有同班就曾問過我這樣的問題：

“我每次做完組件之后，發布給團隊成員施用，都會被大家挑出這樣或那樣的問題，比如組件的勢態和用法底細想得不全，得大家提醒過后才發現，再不斷地修定。借問元堯姐，一般咱們做完一個組件之后，怎樣可以確保自己可以只顧到更多的底細，而不會被另一個使役者反復的挑出問題？”

正文就分析給你一些體驗，來瞧瞅在組件做好后還求需做的陸項自查情節——

一、組件的勢態

咱們所熟知的組件最常用的勢態有公認、懸停、點擊、禁用等等。但不同功能的組件也還會有別樣的特殊勢態。想要盡可能地找到那些特殊勢態，你足以試碰：

• 將做好的組件帶入到具體的業務場景中進展檢驗；
• 參考競品中已有的相關案例做補缺；
• 參考知名設計戰線中類似的功能組件做完善；
• 模擬下祭組件的總體流程；
• 調整另一個設計師為你提供特殊的役使場景和案例。

二元、元素的組合

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

你要求稽考和思想的本末包括：

• 元素是否可以論證不同的場景，開展增、刪、改、挪，如果能，哪些元素有何不可改，哪些元素不得改；
• 元素之間的搭配是否存在互斥瓜葛，如果有，則求需在組件層面做好互斥規范；
• 新添加元素在組件內的趟版格局規范，需求具體給出。

叁、柵格格局和自適應提案

通人情況下，每一個組件都急需考慮其柵格布置和自適應軌道。如果你瞅過俺們之前的成文：柵格格局中的斷點該應如何使動？就會明白咱們所做的組件的尺寸，其實是在成品印張在某一個一定斷點下的組件尺寸。

為了保證制品印張在不同尺寸的設施端順暢應用，俺們要求在組件層面就做好柵格布置規范和自適應提案，也即給出幾個節骨眼斷點下的組件應時而變形態或規范。

本條規范忌繁瑣，一要考慮周全，貳要讓他人瞧得懂。比如下圖就是俺們對于書簽組件在 1600px 和 640px 斷點下所做的收束中的一部分情節：

肆、無障礙規范

鑒于俺們團隊做的是國際化制品，因而對于無障礙設計的規定格外高?，F時越來越多的成品也在格局出港戰略，因此設計師對于組件無障礙設計的未卜先知也是有少不了的。你方可從之下幾個上面來檢驗組件：

• 組件中的每個元素和特色是否符合無障礙口徑；
• 組件中幾個元素的組合方式是否符合無障礙定準；
• 組件的交互形式和操作反饋是否符合無障礙譜；
• 特殊氣象下，增加了背景色之后的組件是否符合無障礙規范。

伍、多言語規范

對于國際化制品來說，組件的多言語草案也很非同兒戲，其所搭建的成品印張何嘗不可更好地符合不同言語空氣下的使動規定。你何嘗不可從之下幾個上面來做稽查：

• 組件在變換為另一個言語后，樣式和格局上是否有轉移；
• 組件中的國畫、標致、色彩等是否可以在別樣邦國和地區的文明條件中適用；
• 組件是否遵循了成品本身所規程的不同言語的字體應用規范。

陸、DesignToken 的采用

如果你期望組件可以做到統一的迭代和調配，這就是說綁定 Design Token 就很重大。綁定 Token 經過同時也是對組件中元素特點下祭的顛撲不破性拓展校驗。

我曾經在Design Token 在設計戰線中的意思與應用一文中說明過 Token 的期望值和意思。咱們知道，每一個組件的背后其實都對應了恒河沙數的Token。以提示條組件為例，組件的每一個色彩特色都能找到背后對應的 Token 值：

這樣在未來咱們想要翻新組件的色彩性狀時，就不需求一個個涂改組件，而是通過更改 Token 所對應的色值，對于色彩做一次性一五一十翻新，省掉了成千成萬的歲時和操作成本。而想要達到這種效果，你就求需在設計組件時稽查之下情節：

• 組件所使役的字體、色彩等表征的用法是否沒錯；
• 組件的每一個表征是否都跟現有的 Token相綁定；
• 同類型組件是否綁定了同一個Token。

做組件原有就不是一件簡略的事兒。俺們并不要求在處女韶光就將組件所有的底細做到盡善盡美。你有何不可以所有一種方式做好組件的改動記要，便于日后的本子刮垢磨光和追查。先盡可能保證組件的可用性，小步迭代，慢慢提升它的易用性和宏觀性。

上一篇： 關于產品趣味性的一次深度探索（上）

下一篇： 怎么用游戲化的方式解決接孩子的家長總是姍姍