第二篇 设计规范—iOS篇

本篇我们来总结一下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