UI适配规则，看这里就够了
说到UI设计，绕不开的一个话题就是屏幕适配，它直接影响到设计师与开发工程师的对接，以及最终设计效果的具体呈现。
说到UI设计，绕不开的一个话题就是屏幕适配，它直接影响到设计师与开发工程师的对接，以及最终设计效果的具体呈现。
1：屏幕比
想要了解UI适配，首先我们最先需要了解的是屏幕尺寸。总所周知的手机系统是IOS和android两大巨头，此外还有windows Phone，HarmonyOS 等。从代表性和广泛性来看，设计师主要考虑IOS和android之间的差异与适配即可。
IOS相对于android来说屏幕比例更加具有规范性，只有16:9和19:9两种屏幕比，而android由于手机厂商众多的缘故，屏幕比也五花八门了许多，但市面上主流的屏幕基本在16:9之上，宽高比在19:9上下波动。
（IOS屏幕表）
主流手机屏幕尺寸查询：https://www.strerr.com/screen.html
在屏幕宽度一定的情况下，屏幕向下延伸，19:9的手机屏比16:9的手机屏能显示更多的内容。
对于那些必须在单屏显示完整操作界面的应用而言，如果有19:9的手机屏去做适配，势必会导致内容在16:9的手机屏下不能完整显示。因此通常情况下使用16:9的屏幕比去做其他屏幕的适配。
因此在做设计时，同样可以使用iphone6/7/8分辨率为750:1334px去做设计，因为这些屏幕作为基准尺寸的话可以向上或向下适配。
2：倍率
当然这也不是绝对和一成不变的，现在手机厂商都在往全面屏上发力，也许不久以后的将来16:9屏幕的手机将正式退出历史舞台，到时候站在手机应用最前沿的UI设计也要跟着设计趋势进行改变。
比如人们在追求视网膜屏的过程中，切图也从一倍图（@1X）过度到二倍图（@2X）三倍图（@3X），而当前虽然设计师在输出切图时依旧会输出一倍图（@1X），但是在实际应用的主要是二倍图（@2X）和三倍图（@3X）。使用二倍图（@2X）去适配三倍图（@3X）。
与IOS相同的，android的切图也分成mdpi，hdpi，xhdpi，xxhdpi，xxxhdpi。iOS的@2x对应的是安卓的xhdpi。现在软件都能直接输出对应倍率的图标，不需要设计师单独设计。
在实际操作过程中，由于使用软件的单位不同，涉及到px和pt两种单位，比如在使用sKetch，XD制作设计稿时，软件默认单位是Pt，而使用Photoshop时单位是px,因此在以iPhone6/7/8为基础设计时，设计稿要从750*1334px转换成375*667pt。
在实际操作过程中，由于使用软件的单位不同，涉及到px和pt两种单位，比如在使用sKetch，XD制作设计稿时，软件默认单位是Pt，而使用Photoshop时单位是px,因此在以iPhone6/7/8为基础设计时，设计稿要从750*1334px转换成375*667pt。
在iPhoneX出现之前，对于UI设计的适配尚且算简单，在iPhone划时代的刘海屏出现之后，UI设计适配变得更加复杂，需要重新划分安全区域，以防止内容被刘海和四边圆角和下方的Home条遮挡。
过去，我们的设计是方方正正的矩形，所以整个屏幕都可以看做是安全区域Safe Area，而如今由于iPhone X屏幕上的“刘海”以及屏幕四周采用圆角的设计，使得我们在设计和开发时需要思考更多的东西。
Apple 更新了 Human Interface Guidelines来为开发者提供适配 iPhone X 指南，从中可以看出，Apple 希望开发者不要试图将这个刘海隐藏。比如通过在顶部和底部使用黑色降低刘海和Home条的存在感。
iPhone X 状态栏和底部导航栏高度更高，在电话和定位进入后台任务时，状态栏高度不会变化，而是从原先的顶部增加彩色带变成现在变成时间信息底部加入彩色气泡。
Home条是去除实体Home键后的产物，在大多情况下位于屏幕下方，只有黑白两种颜色。苹果提供了一个边缘保护的方案，第一次上滑是唤醒Home指示条，第二次才会激活原功能。而对于最受关注的全屏状态，虚拟Home指示条则会自动隐藏。但是在进入横屏状态时，Home条会跟随转动。
在横屏时，Home键在底部同样影响着设计的布局，人们会在屏幕底端使用手势进入主屏或切换应用，因此需要避免将交互行为的按钮放在屏幕角落。
对于大多数采用瀑布流的页面来说，仅仅是屏幕高度上的变化，可以无视。但对于如：新手引导页、音乐播放器等需要单屏显示的界面就需要重新布局。
在使用图片时，由于iPhone X具有不同于其它iPhone的长宽比，因此，全屏其它iPhone图片在iPhone X上全屏显示时会出现裁剪。同样，全屏iPhone X图片在其它iPhone也会出现裁剪。因此以前靠“等比缩放”就能适配的H5互动页面也需要进行微调。
适配小程序
小程序导航栏右侧有个无法去除和编辑的胶囊，设计时也不能在导航上增加其他功能。所以在 App 转小程序时，导航栏的功能要换位置或者在放在导航栏下。
