UI设计切图是UI设计者最重要的设计输出。一般情况下，需要切图输出的有：1.输出桌面图标的切割、2.系统图示的切割输出、3.图片类别的切割输出、4.动态效果元素切割输出、5.可伸缩的元素的切割输出、6.带投影的button，car。

UI设计切图是UI设计者最重要的设计输出，切图资源输出的规范与否，直接影响着UI设计工程师对设计结果的还原程度。设计者的切图输出是反映设计者专业水平的重要依据，也是设计师表达自己对设计态度的最有力的语言。
怎样输出对高段切割的全局控制和细节关注，应该成为所有设计者都需要不断追求的能力。

一、设计切图的原则：

1.切割资源的大小必须是偶数。

2.图标切图输出应该基于标准大小，并考虑适配情况

3.为了提高应用程序的速度，尽可能减小图片文件的尺寸。
其中，对图形资源输出的图标切割输出非常重要，如初学者引导页、启动页面、默认图、广告图等。

4.可点击的部分应注意其点击范围不少于88像素。

5.可点击部分要对所有相关状态进行分割输出，如正常状态、点击状态。
切图时不仅要输出正常状态下的切图，还要注意不能漏掉其它状态的切图。这也是设计者经常犯的一个错误。

7.最重要的是多和开发小哥沟通

二、剪切输出类型：
1.输出桌面图标的切割。
该app的桌面图标将被应用到许多不同的地方，如手机桌面，APPstore，手机设置列表，因此桌面应用程序图标需要许多不同大小的切分输出。这两个平台的设计对于桌面图标的输出尺寸也不一样，在输出时要把这两个平台上的所有尺寸都输出切图。本机图标切向图片只需提供一个直角图标切图，手机系统将自动产生圆角效果。

2.系统图示的切割输出。
一组图形适配双平台：ios平台(iphone6plus版除外)和安卓平台公用44*44px切图，就可以实现一套切图适配两个平台。
适配大屏幕：为适配iphone6plus,iphone7plus为原始的44*44px切图大1.5倍，即66*66px大小的切图。(将在后面的文章中详细阐述UI设计的适合性问题)

3.图片类别的切割输出。
图画类切主要是指初学者页面、初学者引导页、预设提示图、广告图等。同一种图画切图通常保持相同的尺寸尺寸以供工程师使用。此外通常这些切图文件比较大，在切图过程中需要控制切图文件的大小。(后面的一篇文章将详细说明如何压缩切割尺寸)
全屏切图类；局部切图类；页面提示用例图表。

4.动态效果元素切割输出。
动态元素切图通常是指在app中加载动态效果所需的切图元素，例如qq的拉下负载作用就是由连续播放几张切图形成的动画效果。这张照片按顺序播放我们的网页被称为序列切图。序列切图是做UI设计过程中必然要遇到的问题，这种切入要求要保证动作流畅自然，是需要设计者慎重考虑的。
序列图切图；顺序图起作用。

5.可伸缩的元素的切割输出。
可伸性元件一般是指按钮，在输入框等切图过程中，可以减缩切图元素。通过精简压缩，这些元素能够显著提高用户在app中加载的速度，从而显著提高图片的尺寸。ios的这种切线方法被称为平铺切图，而在安卓系统中的切线方法称为点九切图法。
侧向拉力切割；垂直拉伸切图。

6.带投影的button，card都要切图

三、不被切割的部分：
重新设计的切图输出中有很多元素是不需要输出的，直接用系统本机设计元素修改参数。设计者需要知道哪些元素需要切割，哪些使用系统自带以避免不必要的切图。例如文本，卡片背景，线条，以及一些标准的集合图形不需要进行切割。
举例来说，搜索框只需在标注中标明尺寸大小，圆角大小，描边粗细，颜色值等，工程师将根据设计效果编码实现这一效果。