IOS系统UI设计时，需要注意的UI设计规范是什么？

UI设计是现在非常热门的职业，在进行UI设计的时候，将是由终端来决定设计套路，不同的终端使用不同的设计方法，这就要求设计师能哦股学会灵活使用，下面就一起看看那些需要注意的IOS UI设计规范？

IOS UI的设计规范:

先说设计稿的大小,一般来说，在制作IOS设计稿时，我们总是选择650*1334的尺寸，如果是1x，就是375*667。

我们按照1x规范从上到下理解，最上面是状态栏，高20，宽375。

那么状态栏有哪些元素呢？其实就是信号，网络状态，时间，电量，通知。

信号栏下面是我们的导航条，高度44px。

导航栏中必须有导航字符。一般来说，我们是居中对齐的，导航字符的大小应该是18px。

接下来是底部。底部是我们的标签栏，里面装满了我们的切换图标。标签栏的高度为49px。

标签栏中图标的大小也是标准化的。我们必须确保最小点击面积为24px。如果低于这个范围，就不方便操作。

图标下面一般都有字符，尺寸比较小，可以根据图标的大小进行调整。一般来说，字符的大小是11和10px。

一般来说，一是基于我们IOS的设计规范，二是内容区的文字大小规范。一般来说是16，15，14，12，根据要求设计。

iOS的屏幕分辨率

说到原稿改编，首先要了解iOS屏幕分辨率的一些知识点。这些知识点便于我们理解为什么设计稿要分双图和三图。如果很难理解，直接记住双三图的大小就好了。熟了再回头看理论。

1.像素

像素是一个单位和一个小正方形。它没有固定的物理大小，它的物理大小由载体的物理大小决定。这个像素小方块包含颜色，无数个小方块根据位置显示颜色，从而形成一幅画面。(是的，你可以理解为类似于十字绣。)在同样大小的屏幕上，像素越多，图像就会越清晰。

2.PPI和DPI

PPI和DPI是经常被谈论的兄弟。都和密度有关，影响输出质量，但是PPI是每英寸的像素，也就是每英寸的像素数。DPI是打印精度，即每英寸点数。PPI影响屏幕显示的准确性，DPI影响打印的准确性。了解PPI的原理及其在UI设计中的应用是有好处的。

3.逻辑点

在上面列出的型号中，我们可以知道屏幕很多。ioS手机只有苹果生产，安卓手机很多公司生产，所以尺寸很多。为此，建立了一个规则，其中一个尺寸作为参考，而其他尺寸根据参考尺寸比率进行调整。iOS系统的基准设计尺寸为375*667(俗称双图)，逻辑点单元称为pt。1pt在双图中是1px，在双图中是2px，在三图中是3px。因此，我们为开发人员提供了一个双图，他们可以根据单位pt知道其他多个图中元素和组件的大小。下图也是一个44pt大小的圆，在不同倍数的屏幕上有不同的大小:

4.双图，双图，三倍图

A.iOS一次、二次、三次图的定义

iOS的设计尺寸是375*667，iOS的设计尺寸是750*1334(iPhone6、7、8的尺寸)，iOS的设计尺寸是1242*2208。

如果按照双图的1.5倍得出三图，应该是1125*2001。为什么三重图是1242*2208？这和屏幕的PPI有关。IPhone6、7、8plus的PPI为401，而iPhone6、7、8的PPI为326。理论上苹果应该用401/326*@2x=@2.46x材质。但是这个数字是十进制的，很难切图。所以为了方便开发者，苹果使用@3x素材，然后缩放到@2.46x，缩放比例为83%。苹果选择了一个大概87%的比例作为最终比例。这样，Appleplus型号的物理分辨率大小占虚拟分辨率大小的87%。plus型号的物理尺寸是1080*1920。除以87%，虚拟设计尺寸为1242*2208。

上面是虚拟的三重图，而iPhoneX是真正的三重图，大小是1125*2436。所以iPhoneX上用的是三倍的截止图像。

b、一次、二次、三次图的应用

既然一个稿可以改编，那么按照一个双画面的大小来做一个双画面和三画面就够了，那为什么要分双画面、双画面和三画面呢？其实这里的双图主要是用来切图的(切图是你在界面上画的一些元素，比如图标、插图等。，应该放在不同尺寸的屏幕上，所以需要适当增加倍数，即@2x，@3x)。设计稿虽然根据开发只需要给一套样式写代码，但是需要给几套裁剪图，否则在双界面上只用一次裁剪图拉伸就会模糊(理论上一个位图像素对应一个物理像素才能完美显示图片。这个理论在普通屏幕下是没问题的，但是现在有了高清视网膜屏幕，如果还用原来的像素图像，会导致像素不足，模糊。).所以双界面是双切切，双界面是双切，三界面是三切，以此类推。

5.初稿的改编

现在的开发团队一般都是根据一套设计稿来适应其他尺寸。所以我们只需要提供一套设计稿，大大节省了我们的设计时间。至于要用双图还是双图，看你个人习惯，两者各有利弊。我个人习惯使用双图，也就是750*1334的大小，因为除了双图本身的优点之外，开发使用也很方便。发展的适应方法也是基于个人习惯。一些开发伙伴使用js编写代码，通过获取屏幕大小并除以一个数值得到最终结果。如果设计稿是按照750的双图尺寸做的，他们就不用自己算了，比较方便。

IOS尺寸规格。

1，固定的部分

在界面中，有些部分是固定的，除了那些部分，其余都是可设计的区域。我们所做的是设计可设计的区域。

2.网格布局

在可设计区域，我们在做设计稿的时候，需要有一个框架，这个框架通常叫做网格布局。如果网格布局标准化，设计稿中的内容会有一定的规律，形成界面时会有节奏感。界面由行和列组成，这些行和列的形成规则与开始时最小单位的定义有关。在这里，我们就来谈谈如何做双倍图形尺寸的网格布局。我的习惯是最小单位是8px(如果你设置的最小单位是其他值，也可以代入下面的框架理论)，所以框架中的大小设置为8的倍数。

3.组件模块

不同类型的应用程序有不同的内容，但一般来说，它们只不过是图标层和图形布局层。这些小元素可以组合成不同的模块。图标的规范，之前写在《如何画一组线性图标》一文中的，可以搜索参考，此处不再赘述。在图形布局层，要注意图片的比例，信息层次的区分，标题与内容的距离等等。

IOS设计需要严格按照要求相应的规范进行操作和设计，并保证其设计效果，当然在设计中需要对方案再进行合理的规划和整理，才最终输出一份完整且系统的规范文档。