我们都知道一套完整的 App 通常会有很多张切图，不管是 iPhone 需要 1x、2x、3x 图档，Android 需要至少 3 种 hdpi、xhdpi、xxhdpi。在庞大的切图数量下如何让负责套图的 RD 快速找到所需图档，档名的命令方式就需要双方统一格式方便大家作业。所以，制定一套非常有效而方便的APP切图命名规范非常有用的。
1、切图尺寸规则
1.1 iOS切图尺寸规则
目前iPhone有10种型号，5种屏幕尺寸，再加上6plus的“降采样”（Downsampling）（1080-1920），还有iPhone6和6+上的放大模式（1125-2001）和默认模式（1242-2208），是不是感觉好恐怖？但是不用怕，我分享一套超简单的适配方法，看完你都不信有这么简单~
UI交付给开发的资料有
- 标注图（以640为宽度尺寸为基准标注）
- 2x切图（以640为宽度尺寸为基准切图）
- 3x切图（以1280为宽度尺寸为基准切图）
开发看到这份标注图，可以自己用上面的数字，乘以1.5得出3X的数字。
iPhone屏幕尺寸
- 为什么3x切图要以1280来为宽度？
其实iPhone6+的尺寸1242*2208作为3x，怎么算都又难记又不能整除，我们直接640*2得到1280跟1242相差也没几十个像素，最重要的是不虚边啊，放在真机上看（处女座除外）看不出差别的。 - 为什么只设宽度？
为了保持长宽比例。iPhone的这几个尺寸不是正好的，宽度放大后高度总差那么几个像素，这不要紧，千万别去改高度，手机屏幕是可以上下滑动的嘛。不可以滑动必须保证一屏显示的除外，手动去调整好了。 - 为什么开发不是乘以2而是乘以1.5来算尺寸和字号？因为大屏手机就是要显示更多内容而存在的。纯等比放大界面看起来傻大傻大的，实验证明1.5倍是正好的。
iOS图标尺寸：https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/
iOS图标尺寸
LaunchImage
iPhone Portrait iOS 8，9-Retina HD 5.5 （1242×2208） @3x
iPhone Portrait iOS 8，9-Retina HD 4.7 （750×1334） @2x
iPhone Portrait iOS 7,9-2x （640×960） @2x
iPhone Portrait iOS 7,9-Retina 4 （640×1136） @2x
iPhone Portrait iOS 5,6-1x （320×480） @1x
iPhone Portrait iOS 5,6-2x （640×960） @2x
iPhone Portrait iOS 5,6-Retina4 （640×1136） @2x
LaunchImage:
android: 720*1280
iOS:
640x960 iPhone 4S
640x1136 iPhone 5S
750x1334 iPhone 8
1242x2208 iPhone 8 Plus
1125x2436 iPhoneX
828 x 1792 iPhone XR
1242 x 2688 iPhone XS Max
1.2 Android切图尺寸规则
- px（像素）是我们UI设计师在PS里使用的（不解释），同时也是手机屏幕上所显示的（也不解释）
- dp 是开发写layout的时候使用的尺寸单位，sp是开发写layout时关于字体的字号单位，且dp与sp总为1：1关系。
1.2.1 android手机有一些初始的分辨率：
| 密度 | ldpi | mdpi | hdpi | xhdpi | xxhdpi | xxxhdpi |
|---|---|---|---|---|---|---|
| 密度值 | 120 | 160 | 240 | 320 | 480 | 640 |
| 分辨率 | 240x320 | 320x480 | 480x800 | 720x1280 | 1080x1920 | 2160x3840 |
1.2.2 在android中，以320x480分辨率为基准屏幕，即密度值为160时，1dp=1px：
image.png
1.2.3 切图包的存放位置（以当前48dp为例）：
| 对应dp | 48dp | 48dp | 48dp | 48dp | 48dp | 48dp |
|---|---|---|---|---|---|---|
| 对应px | 36px | 48px | 72p | 96px | 144px | 192px |
| 文件夹 | ldpi | mdpi | hdpi | xhdpi | xxhdpi | xxxhdpi |
1.2.4 常用设计尺寸分辨率：
常用设计尺寸分辨率
1.2.5 多种屏幕分辨率规则：
多种屏幕分辨率规则
1.2.6 描述间距或长度时使用dp：
描述间距或长度时使用dp
image.png
1.2.7 描述字号大小时使用sp：
描述字号大小时使用sp
image.png
2、 APP切图命名规则
基本上 App 的切图可分为下面几大类：
背景、按钮、图示、图片、照片、TabBar icon 等。
为了让切图便於管理，通常会依图片性质命名。例如 bg-xxx.png、btn-xxx.png、img-xxx.png、tab-xxx.png。当图档要做给 Retina 萤幕使用时，只要在副档名前加上「@2x」就可以了。如bg-xxx@2x.png、btn-xxx@2x.png 、icon-xxx@2x.png。在命名时 bg-xxx.png 中间的 – 可以改为 _ 。
iOS HIG 上写著 Desktop icon 档案命名使用 -，如果切图只给 iOS 使用，可以和 iOS 采用相同的命名方式。请注意 Android 不支援 – 的命名方式，如果图档要运用在 Android 上，请把所有的 – 改成 _ 底线。最好不要把数字或符号当成档名的开头，如 3-icon.png 、+abc.png之类。
2.1 前缀
前缀是一种简单记忆、节约成本的纯文本标记语言，使用前缀能快速知道切图是用作那一组件类别，好的前缀也无非就以下几种：
| 前缀 | 原始 | 说明 | 示例 |
|---|---|---|---|
| icon | icon | 主要用于布局和子布局的图标 | icon_bank |
| bg | background | 要用于布局和子布局的背景 | bg_welcome |
| btn | button | 主要用于按钮的表示，有时会在ic和btn之间犹豫，简单的区分即是功能视图，如果一个view执行的时back或者confirm或者cancel的功能，则命名上则应该使用btn | btn_ok |
| img | image | 主要用于静态图片 | img_avatar |
| cl | color | 主要用于颜色 | cl_white |
2.2 位置、组件、用途
| 位置标识 | 说明 | 示例 |
|---|---|---|
| common | 公共标识 | img_common_bg(共同背景) |
| tab | 选项卡 | icon_tab_setting (设置) |
| nav | 导航条 | nav_return (返回) |
| notify | 状态栏、通知栏 | btn_notify_download (通知栏下载按钮) |
| dialog | 对话框 | bg_dialog_blur (模糊化的对话框背景) |
| menu | 菜单 | bg_menu_save (保存菜单背景) |
| anim | 用于动画 | img_anim_loading01 (loading帧动画第一帧) |
| pop | 用于弹出框 | img_pop_bg (弹出框背景，区别于dialog) |
| mask | 用于遮罩层 | img_dialog_mask (对话框上层遮罩) |
| circle | 圆圈 | img_circle_avatar (圆形头像) |
2.3 后缀
后缀一般是来表示切图的颜色、透明度、状态等信息：
| 后缀 | 说明 | 示例 |
|---|---|---|
| normal | 默认状态 | btn_cancel_normal (取消按钮默认状态时) |
| selected | 选中状态 | btn_cancel_selected (取消按钮选中时) |
| enabled | 可以点击 | btn_cancel_enabled (取消按钮可用时) |
| tra | 透明度 | bg_banner_green_tra30 (banner中绿色背景指定30%透明) |
| white | 白色 | bg_white (白色) |
| level | 层次、水平 | img_status_level60 (状态为60的时候) |
| bg | 用于后缀背景 | 当不在前缀命名时，添加到后缀命名 |
通过上述介绍，一般遇到的情况也就这么一些，只需要按照前缀+位置用途+后缀就差不多了，这里列举一些比较好的命名：
| 命名 | 说明 |
|---|---|
| btn_download_start_green_normal | 绿色开始下载按钮默认状态 |
| img_setting_bg | 设置页面全背景 |
| ic_menu_save_gray_normal | 菜单中灰色保存按钮默认状态 |
| img_notify_wlan_level20 | 状态栏中wifi信号强度为20的时候 |
| ic_share_qzone_pressed | QQ空间分享图标选中时 |
2.4 注意事项
- 不使用特殊符号开头： 如 — _ @ 等
- 不使用阿拉伯数字开头
- 不在任何位置使用特殊符号包括中文符号和中划线
- 命名分隔符统一为下划线
- 九宫格图片文件拓展名为 .9.png
- 后缀状态名最好为全拼，如normal
3、尺寸字体颜色标注
3.1 尺寸：
1、画布大小定位 720 x 1280 或 1080 x 1920，72 dpi等；
2、只使用偶数单位的尺寸，比如 96 px 的列表项高度，16 px 的边距，64 px 的图标边长；
3、只使用偶数单位 24 pt，28 pt，36 pt等字体大小；
4、设计完成以后，所有尺寸的 px 值除以 2（需要约定的倍数） 作为 dp 数值交给工程师；
5、所有字体的 pt 值除以 2 （需要约定的倍数）作为 sp 数值交给工程师；
6、所有切图变成三份，分别是原始大小、缩小 1.5 倍，缩小 2 倍，分别作为 xhdpi，hdpi，mdpi 的资源交给工程师；
3.2 字体：
只需要全局标出共用字体即可，特殊字体特殊标注。
3.3 颜色：
颜色值一般使用十六进制表示，如 #FFFFFF, #90FFFFFF 其中90两位代表透明度。透明度计算：
225∗透明度百分比转16进制
FF 代表不透明，7F代表半透明，00代表不透明
网友评论