详解｜想做好组件设计，先做这六项自查！
Hi，我是元尧。长按下图二维码加我微信，带你进设计师交流群，与上万名小伙伴一起交流成长！
「👇 添加好友请备注：设计交流」
“我每次做完组件之后，发布给团队成员使用，都会被大家挑出这样或那样的问题，比如组件的状态和用法细节想得不全，得大家提醒过后才发现，再不断地修改。请问元尧姐，一般我们做完一个组件之后，怎样能够确保自己能够注意到更多的细节，而不会被其他使用者反复的挑出问题？”
CONTENT
组件设计 · 六项自查
我们所熟知的组件最常用的状态有默认、悬停、点击、禁用等等。但不同功能的组件也还会有其他的特殊状态。想要尽可能地找到这些特殊状态，你可以尝试：
- 将做好的组件带入到具体的业务场景中进行检验；
- 参考竞品中已有的相关案例做补充；
- 参考知名设计系统中类似的功能组件做优化；
- 模拟使用组件的完整流程；
- 调动其他设计师为你提供特殊的使用场景和案例。
2. 元素的组合
一个组件的变体，元素有不同的组合方式
- 元素是否能够根据不同的场景，进行增、删、改、挪，如果能，哪些元素可以改，哪些元素不可改；
- 元素之间的搭配是否存在互斥关系，如果有，则需要在组件层面做好互斥规范；
- 新增元素在组件内的排版布局规范，需要具体给出。
3. 栅格布局和自适应方案
4. 无障碍规范
- 组件中的每个元素和特征是否符合无障碍标准；
- 组件中几个元素的组合方式是否符合无障碍标准；
- 组件的交互形式和操作反馈是否符合无障碍标准；
- 特殊情况下，增加了背景色之后的组件是否符合无障碍标准。
5. 多语言规范
- 组件在变换成其他语言后，样式和布局上是否有变化；
- 组件中的插画、图标、颜色等是否能够在其他国家和地区的文化环境中适用；
- 组件是否遵循了产品本身所规定的不同语言的字体使用规范。
6. Design Token 的使用
这样在未来我们想要更新组件的色彩特征时，就不需要一个个修改组件，而是通过更改 Token 所对应的色值，对于色彩做一次性全部更新，节省了大量的时间和操作成本。而想要达到这种效果，你就需要在设计组件时检查以下内容：
- 组件所使用的字体、颜色等特征的用法是否正确；
- 组件的每一个特征是否都跟现有的 Token 相绑定；
- 同类型组件是否绑定了同一个 Token。
如果你有其他的设计问题，也欢迎向我提问，带你加入设计师交流群，识别二维码👇👇👇添加我的微信。添加好友请备注：设计交流。
了解更多设计理念和设计方法