ios ui设计规范是什么？ios ui设计怎么做

UI设计是现在非常热门的一个职业，在进行UI设计时是由终端所决定的，不同终端所用到的设计方法也有所不同，这就需要设计者学会灵活运用，那么ios ui设计规范是什么？下面一起看下吧。
　

　　IOS UI的设计规范
　

　　先来说说设计稿的尺寸，一般来说在做IOS设计稿的时候，设计稿尺寸我们都是选择650*1334这个尺寸，如果是1x的话，就是375*667。

　　我们从上到下以1x的规范来进行了解，最上边的就是状态栏了，状态栏的高度是20，宽度都是375。

　　那么状态栏都是有哪些元素呢？实际上就是信号、网络状态、时间以及电量和通知等。

　　在信号栏下边就是我们的导航栏，导航栏的高度为44px。

　　导航栏中肯定是有导航文字的，导航文字一般来说我们都是居中对齐，并且导航文字的大小应该为18px。

　　接下来就是最底部，最底部就是我们的标签栏了，标签栏中都是我们的切换图标，标签栏的高度为49px。

　　标签栏中的图标大小也是有规范的，最小的点击区域我们必须保证为24px，低于这个范围的话是不方便进行操作的。

　　在图标的下方一般都还有文字，这里文字的大小比较小，可以根据图标大小来进行调整，一般来说文字大小为11、10px。

　　总的来说着就我们IOS UI的设计规范了，其他还有就是内容区域的文字大小规范了，一般来说都是16、15、14、12这四个文字大小，具体根据需求进行设计。

　　iOS的屏幕分辨率

　　说到一稿适配，首先要了解iOS屏幕分辨率的几个知识点。这些知识点方便我们理解设计稿为什么要分二倍图、三倍图。如果感觉理解起来困难，那么直接记住二倍图和三倍图的尺寸就好。做熟了再回头看理论。

　　1、像素

　　像素是一个单位，是一个小方格。它没有固定的物理大小，它的物理大小是由载体的物理大小决定的。这个像素小方格里面包含了颜色，无数个小方格按照位置显示颜色，就组成了画面。（嗯是的，你可以理解为跟十字绣差不多）在同样大小的屏幕上，像素格越多，显像就越清晰。
　

ios ui设计（图片来自网络）

　　2、PPI与DPI

　　PPI与DPI是一对经常被人谈论的兄弟。它们都跟密度有关，都影响输出质量，但是PPI是像素密度，是每英寸包含多少像素点。DPI是打印精度，是每英寸所能打印的点数。PPI影响的是屏幕上显示的精度，DPI影响的是打印出来的精度。在UI设计里面理解PPI的原理以及在界面中的应用就好。

　　3、逻辑点

　　在上面所列举的历代机型里面，我们可以知道，屏幕的尺寸非常多。iOS系统的手机只有苹果公司生产，但安卓的手机却有非常多的公司生产，因此尺寸也很多。为此，定下了一个规则，以其中一个尺寸大小作为基准，其它尺寸按照这个基准尺寸比例来适配。iOS系统的基准设计尺寸是375*667（也就是俗称的一倍图），逻辑点单位叫做pt。一倍图里的1pt是1px，放到二倍图就是2px，在三倍图里是3px。所以我们提供给开发的一倍图，他们能够根据pt这个单位，知道其余倍数的图里面元素和组件的大小。下图，同样是44pt大小的圆形，在不一样倍数的屏幕中的尺寸不一样：

　　4、一倍图、二倍图、三倍图

　　a、iOS的一倍、二倍、三倍图定义

　　iOS的一倍图设计尺寸是375*667，二倍图的设计尺寸是750*1334（Iphone6、7、8的尺寸） ，三倍图的设计尺寸是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%来作为最终的比例。这样算的话，也就是苹果plus机型的物理分辨率尺寸占虚拟分辨率尺寸的87%。plus机型的物理大小是1080*1920，两者分别除以87%，就得出这个虚拟的设计尺寸1242*2208。

　　以上是虚拟三倍图，而iPhone X是真三倍，它的尺寸是1125*2436。所以在iPhone X 上用的是三倍的切图。

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

　　既然一稿可以适配，开发根据一倍图的尺寸，来按比例做两倍图、三倍图就可以了，那为什么还要分一倍图、两倍图、三倍图呢？其实这里的倍图，主要是针对于切图而言的（切图就是界面中你画的某些元素，比如图标、插画类等等，它们要放在不同大小的屏幕上，就要配合适当增大倍数，也就是@2x、@3x）。虽然设计稿只需要给一套样式给开发照着写代码，但切图是需要给几套的，不然在两倍的界面上只用一倍的切图去拉伸，就会很模糊（理论上来说，1个位图像素对应一个物理像素，图片才能得到完美的显示。这个理论在普通屏幕下是没问题的，但是现在有高清的retina屏幕，如果还是用回原本像素的图片，就会造成像素点不够而导致模糊的情况）。 所以，一倍的界面用一倍切图、两倍的界面用两倍的切图、三倍的界面用三倍界面的切图，以此类推。

　　5、一稿适配

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

　　iOS尺寸规范

　　1、定死的部分

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

　　2、栅格布局

　　在可设计区域里面，我们在做设计稿的时候，需要有一个框架，也就是常说的栅格布局。有栅格布局规范着，设计稿里的内容就会有一定的规律，组成界面的时候就有韵律感。界面是由行与列构成的，这些行列的构成规则，跟一开始定义最小单位有关。在这里以二倍图尺寸来讲述一下如何做栅格布局。我的习惯是最小单位为8px（如果你所设定的最小单位是其它数值，也可以代入以下的框架理论中），所以框架中的尺寸设定是8的倍数。

　　3、组件模块

　　不同类型的app有不一样的内容，但是总的来说无非就是图标层与图文排版层。这些小的元素可以组合成不同的模块。图标的规范，之前在文章《如何画好一组线性图标》中有写，可以搜索来参考，在这里不作赘述。图文排版层内要注意的是图片的比例、信息层级区分、标题与内容之间的间距等等。
　

ios ui设计（图片来自网络）

　　ios ui设计需要严格按照要求来操作，根据规范来进行设计，保证设计效果，当然在设计做好规划和方案整理也是很有必要的，希望本文对你有所帮助。