《android尺寸标注设计大全和android切图规范》由会员分享，可在线阅读，更多相关《android尺寸标注设计大全和android切图规范（6页珍藏版）》请在金锄头文库上搜索。
1、Android 尺寸标注设计大全和 Android 切图规范发布于： 2013 年 11 月 25 日 by admin如何让 APP 设计，APP 切图高效的与开发对接，似乎并没有什么更高明的办法。很多团队的做法是先做一套 iOS 的 UI+标注+切图，再在 iOS 的基础上缩放一套 Android 的 UI+标注+切图。加上 25 学堂的 APP 设计官方群内的小伙伴们，经常问到如何进 Android 尺寸标注设计大全和 Android 切图规范。下面所讲的内容是以交互以 iOS 的设计为主导，应用于 iOS 和 Android 两个平台。今天跟大家分享的 Android 尺寸标注设计大全
2、和 Android 切图规范，更适用于人力资源较为匮乏的设计团队。第一个认识：对于设计环节。对 iOS 和 Android 使用同一套 iOS 的交互设计这种做法不置可否，毕竟好多人都已经这么干了。而很多情况下，到底用一套交互还是两套，这个问题是被设计部门的话语权、项目的周期、人力资源等多个因素影响的，并不是简单的节操问题。所以这里不讨论到底一套交互对不对，只讨论这种情况下怎么干活。那么既然是同一套设计，如果仅仅是为了达到的交付物标准，输出两套几乎完全一样的 iOS 和 Android 的 UI 图，这种事情略显蛋疼。据我所知有一些设计团队都在不明真相地这么干着。第二个认识：来看设计环节的交付
3、物iOS 和 Android 开发需要的设计交付物至少要有：高保真 UI 图，标注，切图。高保真 UI 图所起到的作用是，开发会参照其画页面，仅仅是获知页面样子的一个手段，并非什么高精度的事情。仅仅基于这一条，设计师就没有必要出 iOS和 Android 两套样子一样只是大小不同的图的，对于开发来说，他们只需要看到页面样子即可。标注和切图的作用是，开发会按照标注的尺寸，把切图按照高保真 UI 图的摆放方式做到界面上。那么问题来了，iOS 的开发和 Android 开发所需要的标注和切图是不一样的。如何在一套 iOS 的高保真 UI 图上做出两套标注和切图呢？众所周知 iOS 设计的像素尺寸是
4、640*960/1136，Android 主流的 hdpi 模式下的像素尺寸是 480*800。如图，他们的换算关系是， iOS 像素尺寸的 75%是 Android 的像素尺寸。于是很多设计团队就基于这个 75%的关系去做 Android 的图了，但是这不是个好方法，这是一个设计和开发没有成为好基友的状态下所使用的方法。我们知道 Android 开发所使用的单位并非像素，而是一个叫做 dp/sp 的单位，人家压根就不用像素，你费劲半天调一个 480*800 又有啥用呢？你给他标注上，这个宽度 300 像素，又有啥用呢？设计不懂开发，开发也不懂设计，Android不懂 iOS，iOS 也不懂
5、Android，很多同志就在这种“矩阵式的彼此的不理解”中凑合干着。（关于 dp/sp 的单位，具体知识点见下面知识扩展）我们以 480*800 像素尺寸下做的设计图为基准。开发将部件尺寸换算成 dp 尺寸的方法是，像素尺寸*2/3。这也是为什么要让 Android 部件尺寸能让 3 整除的原因。所以在 hdpi 模式，480*800 像素尺寸设计图中，开发看到 300px 宽度的标注，会定义其为宽 200dp，到这里 Android 开发才得到一个他们真正会用于开发的数值。这整个过程，设计师做 iOS 尺寸图并标注，设计师调整 iOS 尺寸图为 Android尺寸并标注 px，Android
6、 开发看着设计师交付的标注，再将其换算成 dp，很长的一个过程。其实经过以上整个过程之后，我们已经得出了一个更简单的换算关系：iOS 像素尺寸*75%=Android 像素尺寸，Android 像素尺寸*2/3=Android 的 dp 尺寸。进而得出：iOS 像素尺寸 *75%*2/3=Android 的 dp 尺寸。所以，iOS 里一个宽 600px 的东西，在 Android 的 hdpi 模式下，正好 300dp，正好是 50%，很容易算是吧？在这个关系的指导下，我们可以在同一套 UI 图上做适用于两个平台的标注。只要 Android 的开发知道，标注 600px 的东西，在 hdpi
7、 模式下等于 300dp 这个换算关系，一切都简单了。当然，平台的区别要留意，例如 iOS 使用十进制色值，Android 使用 16 进制，iOS 可以绘制圆角和阴影， Android 更倾向于用.9.png 等。这些差异要在同一套标注中体现出来，让两端的开发各取所需。（如果你发现标注软件中无法在同一张图上标十进制和十六进制色值，你可以用文字标注替代其中一个，qq 的截屏工具中也是带色值提示的，办法很多不再赘述。）至此，已经可以做一套标注，让 Android 和 iOS 的开发共同使用了。当然前提是你要告诉开发这个标注怎么看，怎么用！那到底如何看设计师或是前端的切图是否合格呢？在 iOS 切
8、图与 Android 切图的转换中，是可以使用 75%的换算关系的。也就是说 iOS 的切图缩小 75%之后，就是 Android 的 hdpi 模式下的切图，而Android 开发还需要其他 dpi 模式的切图，按照如下关系换算即可。我们会发现 xhdpi 模式和 hdpi 模式的换算比例也是 75%。也就是说 xhdpi 模式下切图尺寸跟 iOS 下是一样的。所以 iOS 的切图可以直接适用于 Android的 xhdpi 模式。至于除 hdpi 和 xhdpi 之外的其他模式，如果需要适配，就需要单独处理图片了。要注意的是切图在缩放之后像素会糊在一起，很可能需要重新调整，还有各种虚边情况
9、，尤其是那些带透明阴影的，都要重新调，但是这个工作量显然要比重新调 UI 重新切，要小多了。至此，我们设计一套适配 iOS 的高保真 UI，基于该 UI 做一套适用于 iOS 和Android 两类开发人员的标注，再输出一套可适用于 iOS 和 Android 的xhdpi 模式的切图，再调整一套 Android 的 hdpi 模式切图，基本上大部分工作就已经完成了。扩展阅读：Android UI 界面设计指南规范相关资料下载 【设计干货】Android 应用程序图标模板（含 PSD 源文件）关于 Android 不同 dpi 模式或概念介绍从 UI 设计师的角度理解：px（像素）是我们 UI
10、 设计师在 PS 里使用的（不解释），同时也是手机屏幕上所显示的（也不解释）dp 是开发写 layout 的时候使用的尺寸单位，sp 是开发写 layout 时关于字体的字号单位，且 dp 与 sp 总为 1：1 关系。Android 支持四种不同的 dpi 模式：ldpi mdpi hdpi xhdpi一般地，手机分辨率与所运行的 dpi 模式是匹配的，例如 hvga(320480 像素)的手机屏幕一般在 3.5 英寸左右，运行在 mdpi 模式下（也有例外，稍后解释）（这个是 ROM 控制的，app 不能改变）。当运行在 mdpi 下时，1dp=1px：也就是说设计师在 PS 里定义一个
11、item 高 48px，开发就会定义该 item 高48dp；Photoshop 中 14px 大的字体，开发会定义为 14sp。对于一部 wvga（480800）手机（G7、N1、NS），一般是运行在 hdpi 模式下。当运行在 hdpi 模式下时，1dp=1.5px ：也就是说设计师在 PS 里定义一个 item 高 72px，开发就会定义该 item 高 48dp；Photoshop 中 21px 大的字体，开发会定义为 14sp。所以，当你的 app 需要适配多个 dpi 模式的时候（例如同时适配 mdpi 与hdpi），若你在 wvga 下做设计，你需要将你的各数值都为 3 的倍数，
12、并在切图标注时将所有的数字除以 3 乘以 2 换算成 dp，这样开发的同一套 layout 就能用在两个不同的 dpi 模式下，而不是写两套 layout。mdpi 与 hdpi 是 2：3 的关系mdpi 与 xhdpi 是 1：2 的关系ldpi 与 mdpi 是 3：4 的关系Galaxy Nexus 是 720P 屏幕，就是运行在 xhdpi 下的。可以想见为什么 iOS 的开发者升级到 Retina Display 是多么的无痛再补充一种例外，有些比较山寨的 Pad 有可能是 7 英寸屏幕，分辨率为wvga（480800）运行在 mdpi 下，所以一部 wvga 手机是 320x533dp，一部 wvga 平板是 480x800dp，可以显示的内容会多很多。
