Date 2024-07-05 14:19:59
目前,移动终端系统主要是Android和iOS,干Android平台的差异化越来越大。iOS系统通常以UI设计为基准,以适应其他手机,可以降低设计成本,提高开发速度。 选择设计基准
设计基准选择是指选择当前主流手机屏幕分辨率作为设计适应标准。放弃一些非主流甚至被淘汰的手机屏幕尺寸,如i0S@1x倍率的屏幕尺寸。
目前iOS系统的主流分辨率一般为750x1334像素设计,像素倍率为@2x,因为当其尺寸向上或向下适应时,界面调整范围最小,偏差不太大,视觉比例也不太大。而且,它的尺寸类似于Android版本的720x1280像素,甚至屏幕密度,所以只需要进行最小的设计调整。 设计基准图
设计基准图是指根据选定的主流分辨率设计的界面,可以适应多个屏幕尺寸。下面将详细说明设计基准图的设计注意事项和调整方法。 1. 设计基准图注意事项
根据iOS系统主流分辨率750x1334像素的设计基准图,除图片外,其他部分需要使用形状工具,以便于后期其他版本的调整。将图片转换为智能对象进行放大和拉伸,只要不超过原始尺寸,就不会扭曲。设计完成后,在设计基准图上标记并输出切割图。 2. 界面调整 1) 改版Android界面
由于节省人力、时间等原因,开发团队一般以ios系统设计基准图为主导,适当调整并应用于安卓平台上绘制的设计基准图。
Android界面的修改有以下步骤:
(1) Android主流设计界面尺寸为720x1280像素。
(2) 设置界面结构中栏的尺寸(如状态栏高度为50像素,导航栏高度为96像素,标签栏高度为96像素)。
(3) 设置两侧边距(边距尺寸一般为24~30像素)。
(4) 将iOS系统设计基准图页面中的元素拖放到Android界面中,将页面元素调整到适当的位置,并将元素之间的间距调整为偶数。
(5) 将字体改为“思源”即可。
2) 适用于Plus界面
列的高度因ios系统中的像素倍率而异。例如,iPhone 7.屏幕分辨率为750x1334像素,状态栏商用像素,导航栏88像素,标签栏98像素。iPhone7 Plus高度为60像素,特就栏高度为132像素,标茶栏高度为16像素。
在界面上调整栏的内部元素,并重新调整内容区域。图片需要单独适应,iPhone 7 Plus是iPhone 7的1.65倍,Plus的正确高度需要在原图的高度上提高1.65倍,但位图一般放大会出现虚拟,所以适配的图片最好大小适配小尺寸。 3. 自动适配
自动适应是在设计基准图适应时需要注意文本流动和控制的问题。文本流动和控制是页面框架结构,文本根据屏幕尺寸自动适应排列。屏幕尺寸越大,显示的内容就越多,充分发挥了大屏幕的优势。