UI切图的那些事
界面设计时，为了更好地与开发协作，UI 设计师们通常需要根据网页端、移动端不同的界面开发需求，单独制作各个参数的切图，并标注好尺寸和间距，再交付给开发完成 html + css 布局的静态页面。
「切图」作为 UI 设计师重要的输出物之一，不仅是一个体现设计师专业水准的重要标准，也是对设计态度最有力的表达，更是确保前端开发最大限度还原设计效果的关键。我们都知道合适、精准的切图可以确保设计效果图的高保真还原，并且降低工程师的开发工作量。
然而，切图时很多元素是不需要输出的，直接使用系统原生的设计元素修改参数即可。例如搜索框只需要在标注中表明尺寸大小、圆角大小、描边粗细、色值即可，工程师会根据设计效果通过代码实现这种效果。
而那些代码无法实现的设计元素则需要通过切图的方式交付给开发，比如：
- 图标切图输出
桌面应用图标和系统图标无法用代码写出来的，并且会被运用在不同的地方展示，在交付时需要把不同设备的尺寸全部输出切图。
- 按钮切图输出
按钮也是需要切图输出的元素，并且不仅要输出正常状态的切图，更要注意不要遗漏其他状态的切图，比如点击状态、不可点击状态等等。
- 图片类切图输出
图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。为方便开发同一类型的图片切图要保持尺寸一致，并且这些切图文件较大，需要控制切图文件的大小。
- 动效元素切图输出
动效元素切图一般是指加载动效所需要的切图元素，如下拉加载动效就是由若干张切图连续播放形成的。这种切图要求要保证动效播放时的流畅自然，是需要设计师仔细斟酌的。
- 可拉伸元素切图输出
可拉伸元素一般是指按钮、输入框等切图过程中可以对切图进行瘦身压缩的元素，如安卓端使用的·9图。这些元素通过瘦身压缩，可以极大地减小图片的大小提升用户使用速度。
这里需要注意的是：切图资源尺寸须为 8 或者 4 的倍数。
并且当图片或图标元素有阴影效果时，如果阴影有好几层、或者说是高斯模糊这种代码不好实现的效果，可以直接使用切图，如果是使用阴影做出来的简单投影效果，只需将参数告知前端开发即可。