切片命名规则是什么?【UI设计师必知】

发布时间：

2022-12-16
版权所有：

云和教育
分享：

命名规则是为了团队能够有一个统一规则，在和前端工程师进行交接时，规范的命名对于团队协同有着极大的推动作用。通常为切片命名时会遵循以下几个规则。

(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

需要注意的是，虽然上表中展示的是一些常用元素的单词，但是每个前端工程师有着自己的命名习惯，因此在实际工作中最好和前端工程师沟通确认。

切片命名规则是什么?【UI设计师必知】

最新开班信息

课程咨询

云和热门培训课程

推荐阅读