ãã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ï¼å¾å¤åå¿å°±å¨è¿ç§âç©éµå¼çå½¼æ¤çä¸ç解âä¸ååå¹²çã
ããæ们以480*800åç´ å°ºå¯¸ä¸åç设计å¾ä¸ºåºåãå¼åå°é¨ä»¶å°ºå¯¸æ¢ç®ædp尺寸çæ¹æ³æ¯ï¼åç´ å°ºå¯¸*2/3ãè¿ä¹æ¯ä¸ºä»ä¹è¦è®©Androidé¨ä»¶å°ºå¯¸è½è®©3æ´é¤çåå ãæ以å¨hdpi模å¼ï¼480*800åç´ å°ºå¯¸è®¾è®¡å¾ä¸ï¼å¼åçå°300px宽度çæ 注ï¼ä¼å®ä¹å ¶ä¸ºå®½200dpï¼å°è¿éAndroidå¼åæå¾å°ä¸ä¸ªä»ä»¬çæ£ä¼ç¨äºå¼åçæ°å¼ã
ããè¿æ´ä¸ªè¿ç¨ï¼è®¾è®¡å¸åiOS尺寸å¾å¹¶æ 注ï¼è®¾è®¡å¸è°æ´iOS尺寸å¾ä¸ºAndroid尺寸并æ 注pxï¼Androidå¼åçç设计å¸äº¤ä»çæ 注ï¼åå°å ¶æ¢ç®æ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模å¼ä¸çäº300dpè¿ä¸ªæ¢ç®å ³ç³»ï¼ä¸åé½ç®åäºãå½ç¶ï¼å¹³å°çåºå«è¦çæï¼ä¾å¦iOS使ç¨åè¿å¶è²å¼ï¼Android使ç¨16è¿å¶ï¼iOSå¯ä»¥ç»å¶åè§åé´å½±ï¼Androidæ´å¾åäºç¨.9.pngçãè¿äºå·®å¼è¦å¨åä¸å¥æ 注ä¸ä½ç°åºæ¥ï¼è®©ä¸¤ç«¯çå¼åååæéãï¼å¦æä½ åç°æ 注软件ä¸æ æ³å¨åä¸å¼ å¾ä¸æ åè¿å¶ååå è¿å¶è²å¼ï¼ä½ å¯ä»¥ç¨æåæ 注æ¿ä»£å ¶ä¸ä¸ä¸ªï¼qqçæªå±å·¥å ·ä¸ä¹æ¯å¸¦è²å¼æ示çï¼åæ³å¾å¤ä¸åèµè¿°ãï¼
ããè³æ¤ï¼å·²ç»å¯ä»¥åä¸å¥æ 注ï¼è®©AndroidåiOSçå¼åå ±å使ç¨äºãå½ç¶åææ¯ä½ è¦åè¯å¼åè¿ä¸ªæ 注æä¹çï¼æä¹ç¨ï¼
ããä¸é¢çåå¾
ããå¨iOSåå¾ä¸Androidåå¾ç转æ¢ä¸ï¼æ¯å¯ä»¥ä½¿ç¨75%çæ¢ç®å ³ç³»çãä¹å°±æ¯è¯´iOSçåå¾ç¼©å°75%ä¹åï¼å°±æ¯Androidçhdpi模å¼ä¸çåå¾ï¼èAndroidå¼åè¿éè¦å ¶ä»dpi模å¼çåå¾ï¼æç §å¦ä¸å ³ç³»æ¢ç®å³å¯ã
ãã
ããæ们ä¼åç°xhdpi模å¼åhdpi模å¼çæ¢ç®æ¯ä¾ä¹æ¯75%ãä¹å°±æ¯è¯´xhdpi模å¼ä¸åå¾å°ºå¯¸è·iOSä¸æ¯ä¸æ ·çãæ以iOSçåå¾å¯ä»¥ç´æ¥éç¨äºAndroidçxhdpi模å¼ãè³äºé¤hdpiåxhdpiä¹å¤çå ¶ä»æ¨¡å¼ï¼å¦æéè¦éé ï¼å°±éè¦åç¬å¤çå¾çäºã
ããè¦æ³¨æçæ¯åå¾å¨ç¼©æ¾ä¹ååç´ ä¼ç³å¨ä¸èµ·ï¼å¾å¯è½éè¦éæ°è°æ´ï¼è¿æåç§èè¾¹æ åµï¼å°¤å ¶æ¯é£äºå¸¦éæé´å½±çï¼é½è¦éæ°è°ï¼ä½æ¯è¿ä¸ªå·¥ä½éæ¾ç¶è¦æ¯éæ°è°UIéæ°åï¼è¦å°å¤äºã
ããè³æ¤ï¼æ们设计ä¸å¥éé iOSçé«ä¿çUIï¼åºäºè¯¥UIåä¸å¥éç¨äºiOSåAndroid两类å¼å人åçæ 注ï¼åè¾åºä¸å¥å¯éç¨äºiOSå Androidçxhdpi模å¼çåå¾ï¼åè°æ´ä¸å¥Androidçhdpi模å¼åå¾ï¼åºæ¬ä¸å¤§é¨åå·¥ä½å°±å·²ç»å®æäºã
ããæ¯ä¸æ¯æè§è¿ç§æ¹æ³çå·¥ä½éï¼ä¸ä¸ªäººè½å¹²ä¸ä¸ªäººçæ´»äºï¼
转载
很多产品为了降低设计成本并保持多平台体验的一致性,都以iOS为主做一套交互设计,应用于iOS和Android两个平台。很多团队的做法是先做一套iOS的UI+标注+切图,再在iOS的基础上缩放一套Android的UI+标注+切图。事实上这样的做法是低效,且无效的。
iOS设计的像素尺寸是640*960/1136,Android主流的hdpi模式下的像素尺寸是480*800。
简单的换算关系:iOS像素尺寸*75%=Android像素尺寸,Android像素尺寸*2/3=Android的dp尺寸。进而得出:iOS像素尺寸*75%*2/3=Android的dp尺寸。所以,iOS里一个宽600px的东西,在Android的hdpi模式下,正好300dp,正好是50%。
在iOS切图与Android切图的转换中,是可以使用75%的换算关系的。也就是说iOS的切图缩小75%之后,就是Android的hdpi模式下的切图,而Android开发还需要其他dpi模式的切图,按照如下关系换算即可。
xhdpi模式和hdpi模式的换算比例也是75%。也就是说xhdpi模式下切图尺寸跟iOS下是一样的。所以iOS的切图可以直接适用于Android的xhdpi模式。至于除hdpi和xhdpi之外的其他模式,如果需要适配,就需要单独处理图片了。
现在有很多产品为了降低设计成本并保持多平台体验的一致性,都以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,很多同志就在这种“矩阵式的彼此的不理解”中凑合干着。
我们以480*800像素尺寸下做的设计图为基准。开发将部件尺寸换算成dp尺寸的方法是,像素尺寸*2/3。这也是为什么要让Android部件尺寸能让3整除的原因。所以在hdpi模式,480*800像素尺寸设计图中,开发看到300px宽度的标注,会定义其为宽200dp,到这里Android开发才得到一个他们真正会用于开发的数值。
这整个过程,设计师做iOS尺寸图并标注,设计师调整iOS尺寸图为Android尺寸并标注px,Android开发看着设计师交付的标注,再将其换算成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模式下等于300dp这个换算关系,一切都简单了。当然,平台的区别要留意,例如iOS使用十进制色值,Android使用16进制,iOS可以绘制圆角和阴影,Android更倾向于用.9.png等。这些差异要在同一套标注中体现出来,让两端的开发各取所需。(如果你发现标注软件中无法在同一张图上标十进制和十六进制色值,你可以用文字标注替代其中一个,qq的截屏工具中也是带色值提示的,办法很多不再赘述。)
至此,已经可以做一套标注,让Android和iOS的开发共同使用了。当然前提是你要告诉开发这个标注怎么看,怎么用!
下面看切图
在iOS切图与Android切图的转换中,是可以使用75%的换算关系的。也就是说iOS的切图缩小75%之后,就是Android的hdpi模式下的切图,而Android开发还需要其他dpi模式的切图,按照如下关系换算即可。
我们会发现xhdpi模式和hdpi模式的换算比例也是75%。也就是说xhdpi模式下切图尺寸跟iOS下是一样的。所以iOS的切图可以直接适用于Android的xhdpi模式。至于除hdpi和xhdpi之外的其他模式,如果需要适配,就需要单独处理图片了。
要注意的是切图在缩放之后像素会糊在一起,很可能需要重新调整,还有各种虚边情况,尤其是那些带透明阴影的,都要重新调,但是这个工作量显然要比重新调UI重新切,要小多了。
至此,我们设计一套适配iOS的高保真UI,基于该UI做一套适用于iOS和Android两类开发人员的标注,再输出一套可适用于iOS和 Android的xhdpi模式的切图,再调整一套Android的hdpi模式切图,基本上大部分工作就已经完成了。
资料来源:博客频道
本回答被提问者和网友采纳