本文为UI设计导论的第一章，主要讲述移动端iOS系统的发展历程和设计规范。之所以把iOS放在第一章，是因为现在很多公司都是采用一稿适配的原则，所以学习了iOS章节的知识点就相当于进入了UI设计的大门（至少可以尝试一下）通过这些理论）设计稿）。只有当你尝试做设计稿的时候，你才会在界面中找出自己不懂的地方，边学边练。本文使用的部分界面和素材图片，版权归原作者所有，此处仅供学习使用，请勿用于商业用途。目录iOS发展史iOS屏幕分辨率iOS尺寸规格1.iOS发展史网上有很多关于iOS发展史的文章。想了解更多的朋友可以找相关资料阅读。这里我们来思考一个问题：UI设计师为什么要了解这个系统的历史。总结下来无外乎三点：iOS尺寸变化、系统变化、风格变化都会影响UI设计师做设计稿。下图是以上三点的总结。2、iOS屏幕分辨率说到初稿适配，首先要了解iOS屏幕分辨率的几个知识点。这些知识点方便我们理解设计稿为什么要分双图和三图。如果觉得难理解，直接记住双像和三像的大小就可以了。完成后，回到理论。1.像素像素是一个单位，一个小方块。它没有固定的物理尺寸，它的物理尺寸是由载体的物理尺寸决定的。这个像素小方块包含了颜色，无数个小方块按照位置显示颜色，组成了一幅画面。（你可以理解为类似于十字绣）在同样尺寸的屏幕上，像素越多，图像越清晰。2.PPI和DPIPPI和DPI是经常被挂在嘴边的兄弟。它们都与密度有关，影响输出质量，但PPI是像素密度，也就是每英寸有多少像素。DPI即打印精度，即每英寸可打印的点数。PPI影响屏幕显示的准确度，DPI影响打印出来的准确度。在UI设计中了解PPI的原理及其在界面中的应用是有好处的。3.逻辑点在上面列举的之前的机型中，我们可以知道屏幕尺寸有很多种。iOS手机只有苹果出品，而安卓手机是很多公司出品的，所以尺寸也很多。为此，制定了一个规则，以其中一个尺码作为参考，其他尺码按照这个参考尺码的比例进行适配。iOS系统的基准设计尺寸为375*667（也称为双像），逻辑点单位称为pt。双重图像中的1pt为1px，双重图像中为2px，三重图像中为3px。所以我们给开发提供了一个doublemap，他们可以以pt为单位知道其他倍数的map中元素和组件的大小。下图也是一个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。上面是一个虚拟的三重图，而iPhoneX是真实的三重图，它的尺寸是1125*2436。所以在iPhoneX上，使用了三倍的切口。二重图、二重图、三重图的应用既然初稿可以适配，开发可以根据双图的大小按比例制作二重图、三重图，那么为什么要分二重图呢，那么二重像三重呢图像？其实这里的双图主要是针对切图的（切图就是你在界面中绘制的一些元素，比如图标，插画等，应该放在不同尺寸的屏幕上，有必要配合适当增加倍数，即@2x、@3x）。虽然设计稿只需要一套样式供开发根据写代码，但是需要多套切图，否则双界面只用双倍的切图拉伸，会很模糊（理论上来说，一个位图像素对应一个物理像素，可以完美显示图片。这个理论在普通屏幕上没问题，但现在有了高清视网膜屏幕，如果还用原来的像素画面，会造成像素不足，造成画面模糊）。因此，双界面使用双切图，双界面使用双切图，三界面使用三界面切图，依此类推。5、一稿适配目前开发团队一般是根据一套设计稿按比例适配其他尺寸。因此，我们只需要提供一套设计稿，大大节省了我们的设计时间。至于用双像还是双像，就看个人习惯了。两者各有优缺点。个人比较习惯使用双像，也就是750*1334的尺寸，因为除了双像本身的优点之外，也方便开发使用。开发的适配方式也是根据个人习惯。有的开发小伙伴用js写代码，通过屏幕大小除以一个值得到最终结果。如果设计稿是按照750的双像尺寸来做的，他们就不用自己计算了，比较方便。三、iOS尺寸规格1、固定部分在界面中，部分部分是固定的，除此部分外，其余部分为可设计区域。我们所做的是可设计区域的设计。2.网格布局在设计范围内。我们在做设计稿的时候，需要一个框架，也就是我们常说的网格布局。网格布局标准化后，设计稿中的内容就会有一定的规律，在排版界面时会有节奏感。界面是由行和列组成的，这些行和列的组成规则和最开始的最小单位的定义有关。在这里，我们将介绍如何制作双倍图像尺寸的网格布局。我的习惯是最小单位是8px（如果你设置的最小单位是其他值，也可以代入下面的frame理论），所以frame中的size设置是8的倍数。3.组件模块不同不同类型的app内容各不相同，但总的来说无非就是图标层和图形布局层。这些小元素可以组合成不同的模块。图标规范之前在《如何画好一组线性图标?来看这份新手科普总结!》一文中写过，可以作为参考，这里不再赘述。图文排版层要注意的是图片的比例、信息层次的区分、标题与内容的距离等等。结语新手要想做出好的界面，首先要了解设计规范，确定界面的骨架。平时，你可以研究各种类型的优秀APP：别人怎么排版，怎么用字体大小，图片的显示比例，图标的风格，交互方式等等。如果你遇到一些设计好的界面，您可以保存界面并在旁边做笔记。多看、多学、多做。
