checkbox选中和不选中_命名不规范，开发泪两行！UI设计师必须要掌握的界面切图命名规范...

我看到过很多小伙伴的切图命名，大多数人和新手是用拼音命名的。

还有部分小伙伴更是要逆天了，是这样命名的

汉字命名的，（我和我的小伙伴都惊呆了），严哥很担心你会被开发同事打
拼音的命名方式也是可以用的，但在开发同事眼里，只会显得你很Low，很不专业。

而真正规范的命名是这样子的

规范的命名方式可以提高开发人员的开发效率和整个开发团队的友好合作。严哥建议要尽可能用最少的字符而又能完整的表达标识符的含义。一、切图命名英文缩写的3个原则1. 较短的单词可通过去掉“元音”形成缩写

2. 较长的单词可取单词的头部几个字母形成缩写3. 还有一些约定俗成的英文单词缩写4. 所有拼写全为小写英文字母

二、命名规则

模块_类别_功能_状态.png严哥举个栗子：nav_button_search_default.png释义为：导航_按钮_搜索_默认.png

启动界面启动图片default.png启动logodefault_logo.png如：default.png default@2x.png default_512@2x.png

登录界面（login）登录背景login_bg.png 登录logologin_logo.png 输入框login_input.png 输入框选中状态login_input_pre.png

登录按钮login_btn.png登录按钮选中状态login_btn_pre.png

导航栏按钮 (nav)命名nav_功能描述.png如：nav_menu.png nav_menu_pre.png

（同按钮选中前后两种状态命名 ）

按钮命名（btn可重复使用按钮)一般 normal btn_xxx_normal.png点击 highlightedbtn_xxx_highlighted.png不能点击 disabled btn_xxx_disable.png按下 pressedbtn_xxx_pressed.png选中 selectedbtn_xxx_selected.png做为复数选择出现机会不高

btn_功能属性或色彩均可.png

如：btn_blue.png btn_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 tab_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导航栏navigationbar（navbar）标签栏 tabbar工具栏toolbar 切换开关switch滑动器slider单选框radio复选框checkbox背景bg蒙版、遮罩mask收藏collect评论comment广告ad时间time音频audio视频video不喜欢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

三、关于切图和切图中问题总结

我还是拿图举例来说明：

icon_alipay.png→iPhone 1-3代的手机(已经不考虑了)

icon_alipay@2x.png→iPhone4/4S/5/5S/6/6S/7对应尺寸，这就是我们通常所说的2倍图

icon_alipay@3x.png→iPhone6P/6SP/7P使用的尺寸，这就是3倍图

可以简单的理解为倍数关系，如果你使用750x1334px（iPhone 6/6S/7）尺寸做设计稿，那么切片输出就是@2x，缩小2倍就是@1x，扩大1.5倍就是@3x了。

我总结了一些切图中常常遇到的问题：

1、到底哪些资源需要切图，哪些不需要切图？

① 只要是无法用代码来实现和表达出来的，就需要切图② 如果实在不清楚要不要切图，多和开发沟通，他会告诉你哪些是需要你切图的

2、切图需要切几套？① 理论上，我们需要切3套图，是为了更好的适配。② 在实际工作中，iOS只需要切2套图就可以，分别为：@2x和@3x

注意：切图是需要注意几点：

① 切图输出格式必须为png24位、png8位、jpg格3种格式

② 同一模块内，切图大小应保持一致

③ 切图输出大小必须保持为偶数

④ 为了减小包的大小，所有切图尽量压缩后在给开发