怎么把ios 适配安卓 标注和 切图

Posted 2023-03-14

现在有很多产品为了降低设计成本并保持多平台体验的一致性，都以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的像素尺寸

于是很多设计团队就基于这个75%的关系去做Android的图了，但是这不是个好方法，这是一个设计和开发没有成为好基友的状态下所使用的方法。

我们知道Android开发所使用的单位并非像素，而是一个叫做dp/sp的单位，人家压根就不用像素，你费劲半天调一个480*800又有啥用呢？你给他标注上，这个宽度300像素，又有啥用呢？设计不懂开发，开发也不懂设计，Android不懂iOS，iOS也不懂Android，很多同志就在这种“矩阵式的彼此的不理解” 参考技术A IOS和Android开发需要的设计交付物至少要有：高保真UI图，标注，切图。

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

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

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

所以很多设计团队就可以基于这个75%的关系去做Android的图了

推荐蓝湖 参考技术B 1、iOS设计的像素尺寸是640*960/1136
2、Android主流的hdpi模式下的像素尺寸是480*800。
3、iOS像素尺寸的75%是Android的像素尺寸
4、切图标注内容追求高效，我们团队近期用的蓝湖，推荐使用 参考技术C 用蓝湖 做切图和标注的时候，可以自动导出安卓、ios和web三种版本