iOS系统切图方式：视觉营造的风向标

1.偶数的要求

在iOS系统下的环境进行设计产品元素的尺寸和切图，所有的控件以及图片元素的宽度和高度都应该是偶数，这样设计一方面方便产品显示的效果，另一方面也方便产品的视觉设计稿从实际像素向逻辑像素进行转化。由于iOS系统的抗锯齿机制的限制，如果切图输出以及产品视觉元素的尺寸不是偶数的话，会导致开发之后的切图输出在预览和使用时会变得模糊。

建议读者在切图的时候，如果是按照控件的实际大小进行切图时，最好在其四周留下2像素的透明边缘区域，以防止工程师在开发及变成动效时切图元素的边缘产生锯齿（图7-25）。

如果图标、按钮以及其他视觉元素本身具备点击效果，并且其实际范围小于iOS系统当中规范的最小点击热区的话，那就需要按照其最小的点距热区的大小来切图，也就是44×44pt。

如果设计师是按照750×1334px这样的设计环境来进行视觉高保真出图的话，对于这种情况最小的切图范围也要大于等于88×88px。主要是为了保证产品开发完成后手指点击图标时的点击热区足够大，避免出现点击无反馈这种现象（图7-26）。

图7-25

图7-26

2.需要为工程师提交几套切图

根据现有苹果手机的屏幕等级和尺寸来说，可以分为以下两种，一种是以iPhone 4、iPhone 5、iPhone 6、iPhone 7为主的2倍屏幕等级，其尺寸以640×960px至750×1334px的设计环境为主。另外一类是iPhone手机中各种plus版本的三倍屏幕等级，也就是物理分辨率尺寸在1080×1920px，屏幕实际尺寸在5.5英寸的手机。

所以，如果设计师现在主要是针对于750×1334px为主的设计环境来进行视觉高保真图设计的话，在切完图片之后本身所使用的就应该是2倍图。所以在切图输出时设计师需要在切图名称后加入“@2x”这样的命名后缀，例如home_icon_search@2x.png。

在此基础之上，根据屏幕倍率的要求，只需要在此2倍图的基础之上扩大1.5倍就可以得到适配在各种iPhone plus版本当中的切图，并且在切图名称后加入“@3x”，例如home_icon_search@3x.png。(www.xing528.com)

现在随着iOS系统的升级，早期的iPhone 3GS早已退出手机市场，现在设计师不需要再考虑之前的单倍切图。所以视觉设计师在给工程师提交切图输出物的时候需要提交两套切图，也就是一套2倍图，一套是在放大1.5倍之后所得到的3倍图（图7-27）。

同时，根据按钮和控件不同的使用和交互情况，例如点击前、点击时及不可点击（禁用）状态也要分别对其进行切图和输出（图7-28）。

图7-27

图7-28

3.切图元素的平铺

如果设计师在设计背景图或者产品控件时使用到重复元素的图案或者是纯色的话，那么设计师只需要提供给工程师一小块切图即可。所以要求背景图如果加入背景纹理的话最好是具有规律性的一些纹理，例如点阵、网格、横线等（图7-29）。

图7-29

最好不要使用斜线或者不规则纹理以及颜色渐变，这种视觉元素会增加工程师在开发过程中的工作成本。

切图元素平铺这样的做法可以很好的减少产品安装包占用的空间以及加快产品打开和运行速度。工程师在开发的时候只需要通过代码拉伸和无限平铺这个部分即可。