设计稿完成之后我们需要将图标等元素切图导出交付给开发，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个原则

1. 较短的单词可通过去掉“元音”形成缩写

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.相同位置相同类型图标的兼容性

最后需要注意的是：这些工具在提供切图和链接文件功能的同时，各有特色，需要根据你的具体需求和团队协作方式来选择最为合适的一款。

優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實的服務(wù)了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！

優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用（手機站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。