《一款APP设计的从0到1》这是一篇系列文章干货，关于切图标注篇，由于被文章被人抄袭发布，以是，U妹只能重新来写文章进行发布，分享给大家了，上次U妹讲的是关于APP项目立项、预估韶光和界面设计篇，本日U妹来说一下，界面切图标注。
往期回顾：
《一款APP设计的从0到1之：iOS设计规范（精华篇）》
《一款APP设计的从0到1之：安卓设计规范篇》
这次U妹接着上次的茬连续，连续之前先来看看全体目录（满满的干货）
切图标注篇上期讲了界面设计，我们设计完界面，就要开始切图和标注了。
一、切图工具和标注工具
1、切图工具：
Cutterman，一款PS的插件，切图非常方便，但不支持绿色免安装版本PS，而且对PS版本哀求比较高，针对CS 6的已经不掩护更新了。推举安装官方完全版PS CC及以上版本，目前cutterman最新版为3.2.0版本。
Cutterman安装包和利用教程，请戳这里：《cutterman切图教程（设计师必备）》
Cutterman官方地址：http://www.cutterman.cn/
Assistor PS 也是一款PS的切图标注插件，也被誉为神器；我利用了下，感还可以，但是切图和标注上体验还是不高，但是Assistor PS的其他赞助功能还是很不错的，比如参考线赞助，圆角大小，磁铁功能。
2、标注工具：
PxCook（像素大厨），是一款切图标注设计工具软件。自2.0.0版本开始，支持PSD文件的笔墨，颜色，间隔自动智能识别。
优点在于将标注、切图这两项设计脱稿后集成在一个软件内完成，支持Windows和Mac双平台。标注功能包括：支持长度，颜色，区域，笔墨注释；从2.0.0版本开始，整体效率有了很大的提高，值得推举的是自动智能识别标注。
PxCook安装包和利用教程请戳这里：《PxCook标注教程（设计师必备）》
Parker，和cutterman是同一家的，Parker能够自动打算尺寸、间隔、笔墨大小、阴影、描边圆角、行高档信息，并按照你的须要进行标注, 它极大节省你标注的韶光，大幅度提升设计效率。（U妹现在一贯用Parker进行标注）
但是，parker并不是免费的，而是一款付费软件，须要60RMB。
Mark Man，也是一款高效的设计稿标注工具，支持 Win / Mac, 可免费利用根本功能，免费版的在体验上也是差强人意，毕竟是免费的，如果须要高等功能也是须要付费的60RMB。
以上工具各有优点和缺陷，在选择上紧张还是看个人的习气，哪个用着顺手就选择哪个。
二、页面标注
标注是非常主要的，开拓哥哥能不能完美的的还原设计稿，很大一部分取决于我们的标注；如果不清楚你该怎么标，一定要和开拓哥哥沟通！
沟通是非常有效办理问题的路子！
在这里我大致的说一下我的标注习气，不须要将每一张效果图都进行标注，你标注的页面能担保开拓能把每个页面都能顺利进行就可以了。
我拿我标注过的页面做个示例：
我们从上面的标注图可以看出，须要标注的内容有：
① 笔墨：字体大小、字体颜色
② 布局控件属性：控件宽高、背景色、透明度、描边、圆角大小
③ 列表：列表高度、列表颜色、列表内内容高下间距
④ 间距：控件之间的间隔、旁边边距
⑤ 段落笔墨：字体大小、字体颜色、行距
⑥ 全部属性：如导航栏笔墨大小、颜色，旁边边距，默认间距等，你可以提前跟开拓哥哥说好，不用标注。
所有的页面标注总结起来便是：标笔墨，标间距，标大小，标区域
注：标注颜色格式是利用16进制（如：#FF0000），还是RGB（255,0,0）？你须要和开拓哥哥商量一下，开他的开拓习气，一样平常采取16进制色值就好了。
三、界面切图
我还是拿图举例来解释：（有图有原形哈）
icon_alipay.png→iPhone 1-3代的手机(已经不考虑了)
icon_alipay@2x.png→iPhone4/4S/5/5S/6/6S/7对应尺寸，这便是我们常日所说的2倍图
icon_alipay@3x.png→iPhone6P/6SP/7P利用的尺寸，这便是3倍图
可以大略的理解为倍数关系，如果你利用750x1334px（iPhone 6/6S/7）尺寸做设计稿，那么切片输出便是@2x，缩小2倍便是@1x，扩大1.5倍便是@3x了。
我总结了一些切图中常常碰着的问题：
1、到底哪些资源须要切图，哪些不须要切图？
① 只假如无法用代码来实现和表达出来的，就须要切图
② 如果实在不清楚要不要切图，多和开拓沟通，他会见告你哪些是须要你切图的
2、切图须要切几套？（这里我只以iOS作为标准，安卓下期再说）
① 理论上，我们须要切3套图，是为了更好的适配。
② 在实际事情中，iOS只须要切2套图就可以，分别为：@2x和@3x
3、切图该怎么命名，不会命名怎么办？
之前我专门写了一篇关于界面切图命名规范的文章，请戳进去：
《UI设计师必须要知道的界面切图命名规范（升级版）》
把稳：切图是须要把稳几点：
① 切图输出格式必须为png24位、png8位、jpg格3种格式
② 同一模块内，切图大小应保持同等
③ 切图输出大小必须保持为偶数
④ 为了减小包的大小，所有切图只管即便压缩后在给开拓（包越小，你的boss越高兴，说不好会给你多发点年终奖哈）
关于图片压缩的文章我也写过了，你还不知道，请戳下面：
《图片压缩不求人，3个亲测实用高效的图片压缩神器》
如何用iOS的设计稿去适配安卓（划重点啦）在这里我专门针对很多小伙伴们关于一稿适配安卓和iOS的问题，我在这里给大家做一个简答的解答。
现在有一种情形现在非常普遍，那便是一稿两用；设计师都是做IOS版本的设计稿，来适配安卓，现在要给安卓用，该当怎么办？
iPhone的屏幕密度已经达到xHDPI了，用750x1334px的尺寸做设计稿；
实际上，750x1334的@3x的切图资源恰好是安卓XXhdpi（1080x1920px）的切图资源；安卓开拓用iOS的设计底稿身进行换算就可以了，条件是你必须和安卓工程师沟通。
另一种情形：你可以把750x1334的设计稿等比例调度尺寸到安卓1080x1920尺寸下，对各个控件进行微调，重新供应标注（用dp标注）。也便是说，你须要供应两套标注，一套给iOS的标注，一套给Android的标注。
家可能还有一个问题，那便是我用cutterman切安卓图片输出的有drawable和mipmap 2个文件夹，到底将哪个给开拓工程师呢？
答：以前用的开拓工具，是只有drawable， 没有mipmap的，后来新的开拓工具里面才有mipmap这个文件夹，专门用来放png格式的图片的，不过drawable里面还是可以放png图片。
以是现在我们给安卓工程师的切图输出文件只需给mipmap-前缀开头的就好。
关于切图和标注就说到这里了，如果在事情中，不清楚该怎么切怎么标的时候，多和开拓沟通互换，良好的沟通才是办理问题的唯一方法，牢记不要一个人在那瞎琢磨；有疑问和问题题也可给U妹留言，我们下期再见！
.............................................
UI妹儿—越努力，越幸运