ios安卓切图

『壹』 iOS、Android 开发单位换算及 UI 切图要求

在移动端 UI 设计中，经常会用到的单位有 4 种：px、pt、dp 和 sp，很多人分辨不清这几种单位及其换算关系，以及 iOS 和 Android 的切图要求，我在这里做下简单的介绍，希望大家读完后能有所收获（如有错误，欢迎纠正）。

px 即 pixel，像素点，电子屏幕上组成图像的最基本单位，在描述屏幕分辨率时也会使用该单位。1px 表示一个像素，例如 iPhone 8 的尺寸为 750px × 1334px，表示在该手机屏幕上，水平方向每行有 750 个像素点，垂直方向每列有 1334 个像素点。

pt 即 point，有两个含义：一是印刷行业常用单位，是一个标准长度单位，绝对大小，1pt = 1/72 英寸 = 0.35mm；二是 iOS 开发用的基本单位，当设计师以 1 倍尺寸进行设计 (375pt × 667pt) 并给出标注稿时，开发人员无需除以 2 便可直接使用。

dp 是安卓开发用的基准单位，在 dpi (屏幕像素密度，即每英寸包含的像素点) 为 160 的屏幕为上，1dp = 1px。为了简单起见，Android 把屏幕密度分为了 5 种：mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi，下文会详细介绍其换算关系。

在安卓系统里，sp 与 dp 类似，不同的是 sp 可以根据用户的字体大小首选项进行缩放，而 dp 则不会。 尽量使用 dp 作为空间大小单位，sp 作为文字相关大小单位，例如：新闻类和短信类等大篇幅文本，推荐使用 sp 为单位。

在 iOS 开发中，不同机型的 iPhone 设备需要用到不同倍率的切图，下表格为各 iPhone 机型显示屏参数对比：

这里再简单了解下两个概念，ppi 和 dpi。

ppi (iOS)：即 pixel per inch，屏幕像素密度，表示每英寸所包含的像素点，该值越高，屏幕越细腻。
dpi (iOS) ：开发像素密度，表示每英寸所包含的开发像素点。

在 iOS 开发中，规定以 ppi = 163，dpi = 163 作为开发基准，

当 ppi = 163，dpi = 163 时，则 1pt = 1px；
当 ppi = 326，dpi = 163 时，则 1pt = 2px；
当 ppi = 401，dpi = 154 时，则 1pt = 2.6px ≈ 3px。
(为什么 iPhone 8+/7+/6+ 的开发基准是154？可能要问问苹果了...)

依此类推，得出换算公式一：

若有小数，四舍五入即可。

在 iOS 开发中，目前只需要 @2x 和 @3x 两种切图，所以导出 2 倍和 3 倍的 png 图片即可。导出前注意检查切图是否存在半像素、毛边等情况，保证对齐像素，这样才能有效避免上线后页面上的 icon 出现虚边的问题，提高细节质量。

另外补充一点：从整体开发尺寸看，iPhone 8 是 375 × 667 pt (@2x)，而 iPhone X 是 375 × 812 pt (@3x)，同样的宽度，一个用 @2x 图，一个用 @3x 图，iPhone X 表现出了更高的清晰度，如图 2-1 所示。

在 Android 开发中，因为机型参差不齐，需要用屏幕密度来区分设计。

注意，这里的 dpi (Android) 和上文的 dpi (iOS) 是不同的概念，dpi (iOS) 是开发像素密度，而 dpi (Android) 即 dot per inch，表示屏幕像素密度 ，类似 iOS 开发里的 ppi。

Android 中，规定以 dpi = 160 为开发基准，

当 dpi = 160，基准dpi = 160，1dp = 1px；
当 dpi = 240，基准dpi = 160，1dp = 1.5px；
当 dpi = 320，基准dpi = 160，1dp = 2px。

依此类推，得出换算公式二：

在设计图标时，对于 5 种主流的屏幕像素密度 (mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi) 应按照 2:3:4:6:8 的比例进行缩放，如图 3-1 所示。

例如，一个启动图标的尺寸为 48 × 48 dp，这表示在 mdpi 的屏幕上其实际尺寸应为 48 × 48 px；在 hdpi 的屏幕上其实际大小是 mdpi 的 1.5 倍 (72 × 72 px)；在 xhdpi 的屏幕上其实际大小是 mdpi 的 2 倍 (96 × 96 px)，依此类推。

