第二篇 设计规范—iOS篇
目前iPhone产品的分辨率以及设计参照分辨率
本篇我们来总结一下iOS系统上软件设计需要注意的一些尺寸
一、目前iPhone手机的分辨率与尺寸

以上为目前所有iPhone的尺寸,常用的设计尺寸为750 x 1334(@2x)、刘海屏代表尺寸1125 x 2436(@3x),其中有“倍率”一项,@2x为二倍率的分辨率,@3x为三倍率的分辨率,设计时只需要设计二倍率的设计稿,向上、向下适配即可(不需要每个分辨率都设计一套,但是注意引导页/启动页切图通常设计多个版本的),最终需要给研发交付以@3x和@2x在文件名结尾命名的切图文件(现在很多切图插件能完成这个任务,如cutterman、蓝湖)。
表格中的“物理尺寸”与“开发尺寸”,也称为“物理分辨率”和“逻辑分辨率”,“物理分辨率”是手机硬件的分辨率,以px为单位,“逻辑分辨率”则是软件能达到的分辨率,以pt为单位,也就是说虽然可能不是原配,但在这个分辨率下软件的界面设计展示更完美,如同电脑上显示器分辨率有多个数值可以供你选择,你可以给当前电脑选择一个更高分辨率的、界面展示更好的分辨率,但物理分辨率就一个。“设计尺寸”则是“逻辑分辨率”通过相对应的倍率转化为px为单位的尺寸,专门列出,我们设计时就可以直接按照设计尺寸来设计。
具体想了解这些分辨率、倍率,网上有很多的,自行搜索哈
https://blog.csdn.net/bobo553443/article/details/78625368
二、设计时所用尺寸及各栏目详细尺寸
下面是在设计iOS应用时我们需要掌握的一些数据,在设计时,我们按750*1334的尺寸设计,然后向上、向下适配,要注意有了刘海屏后的手机分辨率,如我们常用机型iPhone X,二倍率分辨率为750*1624(@2x),则是750*1334的尺寸上增高290px。
下图中色块儿标出来的为设计所用尺寸

下图为设计iOS应用时所用的普通屏幕(以iPhone 6s为例)与刘海屏(以iPhone X为例)的安全区域,安全区域是指除去状态栏后剩下的内容设计区域。

下图为具体设计时的状态栏、导航栏、标签栏及距屏幕边距

三、导航栏、工具栏、操作栏图标大小
以上尺寸为苹果官方给的导航栏图标尺寸大小,有标准大小与最大尺寸,当然设计时尺寸可以在这个范围内选择一个合适的尺寸。

上述为6s中钉钉、微信、天猫、每日瑜伽的操作栏图标例子,图标大小基本为48px X 48px,48也是我们手指点击比较合适的区域范围,苹果官方建议最低目标大小为44像素宽44像素高。
四、标签栏图标大小
以上为苹果官方标签栏图标尺寸,分为圆形、方形、宽形与高形,标签栏图标一般为2-5个,所以我们能看到常规标签栏与紧凑型标签栏两种尺寸,同样在设计时我们选择合适尺寸即可。

以上为6s上的TIM、微信、每日瑜伽、天猫标签栏图标大小(此处标记不包括点击范围大小),我们可以看出尺寸跟官方尺寸是有出入的,官方尺寸只是一个借鉴范围,具体设计多少尺寸请根据自己界面效果决定。
五、软件上线所用其他图标大小

参考链接:
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
https://www.uisdc.com/design-specification-website
https://www.jianshu.com/p/7e722627e930
https://blog.csdn.net/odyyy/article/details/88183047





















































































