年前最后一个工作日，完成这篇干货～
这篇文章的目的是想从更深的原理层去找到一些设计规范的原因，比如为什么要选用@2x的750*1334做基础设计稿？
开发拿到设计基础稿是如何操作适配的？
基础稿是如何做到一稿适配到iOS和android的？
px与pt之间的关系是怎么样的？等等......
深挖这些设计背后的原理，有助于我们更好的开展设计，也方便我们与开发更好的沟通，最重要的，在了解来背后的原理后，在开发进行中遇到问题的时候，我们也能很快的去融入参与问题的解决，也能培养锻炼自己的逻辑思维，以及打开自己的设计眼界～
这篇文章想从以下目录展开：
Px物理像素与Pt逻辑像素的理解以及倍图之间的关系
iOS常用手机分辨率
同等倍率和不同倍率的适配原则
关于适配的案例说明
iPhone X及以上的适配规则
iOS与android之间的适配方案
用于适配的标注规范
切图命名规范
1) Px物理像素与Pt逻辑像素的理解
Px (pixel)：物理像素
px是组成位图图像中的最小单位，不分大小，设计师常用单位～
像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方块的颜色和位置就决定了图像所呈现出来的样子～
可以将像素视为整个图像中不可分割的单位/元素，因为像素已经是最小单位；并且它是以一个单一颜色的小格存在～
我们看到的一张张图像，都是由一定量的像素构成，像素的多少决定了图像在屏幕上所呈现的大小，像素的色彩拼接组合决定了图像在屏幕上呈现什么内容～
Pt (point)：逻辑像素
pt也被成为逻辑点，在移动适配中被成为“逻辑像素”，是程序员用的一种计量单位～
pt是有固定大小的，一般用来测量设备的实际大小尺寸～
1pt=1/72英寸，1英寸=2.54厘米，那么，1pt=0.03527778厘米，可见1pt是有具体的大小值的～
所以，在72像素/英寸的显示屏下，1pt=1px
逻辑像素大小=物理像素1倍图尺寸大小
eg：两款手机iPhone3G/S 和 iPhone4/4s，iPhone3G/S 是非Retina的1倍屏，分辨率为480*320px也就是该手机的物理像素，对应的逻辑像素就是该手机的硬件设备的大小为480pt*320pt；
iPhone4/4s 是Retina的2倍屏，分辨率为960px*640px也就是该手机的物理像素，对应的逻辑像素也是480pt*320pt；
Retina屏叫视网膜屏，也叫@2x屏。
如何理解两款手机逻辑像素一样，物理像素不同？
iPhone3G 和 iPhone4这两款手机逻辑像素一样表示硬件设备的测量尺寸一样，物理像素不同说明相同面积里像素块的构成数量不同，数量越多说明色彩越丰富，呈现的图像也就约清晰；
相同大小的设备屏幕中，iPhone4承载的像素数量是iPhone3G的两倍，相当于iPhone3G放一个像素块的空间位置在iPhone4中放两个像素块，iPhone4的像素密度更高～
同样，1920px*1080px的PC端，与1920px*1080px的小米手机，二者的物理像素(设计大小)一样，逻辑像素(测量大小)很明显差异很大，说明一样多的像素内容，在逻辑像素更小的设备上图像显示的会更清晰，像素密度更高～
所以可以这样理解倍图的关系：
1倍图即设备的物理像素：逻辑像素=1：1
2倍图即设备的物理像素：逻辑像素=2：1
3倍图即设备的物理像素：逻辑像素=3：1
注意⚠️：物理像素px不分大小！逻辑像素pt有固定大小！
Q：为什么像素px不分大小？
A：px是一个点，它不是自然界的长度单位，谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，“像素”的大小是会“变”的，也称为“相对长度”。
px&em&pt之间的对比
px是像素单位，em是相对单位，pt是绝对单位～
px的优点：可以在计算机屏幕上，能达到预期的效果，在打印机和其它的高分辨率设备上，它又能取得所希望的效果。
em的优点：比较多，比如在一个页面上，你给定了一个父元素的字体大小，这样就可以通过调整一个元素来成比例的改变所有元素大小。它可以自由缩放，比如用来制作可伸缩的样式表。
pt的优点：是一种固定长度的度量单位，是能够使用测量设备测得的长度
2)iOS常用手机分辨率
以下是常用手机逻辑分辨率、物理(设计)分辨率等信息表～
可以观察到6P、6sP、7P、8P的物理(设计)分辨率为1242px*2208px，逻辑分辨率为414px*736px【并不是375pt*667pt的3倍】，所以其实我们把375pt的3倍图适配在Plus手机系列上来看的话，可以说Plus是伪3倍屏～
Plus放大模式的由来：
6Plus刚推出来的时为了方便快速适配，使用与iPhone6相同的逻辑像素尺寸，*3倍则为1125*2001与实际逻辑像素相差一些，在相同的屏幕尺寸下，放的更少的像素块相对来说就比较大的显示，就被定义为“放大模式”。
2倍图，iPhone5 640px*1136px(物理像素) @2x 320pt*568pt(逻辑像素)
2倍图，iPhone6 750px*1334px(物理像素) @2x 375pt*667pt(逻辑像素)
3倍图，iPhone6P 1242px*2208px(物理像素，设计的实际标准模式) @3x 414pt*736pt(逻辑像素)，但我们一般用375pt的@3x图1125*2001(物理像素，适配在Plus手机上称为放大版) 来适配在Plus手机上～
那么，设计师有规定的设计稿尺寸大小吗？
清楚适配规则、方法，在设计的时候注意距离值，元素大小的设置，那么用1倍图设计和2倍图设计都是一样的，根据个人习惯就好～
再加上开发查看设计的软件工具可以根据需要切换单位，就更加灵活了～
需要注意两点：
注意设计尺寸与导出尺寸的对应
下图以@2x图为设计稿，导出切图操作；导出后，检查@2x的切图尺寸是否与设计稿元素尺寸一致～
注意设计尺寸与上传尺寸的对应
下图为上传画板到蓝湖上的操作；上传时，确认好选择的设计图画板尺寸，因为这个是标注平台识别并计算单位的依据～
3)同等倍率和不同倍率的适配原则
设计时需要考虑什么问题
既然是一稿适配，在设计的时候需要始终把两点始终带入，一是大屏&小屏如何显示问题(移动端适配/PC端响应式)，二是不同终端平台(iOS&Android、移动端&PC端) 交互方式不同，分辨率差异会引起的设计差异；
如何能在不同终端设备较“舒适”的显示，又不会有特别多的开发量？尽可能灵活设计、可延展性设计～
开发的视角
一张设计页面，开发可能会脑补它会在不同屏幕下的样子，所以我们在设计的时候也可以用这张设备屏幕图来作为辅助工具，来摆放设计内容～
上图中可观察到，360pt*640pt是小米手机@3x 1080*1920的逻辑尺寸。对比iPhone8 375pt*667pt可以看出，这款小米手机比iPhone6要小一点(逻辑/测量尺寸)，但物理像素要高很多，像素密度更高，图像清晰度也就更高～
iOS适配需要考虑两种：相同倍率和不同倍率
相同倍率，不同大小；eg：iPhone5 640px*1136px @2x、iPhone6 750px*1334px @2x；
不同倍率，不同大小；eg：iPhone6 750*1334 @2x、iPhoneX：1125*2436 @3x
相同倍率适配原则
原则一：文字流(fluid)
比如：相同的文字内容；在iPhone5和iPhone6下，左右两边距离屏幕的边距相同，由于屏幕大小不一样，在iPhone5下显示4行，而iPhone6下显示3行～
2. 原则二：弹性控件(flexible)
对比iPhone5和iPhone6的同一个页面，整体内容距离屏幕左右边距不变，字号、图标大小、图标与文案之间的间距都保持一致，仅仅只放大了中间的距离～
3. 原则三：等比缩放
iPhone5和iPhone6的“瓷片区”图片，整体内容距离屏幕两边的边距、图片与图片之间的距离在同倍率不同大小的手机上都是一样的，对图片的处理：同等比例缩放～
总结：
综上所述，边距(整体内容距离屏幕两边的大小)、字体大小、控件、间距(元素之间)在同等倍率下是不变的！
可以这样理解，同等倍率一位置像素密度相同，也就是说除了手机硬件屏幕的大小不一样，看到手机内容的清晰度是一样的；
那么在做适配的时候我们是不是可以考虑在多出的/少一些的测量大小上做文章呢？
当遇到文字流的时候，文字的大小不变，手机屏幕两边距不变，改变的是显示高度的不同(宽屏显示的行数少些，窄屏显示的行数多些)～
当遇到控件的时候，控件大小与辅助文案大小均不变，改变的是控件与对端中间的距离；
当遇到图片的时候，两侧边距和图片之间的间距不变，改变的是图片在不同屏幕下的等比缩放；
不同倍率适配原则
方法：将所有需要适配的@3x图都统一换算为@2x图(根据@2x图的适配方法，相同倍率下修改中心的距离即可完成同倍率下的适配)，再将@2x乘以1.5即可适配到@3x下。
为什么将iPhone6/7/8作为设计稿尺寸？
下方橙色区分别是上方设计稿逻辑像素@2x图的尺寸，可以发现750px*1334px的尺寸是居于中间的，所以用iPhone6的尺寸作为设计稿是合适的～
以2倍图为基础，因为2倍图更方便做同倍率和不同倍率之间的适配～
4)关于适配的案例说明
以下是UI效果图设计稿，以及设计稿对应的适配方案～
一般交付给开发UI效果图的时候，会对适配进行说明，方式不限，只要能表述清楚就可以，个人比较喜欢采用以下这种方式～
同倍率适配：根据适配说明稿，标出的数值固定不变，宽度按一定的百分比计算方式～
比如：在@2x iPhone5上的适配，只有两个悬浮窗的宽度和高度发生了改变，其他的(图中箭头所示)的元素大小，内容边距，都没有变化。
不同倍率适配：找到@3x对应的@2x设计稿，整体放大1.5倍，其他元素按一定的百分比计算～
比如：在@3x iPhoneXS上的适配，整体放大1.5倍，两个悬浮框的宽度和高度按照百分比的方式计算，其他的元素以1.5倍的规律进行换算～
5)iPhone X及以上的适配规则
iPhoneX的适配
首先得了解iPhoneX硬件设备的特征，也是与我们的设计有关联的，iPhoneX & iPhoneXs(1125px*2436px) 系列是刘海屏手机，“刘海区”为44pt(@3x下，即为132px)，底部“home条”34pt(@3x下，即为102px)这两个是固定的逻辑像素尺寸～
适配步骤：
将iPhoneX固定不变的两个位置空出来，就是上面提到的，上方“状态栏+刘海”44pt(132px)，下方“取代home键操作区域”34pt(102px);
将@2x 750*1334的设计稿整体乘以1.5，适配到iPhoneX的面板中，需要注意的是我们放大的设计稿中包含了状态栏高度的部分，而在步骤1中我们已经将状态栏(包含在“刘海区”)空出来了，所以需要去掉40*1.5=60px的高度。
注意事项：
苹果官方给了iPhoneX，距离两边屏幕边距为34pt(102px)，原因是iPhoneX与iPhone其他手机还有个区别在于它是圆角的，当iPhoneX横屏幕(比如：游戏类、适配类app)时，圆角那块是不能有内容的，所以在4个边角留出安全区域，采用的也是34pt的边距。
iPhoneXR&XS Max的适配
iPhoneXR：414pt*896pt @2x 828px*1792px
iPhoneXS Max：414pt*896pt @3x 1242px*2688px
可以观察到，iPhoneXR和iPhoneXS Max硬件手机尺寸大小一样(拥有相同的逻辑像素)，物理(设计)尺寸不同，iPhoneXS Max像素密度更高，画面清晰度更高～
那么做他们的适配，只需要先将@2x的iPhoneXR适配稿完成，再通过x1.5的方式即可完成@3x iPhoneXS Max的适配～
XR的适配步骤：
将“刘海区”、“home条”的位置提前空出来：“刘海区”44pt(@2x的XR即为88px)；“home条”44pt(@2x的XR即为68px)；
将750*1334的基础稿复制到XR的画板中，同倍率适配调整：
图片等比放大；
左右边距保持与750px的设计稿一致；
注意内容中元素之间的上下、左右间距保持一致；
文字流的适配，扩大文字域范围；
分割线长度的补充(左右边距保持一致)；
... ...
XS Max的适配步骤：
新建1242*2688px的画板；
将适配好的XR设计稿放大1.5倍，放在画板中即可。
6)iOS与Android之间的适配方案
上述流程已完成iOS同倍率@2x与不同倍率@3x之间的适配；那么iOS与Android之间如何进行适配的呢？
iOS与Android的适配步骤：
Android主流屏幕尺寸为：1080*1920px，@3x屏；
基于iOS 750*1334px的@2x图的设计稿尺寸，乘以1.44，适配在1080*1920px的android的设计稿上。
主流适配流程图：
注意事项：
pt可看作是@1x图的尺寸，方便计算；
注意在机型为：iPhoneX/XS/XR、iPhoneXS Max下，“刘海区44pt”&“home条34pt”的计算。
7)用于适配的标注规范
通过上述介绍我们知道，同倍率和不同倍率进行适配时，图片会进行等比缩放，为图片更好的被使用，开发则需要使用我们提供的@2x和@3x；
切图素材在后台数据库，前段开发将这个素材的位置空出来，通过媒体查询判断用户使用哪种设备类型，再向后台服务器请求数据，获取这个图片素材，再在前端显示图片～
设计稿中其他元素可通过蓝湖进行开发查看～
适配标注注意事项：
* 不能标“死”，如果把每个元素的上下左右的每一个间距都给标注来，只适合在某一种机型下，不能灵活的应用在所有机型尺寸上～
正确做法有两种：
间距自适应型
在一定范围下，比如：同倍率机型下，或无论什么机型都适用，将可以固定的间距标出来，其他的间距自适应；
素材适应型
在一定范围下，比如：同倍率机型下，或无论什么机型都适用，将可以固定的间距标出来，其他的距离根据分辨率的宽度减去固定值后进行均分的适应方式；
结论：
标注并不是给的越详细越好
需要自适应的地方不要进行标注
最重要的标注完成后需要与开发工程师进行沟通
tabbar开发小技巧：
底部tabbar，当有4个tab时，发现750除以4=187.5，意味着不能等分，程序员常规操作是：
@2x设计稿下当有4个tab时，左右两侧预留3px，将剩下的744px除以4=186px，每个tab被分摊到186px～
8)切图命名规范
通用切图命名格式：
组件_类别_功能_状态@2x.png
例子🌰：tabbar_icon_home_default@2x.png(对应中文：标签栏_图标_主页_默认@2x.png)
命名格式中的【类别】list：
说明：文章中有部分内容来自孙大川老师的分享
409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
