设计稿完成之后我们需要将图标等元素切图导出交付给开发，iOS和安卓需要根据要求导出不同倍数的png格式切图文件。
1、切图尺寸规则
切图资源尺寸必须为双数
IOS:
现在通常是输出2套，以@2x、@3X为后缀，也就是2倍图、3倍图
i0S启动图：图标按照最大1024×1024来设计，之后按照比例缩小到每个尺寸。提交没有高光和阴影的直角方形图即可。
Android:
现在通常是输出3套，xhdpi(超清，对应1OS的2倍图)
xxhdpi(超超清，对应IOS的3倍图)、xxxhdpi（超超超清），安
卓切图不需要将倍数加到切图命名内，而是每种尺寸单独建立一个文件夹。
4:3
VAG:640 x 480 (Video Graphics Array)
QVGA:320 x 240(Quarter VGA)
HVGA:480 x 320(Half-size VGA)
SVGA:800 x600(Super VGA)
5:3
WVGA:800 x 480 (Wide VGA)
16:9
FWVGA:854 x 480(Full Wide VGA)
HD:1920 x 1080 (High Definition)
QHD:960 x540 (Quarter High Definition)
720p:1280×720标清
1080p:1920×1080高清
2、切图命名规范
规范的命名方式可以提高开发人员的开发效率和整个开发团队的友好合作。对我们自己的文件整理有很大的帮助，后期修改文件、图层的时候更加方便快捷。
减少很多不必要的沟通与重复切图的概率，而且规范的命名也显得我们自身比较专业。
切图命名英文缩写的3个原则
较短的单词可通过去掉“元音”形成缩写
较长的单词可取单词的头部几个字母形成缩写
-
还有一些约定俗成的英文单词缩写
命名规则：模块_类别_功能_状态.png
举个栗子：nav_button_search_default@2x.png
释义为：导航_按钮_搜索_默认@2x.png
3、切图常见状态简称
bg 背景background
nav导航栏navbar
tab标签栏tabbar
btn按钮button
img图片image
del删除delete
msg提示信息message
pop弹出pop up
icon 图标
selected选择
disabled不可点击
user用户
default默认
pressed按下
back返回
edit编辑
content内容
left左
logo标识
login登录
refresh刷新
banner广告
link链接
download下载
4、切图输出
第一种：在设计软件里手动切图
现在的U设计软件Sketch、Figma、Mstergo等都可以直接导出切图文件，只需要设置好相应的倍数和前缓、后缀，就可以快速的导出切图文件
第二种：设计软件+第三方插件
在 Sketch 或 PS 里把设计稿做好，再上传到第三方插件里去切，这样的好处是效率提高很多，缺点就是如果要修改设计稿或者有漏标的内容，要重新上传。
5、切图工具推荐
PS、AI、Figma、Sketch、XD、masterGO、pixso、即时设计、墨刀等等这些都可以通过插件就可以完成切图的工作，同时标注的工作也会自动完成。
在这个过程中要注意的事项：
1.标注的准确性和设计规范中规则的延续
2.切图的尺寸统一
3.成套图标绘制风格的一致性
4.相同位置相同类型图标的兼容性
最后需要注意的是：这些工具在提供切图和链接文件功能的同时，各有特色，需要根据你的具体需求和团队协作方式来选择最为合适的一款。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
