android尺寸标注设计和切图

1、如何让APP 设计，APP 切图高效的与开发对接，似乎并没更高明的办法。很多团队的做法是先做一套iOS 的 UI+标注+切图，再在 iOS 的基础上缩放一套Android 的UI+标注+切图。加上 25 学堂的 APP 设计群内的小伙伴们，经常问到如何进 Android 尺寸标注设计大全和Android 切图规范。下面所讲的内容是以交互以iOS 的设计为主导，应用于 iOS 和Android 两个平台。今天跟大家 的Android 尺寸标注设计大全和Android 切图规范，更适用于人力资源较为匮乏的设计团队。第一个认识：对于设计环节。对iOS 和 Android 使用同一套 iOS 的交互设

2、计这种做法不置可否，毕竟好多人都已经这么干了。而很多情况下，到底用一套交互还是两套，这个问题是被设计部门的话语权、项目的周期、人力资源等多个影响的，并不是简单的节操问题。所以这里不到底一套交互对不对，只这种情况下怎么干活。那么既然是同一套设计，如果仅仅是为了达到的交付物标准，输出两套几乎完全一样的iOS 和 Android 的 UI 图，这种事情略显。据我所知有一些设计团队都在不明地这么干着。第二个认识：来看设计环节的交付物iOS 和Android 开发需要的设计交付物至少要有：高保真 UI 图，标注，切图。高保真 UI 图所起到的作用是，开发会参照其画页面，仅仅是获知页面样子的一个，并非什么

3、高精度的事情。仅仅基于这一条，设计师就没有必要出 iOS和Android 两套样子一样只是大小不同的图的，对于开发来说，他们只需要看到页面样子即可。标注和切图的作用是，开发会按照标注的尺寸，把切图按照高保真 UI 图的摆放方式做到界面上。那么问题来了，iOS 的开发和Android 开发所需要的标注和切图是不一样的。如何在一套iOS 的高保真 UI 图上做出两套标注和切图呢？众所周知iOS 设计的像素尺寸是 640*960/1136，Android 主流的hdpi 模式下的像素尺寸是 480*800。如图，他们的换算关系是，iOS 像素尺寸的 75%是Android 的像素尺寸。于是很多设计团

4、队就基于这个 75%的关系去做 Android 的图了，但是这不是个好方法，这是一个设计和开发没有成为好的状态下所使用的方法。知道Android 开发所使用的并非像素，而是一个叫做 dp/sp 的，人家压根就不用像素，你费劲半天调一个 480*800 又有啥用呢？你给他标注上，这个宽度 300 像素，又有啥用呢？设计不懂开发，开发也不懂设计，Android不懂iOS，iOS 也不懂Android，很多就在这种“矩阵式的彼此的不理解”中凑合干着。（关于dp/sp 的，具体知识点见下面知识扩展）以 480*800 像素尺寸下做的设计图为基准。开发将尺寸换算成 dp 尺寸的方法是，像素尺寸*2/3。

5、这也是为什么要让Android尺寸能让 3 整除的原因。所以在hdpi 模式，480*800 像素尺寸设计图中，开发看到 300px 宽度的标注，会定义其为宽 200dp，到这里Android 开发才得到一个他们真正会用于开发的数值。这整个过程，设计师做iOS 尺寸图并标注，设计师调整iOS 尺寸图为 Android尺寸并标注px，Android 开发设计师交付的标注，再将其换算成 dp，很长的一个过程。其实经过以上整个过程之后，已经得出了一个更简单的换算关系：O59 像素尺寸 #TJXUOJ 像素尺寸，TJXUOJ 像素尺寸 #TJXUOJ 的JV 尺寸。进而得出：O59 像素尺寸 #TJX

