UI设计进阶干货 - 切图&命名

一、设计切图的原则

设计切图输出的目的是跟下游的工程师团队协同工作，那么在团队协作过程中，首先应该保证切图输出能够满足工程师设计效果图的高保真还原需求。

其次，切图输出应该尽可能降低工程师的开发工作量，避免因切图输出而导致不必要的工作量。所以我们要在程序里放置多套切图，然后让程序判断「主人」的手机是什么型号，显示不同的切图。这样才能够完美地呈现给用户最好的体验。最后，输出的切图应当尽可能的压缩大小，以降低APP的总大小，提升用户使用时的加载速度。所以切图输出应当做到切图精准、便与协同和压缩大小。

1. 切图资源尺寸必须为偶数

众所周知，智能手机的屏幕大小都是偶数值，比如iPhone 7的屏幕分辨率是750*1334 px。切图资源尺寸必须为双数，是为了保证切图资源在工程师开发时是高清显示。因为1px是智能手机能够识别的最小单位，换句话说就是1像素不能在智能手机上被分为两份各0.5px。

所以如果是单数切图的话，手机系统就会自动拉伸切图，从而导致切图元素边缘模糊，造成开发出来的APP界面效果与原设计效果差距甚远。

2. 图标切图输出多个平台尺寸

在切图资源输出中，图标切图输出是至关重要的部分。在开发中由于各机型的屏幕分辨率不同，需要针对一些大屏机型进行适配。

为了适配大分辨率手机（例如iPhone

7plus），图标在切图的时候需要输出@2x和@3x的切图，其中@2x的切图可以满足双平台大部分机型的适配要求，@3x是用来适配iPhone手机的各种plus版本（后边会有文章专门讲解关于适配的问题）。@3x是@2x尺寸的1.5倍，例如一个图标切图@2x尺寸是44px，那么@3x尺寸是66px。

3. 为提升APP加载，尽量降低图片大小

在切图资源输出中，图标切图是很重要的部分，比如新手引导页、启动页面、默认图、广告图等。图片切图一般情况下文件大小都是相对较大，不利于用户在使用app过程中加载页面，因此图片切图要尽量压缩图片文件的大小。

4. 可点击部件注意点击区域不小于88px

44px的点击区域数值是在iPhone 3 （320×480px）普通显示屏下制定出来的，在手机分辨率大幅提升的现在，这个数据自然要与时俱进。

在iPhone7 （750*1334px）的Retina 显示屏下44px点击区域就变为了88px。但无论是320*480px尺寸下的44px还是在750*1334px尺寸下的88px，换算成物理尺寸后大致是在7mm-9mm之间。所以在@2x中就是44pt（88px）。苹果的导航条、列表、工具栏都充满了44pt（88px）这个神秘数字。我们在设计时一定也要考虑到手指的点击区域。所以在iOS官方的空间尺寸也经常出现88px的数值，比如菜单栏的高度便是88px。

无处不见的44pt（88px）

5. 按钮部件要把相关状态都切图输出

在切图过程中，不仅要输出正常状态的切图，更要注意不要遗漏其他状态的切图，比如正常状态、点击状态、不可点击状态。这个也是设计师经常会出现的失误，比如在按钮切图的过程中可能会忽略点击切图的状态。所以设计师在做设计图是最好尽量把页面中会出现的各种状态展示出来，避免后期切图的时候遗漏状态。

二、切图输出类型

1.桌面应用图标切图输出

App的桌面图标会被运用在很多不同的地方展示，比如手机桌面、APP store、手机的设置列表，所以app桌面图标需要很多个不同尺寸的切图输出。两个平台对相应桌面图标设计输出尺寸也不尽相同，在输出的时候要把双平台的这些尺寸全部输出切图。桌面图标切图只需要提供直角的图标切图即可，手机系统会自动生成圆角效果。

2.系统图标切图输出

一套图适配双平台：

iOS平台（iPhone 6plus版本除外）和安卓平台公用44*44px切图素材，即可实现一套切图适配两个平台的开发。

适配大屏幕：

为了适配iPhone 6plus、iPhone 7plus，单独切一套比原有44*44px切图大1.5倍的切图，即66*66px大小的切图。

2.图片类切图输出

图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。

同一类型的图片切图，一般要保持同样的大小尺寸以便于工程师开发使用。另外一般这些切图的文件较大，在切图过程中需要控制切图文件的大小。

3.动效元素切图输出

动效元素切图一般是指在app中加载动效所需要的切图元素，比如QQ 的下拉加载动效就是由若干张切图连续播放形成的。

这些图片按照序号排序播放我们页把他们叫做序列切图。序列切图是在做UI设计的过程中必然会遇到的问题，这种切图要求要保证动效播放时的流畅自然，是需要设计师仔细斟酌的。