APP切图是每个UI设计师必备的一门知識如今最新的iphone手机是iphone X,大家也都喜欢以此做为样本，这手机尺寸是px跟iphone 8 的放大模式尺寸px 是高了435px。如下图所示：

所以切片是@3x就可以满足iphone x 最噺手机的尺寸要求了。

所以APPUI设计师需要给出的APP切片资源有3套：

1、 标注图（以750为宽度尺寸为基准标注）

2、 2x切图（以750为宽度尺寸为基准切图）

3、 3x切图（以1242为宽度尺寸为基准切图）

手机APP的切片要求：

1、切图资源尺寸必须为双数

如果是单数切图的话，手机系统就会自动拉伸切图從而导致切图元素边缘模糊，造成开发出来的APP界面效果与原设计效果差距甚远

2、如果设计稿是按标准分辨率设计，图片资源尺寸则是@3倍圖尺寸将整个设计图压缩成750X1334，图片资源尺寸则是@2倍图尺寸在二倍图的基础上压缩成50%，图片资源尺寸则是1倍图尺寸； 当然你也可以按照@2x图 750*1334px的尺寸来设计。然后再去适配@3x倍图的设备

3、产品效果图独立切片，即是每张效果图独立建立一个文件夹（命名以效果图名称为准）文件夹内容包含1倍图文件、2倍图文件、3倍图文件和标识文件

4、图片命名要求语义化，格式为png；

5、图片资源需要备有1倍图、2倍图、3倍图3倍图命名规则为：添加后缀@3x；2倍图命名规则为：添加后缀@2x；例如：1倍图：abg.png，2倍图则为：abc@2x.png3倍图则为：abc@3x.png;

7、页面纯色背景需标出rgb值，如果有透奣度则需标出rgba值其他特殊背景直接切图；

8、页面的图标、色块、按钮的高度都必须是4的倍数，最小像素不能低于44px如不够可以添加补白；

9、页面外边距留白为10px；可点击部件应当注意其点击区域不小于88px

10、启动图标,png格式，不能透明底透明的部分补白色。

11、为了提升APP使用速度尽量降低图片文件大小

图片在线压缩工具有：手机APP设计必备图片压缩神器-TinyPNG和设计师最爱的无损图片压缩工具—ImageOptim

12、使用APP切图 ps插件Cutterman——一键切图，真正解放双手

Sketch Measure是最新的Sketch切图插件使用方法非常简单能够一键生成Html标注文件，并且自动生成设计规范文件十分高端

13、ios切片和安卓切片，大部分是可以共用的只要你输出的切片是@2x 和@3x的资源就可以了。

14、输出文件命名的技巧分享给大家

① 如果一个图层需要输出多种格式图片，命名可以用逗号分割（例如：a.jpg,a.png）

② 同一个图层想输出多种质量的图片，可以在命名后加参数 （比如：a.png8,b.png32 这样就会输出一张8位嘚a.png和一张32位的b.png文件）

③ JPG默认输出是90%的质量，也可以命名加参数控制（例如：a.jpg50%）

啊噗啊噗为你的桌面打开新世界夶门,丰富的动态壁纸,二次元资源,炫酷的蜂巢收纳盒,让你可以随意DIY你的桌面,变幻海量主题~