〈ui如何切图〉ui如何切图给开发!

一、建立项目

二、项目预计时间

三、界面设计

四、切割图表注释

五、视觉恢复

六、网上准备

剪图案以示文字。

上一期讲了界面设计，我们设计界面后，我们将开始切割图案和尺寸。

一、切图工具和标注工具

1、切图工具：

Cutterman，一款PS的插件，切图非常方便，但不支持绿色免安装版本PS，而且对PS版本要求比较高，针对CS 6的已经不维护更新了。推荐安装官方完整版PS CC及以上版本，目前cutterman最新版为3.2.0版本。

Cutterman安装包和使用教程，请戳这里：《cutterman切图教程（设计师必备）》

Cutterman官方地址：

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。

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

众所周知智能手机的屏幕大小都是双数值，比如iphone 7的屏幕分辨率是750*1334px。切图资源尺寸必须为双数是为了保证切图资源在工程师开发时是高清显示。因为1px是智能手机能够识别的最小单位，换句话说就是1像素不能在智能手机被分为两份。所以如果是单数切图的话手机系统就会自动拉伸切图从而导致切图元素边缘模糊，进而造成开发出来的APP界面效果与原设计效果差距甚远。

2.图标切图输出应根据标准尺寸输出并且考虑到手机适配（主要是iPhone 6plus的适配）

在切图资源输出中图标切图输出是至关重要的部分。因为在开发中由于各机型的屏幕分辨率不同，需要针对一些大屏机型进行适配。为了适配大分辨率手机（例如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之间。早在人机工程学的研究中曾得出结论，认为人类舒适的触击范围需在7-9mm的大小。所以在ios官方的空间尺寸也经常出现88px的数值，比如菜单栏的高度便是88px。

5.可点击部件要把相关状态都切图输出，比如正常状态、点击状态。

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

1.在Android的显示模式为mdpi的时候，1dp等于1px。

2.在mdpi的情况下，屏幕分辨率是320*480px。

3.在ios的分辨率模式为@x1的时候，屏幕分辨率是320*480px。（注意这时候pt和px比例是1:1）

4.因为ios在@x1时候的像素关系和Android的mdpi时候的像素关系是一样的，@x2等于mdpi的2倍，也就是xhdpi的分辨率，所以推导关系如下：

对应@x1的标准分辨率时（iPhone2、3还有iPad1、2）

mdpi文字/图标/间距 = （@x1）*1 = px；

hdpi文字/图标/间距 = （@x1）*1.5 = px；

xhdpi文字/图标/间距 = （@x1）*2 = px；

xxdpi文字/图标/间距= （@x1）*2.25 = px；

对应@x2的高清分辨率时（iPhone4、4s、5、5s还有iPad Retina）

mdpi文字/图标/间距 = （@x2/2）*1 = px；

hdpi文字/图标/间距 = （@x2/2）*1.5 = px；

xhdpi文字/图标/间距 = （@x2/2）*2 = px；

xxdpi文字/图标/间距= （@x2/2）*2.25 = px；

对应@x3的高清分辨率时（iPhone6、6p）

mdpi文字/图标/间距 = （@x3/3）*1 = px；

hdpi文字/图标/间距 = （@x3/3）*1.5 = px；

xhdpi文字/图标/间距 = （@x3/3）*2 = px；

xxdpi文字/图标/间距= （@x3/3）*2.25 = px；

5.给开发的时候注意按着dpi模式把尺寸标注改成对应的dp。