ios与android ui适配 ios和安卓适配_缩放

方案一

IOS与Android共用一套效果图 1242*2208

IOS与Android常用的尺寸中,最大尺寸的为i6+的尺寸,即1242*2208px

IOS常用尺寸为1242*2208  750*1334  640*1136  640*960

其中750*1334  640*1136  640*960同为@2x,1242*2208为@3x

所以750*1334  640*1136  640*960只做一套640*1136就好了

Android常用尺寸为 1080*1920  720*1280  480*800

他们之间相邻是可以整除1.5的,也就是1080除以1.5等于720,720除以1.5等于480

即,这三个尺寸可以等比缩放大小,只做一套1080*1920就可以了。

那么,问题来了。

IOS要做两套尺寸,1242*2208与640*1136

Android要做一套尺寸,1080*1920

这样不就是三套了吗?

其实,i6+的尺寸1242*2208整除1.15就刚好等于1080*1920

也就是说,1242*2208与1080*1920是可以等比缩放的

那么,i6+与Android的尺寸只做一套1242*2208就可以了。

现在就剩下IOS的640*1136

1242*2208可以直接缩放成640*1136吗?

如果要等比缩放肯定不行,因为他们之间不能整除

但是,如果我们把1242*2208的尺寸直接放到PS里等比缩小宽度到640,会发现原本2208的高度变成了1138,也就是比1136多了2px,2px的误差其实无关紧要了,硬着头皮改成1136去!

现在,你会发现,里面的图标,其实1138跟1136的大小都是一样的。

为什么提到图标呢?因为我们的交付物只要一套效果图与五套切图就好了。

一套效果图   1242*2208

五套切图     1242   640   1080    720   480

最后,注意缩放后的图标要细调一下。由于转换有误差,共用一套效果图是有一定的风险的,例如UI细节上的风险。开发前,设计师与技术人员要先共同确认此适配方案,全程沟通,及时改正UI方面的问题。

方案二

IOS与Android 共用一套效果图 750*1334

上面提到,750*1334  640*1136  640*960同为@2x,所以750跟640用同一套图标,同一套字体就可以了,至于其他的尺寸大小,只要跟着尺寸延伸就没问题了。

750*1334应用到1242*2208,则需要把@2x的图标放大导出成@3x,也就是把字体图标放大1.5倍,其余的,直接放大到1242就行了。

至于Android的版本,我个人的做法是把750*1334直接换算成为1080*1920,因为只有1px之差,我就忽略了。

换算出了1080*1920,那么Android的其他尺寸也就好办啦~

同样,我们的交付物只要一套效果图与五套切图就好了。

一套效果图   750*1334

五套切图     1242   640   1080    720   480

ios与android ui适配 ios和安卓适配_缩放_02

ios与android ui适配 ios和安卓适配_android 适配方案_03

方案三

IOS与Android各做两套效果图

原理跟方案一、二差不多,但为了追求细节上的完美,可以多做一套效果图,即两套效果图

1242*2208与 640*1136

1242*2208适配i6+  Android三种尺寸

1242*2208整除1.15等于1080*1920

1080*1920整除1.5等于720*1280

720*1280整除1.5等于480*800

640*1136  适配i6 i5 i5s等尺寸

方案四

如果需要更完美,那就需要做三套效果图了

1242*2208    640*1136   1080*1920

还可以再加一套640*960

总之,分开做的越多套效果图,出来的效果就越精细。反之,看起来可以就行了。

这是废话pia飞~\(≧▽≦)/~