android8.0应用图标适配调整_你必须知道的：UI设计文档-适配篇

人们通常希望能够在他们的所有设备中良好的体验他们喜欢的应用程序。在支付宝中，可以将界面元素和布局配置为自动更改不同设备上的形状和大小，成为一个适应性强的界面，在任何环境中提供良好的体验。本章将会介绍针对各个平台多个尺寸的屏幕适配规范，帮助打通设计到开发的环节。

基本知识

像素

px：相对长度单位。代表屏幕上的一个物理像素点。 sp : 字体单位，多用于缩放。类似于dp

屏幕密度(像素密度)

每英寸长度的像素点数量。像素密度越大显示则越清晰。iOS单位为PPI，安卓单位为DPI。 PPI: pixels per inch。指单位长度内包含的像素点的数量。 DPI:dots per inch。指每英寸的像素，也就是扫描精度。

逻辑像素

一定尺寸的物理屏幕上显示的像素数量，ios单位为pt,安卓单位为dp。 pt：绝对长度单位(ios)。 dp：绝对长度单位(Android)。

逻辑像素是基于现实物理尺寸的，在1倍(160ppi )情况下，1pt等于1px，也就是说160pt = 160px =1英寸，在倍率为2( 320 ppi),1pt 等于2px ，160pt ＝ 320px =1英寸。注意看其中的逻辑像素 160pt 无论在哪个像素密度屏幕，物理尺寸都是保持不变的，也就是说可以把逻辑像素理解成显示的物理尺寸。下面有个更加直观的例子，其中的100pt 在不同像素密度的屏幕，物理尺寸也是大约一致的，如图：

平台屏幕数据

ios屏幕数据

ios屏幕活跃排名

Android屏幕数据

Android屏幕活跃排名

为什么我们选择以iPhone6为设计标准做设计？

现状：

iOS 设备占有率最多的是：iPhone 6，750x1334(326 ppi) android 目前分辨率最多的是：1080 x 1920 px(XXHDPI)

共同点：

1.两者的像素密度也是差不多，倍率都是2。 2.ios6的逻辑像素是375667pt，Android的360640 dp，两者适配幅度非常非常小。 3.长宽比几乎一样的(9：16)。 4.都是处于大多数设备的中间范畴，意味着可以最大程度的兼顾更小、更大的分辨率屏幕。

设计到开发流程

ios设计开发流程图

ios设计适配流程 第一步：视觉设计阶段，设计师按宽度750px(iPhone 6)做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后输出标注图(新增图标制作成iconfont上传，已有图标直接调用iconfont，图片生成3X的切图) 第二步：输出两个交付物给开发工程师：一个3X图片切图资源，另一个是宽度750px的设计标注图。 第三步：开发以750px为标准，页面采用自动布局形式以及适配规则进行开发 第四步：适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6/7/8 plus(414pt)、IPhone X(375pt)和iPhone 5S及以下(320pt)的界面效果。由此完成大中小三屏适配。

Android设计开发流程图

Android设计适配流程 第一步：视觉设计阶段，设计师基于宽度750px(iPhone 6)做1080px设计稿(特殊单独页面直接出1080设计稿)，除图片外所有设计元素用矢量路径来做。设计定稿后输出标注图(新增图标制作成iconfont上传，已有图标直接调用iconfont，图片生成3X/4X的切图) 第二步：输出两个交付物给开发工程师：一个3X图片切图资源，另一个是宽度1080px的设计标注图。 第三步：开发以1080px为标准，页面采用自动布局形式以及适配规则进行开发 第四步：适配调试阶段，基于1080px的界面效果，分别向上向下调试720px/1440px等分辨率的界面效果。同时针对主流机型的各dpi机型的调试，由此完成安卓全尺寸屏适配。

适配方案

1.在ios平台因此我们考虑到屏幕适配的便捷性，采用750x1334分辨率尺寸进行设计

适配plus：

文字：以750文字基准放大1.5倍 边距：以750边距基准放大1.5倍 图片(类似banner)：根据屏宽比等比放大 图标：以750图标尺寸基准放大1.5倍

适配4、5：

文字：以750文字基准(调试缩小) 边距：以750边距基准 图片(类似banner)：根据屏宽比等比缩小 图标：以750图标尺寸

2.在Android平台，我们先根据750px输出1080px的设计稿

适配Android1080标准屏(不区分是否有虚拟按键)：

文字：以750文字基准放大1.5倍 边距：以750边距基准放大1.5倍 图片(类似banner)：根据屏宽比等比放大 图标：以750图标尺寸基准放大1.5倍

适配Android2K屏：

文字：以750文字基准放大2倍 边距：以750边距基准放大2倍 图片(类似banner)：根据屏宽比等比放大 图标：以750图标尺寸基准放大2倍

备注：非标准屏的热门机型在此基础上进行重点验证调试。

示例：

字体适配预览：

广告

腾讯网UED体验设计之旅(全彩)作者：任婕，等

京东

特殊适配场景

• 单屏页面(例：红包)

条件1：16比9如何处理 统一所有元素(包括组件和内容)都等比放大1.5倍

条件2：高于16比9 步骤一：组件和图片元素等比放大1.5倍，纵向间距拉伸 步骤二：可以在此基础上对元素大小和间距进行调整

条件3：低于16比9 步骤一：组件和图片元素等比放大1.5倍，纵向间距压缩 步骤二：可以在此基础上对元素大小和间距进行调整

举例：红包四个版本(2k/ 720/1080有bar /1080没bar)

示例(红色为可拉伸区域)：

• 首页

文字：根据屏宽比等比调配 图标：根据屏宽比等比调配 边距：根据屏宽比等比调配 图片：根据屏宽比等比调配

备注：导航栏和标签栏除外

适配基本规则

1.文字流式

文字根据屏幕宽度“流体布局”，较宽的屏幕文字显示多些，窄的屏幕文字显示少些

2.控件弹性

界面元素在垂直方向上高度不变，水平方向宽度变化时，通过调整元素间距或元素右对齐的方式实现自适应

3.图片等比缩放

当涉及到插图、banner等位图时，这些图片在不同设备中根据屏幕大小等比缩放，保证不变形；

4.适配系数

同屏幕密度的适配，如：6、5、4s，用到前面三个规则就可以了； 跨屏幕密度的适配，如：6+、6、3gs、安卓1080，需要通过一个适配系数1.5倍来换算以后再用前面三个规则