UI设计稿IOS和安卓如何适配
2018-03-08 · 百度认证:云南新华电脑职业培训学校官方账号
云南新华电脑学校
方案一
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
总之，分开做的越多套效果图，出来的效果就越精细。反之，看起来可以就行了。
