关于界面UI设计的“适配”,如果给你两张不同尺寸的画布,C*D>A*B,要求你在上面进行界面UI设计,作为界面UI设计师的你,条件反射应该是比例的问题,这个时候,你的参照物就是这个画布,在为了得到“好看”的效果 ,你一定会在比较大的画布上将界面UI设计做得更大一些,在小的画布上将界面UI设计做的尽量小一些。
[图片0]2ui适配原则
什么是ui适配_ui适配原则,界面适配要遵循的原则:
1.根据公司的战略,选择一个先切入的平台;
2.了解该平台的UI设计规范,可用的UI 控件及交互原则;
3. 确定切入的屏幕大小,以此来设计第一个客户端,但是要考虑适配其他屏幕的可能性,是自适应来扩展或者缩小;
4.根据平台及屏幕大小,来选择一款典型的手机,开始客户端的交互设计。
5.确定客户端的核心目的。如为娱乐为主的,应在设计方式更娱乐性;功能性完成目的为主的,以更易用性为主;
6.根据客户端的功能和内容,来设计客户端的信息架构;
7.根据UCD的原则,来完成客户端的交互原型。
3android ui适配
Android设备的屏幕尺寸,从几寸的智能手机,到10寸的平板电脑,再到几十寸的数字电视,我们应该适配哪些设备呢?
什么是ui适配_ui适配原则,其实这个问题不应该这么考虑,因为对于具有相同像素密度的设备来说,像素越高,尺寸就越大,所以我们可以换个思路,将问题从单纯的尺寸大小转换到像素大小和像素密度的角度来。
[图片1]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,高宽比
iPhone5(s):分辨率1136*640,高宽比
iPhone6:分辨率1334*750,高宽比
iPhone6+:分辨率1920*1080,高宽比
可粗略认为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 元素额外输出切图。
