IOS与Android UI适配方案

方案一

 

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各做两套效果图

 

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

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飞~\(≧▽≦)/~