ios与android设计适配,IOS与AndroidUI适配方案

方案一

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

IOS与Android常用的尺寸中&＃xff0c;最大尺寸的为i6&＃43;的尺寸&＃xff0c;即1242*2208px

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

其中750*1334  640*1136  640*960同为&＃64;2x&＃xff0c;1242*2208为&＃64;3x

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

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

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

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

那么&＃xff0c;问题来了。

IOS要做两套尺寸&＃xff0c;1242*2208与640*1136

Android要做一套尺寸&＃xff0c;1080*1920

这样不就是三套了吗&＃xff1f;

其实&＃xff0c;i6&＃43;的尺寸1242*2208整除1.15就刚好等于1080*1920

也就是说&＃xff0c;1242*2208与1080*1920是可以等比缩放的

那么&＃xff0c;i6&＃43;与Android的尺寸只做一套1242*2208就可以了。

现在就剩下IOS的640*1136

1242*2208可以直接缩放成640*1136吗&＃xff1f;

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

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

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

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

一套效果图   1242*2208

五套切图     1242   640   1080    720   480

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

方案二

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

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

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

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

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

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

一套效果图   750*1334

五套切图     1242   640   1080    720   480

方案三

IOS与Android各做两套效果图

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

1242*2208与 640*1136

1242*2208适配i6&＃43;  Android三种尺寸

1242*2208整除1.15等于1080*1920

1080*1920整除1.5等于720*1280

720*1280整除1.5等于480*800

640*1136  适配i6 i5 i5s等尺寸

方案四

如果需要更完美&＃xff0c;那就需要做三套效果图了

1242*2208    640*1136   1080*1920

还可以再加一套640*960

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

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