新手入门系列！UI 设计自学指南之iOS 系统篇

本文为 UI设计入第篇，主要讲述移动端 iOS系统的展史、设计规范。把 iOS 放在一篇的原因，是现在很司采用一稿适的原则，因此把 iOS 篇的识点学，就等迈进 UI设计的大门（至少你以通理论尝试做设计稿）。只有试着做设计稿，才现界面里不懂的内容，一边践一边学习。文中所用到的部分界面和素材图，版权均归属原者，在此仅做学习使用，请勿用。

目录

• iOS 的发展历史
• iOS 的屏幕分辨率
• iOS 的尺寸规范

一、iOS的发展历史

关于 iOS 的发展历史，网络上有非常多的文章，想详细了解的朋友可以去找相关资料一下。在这来想一个问题：UI计为什要了解这个系统的历史。总结归纳后，无非三点：iOS 的尺寸变化、系统变化、风格变化，都会响 UI计做计稿。下图为针对以上三点所做的总结。

二、iOS的屏幕分辨率

说到一稿适，首先要 iOS 屏幕分辨率的几个识点。识点方便我们理设计稿为什么要分二倍图、三倍图。果感理来困难，么直接住二倍图和三倍图的尺寸就。做熟回头看理论。

1. 像素

像素是一个单位，是一个小方。它没有固定的物理大小，它的物理大小是由载的物理大小决定的。个像素小方里面包含颜，无数个小方按照位置显示颜，就组成画面。（你以理为跟字绣差不）在同样大小的屏幕上，像素越，显像就越清晰。

2. PPI与DPI

PPI 与 DPI 一对常被人谈论的兄弟。它们都密度关，都影响输出质，但 PPI 素密度，每英寸包含多少素点。DPI 打印精度，每英寸所能打印的点数。PPI 影响的屏幕显示的精度，DPI 影响的打印出的精度。 UI设里面理解 PPI 的原理以及界面中的应用就好。

3. 逻辑点

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

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

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 上用的是三倍的切图。

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

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

5. 一稿适配

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

三、iOS尺寸规范

1. 定死的部分

在界，有些部分是定死，除了那些部分，其余是可设计区域。我们所做是可设计区域设计。

2. 栅格布局

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

3. 组件模块

不同类型的 app 有不一的内容，但是总的来说无非就是图标层图文排版层。这些的素可以组成不同的模块。图标的规范，之前在文章《如何画好一组线性图标？来这新科普总结！》中有写，可作参考，在这不作赘述。图文排版层内要注的是图片的比例、息层、标题内容之间的间距等等。

结语

新手想要做界面，首先要设计规范，定界面骨骼。平时以研究各种类型的优的 app：别人是怎么排版的、字号怎么使用、图的展示比例、icon 的样式、互方式等等。遇到一界面设计得的地方以把界面存下来，在旁边备注。

多看、多学、多做。

注作者的微信公众号：「牙线」

图片素材作者：Farzin Salimi