5.4 切图和标注

切图，在移动端UI设计中，通常指是将一些开发不能实现出来的图标，按钮等等图片分别切出来，以便于开发进行布局和适配不同的屏幕尺寸。

标注，对组件、文字、间距等尺寸大小进行标记说明。这是开发能否做出和设计稿几乎一样效果的依据。

切图

---

** iOS**

在iPhone6出来之后，许多设计师把设计稿的基准尺寸换成了iPhone6，这样做出来的设计稿，往上能适配6+，往下能适配iPhone5、iPhone4系列。iOS设计稿需要切@1x、@2x、@3x三种尺寸的图。分别对应一倍图、二倍图和三倍图。这里简单解释一下，二倍图指的是跟手机真实分辨率一致下的设计稿的切图，一倍图则是分辨率一半下的设计稿的切图。用Ps做设计稿，一般使用跟手机分辨率一致的设计尺寸。使用Sketch时，一般使用默认的一倍图尺寸来做设计稿。

注：iOS的切图只需要放在同一个文件夹。@2x和@3x的切图需要加上相应后缀，比如一个icon的切图：icon_home_def@2x。

Android

安卓是出了名的碎片化，各种分辨率和尺寸充斥市场，所以Google为了规范设备尺寸引入了dpi（一英寸的像素数量）这个概念，为了简单起见，Android把屏幕密度分为了四个广义的大小：低（120dpi）、中（160dpi）、高（240dpi）和超高（320dpi）。

像素= DP * （ DPI / 160 ) 例如，在一个240dpi的屏幕里，1DP等于1.5PX。

现在主流的方式是以xhdpi，即720P来做设计稿，这样切图的时候只需要从xhdpi往上到xxxhdpi就可以了（也就是三套，倍率关系为1:1.5:2）。当然不同的开发和适配方式会有不同要求。

切出几种不同尺寸的图，安卓的需要分文件夹存放。如下图：

标注

用Sketch的同学不需要担心标注，只需要下载sketch measure这个插件，导出即可，完全不需要动手。本节是给没条件用Mac只能坚守Ps的同学准备的。

标注的方式有许多种，比如可以在一个页面上标注所有的间距、尺寸和文本属性（这样太混乱反而不利于开发）。但考虑到团队协作和方便开发，这里介绍一个方法。

做一份让工程师泪流满面的标注 http://www.ui.cn/detail/57742.html

Ps里较为常用的标注插件：Markman、Assistor