web前端界面切图命名规范方法
时间：2023-09-09 23:12:01 | 来源：网站运营
时间：2023-09-09 23:12:01 来源：网站运营
web前端界面切图命名规范方法：
Marry men 2018-12-10 11:06:07
8701
收藏 21
文章标签： 图标命名
命名规范这个是 老生常谈 的一个问题，不管是切图、还是CSS、JS以及建立文件夹都是如此，此次整理了一篇关于切图命名的文章，除了学习切图命名之外，更多的是要理解命名的思路方向思维，并非全抄即可
我看到过很多小伙伴的切图命名，大多数人和新手是用拼音命名的
还有部分小伙伴更是要逆天了，是这样命名的
以汉子命名的，（我和我的小伙伴都惊呆了），U妹很担心你会被开发同事打拼音的命名方式也是可以用的，但在开发同事眼里，只会显得你很Low，很不专业。
而真正规范的命名是这样子的
规范的命名方式可以提高开发人员的开发效率和整个开发团队的友好合作。建议要竟可能用最少的字符而又能完整的表达标识符的含义。
一、 切图命名英文缩写的3个原则1. 较短的单词可通过去掉“元音”形成缩写
2. 较长的单词可取单词的头部几个字母形成缩写
3. 还有一些约定俗成的英文单词缩写
4. 所有拼写全为小写英文字母
二、命名规则模块_类别_功能_状态.pngU妹举个栗子：nav_button_search_default.png
释义为：导航_按钮_搜索_默认.png
| 启动界面 |
|---|
| 启动图片 | default.png |
| 启动logo | default_logo.png |
| 如：default.png defoult@2x.png defauLt-512@2x.png |
| 登录界面（login） |
|---|
| 登录背景 | login_bg.png |
| 登录logo | login_logo.png |
| 输入框 | login_input.png |
| 输入框选中状态 | login_input_pre.png |
| 登录按钮 | login_btn.png |
| 登录按钮选中状态 | login_btn_pre.png |
| 导航栏按钮 (nav) |
|---|
| 命名 | nav_功能描述.png |
| 如：nav_menu.png av_menu_pre.png（同按钮选中前后两种状态命名 ） |
| 按钮命名（btn可重复使用按钮) |
|---|
| 一般 normal | btn_xxx_normal.png |
| 点击 highlighted | btn_xxx_highlighted.png |
| 不能点击 disabled | btn_xxx_disable.png |
| 按下 pressed | btn_xxx_pressed.png |
| 选中 selected | btn_xxx_selected.png |
| 做为复数选择出现机会不高 |
| btn_功能属性或色彩均可.png 如：btn_blue.png tn_blue.9.png 蓝色按钮 |
| 其他命名 |
|---|
| 图标 | icon_xxx.png |
| 图片 | pic_xxx.png或是img_xxx.png |
| 照片 | pho_xxx.png |
| 左侧导航 |
|---|
| 命名 | leftbar_功能描述.png |
| 如：leftbar_info.png leftbar_info_pre.png 个人中心 |
| 底部选项卡按钮（TabBar） |
|---|
| 命名 | Tab_功能描述.png |
| 如：tab_set.Png av_set_pre.png 设置 |
| 主页命名 |
|---|
| 命名 | home_功能属性＋描述.png |
| 如：home_menu_recommended.png 热门推荐 ps：描述可用英文或拼间开头字母组合等 |
| 列表页命名规则 |
|---|
| 命名 | list_功能属性＋描述.png |
| 如：list_menu_collect.png 列表页收藏按钮 |
| UI文件命名规范常用词 |
|---|
| 常用状态 | 正常 | normal |
| 按下 | pressed |
| 选中 | selected |
| 禁用 | disabled |
| 已访问 | visited |
| 悬停 | hover |
| 控件＆部件 控件：较独立的可操作界面元素部件：描述属于某控件一部分 | 按钮（可点） | btn |
| 图标 | icon不可点、非点击主体、图案部件 |
| 标记 | sign |
| 列表 | list |
| 菜单 | menu |
| 视图 | view |
| 面板 | panel |
| 薄板 | sheet 底部弹出菜单 |
| 栏 | bar |
| 状态栏 | statusBar |
| 导航栏 | naviBar |
| 标签栏 | tabBar |
| 工具栏 | toolBar |
| 切换开关 | switch |
| 滑动器 | slider |
| 单选框 | radio |
| 复选框 | checkBox |
| 背景 | bg |
| 蒙版、遮罩 | mask |
| 收藏 | collect |
| 评论 | comment |
| 广告 | ad |
| 时间 | time |
| 音频 | audio |
| 视频 | viedio |
| 不喜欢 | dislike |
| 用户 | user |
| 首页 | home |
| 排名 | ranked |
| 搜索 | search |
| 标志 | logo |
| 进度条 | progress bar |
| 默认图片 | def_ |
| 分隔图片 | seg_ |
| 选择 | sel_ |
| 关闭 | close |
| 返回 | back |
| 编辑 | eidt |
| 内容 | content |
| 左 中 右 | left center right |
| 提示信息 | msg |
| 个人资料 | porfile |
| 弹出 | pop |
| 删除 | delete |
| 下载 | download |
| 登录 | login |
| 注册 | regsiter |
| 标题 | title |
| 注释 | note |
| 链接 | link |
| 图片 | image（img） |
| 刷新 | refresh |
| 常用补充描述 | 顶部 | top |
| 中间 | middle |
| 底部 | bottom |
| 第一 | first |
| 第二 | second |
| 最后 | last |
| 页头 | header |
| 页脚 | footer |
三、 总结关于切图命名规范就到这里了，最后还是想和大家说，有什么不懂的、不明白的地方，要多去和开发的同事请教和沟通，这样才能省时省力，事半功倍，更加高效的完成工作。
来自于 浆糊之家
看到 感觉不错分享给大家
在线咨询
