安卓程序各个机型适配_支付宝|安卓和iOS不同机型适配

(1)iOS适配

iOS机型总览如图39所示。

图39 iOS机型总览

(2)Android适配

Android主流机型概览如图40所示。

图40 Android主流机型概览

App设计开发必须考虑适配各种屏幕。如何做到交付一套设计稿就可解决适配大、中、小三屏的问题？设计和开发之间采用什么协作模式？一个基本思路如下：

● 选择一种尺寸作为设计和开发基准。

● 定义一套适配规则，自动适配剩下尺寸。

● 特殊适配效果给出设计效果。

第一步：视觉设计阶段，设计师按宽度750px(iPhone 6)做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。

第二步：输出两个交付物给开发工程师：一个是程序用到的@3X切图资源，另一个是宽度750px的设计标注图。

第三步：开发工程师拿到750px标注图和@3X切图资源，完成iPhone 6(375pt)的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局(auto Iayout)，方便后续适配到其他尺寸。

第四步：适配调试阶段，基于iPhone 6的界面效果，分别向上、向下调试iPhone 6 pIus(414pt)和iPhone 5S及以下(320pt)的界面效果。由此完成大、中、小三屏适配。

iOS设计适配流程如图41所示。

图41 iOS设计适配流程

第一步：视觉设计阶段，设计师按宽度1080px做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在1080px的设计稿上做标注，输出标注图。同时等比放大4/3倍生成宽度1440px的设计稿，在1440px的稿子里切图。

第二步：输出两个交付物给开发工程师：一个是程序用到的@4X切图资源，另一个是宽度1080px的设计标注图。

第三步：开发工程师拿到1080px标注图和@4X切图资源，完成1080px的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局(auto Iayout)，方便后续适配到其他宽度尺寸。

第四步：适配调试阶段，基于1080px的界面效果，分别向上、向下调试1440px和720px及以下的界面效果。由此完成大、中、小三屏适配。

Android设计适配流程如图42所示。

图42 Android设计适配流程

只交付一套设计稿，默认用什么规则来适配？

前文提到适配策略是先选择一种尺寸作为基准设计尺寸，然后通过一套适配规则自动适配到其他尺寸。这套适配规则总结起来就是：文字流式，控件弹性，图片等比缩放，适配系数。

● 文字流式：在不同的设备上，文字大小不变，文字显示的区域产生变化。通常iOS5的文字显示区域更长，一行可以展示更多的文字，如图43所示。

图43 文字流式

● 控件弹性：navigation、ceII、bar等适配过程中垂直方向上高度不变、水平方向宽度变化时，通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大，在垂直方向上可以显示越多的内容，发挥大屏幕的优势，如图44所示。

图44 控件弹性

● 图片等比缩放：当涉及插图、banner等位图时，这些图片在不同设备中根据屏幕大小等比缩放，保证不变形，如图45所示。

图45 图片等比缩放

● 适配系数：同屏幕密度的适配，如6、5、4s，用到前面3个规则就可以了；跨屏幕密度的适配，如6+、6、3gs，需要用一个适配系数进行换算以后再用前面3个规则，如图46所示。

图46 适配系数实例

● 特殊适配：有些界面通过以上规则进行适配以后，可能并不能达到设计师理想的效果。这时候需要对这个页面做各个屏幕的设计稿，进行特殊适配。为了更好地展示效果，工作量无疑会成倍地增长。

以支付宝首页为例，90×90dp(1080px设备上像素为270×270px)的应用宫格，在1080px设备上显示一行4个，刚好充满屏幕宽。同样的宫格，放在480px设备上(480px设备上像素为135×135px),4个应用占据屏幕宽度135×4=540px已经超过屏幕尺寸，放在1440px屏幕上(1440px屏上像素为315×315px),4个应用占宽315×4=1260px，比1440px的屏幕宽度还小一些。

这种情况下就要单独考虑屏幕适配方案了，例如：480px屏幕缩小应用尺寸，改为80×80dp；或者单独提供适合480px的切片；等等，如图47所示。

图47 特殊适配