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人员开发。
资源存在本地和服务器
大部分需要依赖网络，算是中等投入
网友评论