APP切图详细规范终极指南2018

我们都知道一套完整的 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」就可以了。如[email protected]、[email protected] 、[email protected]。在命名时 bg-xxx.png 中间的 – 可以改为 _ 。

iOS 上写 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代表不透明

屏幕快照尺寸规格

https://help.apple.com/app-store-connect/#/devd274dd925

APP切图详细规范终极指南2018

1、切图尺寸规则

1.1 iOS切图尺寸规则

1.2 Android切图尺寸规则

1.2.1 android手机有一些初始的分辨率：

1.2.2 在android中，以320x480分辨率为基准屏幕，即密度值为160时，1dp=1px：

1.2.3 切图包的存放位置（以当前48dp为例）：

1.2.4 常用设计尺寸分辨率：

1.2.5 多种屏幕分辨率规则：

1.2.6 描述间距或长度时使用dp：

1.2.7 描述字号大小时使用sp：

2、 APP切图命名规则

2.1 前缀

2.2 位置、组件、用途

2.3 后缀

2.4 注意事项

3、尺寸字体颜色标注

3.1 尺寸：

3.2 字体：

3.3 颜色：

屏幕快照尺寸规格

你可能感兴趣的:(APP切图详细规范终极指南2018)