在某些况行下，还需要提供一种特殊的切图： 点九图 (上图所示)。点九图是 Android 开发中用到的一种特殊格式的图片，文件名以 “.9.png” 结尾。

这种图片能告诉程序，图像哪一部分可以被拉升，哪一部分不能被拉升需要保持原有比列。运用点九图可以保证图片在不模糊变形的前提下做到自适应，比如对话框背景图片就会用到点九图。

--
以上是全部内容，感谢你的阅读！
End

『贰』 苹果app与安卓app切图有什么区别

一.android版
在做android版本设计的时候，尺寸有很多种，这时我们要以一种尺寸为基准，那这个基准尺寸是480px*800px，设计图完成之后就开始切图了，我拿我之前设计的一张图为例子讲解下：

当看到上边这张设计图的时候，我们首先分析下应该给技术切哪些图（为了避免以后少改动，建议切图之前最好和技术先沟通下，怎么切）；
1、底部栏目的icon和背景：
这个一般有2种切法：（有默认和选中之后的效果）

2、顶部栏目的背景切图：
由于顶部导航栏的是渐变样式，所以切图只需要切一小条，技术来平铺拉伸就可以~（PS：如果是花纹背景，就必须切整条了，因为花纹切一小条就会被拉伸了~）
3、标注文字大小和行间距：（以这张图为例子，我标注好了，请看下图）
需要注意的：
A：android主要有3种屏，即：
QVGA和WQVGA屏density=120;
HVGA屏density=160;
WVGA屏density=240;
B：apk的资源包中，
当屏幕density=240时使用hdpi标签的资源
当屏幕density=160时使用mdpi标签的资源
当屏幕density=120时使用ldpi标签的资源；
C：我们标注的是PX，但是技术的算法是DP，所以需要PX和DP进行转化，PX和DP的转化主要跟密度有关系，当密度density=160即（屏幕尺寸：320*480）时，1PX=1DP；当密度density=240即（屏幕尺寸：480*800）时，1PX=0.75DP；当屏幕的尺寸大于480*800的时候，密度都按照240计算即可；当密度density=120即（屏幕尺寸：240*320）时，这个现在几乎没有人用了，所以我也不知道转化公式，如果您知道，可以留言告诉我啊~
注意：因为我们做的是基于480*800尺寸的，大家都知道android的尺寸太多了，要想适配现在流行的尺寸，比如：640*960；720*1280等，唯一的解决办法就是图标可以根据不同尺寸各做一套，也就是图标需要做480、640和720共3套图标，不过如果你们的产品的要求不严格，做一套就可以，只不过是在大于480尺寸的屏幕上有些图标被拉大变虚而已~
二.ios版
在做ios版本设计的时候，尺寸有3种，分别是：320*480、640*960、640*1136；这时我们要以一种尺寸为基准，那这个基准尺寸是640px*960px，设计图完成之后就开始切图了，我拿我之前设计的一张图为例子讲解下：

当看到上边这张设计图的时候，我们首先分析下应该给技术切哪些图（为了避免以后少改动，建议切图之前最好和技术先沟通下，怎么切）；
1、底部栏目的icon和背景：
这个一般有2种切法：（有默认和选中之后的效果）

2、顶部栏目的背景切图：
由于顶部导航栏的是多颜色的，所以只能切一整条给技术，商圈的图标要单独切出来

3、二级标题栏目的切图：

4、主体栏目的切图：

5、标注文字大小和行间距：（以这张图为例子，我标注好了，请看下图）
需要注意的：
A：我们标注的尺寸是像素px，技术那边的实际运用到技术中的是像素的一半，即像素的一半=技术的尺寸；例如：“分类”2个字，我标准的是36px，技术那边的尺寸就是18px；
B：所有文字，行间距的标注的尺寸都是偶数；因为技术那边都是根据我们的尺寸除以2；
C：颜色的标注有的技术要求16进制，有的技术要求RGB，由于页面的限制所以我只标注了16进制的，按16进制和RGB都标注的是最好的~
注意：因为我们做的基于640*960尺寸的，ios共有3套尺寸，因为640*960和640*1136的宽度是不变的，所以图标没有变化重新切，只是行间距需要调整下；320*480尺寸的是640*960的一半，所以技术完全可以根据你标注的640的尺寸做就可以~
三.android和ios的转化关系
1.因为ios的尺寸是640*960，android当密度等于120即（320*480）时，1PX=1DP，所以android和ios的标注像素之间的换算关：即ios像素尺寸*1/2=android dp尺寸；
2.如果你们的产品同时做android和ios，你只想标注一套尺寸的时候，就可以标注ios版的标注去计算即可。

