切片命名规则是什么?【UI设计师必知】
- 日期：2022-12-16
- 浏览：399次
命名规则是为了团队能够有一个统一规则，在和前 端工程师进行交接时， 规范的命名对于团队协同有着极大的推动作用。通常为切片命名时会遵循以下几个规则。
(1) 命名采用英文小写，不要有大写字母出现。
(2) 出现较多层级时，最好遵循命名的通用规范“模块_类别_功能-状态@2x.png“,按照由大范围逐步缩小范围进行命名，例如，命名一个属于标签栏内部，默认状态下的搜索按钮。英文命名为: tab_button_search_nor@2x.png，对应中文则是:标签栏_按钮_搜索_默认状态@2x.png。
(3) 名称中间不要有空格，使用下画线进行连接。
下面列举了移动端界面一些常 用元素的英文名称，具体如下。
移动端App命名常用单词 | |||
| 启动页面: default | 导航栏: nav | 左侧导航: leftbar | 工具栏: tool |
| 标签栏: tab | 背景: bg | 按钮: button | 照片: photo |
| 图片: img | 图标: icon | 个人资料: porfile | 用户: user |
| 弹出: pop | 返回: back | 刷新: refresh | 删除: delete |
| 编辑: edit | 下载: download | 内容: content | 广告: banner |
| 登录: login | 注册: register | 标题: title | 提示信息: msg |
| 链接: link | 注释: note | 标志: logo | 主页: home |
| 搜索: search | 输人: input | 复选框: chb | 下拉: cbb |
| 单选框: rb | 收藏: collect | 按钮文字: btntext | 信息: info |
| 列表: list | 设置: set | 更多: more | 取消: cancel |
| 按钮常态: nor | 按钮选中: sel | 按钮突出: hig | 按钮不可用: dis |
需要注意的是，虽然上表中展示的是一些常用元素的单词，但是每个前端工程师有着自己的命名习惯，因此在实际工作中最好和前端工程师沟通确认。
