2024年3月21日发(作者：威聪)
什么是ui适配_ui适配原则
当你在一画布上做界面UI制定，如果你关于画布的布局是三份，
其中①，②份是打算固定高度的，只有第③份的高度是随着内容
的增多而增高。当这块画布被拉长的之后(宽度坚持不变)，你为
了达到"好看'的效果，并不是将①，②，③份一起拉长，而只必
须要做的是坚持①，②的高度不便，而仅仅是将中间③份拉长即
可。通俗的说，放在下面的界面UI制定元素，就"更下面点'而已。
2ui适配原则
什么是ui适配_ui适配原则，界面适配要遵循的原则：
1.依据公司的战略，选择一个先切入的平台;
2.了解该平台的UI制定规范，可用的UI 控件及交互原则;
3. 确定切入的屏幕大小，以此来制定第一个客户端，但是要
合计适配其他屏幕的可能性，是自适应来扩大或者缩小;
4.依据平台及屏幕大小，来选择一款典型的手机，开始客户
端的交互制定。
5.确定客户端的核心目的。如为娱乐为主的，应在制定方式
更娱乐性;功能性完成目的为主的，以更易用性为主;
6.依据客户端的功能和内容，来制定客户端的信息架构;
第 1 页 共 5 页
7.依据UCD的原则，来完成客户端的交互原型。
3android ui适配
Android设备的屏幕尺寸，从几寸的智能手机，到10寸的平板
电脑，再到几十寸的数字电视，我们应该适配哪些设备呢?
什么是ui适配_ui适配原则，其实这个问题不应该这么合计，
因为关于具有相同像素密度的设备来说，像素越高，尺寸就越大，
所以我们可以换个思路，将问题从单纯的尺寸大小转换到像素大
小和像素密度的角度来。
占比5%以上的6个主流分辨率，占比高的是480*800，320*480
的设备居然也占据了很大比例，但是和半年前的数据相比较，中
低分辨率(320*480、480*800)的比例在减少，而中高分辨率的比
例则在不断地增加。虽然每个分辨率所占的比例在变化，但是总
的趋势没变，还是这六种，只是分辨率在不断地提升。所以说，
我们只要尽量适配这几种分辨率，就可以在大部分的手机上正常
运行了。当然了，这只是手机的适配，关于平板设备(电视也可以
看做是平板)，我们还必须要一些其他的处理。
第 2 页 共 5 页
4ios ui适配
从iPhone3GS/iPhone4(s)过渡到iPhone5(s)时，在逻辑上宽度
不变高度稍高，之前旧的素材和布局通过AutoresizingFlexible
简单适配即可运行得很好，但由于高宽比增大，上下两端出现黑
粗边(典型如LaunchImage)。
从分辨率的角度来看，除了必须要提供LaunchImage这种满屏图，
其他基本沿用二倍图(@2x);从屏幕尺寸角度来看，必须要对纵向
排版略加调整。从iPhone5(s)发展到iPhone6(+)，由于高宽比坚
持不变，iOS对图标、图片、字体进行等比扩大自适应，清楚度
会有所降低。同时，坐标布局会导致在大屏下出现偏左偏上的问
题。从分辨率的角度来看，iPhone6沿用二倍图(@2x)，但必须为
iPhone6+提供更高的三倍图(@3x);从屏幕尺寸角度来看，必须要
重新对UI元素尺寸和布局进行适配，以期视觉协调。
(1)按宽度适配
iPhone4~6(+)的屏幕高宽比：
iPhone4(s)：分辨率960*640，高宽比1.5
iPhone5(s)：分辨率1136*640，高宽比1.775
iPhone6：分辨率1334*750，高宽比1.779
iPhone6+：分辨率1920*1080，高宽比1.778
第 3 页 共 5 页
可粗略认为iPhone5(s)、6(+)的高宽比是一致的(16:9)，即
可以等比例缩放。这样，共有iPhone3/4/5、6、6+三组宽度，在
iPhone6、6+下将按比例横向扩大。
(2)按高度适配
在同样的宽度下，iPhone4(s)的屏高比iPhone5(s)低，假设
纵向排版紧张，可以iPhone5(s)为基准，共有iPhone3/4、5、6、
6+四组高度，在iPhone3/4下将按比例纵向缩小，在iPhone6、
6+下将按比例纵向扩大。
(3)按字体适配
另外，iPhone的【设置】【通用】【辅助功能】中可以设置调
节【更大字体】，APP也可以按字号适配。
5ui制定一稿适配
一份制定稿就不能适用于 iOS 各手机屏幕尺寸。如何支持多
个尺寸屏幕，这个要分状况讨论。关于常规界面我们可以偷个懒，
只做 iPhone 5 屏幕尺寸的制定稿，请开发在其它屏幕上自适应，
终检查实机效果没问题就行。关于一些定制的界面我们应该依据
不同屏幕重新适配， iPhone 6 Plus 界面中部分切图尺寸比 3x
更大，要单独切图，所以不是说简单地给 iPhone 6 Plus 统一切
3x 图就 OK 的了。这时矢量切图在开发中优势很显然，只要把大
屏幕中切图的尺寸告诉开发即可，无必须针对非 3x 元素额外输
第 4 页 共 5 页
出切图。
第 5 页 共 5 页
2024年3月21日发(作者：威聪)
什么是ui适配_ui适配原则
当你在一画布上做界面UI制定，如果你关于画布的布局是三份，
其中①，②份是打算固定高度的，只有第③份的高度是随着内容
的增多而增高。当这块画布被拉长的之后(宽度坚持不变)，你为
了达到"好看'的效果，并不是将①，②，③份一起拉长，而只必
须要做的是坚持①，②的高度不便，而仅仅是将中间③份拉长即
可。通俗的说，放在下面的界面UI制定元素，就"更下面点'而已。
2ui适配原则
什么是ui适配_ui适配原则，界面适配要遵循的原则：
1.依据公司的战略，选择一个先切入的平台;
2.了解该平台的UI制定规范，可用的UI 控件及交互原则;
3. 确定切入的屏幕大小，以此来制定第一个客户端，但是要
合计适配其他屏幕的可能性，是自适应来扩大或者缩小;
4.依据平台及屏幕大小，来选择一款典型的手机，开始客户
端的交互制定。
5.确定客户端的核心目的。如为娱乐为主的，应在制定方式
更娱乐性;功能性完成目的为主的，以更易用性为主;
6.依据客户端的功能和内容，来制定客户端的信息架构;
第 1 页 共 5 页
7.依据UCD的原则，来完成客户端的交互原型。
3android ui适配
Android设备的屏幕尺寸，从几寸的智能手机，到10寸的平板
电脑，再到几十寸的数字电视，我们应该适配哪些设备呢?
什么是ui适配_ui适配原则，其实这个问题不应该这么合计，
因为关于具有相同像素密度的设备来说，像素越高，尺寸就越大，
所以我们可以换个思路，将问题从单纯的尺寸大小转换到像素大
小和像素密度的角度来。
占比5%以上的6个主流分辨率，占比高的是480*800，320*480
的设备居然也占据了很大比例，但是和半年前的数据相比较，中
低分辨率(320*480、480*800)的比例在减少，而中高分辨率的比
例则在不断地增加。虽然每个分辨率所占的比例在变化，但是总
的趋势没变，还是这六种，只是分辨率在不断地提升。所以说，
我们只要尽量适配这几种分辨率，就可以在大部分的手机上正常
运行了。当然了，这只是手机的适配，关于平板设备(电视也可以
看做是平板)，我们还必须要一些其他的处理。
第 2 页 共 5 页
4ios ui适配
从iPhone3GS/iPhone4(s)过渡到iPhone5(s)时，在逻辑上宽度
不变高度稍高，之前旧的素材和布局通过AutoresizingFlexible
简单适配即可运行得很好，但由于高宽比增大，上下两端出现黑
粗边(典型如LaunchImage)。
从分辨率的角度来看，除了必须要提供LaunchImage这种满屏图，
其他基本沿用二倍图(@2x);从屏幕尺寸角度来看，必须要对纵向
排版略加调整。从iPhone5(s)发展到iPhone6(+)，由于高宽比坚
持不变，iOS对图标、图片、字体进行等比扩大自适应，清楚度
会有所降低。同时，坐标布局会导致在大屏下出现偏左偏上的问
题。从分辨率的角度来看，iPhone6沿用二倍图(@2x)，但必须为
iPhone6+提供更高的三倍图(@3x);从屏幕尺寸角度来看，必须要
重新对UI元素尺寸和布局进行适配，以期视觉协调。
(1)按宽度适配
iPhone4~6(+)的屏幕高宽比：
iPhone4(s)：分辨率960*640，高宽比1.5
iPhone5(s)：分辨率1136*640，高宽比1.775
iPhone6：分辨率1334*750，高宽比1.779
iPhone6+：分辨率1920*1080，高宽比1.778
第 3 页 共 5 页
可粗略认为iPhone5(s)、6(+)的高宽比是一致的(16:9)，即
可以等比例缩放。这样，共有iPhone3/4/5、6、6+三组宽度，在
iPhone6、6+下将按比例横向扩大。
(2)按高度适配
在同样的宽度下，iPhone4(s)的屏高比iPhone5(s)低，假设
纵向排版紧张，可以iPhone5(s)为基准，共有iPhone3/4、5、6、
6+四组高度，在iPhone3/4下将按比例纵向缩小，在iPhone6、
6+下将按比例纵向扩大。
(3)按字体适配
另外，iPhone的【设置】【通用】【辅助功能】中可以设置调
节【更大字体】，APP也可以按字号适配。
5ui制定一稿适配
一份制定稿就不能适用于 iOS 各手机屏幕尺寸。如何支持多
个尺寸屏幕，这个要分状况讨论。关于常规界面我们可以偷个懒，
只做 iPhone 5 屏幕尺寸的制定稿，请开发在其它屏幕上自适应，
终检查实机效果没问题就行。关于一些定制的界面我们应该依据
不同屏幕重新适配， iPhone 6 Plus 界面中部分切图尺寸比 3x
更大，要单独切图，所以不是说简单地给 iPhone 6 Plus 统一切
3x 图就 OK 的了。这时矢量切图在开发中优势很显然，只要把大
屏幕中切图的尺寸告诉开发即可，无必须针对非 3x 元素额外输
第 4 页 共 5 页
出切图。
第 5 页 共 5 页