郑伊妮 · UX 设计师
丝芙兰用户体验设计师，加州州立大学富尔顿分校（CSUF）
作者感悟：随着互联网日益发展，对互联网产品 UI 还原度的精准度要求增长迅速。本文总结出了两个影响适配的变量；然后基于设备实际规格与业界常用的两种适配方案，提出了一个更精准的适配方法。从数个关键点出发，通过四个步骤控制了造成适配问题的变量，最后对常用方案的利弊做了分析，在第四节中提出了 “计算通用逻辑分辨率”以及 “分段精准适配”这两个适配方案关键步骤。
移动端设备屏显适配问题讨论— 解析手机屏显规格与其适配的关系
第一节 适配问题及技术的定义
作为一名 UI 设计师，在做 UAT（User Acceptance Test）的时候总会遇见很多界面还原度问题。部分手机的页面呈现和设计稿之间有明显的差别：例如图片大小，间隙长短，页面元素之间比例失衡，以及设计稿中能看到的横向滑动元素在屏幕上看不到了之类的问题。而这些，都属于适配问题。
什么是适配问题？
每一个设计项目都有自己设计稿所对应的目标手机，界面开发后在与设计稿完全对应的手机上达到 100% 界面还原度，而在其他型号手机上显示出现偏差的界面还原问题可以被归类为适配问题。
为什么会产生适配问题？设备规格碎片化严重
屏幕规格的物理分辨率和密度过于多样。
原设计稿只有一稿，而用户手机机型规格众多。从中国信通院的报告中得知光是国内 2017-2021 的五年时间里，国产机型总数就到达 2999 种之多了。特别是安卓手机规格众多。而这些不同的机型规格正是适配问题产生的根源。加上国外生产机型，轻轻松松四五千。
图1:手机屏幕规格众多，尤其是安卓机
什么是适配？基于设备规格的代码技术
适配不光是开发的工作，也是 UIUX 设计师的工作；在这个项目中，设计师和开发保持同频沟通是非常重要的。
设备有自己的规格和技术局限性，适配就是通过开发手段使得一套设计稿服务于多种设备规格，使得目标设备保持一致的美观度，可读性，可操作性以及统一的用户体验。只有设计和开发保证同频道的沟通与理解才能增加适配的可控性。
虽然操作系统不同，但是屏幕的生产技术是类似的，因此安卓/IOS的适配逻辑上也是类似的。但由于开发逻辑原因，适配问题在安卓机型上更容易发生，会更多用安卓举例。
第二节 适配相关的手机设备规格名词介绍
1、像素Pixels
一个像素点，是一个 1 px * 1 px 的正方形方块，它既是长度单位，也是面积单位。
像素点是实际存在于显示屏上的显像点，是屏幕上的最小电子元件，一个显像点只能显示一种颜色；显像点的物理尺寸有大小，大小由屏幕生产技术决定。
在不同的设备屏幕上，1 px 的物理尺寸是不同的。
像素点 pixels 是设计师和开发在沟通页面元素尺寸时的最小单位
2、物理分辨率（px）
在手机出厂时候就已经决定好的，是一个手机屏幕内所含像素点（显像点）的总数。作为屏幕面积的一种说法，计量单位是 px。例如：iPhone 11的屏幕大小是 828px（宽） * 1792px（长）。
3、手机物理尺寸（inch）
现今手机一般使用英寸inch作为屏幕物理长宽及对角线的长度计量单位。
4、屏幕密度（ppi）
1 平方英寸正方形方块的对角线所经过的像素点数量。屏幕生产技术越好，像素点面积越小，则屏幕对角线穿过像素点数量越多，则屏幕色彩种类越丰富，则该手机屏幕清晰度越高。
5、页面缩放因子 Scaling Factor = 屏幕密度比
平常大家沟通时候说的 1 倍屏，2 倍屏，说的就是这个
对于苹果标准分辨率屏幕（密度=163ppi）而言，Scaling Factor是1，1pt=1px。Retina显示屏（密度 = 326ppi），Scaling Factor是2，1pt=2px。—— CSDN
安卓也是同样的道理。
6、逻辑分辨率（pt）
安卓 / ios 通用
进行适配时使用的一个虚拟屏幕尺寸计算值，计量单位是 pt。当目标手机屏幕密度统一之后，屏幕范围内所含点的总数。
7、【安卓专用】密度无关像素（dp）
结合名词 6 一起理解，dp 实际是当安卓手机屏幕密度统一为 160 ppi 了之后，安卓屏幕上的虚拟像素点的计量单位。
谷歌官方发布的一倍安卓屏幕密度标准是 160 ppi。
当安卓屏幕密度为 160 ppi 时，1 dp = 1 px；
当安卓屏幕密度为 240 ppi 时，1 dp = 1.5 px；
当安卓屏幕密度为 320 ppi 时，1 dp = 2 px；
当安卓屏幕密度为 N*160 ppi 时，1 dp = N px。
第三节 影响适配的两个变量 — 导致不同手机规格界面展示出现差异的物理原因
变量 1：不同手机屏幕内像素点物理面积不同，屏幕密度不同
像素点大小由屏幕生产技术决定，经常作为设计师和开发沟通元素尺寸的最小单位 1 px 的物理面积在众多手机上都是不同的。
1 平方英寸方块的对角线所经过的像素点数量即为屏幕密度值，像素点大小不同，屏幕密度不同。
像素点的物理面积尺寸不同使得设计时难以预测不同手机界面元素的实机展现效果；尤其在屏幕碎片化的今日，除了目标手机之外，大量的机型将会面临还原度风险。
图2:众多手机例如 iPhone 11 & iPhone 12 的像素点面积都不一致，px 很难沟通所有机型。
举例
iPhone 12 & 11 的像素点面积是不同的，而这种不同意味着设计师设计的 1 个像素点在这两个设备屏幕上的最终展示效果将会是有差异的。（注：由于开发技术的不同，苹果手机之间差异较小， 同样规格的安卓手机误差会非常严重。）
计算方式如下：
iPhone 12 的像素点的物理面积是：
iPhone11 的像素点的物理面积是：
变量 2：不同手机界面可阅读面积（通用逻辑分辨率）是不同的
手机由于屏幕物理设备长宽的不同导致可阅读区域不同。
图3:手机屏幕的高矮胖瘦是不同的
第四节 精准适配的步骤及方法— 解决因为变量而导致的界面展示排版差异
Step 1 统一变量 1：屏幕上的像素点面积
微软公开的安卓基准密度为 160 ppi，即1平方英寸方块的对角线会穿过 160 个像素点，则一倍屏幕像素点面积为 2 / 160² inch；
苹果公开的 iOS 基准密度为 163 ppi，即1平方英寸方块的对角线会穿过 163 个像素点，则一倍屏幕像素点面积为 2 / 163² inch。
为什么做适配要统一屏幕像素点物理面积？
设计师用的设计软件只有一张画布，一个密度，且最小计量单位为 1 px，在设计师的画布上，一个像素点的面积是一样的；但是如上所述，1 px 在每个设备上的物理面积尺寸其实不一样，那设计师如何在设计时准确预测页面在不同屏幕上的展现呢？
这时候就需要统一适配手机屏幕上像素点的物理面积尺寸，并生成虚拟的一个同等大小的点（pt）了；之后设计师在工作时就可以预测目标手机上界面的展示情况了，这对于设计落地来说是非常重要的。
Tips：1 个 pt 里所含 px 数量越多，屏幕越清晰，但界面上元素的尺寸保持不变。
图4:物理像素点面积不同 ➡️计算用像素点面积一致
屏幕密度不同 ➡️ 计算用屏幕密度一致
变量 1 计算用像素点（原点）面积尺寸统一后，屏幕密度也就随之统一了；然而变量 2（通用逻辑分辨率）依然有所不同。
Step 2 计算通用逻辑分辨率，明确设计稿“画布”大小
当我们想要做设计时，第一件事就是明确设计稿画布的大小。
通用逻辑分辨率是根据设备生产规格 实际计算 出来的，一倍屏幕密度下设备的可阅读屏幕面积；同时，准确的通用逻辑分辨率可以告诉设计师明确的设备“画布”尺寸。
为什么要计算而非直接从文档获取？使用通用坐标系的重要性
计算公式我们下面再说，先解释一下为什么我们需要计算。
通常开发说的逻辑分辨率是开发者从文档或者 api 接口里面直接获取的该设备一倍屏幕密度下的屏幕面积数值，这个数值是一个估算值，且只针对当前手机的作为参考系：
举个例子：
Nova 7 实机尺寸从实物看来比 iPhone XS 更大；然而参考下面两张图，我们可以看出在的 Sketch 设计中，他们逻辑分辨率为： iPhone XS 375 px * 812 px；华为 Nova 7 360 px * 800 px。而这，就是通常意义上所说的从文档中获得的逻辑分辨率。
图5:实际手机设备大小 VS Sketch 预设设计稿大小对比（ 左为 iPhone XS & 右为华为 nova 7）
在这个概念基础上，不同手机的 一倍屏幕上 1 px 所代表的面积尺寸是不同的。
而这就与前面提到的“适配目标机型上像素点的面积尺寸需要被统一以方便预知界面展示效果”产生了冲突，因此我提出了 “通用逻辑分辨率”这个概念。
除了开发从api接口获取的逻辑尺寸外，实际上还应该有一个连接了物理世界，通用的参考坐标系，其原点为 一个像素点在密度为 160 ppi 的一倍屏幕上时的所代表的 物理尺寸（ iOS 163 ppi 和安卓 160 ppi 差别不大，以 160 ppi 为准即可）。
从安卓系统来说，屏幕密度为 160 ppi 时，1个像素点的物理尺寸是 2 / 160² inch；以这个像素点的物理面积尺寸为坐标系原点，可以发现各个手机屏幕的通用逻辑分辨率是不同的。
图6: 以 160 ppi 密度屏幕上一个像素点的物理面积为原点的通用坐标系
通过行业内常用的适配公式计算 通用逻辑分辨率
微软公开的安卓基准密度为 160 ppi，也就是说安卓的1倍屏密度为 160 ppi；苹果公开的 iOS 基准密度为 163 ppi，即 iOS 1 倍屏密度为 163 ppi。
安卓计算公式
通用逻辑分辨率（pt） = 物理分辨率（px）/屏幕密度比 Scaling Factor
= 物理分辨率（px）/（适配目标屏幕密度/160ppi）
iOS 计算公式
通用逻辑分辨率（pt） = 物理分辨率（px）/屏幕密度比 Scaling Factor
= 物理分辨率（px）/（适配目标屏幕密度/163 ppi）
图7举例：使用设备屏幕规格计算实际设备的通用逻辑分辨率
关键点 1 不难发现，即使是在屏幕密度相同的情况下，也有很多种通用逻辑分辨率。
关键点 2 同一倍率情况下设备的 通用逻辑分辨率 是根据出厂规格决定的，具有 唯一性。
图8:密度相同也可能可阅读区（通用逻辑分辨率）大小不同
按照通用坐标系的逻辑计算之前的例子我们可以算出华为 nova 7 的通用逻辑分辨率：432 px * 960 px：
图9:实际手机设备大小 VS 通用逻辑分辨率大小对比（ 左为 iPhone XS & 右为华为 Nova 7）
准确的通用逻辑分辨率意味着真实设备界面可以被提前预测。
Step 3 在通用逻辑分辨率不同的屏幕上进行 分段精准适配
用淘宝页面做个例子，设计师一般只针对某一个机型尺寸出设计稿。也就是说，除了在这一个目标手机上页面是完美演绎的，如果屏幕通用逻辑分辨率宽度差别很大就会导致适配问题。
图10：通用逻辑分辨率宽度跨度极大（借用淘宝首页截图）
设计界业内常说的三大基础适配原则给了我们指导，但是在越来越高的 UI 设计还原度的要求下，我们需要更精准的适配方案。
图11：设计界三大基础适配原则
一如之前所说，屏幕的逻辑分辨率宽度跨越甚广。如果单纯的使用这一套原则，部分和设计稿相差较大的手机屏幕就会可能出现以下情况：页面分散而失衡，局部显得脸大鼻子小。
图12：按照基础三原则适配大屏手机显得“脸大鼻子小”
根据通用逻辑分辨率宽度进行分段精准适配
*同理，iPad 也可以以同样的逻辑适配。不论是什么电子屏幕，他们之间的区别只在于屏幕密度和物理分辨率不同。
1 确定目标设备
首先你需要和其他部门沟通，拿到自己公司的目标客户常用机型；如果你们的客户在兼顾 iOS 的情况下，安卓机客户较多，那这篇文章对你可能非常重要。
2 跟随 Step 2 计算这些设备的通用逻辑分辨率
安卓通用逻辑分辨率（pt） = 物理分辨率（px）/屏幕密度比 Scaling Factor
= 物理分辨率（px）/（适配目标屏幕密度/ 160 ppi）
iOS 通用逻辑分辨率（pt） = 物理分辨率（px）/屏幕密度比 Scaling Factor
= 物理分辨率（px）/（适配目标屏幕密度/ 163 ppi）
3 划分宽度区段
把最后拿到的通用逻辑分辨率们按照从窄到宽的顺序摆好，根据宽度自己划分区段。
4 根据区段制定适配细则
每个区段的适配细则应有所不同。例如，从 360 px 的逻辑分辨率宽度适配到 540 px 的逻辑分辨率宽度时，由于跨度较大，对于 icon 等元素而言，除了需要遵循弹性空间进行间隙调整，本身的尺寸和配合的文字也应该有所放大，至于具体系数，需要大家自己调试。
按照每一个通用逻辑分辨率进行设计稿输出是不现实的，因此分段提供适配规则就是一个既可以适当提高适配精准度，又能保持较低的设计/开发成本的方案了。
Step 4 开发通过代码还原变量 1（像素点面积）来适配不同屏幕密度的设备
如之前沟通，像素点面积的还原意味着屏幕密度的还原。
图13: 物理像素点面积一致 ➡️ 物理像素点面积不同
1 倍屏幕密度 ➡️ 屏幕密度不同
关键点 1 : 在通用逻辑分辨率的正确计算下，屏幕密度越高屏幕越清晰，且界面元素尺寸无变化。
无论是 1 倍屏，2 倍屏，还是 N 倍屏... 只要完成一倍屏幕上的界面排版设计进行正确计算，屏幕只会变得更清晰，元素尺寸及排版不应该有变化。
这意味着设计师工作时即可预测设计在不同密度屏幕上的尺寸样式。
关键点 2 : 准 3 倍屏并不存在，还原屏幕密度时需要按照设备可以支持的实际密度比进行开发
图14：准 3 倍屏不存在
开发看这里
当屏幕密度为确定为 160 ppi（安卓） or 163 ppi（iOS）时，1 dp = 1 pt = 1 px
安卓屏幕密度 320 ppi 时，1 dp = 2 px（例如 iPhone 11 & 小米 Max 2）
安卓屏幕密度 398 ppi 时，1 dp = 2.5 px（例如华为 P30 pro）
安卓屏幕密度 441 ppi 时，1 dp = 2.8 px（例如华为 P40 pro）
安卓屏幕密度是 160 ppi * N 时，1 dp = N px
设计师看这里
如果你在以往的 UAT 里发现在部分安卓手机上，页面里有内容被切除；某些 icon比设计稿上明显大；原本显示两个半的可滑动元素剩下半个没显示出来等，有很大可能就是在开发还原时使用了近似密度比，而非实际设备密度比。如果想要精准适配，需要和开发沟通清楚还原比例。
还原时乘以错误比例会导致页面元素尺寸有误差；若乘以的比例过大，设备物理分辨率不足，则无法展示全部内容导致页面部分被切除。
通常安卓系统更容易发生以上问题；iOS 系统在进行还原计算的时，会在乘以近似密度比之后，通过 AUTO FIT（自动适配）技术进行降比还原：
例如 iPhone XS Max 在适配计算元素尺寸时会先乘以 3 再乘以 94%，相当于乘以了准确密度比 2.8。
第五节 总结
总结几个关键点
像素点物理尺寸越小，屏幕密度越高，屏幕越清晰，但是界面元素尺寸没有区别。
屏幕密度降为 160 ppi or 163 ppi 时，屏幕为1倍屏，此时不同手机的通用逻辑分辨率可能不同。
通用逻辑分辨率计算中所有涉及的规格，手机出厂时都已经决定好了，设备做显示判断时候是按照这些实际规格计算的，设计师也应该 follow 真实的计算系数。
通用逻辑分辨率跨度较大，垂直方向可以按照屏幕越长可读内容越多来适配，但水平方向上无法用一套规则来适配所有屏幕，否则可能会出现极大的视觉偏差。
目前市场上并不存在准 3 倍 480 ppi 的屏幕设备，很多实际上只达到了 2.5 倍或者2.8 倍密度为了便于销售被统一称之为 3 倍屏；但如果按照 3 倍来进行还原计算，可能会导致元素的尺寸过大以至于被设备裁切。
最后总结一下适配流程
建议收藏下来等真的遇到适配问题的时候再拿出来研究。
（点击标题跳转）
被“抗阳”段子杀疯了！都是文案鬼才！哈哈哈哈
HMI汽车全设计流程复盘
印象笔记这次改版，让我有点惊喜
如果你喜欢这篇文章⬇️️
麻烦点赞、在看鼓励一下吧⬇️️
