组件变体、状态与使用约束

先理解这个概念

一个按钮组件需要定义用途、尺寸、状态、图标位置和不可用条件。变体过多会制造组合爆炸。使用指南说明何时采用、何时不采用，以及内容长度、可访问性和组合限制。

组件契约描述允许的输入、状态、内容和行为，而不只是列出几种外观。若提供十个互相独立的布尔属性，调用方可能组合出不合理状态。应让有效组合容易表达，让危险或矛盾组合被限制，并说明组件不负责什么。

记住这三个原则

1. 01

   区分外观变体与运行状态。

2. 02

   用有限组合表达真实需求，避免无意义的自由参数。

3. 03

   把键盘、标签和错误反馈纳入组件契约。

实际设计时，分三步做

1. STEP 01

   列出组件任务与支持场景，定义尺寸、强调程度和状态等独立维度，不把业务场景名字都做成变体。

2. STEP 02

   说明内容约束和行为：图标是否需要名称、加载时能否点击、长文字如何处理、错误由组件还是容器承载。

3. STEP 03

   给出正常用法、边界用法和不支持的用法，设计稿与代码使用相同术语，避免同名变体含义不同。

一个容易理解的例子

可维护的组件服务任务，不追求参数最多。

适用边界与取舍

万能组件容易把复杂度转移给调用方。多个任务差异明显时，拆分组件并共享底层能力，通常比继续增加属性更易理解。