1、切图：

众所周知，智能手机的屏幕大小都为双数值，因为1px是智能手机能够识别的最小单位，换句话就是1px不能在智能手机中被分为两份。所以如果是单数切图的话，手机系统就会自动拉伸切图，从而导致切图元素边缘模糊，进而造成开发出来的APP界面效果与原设计效果差距甚远。

2、图标切图输出应根据标准适配：

在开发中由于各机型的屏幕分辨率不同，需要针对一些大屏机型进行适配。为了适配大分辨率手机（例如iPhone 7 plus）图标在切图的时候需要输出@2X和@3X的切图，其中@2X的切图可以满足双平台大部分机型的适配要求，@3X是用来适配iPhone手机的各种plus版本的手机

3、尽量降低图片的大小

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

图片压缩网：http://tinypng.org/

4、可点击部件应当注意其点击区域不小于44px

44px的点击区域数值是iPhone 3（320*480px）普通显示屏下制出来的，换算成物理尺寸后大致是在7~9mm之间

iphone 3（44*44px）                               

iphnoe 4以上（88*88px）

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

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

6、iOS平台规则：

新建750*1334，分辨率72像素/英寸。中文用苹方黑，英文用San Francisco，如果安不上可以用Helvetica代替。750*1334尺寸的换算关系1pt=2px，也就是说程序员拿到我们的px单位的标注图，自己除以2就是pt。

记住4px的倍数比较好。（24px，32px，48px等）以偶数为单位，不清楚的可以截图量取大公司的APP界面作为参考。

750*1334px 设计稿尺寸：

状态栏高：40px

导航栏高：88px

标签栏高：98px 

7、iOS平台尺寸

8、安卓平台规范

如果想一稿适配iOS，那就新建720*1280，分辨率72像素/英寸

记住要是偶数，最小字号20px,中文用NOTO/思源黑体（是一个字体，叫法不同而已），英文用Roboto

720*1280 设计稿尺寸：

状态栏高：50px

导航栏高：96px

标签栏高：96px

9、安卓尺寸

10、启动图标的切法

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

11、启动页一类的图片不需要切图，或只需切有交互的一部分就可以了

12、正常的切图方式（PS中）

（1）切片工具

（2）点击图标——快速导出PNG——（要求图片一定要是偶数，若不是导出为画板可修改）

（3）给图标加个“.png”的后缀，选择文件——生成——图像资源

切图工具：cutterman

13、切图步骤：

（1）先联系程序（了解明明习惯及需求）

（2）建立热区，方便以后标注（可有可无）

（3）若部件相互叠在一起需要单独切

（4）图标是否有多重状态（未点击，可点击，不可点击）

14、点九切图（安卓平台）

安卓平台的应用软件开发包的一种特殊的图片形式，文件扩展名为".9.png"

切图：所有程序实现不了的icon，文字，一些部件，需要切图输出。系统文字不用切，APP用的是特殊文字，文字包需要发送，文字如果变形处理过，需要切图。

点九切图介绍：剪切（上下左右留有一像素）——新建一层，铅笔工具（#000，系统只识别这个颜色）——中间留两个像素+左右弧度10px+描边1px（则按钮宽度22px）——铅笔（#000）标出中点两个像素，高标出出弧度外的区域——则铅笔标注出的宽高重叠的位置可无限延伸——打文字（铅笔可在右侧及下方标注出文字所写范围）

相当于把一张图片分为9个部分（九宫格），分为四个角，四条边，和中间可以无限延伸的区域

四个黑点的含义：

上方黑点：标识可以左右无限延伸

左边黑点：左边选择的行可以无限延伸

下方黑点：文字的输入位置，为了保持下面不变形

右边黑点：文字输入的高，保持右边不变形

15、总结切图注意事项：

（1）所有的切图必须是偶数

（2）所有部件，包括效果（阴影，发光）确保输出整体尺寸为偶数

（3）所有字体也是偶数单位

（4）所有的变形字体把它当成icon来切

（5）如果有背景，尽量用平铺的背景图案来设计（减少程序体积）

（6）切图输出格式：png-24

（7）会根据内容更改的图片，切一个给开发区测试（例如：专辑封面，用户头像）

（8）重复的东西只切一个

切图软件：Assistor PS

16、标注

（1）将同类信息放在一起，整理排列，让人一目了然

（2）不要重复标注

（3）标注和图标本身预留一些空间

17、页面内容过多，可以选择两屏，三屏

（1）横向布局：元素左右的外间距，内间距，横向栏的高

（2）纵向布局：元素上下间距和高度

18、适配：

安卓：720*1280     1080*1920

iOS：750*1334    1242*2208

19、设计师需要准备：

切片三套（@1X，@2X，@3X）

@2X：安卓——720*1280     iOS：750*2208

@3X：安卓——1080*1920     iOS：1242*2208

20、iOS适配到安卓（720*1280——750*1334）

（1）把状态栏改为50px

（2）列表，序列类图标，保持左边不变，右边向左边缩进30px（750——720）

（3）图片1:1缩放

（4）Tab往上提

iPhone 6适配到iPhone 6 Plus，设计图*1.5倍

21、三大应用类别

任何平台都可以分为原生应用，web应用和混合应用

（1）原生应用（Native APP框架）：

一种基于智能移动设备本地操作系统（如iOS，Android，WP操作系统），并使用对应系统所适用的程序语言编写运行的第三方应用程序，用于它直接与操作系统对接，代码和界面都是针对所运行的平台开发和设计的，能很好地发挥出设备的性能，所以交互体验会更流畅。

（2）web应用（web APP框架）：

一种采用HTML语言编写的，存在于智能移动设备浏览器中的应用程序，不需要下载安装。可以说是触屏版的网页应用，由于它不依赖于操作系统，因此开发了一款 webAPP 后，基本能应用于各种系统平台。

（3）混合应用（Hybrid APP框架）：（例如：淘宝）

一种用NatIve技术来搭建APP的外壳，壳里的内容由web技术来提供的移动应用，间距"Native App"良好交互体验的优势和“web APP”跨平台开发的优势。

22、加载方式：

对于Hybrid APP框架的页面，由于同时存在 Native 和 web 部分，所以在加载内容时，可以分开考虑加载方式：

（1）Native 部分：

可以根据需要把常规内容存储在用户的手机上，加快加载的时间和减少重复加载相同内容的麻烦。

（2）web部分：

web内容区域是需要从网络上加载内容的，尤其在网络条件不好时，需要设计友好的等待状态，缓和用户的焦虑情绪。

23、三大APP应用框架：

（1）native APP ：需要为 iOS，Android 和 WP 系统各自开发一套APP，同时要维护多个版本，更新需要安装资源可以存在本地，支持离线（开发耗时最长，最费人力，但最稳定）

（2）web APP（相当于打开一个网页：偏浏览为主）

新闻类，视频类

只需要开发一套APP就可以运用到不同的平台上，只需要维护最新的版本，依赖网络资源存在服务器上，更新无需下载，（开发耗时最少，容易出问题，耗资最少）

（3）Hybrid APP ：

既要偏浏览器，又有较大操作互动（例如：聊天，购物类APP）

native的部分由iOS和Android人员开发。

资源存在本地和服务器

大部分需要依赖网络，算是中等投入