『叁』 APP设设计规范尺寸、切图详解——IOS和Android

目前主流的是以iPhone 6为主，设计尺寸是750*1334px，4.7寸。

1、分辨率以iPhone 6 设计为主：750*1334px

2、（字体 Helvetica/华文细黑，实际中运用黑体简或者Hiti-sc 最接近系统中所带字体）

3、工具栏height：88px    如搜索、选择、删除、回复等。

4、顶部标签栏height：60px  位于状态栏或者状态栏下的文字/具有可切换功能的图标

1、导航栏

所有的字号，在750*1334px的设计尺寸下都是偶数，便于程序员操作。

所有可触发按钮必须≥44*44

所有可触发按钮必须≥22*22

左右内容与边距的间隔大概在20px

强调确定，填充有彩色。

例如：

搜索框右边要有一个取消、或者输入了之后有一个“x”

渐变和底纹效果和程序员商讨

设计尺寸：720*1280px

状态栏48px  导航栏96px  内容区1038px   标签栏112px

『肆』 如何高效地输出iOS和Android标注和切图

现在有很多产品为了降低设计成本并保持多平台体验的一致性，都以iOS为主做一套交互设计，应用于iOS和Android两个平台。但是在标注与切图的环节，如何高效的与开发对接，似乎并没有什么更高明的办法。很多团队的做法是先做一套iOS的UI+标注+切图，再在iOS的基础上缩放一套Android的UI+标注+切图。事实上这样的做法是低效，且无效的。为什么且如何做呢？

首先本文大前提是，交互以iOS的设计为主导，应用于iOS和Android两个平台。本文描述的方法更适用于人力资源较为匮乏的设计团队。

对于设计环节。

我对iOS和Android使用同一套iOS的交互设计这种做法不置可否，毕竟好多人都已经这么干了。而很多情况下，到底用一套交互还是两套，这个问题是被设计部门的话语权、项目的周期、人力资源等多个因素影响的，并不是简单的节操问题。所以这里不讨论到底一套交互对不对，只讨论这种情况下怎么干活。

那么既然是同一套设计，如果仅仅是为了达到的交付物标准，输出两套几乎完全一样的iOS和Android的UI图，这种事情略显蛋疼。据我所知有一些设计团队都在不明真相地这么干着。

来看设计环节的交付物。

iOS和Android开发需要的设计交付物至少要有：高保真UI图，标注，切图。

高保真UI图所起到的作用是，开发会参照其画页面，仅仅是获知页面样子的一个手段，并非什么高精度的事情。仅仅基于这一条，设计师就没有必要出iOS和Android两套样子一样只是大小不同的图的，对于开发来说，他们只需要看到页面样子即可。

标注和切图的作用是，开发会按照标注的尺寸，把切图按照高保真UI图的摆放方式做到界面上。那么问题来了，iOS的开发和Android开发所需要的标注和切图是不一样的。如何在一套iOS的高保真UI图上做出两套标注和切图呢？

众所周知iOS设计的像素尺寸是640*960/1136，Android主流的hdpi模式下的像素尺寸是480*800。如图，他们的换算关系是，iOS像素尺寸的75%是Android的像素尺寸

我们会发现xhdpi模式和hdpi模式的换算比例也是75%。也就是说xhdpi模式下切图尺寸跟iOS下是一样的。所以iOS的切图可以直接适用于Android的xhdpi模式。至于除hdpi和xhdpi之外的其他模式，如果需要适配，就需要单独处理图片了。

要注意的是切图在缩放之后像素会糊在一起，很可能需要重新调整，还有各种虚边情况，尤其是那些带透明阴影的，都要重新调，但是这个工作量显然要比重新调UI重新切，要小多了。

至此，我们设计一套适配iOS的高保真UI，基于该UI做一套适用于iOS和Android两类开发人员的标注，再输出一套可适用于iOS和 Android的xhdpi模式的切图，再调整一套Android的hdpi模式切图，基本上大部分工作就已经完成了。

资料来源：博客频道