一款APP的设计稿从设计到切图④
原文ui中国BAT_LCK
前几期讲了准备工作和标注的问题；切图其实和标注一样，没什么特别固定的规范，工程师的开发水平不同，要求的切图也不同所以切之前务必要和你的工程师搭档沟通一下，该如何去切才能配合他的开发
· 介绍一下工作流程以及后期切图资源的输出 ·
本期来说说切片资源的输出问题吧，我询问了工程师关于切图方面的问题，整理出来，所以本期应该还算是干货；
这一期不会教你一个页面一个页面的切，毕竟授人以鱼不如授人以渔，我会把一些需要注意的地方，某些规范以及方法写出来，希望可以做到举一反三。
前几期讲了准备工作和标注的问题；切图其实和标注一样，没什么特别固定的规范，工程师的开发水平不同，要求的切图也不同所以切之前务必要和你的工程师搭档沟通一下，该如何去切才能配合他的开发。
全局性的切图常见问题
① 你的所有设计尺寸，包括图形效果，应该尽量使用偶数。
技术开发使用的尺寸是设计稿像素尺寸的一半，也就是说，如果你用24px的字体，技术那边就是设置为12px；
所以标注的时候务必使用偶数，为了保证最佳的设计效果，避免出现0.5像素的虚边。
② 切图尺寸应该提供几套？
一款APP的设计稿从设计到切图④
ico_car.png IPhone2G，3G，3GS使用
ico_car@2x.png IPhone4，5，6优先加载此尺寸图片(不是必须使用这个尺寸，是优先加载调用这个尺寸)
ico_car@3x.png IPhone6 plus使用的尺寸
可以简单的理解为倍数关系(其实是为了满足不同分辨率，我觉得不用过于深究)，如果你使用IPhone 6尺寸做设计稿，那么切片输出就是@2x，缩小2倍就是@1x，扩大1.5倍就是@3x了。
理论上为了达到最好的视觉效果，你应该输出三套尺寸，我推荐输出三种尺寸的切片资源。
我的工程师搭档要求我给两套尺寸就可以，也就是@1x @2x的两种尺寸，因为我们没有6 plus的测试机，所以看不到效果，据他说应该不会太失真，但是为了保证效果，我还是给三套尺寸。
@1x @2x @3x是开发工具Xcode软件需要的UI资源，命好名称后，IOS设备会自动的选取合适尺寸。
实现原理我觉得设计师不用掌握的太过深入，知道这些足够了。
③共用资源的图片，输出一张就可以
一款APP的设计稿从设计到切图④
类似这种重复的按钮之类的，只要提供一张共用的资源就可以了；上面的文字是技术写上去的。
理论上按照最佳视觉效果，你应该提供多尺寸的图片；但通常我只提供最大尺寸的一张图片即可，这一点要和你的搭档沟通好，却问他需要什么方式。
④切片的输出格式
文件→存储为Web所用格式
一款APP的设计稿从设计到切图④
PNG 24，PNG 8，JPG
在JPG和PNG两种格式图片大小相差不是很大的情况下，推荐使用PNG；如果图片大小相差很大，使用JPG。
欢迎页面，ICON一定要使用PNG格式，在不影响视觉效果的前提下，可以考虑使用PNG 8；
PDF，SVG
IOS原生支持的两种矢量图片格式，但是支持的一般，并不能保证100%把所有图片效果渲染出来；
所以，为了保险起见，推荐还是使用位图吧。如果以后技术提升，100%支持SVG和PDF这种矢量格式图，那个时候也许不用提供这么多套尺寸了~
⑤图标的点击区域
一款APP的设计稿从设计到切图④
最小点击区域问题：
IOS人机指导手册里推荐的最小可点击元素的尺寸是44*44 point(点)，在设备上1 point等于1像素，所以转换成像素就是44*44像素，换算成物理尺寸大概是7mm左右吧（人机工效学研究中得出的结论：用食指操作，触击范围在7mm左右合适；用拇指操作，范围在9mm左右合适)。据说这个尺寸下，不容易出现误操作，误点击；小于这个尺寸，点击就会变的有些不太准确，一向注重用户体验的苹果公司定义这个最小点击尺寸也不是没根据的……
所以现在来做设计，为了图标精致，你可以把图标做的小一些，但是切图输出的时候，要考虑用户点击难易度的问题，所以，切图的时候，涉及到需要点击的小图标的时候，普通屏幕还是切44px大小，高清屏就需要切88px，不够的地方用透明区域补全，否则用户点击的时候会比较困难，会很不灵敏。
⑥图片图标的不同状态
一款APP的设计稿从设计到切图④
每种图标或者图片如果有不同状态，每一种不同的状态都需要进行切片输出。
比如按钮有正常(normal)，按下(pressed)，选中(selected)，禁用(disabled)等多种状态，比如按钮有正常(normal)，按下(pressed)，选中(selected)，禁用(disabled)等多种状态，最常出现的就是normal→pressed→normal；某些特定按钮控件会出现选中状态，具体情况具体分析吧。这里显示的是你要知道按钮可能有几种状态……
关于切图的工具，其实我用的最多的还是PS；
之前推荐过的标注切图工具PxCook，它标注很好用，但是切图只能输出@1x，@2x两种尺寸，如果没要求你提供@3x，这个软件还是非常方便的，如果你在做图的时候就命好名称，把PSD直接放到这个软件里，就可以直接导出切片了(自己去研究研究)。
切片的命名规则
命名并不是统一的规范，不同的公司不同的工程师有着自己不同的命名规范和命名习惯，但是大致还是有迹可循的，一般是：
切片种类+功能+图片描述（可有可无）+状态.png
名称应使用英文命名(中文不识别，推荐小写字母)，不要以数字或者符号当作开头，以下划线连接。
举个例子：一个首页的处于正常状态的确定按钮
btn_sure_nor.png
btn_sure_nor@2x.png
切片种类是按钮（btn）；功能是确定(sure)；状态是normal(正常)
我通常是以这种命名方式进行命名，如果你的公司有设计文档，去看看之前留下的命名规范，如果没有，那就去问工程师吧。
Tab bar(底部栏)
说说Tab bar这里，因为比较特殊。
如果单纯的只有图标，自然是只切图标就好了；
早上和工程师沟通，这里该怎么切，工程师给的建议是
如果是图标+文字的模式，图标最好单独切，文字后面程序加上去。
另外记住，同一模块的图标切片大小保持一致，上图的四个图标本身尺寸并不相同，但是切图的时候你需要切出相同尺寸的阴影大小，便于工程师开发使用。
以下是常用命名，这是我的命名习惯，并不是规范，所以要灵活(原谅我不堪的英语水平吧，实在不知道就用拼音命名)。
一款APP的设计稿从设计到切图④
你可以把这张命名规则的图片另存下去，没事可以看一看。
记住，该怎么切图，还是要和你的工程师搭档去沟通一下。
本期关于切片，就讲到这里吧，有什么疑问可以留言……
这系列不是教你一张一张怎么切，而是说的一种工作方法和注意事项，希望可以帮到你……
下一期我会把一些数据性的东西写一些，包括你应该提供多少尺寸的启动页面，提供多少尺寸的ICON，还有一些收尾的东西……
