创意窝 
组件变体一多就乱，多半是属性没分层、命名没逻辑。理清变体只需两步：把属性按「互斥且稳定」的标准分层，再用固定命名串成体系，查找和切换都会变顺。
一、先分清：什么属性适合做变体
变体适合承载互斥的离散状态。按钮的尺寸、样式、状态就是典型：同一时刻只能取一个值，且取值有限可枚举。反过来，内容性的东西，比如按钮上的文字、图标里的图形，不该塞进变体，交给实例编辑或嵌套组件更合适。判断标准很简单：如果两个选项永远不可能同时出现，它才配做变体属性；如果用户可能既要大号又要主色，那就该拆成两个属性，而不是做一堆排列组合。
二、属性分层：从少到多逐层展开
属性贵精不贵多。建议先固定最稳定的维度，再叠加场景维度：
- 第一层放形态类属性，如尺寸、样式，决定组件的长相；
- 第二层放状态类属性，如默认、悬停、禁用，决定交互表现；
- 第三层放语义类属性，如主要、次要、警示，决定业务含义。
层级越靠前越稳定，别把易变的语义放在第一层。属性数量控制在三到五个以内，超了就该考虑拆组件：一个「万能按钮」往往不如「基础按钮加场景按钮」好用。
三、命名逻辑：让查找像查字典
命名统一成「类别-组件-用途」的前缀结构，比如 Button/Primary/Large，全团队只用一种连接方式。属性值也要成套：尺寸统一用 sm/md/lg，不要混用 small/large；布尔型属性避免起模棱两可的名字，「有图标」比「图标」更清楚。配套写一份简短的命名约定，比事后在几百个组件里翻找省时间得多。
四、常见混乱与对策
| 混乱现象 | 常见原因 | 处理办法 |
|---|---|---|
| 变体越加越多 | 属性拆分过细 | 合并互斥维度，拆成多个组件 |
| 命名五花八门 | 没有约定 | 统一前缀与属性值词表 |
| 找不到目标变体 | 命名无规律 | 按类别-组件-用途重排 |
变体的清晰度，取决于属性分层的克制和命名的一致性。先把互斥属性想清楚，再用固定命名串起来，组件面板就会从一团乱麻变成一张查得快的表，团队复用率也会跟着上去。
微信扫一扫 
