移动端设计基准变化与运用
1. 移动端基本参数
在网络上搜索手机界面适配的相关内容，常会看到相关文章中提及以下几个参数：屏幕分辨率（物理分辨率）、屏幕尺寸、PPI数值...
其实，在处理常见手机界面适配时，设计师只要关注以下3个基本参数：渲染像素（Pixel）、逻辑像素（Point）、 倍率（Scale）就好。下面就来一一介绍这几个基本参数概念。
渲染像素（Pixel）：
渲染像素可以理解为是手机截屏时所得到的图片尺寸，一定范围上可以说是物理像素，单位是px.设计稿中用到的分辨率都是物理像素，也就是渲染像素。
逻辑像素（Point）：
可以理解为是程序员在用代码绘制页面时所用的尺寸，也被叫做“1倍图尺寸”.比如Xd中对应的机型尺寸,对应的就是手机的逻辑像素尺寸，单位是pt。
程序员在开发环节需要将设计师提供的分辨率（渲染像素）转换为逻辑像素，并通过逻辑像素来控制页面中显示哪些内容，而这个转化是有比例的。
倍率（Scale）：
渲染像素在物理层面构成了液晶屏幕，逻辑像素在软件层面构成了画面图像。因为逻辑像素和渲染像素存在着一定的比例关系，这种比例通常被称为倍率，比如切图后缀的@2x、@3x对应的就是倍率的数值。
需要注意的是，倍率不一定是整数，比如三星GALAXY J2（540x960）倍率是@1.5x；华为M3 Life 8.0‘’（1920x1200）的倍率则是@2.25x。
倍率=渲染像素/逻辑像素
由于开发工具不同，逻辑像素在iOS/Android两个平台单位名称也不同.iOS单位是pt， Android单位是dp.程序员在拿到设计稿的标注图后，需要将标注中的渲染像素换算成逻辑像素，即将px换算成pt/dp.这里就涉及到倍率换算的问题。
通常设计稿中的尺寸在3位数以内，2x倍率即将渲染像素除以2，3x倍率即将渲染像素除以3。
但是就会出现这样的问题：
举例：
在iPhone X尺寸的界面上设计一个头像组件栏，头像大小是102px，组件栏高度是120px。
那么换算成1x倍率后为51pt和60pt，那么头像和组件栏高度上是无法居中对齐的，一定会偏移1pt，那么这样一来，手机上呈现将会偏移2px。
而如果头像大小为100px，组件栏高度为150px，倍率为3x，换算成1x后头像高度将会变成33.3pt，而逻辑像素与渲染像素一样都必须取整数，那么程序员需要在33pt与34pt之间选择一个。
如果选用33pt，那么渲染像素大小会是99px，高度会偏移1px且无法居中对齐；如果选用34pt，那么渲染像素大小会是102px，偏移2px。
这大概也是为什么开发还原设计稿的时候，呈现的终端效果总是不如设计稿，感觉怪怪的但是又看不出来哪里不对，其实还是一些细节的参数没有贯彻到位。
因此我们在做UI适配的时候，一定要注意将设计稿导入相应的设备中查看。
1x的设计稿导入设备中查看时会经过一轮放大，就会产生失真的效果。因为成倍放大的时候分割线、描边等细节都会放大，这时候就有可能产生锯齿，那么在终端呈现效果将会很差。因此在验收走查的时候，2x与3x的设备都需要检查，并与开发进行沟通。而尤为需要注意的是部分元素在各倍率下的数值，尤其是需要切图的icon等。在导图效果不那么理想时，就需要设计手动调整切图尺寸，手动将它放大，将像素点对齐后再导出切图。
2.两种适配方式
适配的方式主要有两种：倍率适配和逻辑像素适配，还有两种方式混合的多重适配。
倍率适配：
主要应用在逻辑像素相同，但倍率不同的设备.比如iPhone 11适配到 iPhone 11 Pro Max.两个适配的逻辑像素都是 414 x 896pt，但倍率不同，前者是@2x、后者是@3x。
逻辑像素适配：
这种适配方式应用在两个倍率相同，但逻辑像素不同的设备。比如iPhone 11 到iPhone 8：两个设备的倍率都是@2x，逻辑像素则分别是：414 x 896pt 和 375 x 667pt。
多重适配：
如果两个设备的倍率和逻辑像素都不相同，比如iPhone系列到安卓系列，就需要多重适配。
3.新iPhone对设计基准的影响
在谈新设备前，我们先看看截止iPhone 11系列时，iPhone的几款主流机型及其对应的参数。
而iPhone 12又带来3种全新的屏幕尺寸(iPhone 12和iPhone 12 Pro的物理分辨率相同，故合并看待)。但在设计层面，iPhone 12系列四款手机，只为设计师增加了1170x2532、1284x2778（px）两种新的设计尺寸。
在前文提到，手机界面适配时，设计师只要关注：渲染像素、逻辑像素以及倍率这三个基本参数。而其中的渲染像素通常会和屏幕的物理像素保持一致，比如常见iPhone 8、iPhone XS、iPhone 11 Pro都是如此。
但并非所有设备渲染像素与物理像素一致，比如iPhone Plus系列，官方给出的屏幕参数（物理像素）是1080x1920，但渲染像素却是1242x2208。iPhone 12 mini的情况和Plus系列一样，官方给出的物理像素尺寸是1080x2340 ，但拿到设备真机后，通过（其他设计师的）测量可知12 mini采用的渲染像素是1125x2436，和iPhone X的渲染像素是一致的。
然后我们再看一下iPhone 12系列设备的参数，如果我们只看逻辑像素，加上iPhone 12系列，目前iPhone 共有7种尺寸。
这些尺寸都需要设计师留心，并完成相关机型的验收走查。
考虑到iPhone存在“标准”和“放大”两种模式的视图，还需要将放大模式的尺寸考虑在内。由此，在把放大模式纳入适配考量范围后，iPhone的逻辑像素共统计出8种尺寸。
对于那些横滑需要外露一部分的页面，需要重新设计尺寸或调整局部的适配方案。这对于一些单屏显示的页面而言，也是件麻烦事。
4.主流机型市场占比变化
绝大多数设计师，都会下意识觉得750x1334这个尺寸的机型占比最多。毕竟在过去很多年里，大家都是用这个尺寸在做图。
而实际情况是，5月国内iPhone占比最高的机型是Plus系列（1242x2208）。而750x1334 和1125x2436分别排在第二和第三。
再看11月份的数据：828x1792的增速不减反增，从5月份的51.9%增加到了最近的63.8% 。如果不考虑最新的iPhone 12系列，828x1792有望接替Plus系列，成为市场占比最大的iPhone尺寸。
在828x1792的设备飞速增长的同时，1125x2436这个尺寸的设备增速却在不断下降。已经从5月份的27.8%降到了现在的10.2% 。
5.主流设计基准的演变
过去设计师常用的设计师尺寸是750x1334，随着iPhone进入全面屏时代，再把750x1334作为设计的基准尺寸显然不合时宜。（当然，随着国际形式的复杂演变，过几年iPhone会不会成为国内市场的主流机型都不太好说，尽管于设计层面来讲，很长一段时间内设计师都会以iPhone为设计基准。但道理都是一样，无论设计基准尺寸怎么变，适配原理都是通用的）
目前常用的750x1624尺寸对应的机型（对应1125x2436在@2x下的尺寸）无论在存量市场中的占比，还是增量市场中的占比都很少。新发售的iPhone 12系列中，只有12 mini采用了1125x2436作为渲染像素的尺寸。其余三款，采用全新的渲染像素和逻辑像素。
预判一下，1125x2436这个尺寸的设备，是并不能和过去的750x1334尺寸一样，成为iPhone主流的分辨率尺寸滴。
那么如何选择设计尺寸呢？
设计基准尺寸的选择，除了要看设备的占有率，还要兼顾适配的成本。
比如，当有大中小三种尺寸的设备需要设计时，优选中间尺寸作为基准尺寸。以中间尺寸为基准，无论是适配到小尺寸、还是适配到大尺寸，界面的调整幅度都是最小的，偏差不会太大。反之，如果选择小或大作为基准，或许页面适配到中间尺寸时感觉还行，但适配到另一侧相对极端的尺寸时，则容易出问题。
6.新设计基准参考
设计师用的基准尺寸已经从最初的640x960、变成640x1136、再到750x1334，以及现在的750x1624，已经变化了4次。设计师几乎每隔两年就会随着新iPhone的发布调整一次设计尺寸。
这里先不考虑设计师对尺寸的惯性依赖，只思考适配兼容性和市场占有率这两方面。适配兼容性，按照“大中小”优选中间尺寸这一原则，我们可以很容易的在目前8种iPhone的尺寸（指逻辑像素）中选出位于中间的尺寸：分别是 375x812pt 以及390x844pt，转换成大家熟悉的@2x尺寸，则分别对应：750x1624和780x1688。
而在市场占有率层面，新款iPhone的分辨率占领市场只是个时间问题。在新设备中，只有iPhone 12 mini这一款设备采用大家熟悉的1125x2436px（375x812pt，对应@2x下尺寸750x1624px）。
如果按照此前的经验推算，iPhone 12（1170x2532）接替iPhone 11（828x1792）成为最热卖且占比最高的设备只是时间问题。截止iPhone 12发布为止，显然 390x844pt （对应@2x下尺寸780x1688px）更适合作为今后的设计基准尺寸。
大家也可以几年后关注一下主流设计基准尺寸，看看这个预判会不会成为现实。但是谁也说不准两年后出现一款惊艳的机型大卖，尺寸或许又回到从前？我们只能祈祷Apple的工程师能对设计师好一点...
-end-