如何为您的UI/UX设计系统命名?

我们在创建ui/ux设计系统时，由于不同设计师的设计对名称的用词和习惯不同，会导致缺乏统一命名指导。 为了避免这种情况，我们在建设之初就引入设计系统的命名约定，这将帮助设计师和开发人员之间建立有效的沟通和协作，使实施和理解所有项目变也能变得更加容易。

先来看看命名约定的设计原则和目标吧：

1、清晰无异议：任何人都能看懂/理解，无异议。
2、有组织性：名称应遵循一定的顺序或者某项逻辑。
3、前缀/后缀：引入前缀或后缀来区分不同类型的元素。例如，可以使用“btn”表示按钮，“lbl”表示标签等。
4、驼峰命名法或短横线命名法：
选择要在所有名称中使用的拼写样式。例如，bankWorks（第一个单词小写，后面的单词大写）或 bank-case（单词用连字符分隔）。
5、可区分/识别性
避免一些相似或重复名称的使用。
6、版本控制
使用版本控制来指定文件的最新版本，可以通过在名称末尾添加信息来跟踪版本，使用版本号和日期最为方便。
7、文档
保留描述命名约定的文档，以便新同事或新开发团队可以快速熟悉项目并参与其中。


对用户界面 (UI) 元素和模板进行分类是组织和系统化设计系统以及命名约定的重要步骤，一起看看下面的约定示例：

基础元素：
按钮: btn-primary, btn-secondary, btn-submit
文本: input-text, textarea
标题: heading-h1, heading-h2
图标: icon-heart, icon-search

导航元素：
菜单：menu-main, menu-footer
导航：nav-link, nav-dropdown
分页：pagination, pagination-item

控件和表单：
复选框和切换开关：checkbox, toggle-switch
表单：form-login, form-registration
下拉列表：dropdown, select-options

风格设计：
颜色：colour-primary, colour-accent
字体：font-heading, font-body
主题：theme-light, theme-dark

等等等...

当然以上只是方法之一，还有很对分类方法，比如按字母顺序、按功能、按结构、按复杂度、按使用场景...等，具体要结合当下产品的特点和开发团队情况进行命名约定。