6、UOJ 的JV 尺寸。所以，O59 里一个宽 V 的东西，在TJXUOJ 的NJVO 模式下，正好 JV，正好是 ，很容易算是吧？在这个关系的指导下，可以在同一套 ;/ 图上做适用于两个的标注。只要TJXUOJ 的开发知道，标注 V 的东西，在 NJVO 模式下等于 JV 这个换算关系，一切都简单了。当然，的区别要留意，例如 O59 使用十进制色值，TJXUOJ 使用 进制，O59 可以绘制圆角和阴影，TJXUOJ 更倾向于用 VTM 等。这些差异要在同一套标注中体现出来，让两端的开发各取所需。（如果你发现标注中无法在同一张图上标十进制和十六进制色值，你可以用文字标注替代其中一个，的截屏工具中

7、也是带色值提示的，办法很多不再赘述。）至此，已经可以做一套标注，让TJXUOJ 和 O59 的开发共同使用了。当然前提是你要告诉开发这个标注怎么看，怎么用！那到底如何看设计师或是前端的切图是否合格呢？在 O59 切图与 TJXUOJ 切图的转换中，是可以使用 的换算关系的。也就是说 O59 的切图缩小 之后，就是 TJXUOJ 的NJVO 模式下的切图，而 TJXUOJ开发还需要其他JVO 模式的切图，按照如下关系换算即可。会发现NJVO 模式和NJVO 模式的换算比例也是 。也就是说 NJVO 模式下切图尺寸跟 O59 下是一样的。所以 O59 的切图可以直接适用于TJXUOJ 的NJVO

8、模式。至于除NJVO 和 NJVO 之外的其他模式，如果需要适配，就需要单独处理了。要注意的是切图在缩放之后像素会糊在一起，很可能需要重新调整，还有各种虚边情况，尤其是那些带透明阴影的，都要重新调，但是这个工作量显然要新调 UI 重新切，要小多了。至此，设计一套适配iOS 的高保真 UI，基于该 UI 做一套适用于 iOS 和Android 两类开发的标注，再输出一套可适用于 iOS 和 Android 的xhdpi模式的切图，再调整一套 Android 的hdpi 模式切图，基本上大部分工作就已经完成了。扩展阅读：Android UI 界面设计指南规范相关资料【设计干货】Android 应用

9、程序图标模板（含PSD 源文件）关于Android 不同dpi 模式或概念介绍从UI 设计师的角度理解：px（像素）是UI 设计师在PS 里使用的（不解释），同时也是屏幕上所显示的（也不解释）dp 是开发写layout 的时候使用的尺寸，sp 是开发写layout 时关于字体的字号，且dp 与sp 总为 1：1 关系。Android 支持四种不同的dpi 模式：ldpi mdpi hdpi xhdpi一般地，分辨率与所运行的dpi 模式是匹配的，例如 hvga(320480 像素)机屏幕一般在 3.5 英寸左右，运行在mdpi 模式下（也有例外，稍后解释）（这个是ROM 控制的，app 不能改

10、变）。当运行在mdpi 下时，1dp=1px：也就是说设计师在 69 里定义一个OZKS 高 V，开发就会定义该 OZKS 高 JV；6NUZUYNUV 中 V 大的字体，开发会定义为 YV。对于一部MG（ ）（- 、4 、49），一般是运行在NJVO 模式下。当运行在NJVO 模式下时， JV# V：也就是说设计师在 69 里定义一个OZKS 高 V，开发就会定义该 OZKS 高 JV；6NUZUYNUV 中 V 大的字体，开发会定义为 YV。所以，当你的GVV 需要适配多个JVO 模式的时候（例如同时适配SJVO 与NJVO），若你在MG 下做设计，你需要将你的各数值都为 的倍数，并在切图标注时将所有的数字除以 乘以 换算成JV，这样开发的同一套RG_UZ 就能用在两个不同的JVO 模式下，而不是写两套RG_UZ。SJVO 与NJVO 是 ： 的关系SJVO 与 NJVO 是 ： 的关系RJVO 与SJV