400-6578-790/15918492951
组件命名的注意事项
在给组件命名的时要注意以下几点:
1. 含义清晰
组件的命名能够清晰的体现组件的性质和状态,不要仅仅使用数字 1、2、3 来代替状态。举个例子,你的产品品牌色主色名称的结尾应该是:“……brand/primary”,而不是 “brand/blue1”,或 “brand/ #E60326”。
除了色板,我们对于组件也是要尽量清晰的描述组件的类别和状态,而不是它的外观。比如按钮在“悬停状态”的时候是浅蓝色,你命名到 “悬停” 的状态就可以了,这时你的按钮名称后半部分应为:“……/button/primary/hover”,不需要提及按钮的颜色变化。
这种命名结构可以较大程度上确保组件与系统一起发展,如果当主按钮的颜色发生变化,你也不必在整个系统和组件中更新其名称。
2. 遵守逻辑
命名结构要有逻辑,名称根据一定的逻辑结构进行推导,以便于当组件有新增、或组件库有革新时可以顺畅的添加和修改。
由于不同组件的等级和状态千差万别,建议你也可以先梳理出上文图中的命名逻辑层级表,按照表单进行工作,简单清晰,也方便团队的其他设计师一同协作。
3. 良好习惯
养成良好的工作习惯,建立标准的工作流程和规范,包括:
用斜杠 “/” 分隔单词
不要随意添加空格
仅使用小写字母
尽量使用英文单词
修改内容后及时同步给团队等等