iOS UI切图基本规范

旨在降低沟通成本,节约双方时间,减少出错率。

iPhone各代屏幕尺寸与分辨率

iPhone型号 屏幕尺寸 缩放比例 逻辑分辨率 物理分辨率
4、4s 3.5 @2x 320 x 480 640 x 960
5、5s、SE 4 @2x 320 x 568 640 x 1136
6、6s、7、8 4.7 @2x 375 x 667 750 x 1334
6 Plus、6s Plus、7 Plus、8 Plus 5.5 @3x 414 x 736 1242 x 2208
X、XS 5.8 @3x 375 x 812 1125 x 2436
XR 6.1 @2x 414 x 896 828 x 1792
XS Max 6.5 @3x 414 x 896 1242 x 2688

UI只需要提供 一张1024*1024 尺寸的图即可,开发使用IconKit工具可以直接生成开发需要的各种尺寸的图片及其json配置文件,直接拖进Xcode工程中就可以使用了。使用传统方式不同尺寸一张一张的切图不仅浪费UI的时间,开发也需要一张图一张图往对应位置拖,双方都很麻烦。

启动图

如果使用LaunchImage方式,需要切各个尺寸的图片,参考iPhone各代屏幕尺寸与分辨率表,如果需要兼容iPhone 4、4s机型,则需要提供一共7种尺寸的图片,如果最低兼容iPhone5的话,就只需要提供6种尺寸的图片。

注意:iOS并不需要1920*1080这种尺寸的图片。

icon素材

iOS端的切图需要同时提供@2x和@3x两种尺寸的图片,例如某个名为“imagename”的图片需要提供两个文件分别命名为:

1
2
[email protected]
[email protected]

素材名(imagename)命名可以根据公司或团队规范而异,但是两种尺寸的文件的素材名部分要保持一致,唯一的不同就是@2x@3x

例如一组命名符合规范的素材的文件结构应该是这样的:




评论

文明评论,请勿灌水。为了便于区分和接收回复提醒,请您在留言时填写一下昵称邮箱