做变体前先列维度:Size(S/M/L)、State(Default/Hover/Disabled)、Icon(On/Off)等。维度越清晰,后续调用越稳定。
属性名用英文且一致:Size、State、Icon、Theme。属性值尽量短:S/M/L,Default/Hover/Pressed/Disabled。避免把“颜色值”写进组件名,颜色应该由样式或 token 控制。
当维度过多时,组合数量会指数增长。解决思路:把可选内容(如左图标/右图标)拆成插槽式组件,或把不影响布局的状态改成交互样式,而不是每个状态都做一套布局。
按钮类组件建议用 State 维度统一管理;表单控件建议把 Focus/Error/Success 作为状态,而不是多个独立组件。原型交互里,把 Default 连接到 Hover/Pressed 的对应变体。
1)使用 Auto Layout 保证不同文案长度不破版;2)优先做“最常用”的变体组合;3)定期清理不用的属性值,保持调用面板简洁。