04.界面图片设计比例
在UI设计中，对于图片的尺寸和比例没有严格的规范，设计师往往凭借经验和感觉设置一个看起来不错的尺寸，但事实上我们是有章可循的。运用科学的手段设置图片的尺寸，可以获得最优的方案，常见的图片尺寸有16:9、4:3、3:2、1:1和1:0.618（黄金比例）等。这些比例不无根据，它们都和图片尺寸有关。16:9 是根据人体工程学的研究，发现人的两只眼睛的视野范围是一个长宽比例为16:9的长方形，4:3 是勾三股四弦五，在摄影中非常常见。

05.建立统一风格的图标
在应用界面的设计中，功能图标不是单独的个体，通常是由许多不同的图标构成整个系列，它们贯穿于整个产品应用的所有页面并向用户传递信息。一套APP图标应该具有相同的风格，包括造型规则、圆角大小，线框粗细，图形样式和个性细节等元素都应该具有统一的规范。

通过分析以上三组图标可以得出：他们具有统一的色彩，统一的圆角大小，统一的线框粗细，那综合起来也就是具有统一的风格，给用户高度统一的视觉体验。
06.APP版式设计规范
版式设计又叫做版面编辑，即在有限的版面空间里，将版面的构成要素如文字、图片、控件等根据特定的内容进行组合排列。一个优秀的排版要考虑到用户的阅读习惯和设计美感，在UI设计中版面设计的原则有哪些呢？
对齐
对齐是贯穿版式设计的最基础，最重要的原则之一，它能建立起一种整齐划一的外观，带给用户有序一致的浏览体验。

对称
对称是宇宙间的设计哲学，是对立统一规律的本质属性，呈现出一种和谐自然的美，在应用界面的设计中，引导页设计、注册登录输入框和按钮等无一不是对称的设计。

分组
物以类聚，人以群分。分组是将同类别的信息组合在一起，直观的呈现在用户的面前，这样的设计能够减少用户的认知负担，在移动端界面的设计中最常见的分组方式就是卡片，为用户选择提供专注而又明确的浏览体验。

07.界面文字设计规范
文字是APP中最核心的元素，是产品传达给用户的主要内容，所以说文字在APP的设计中是非常重要的，那么，文字的字体如何选择，字号如何设定，是否加粗，颜色如何设置？在一款APP中字号范围一般在20-36之间（@2x）,当然iOS 11中出现了大标题的设计，字号还是要根据产品属性酌情设定。另外需要注意的一点是所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号。

关于字体：在iOS9推出之前设计师普遍采用华文黑体、谷歌思源、冬青等字体进行设计，iOS 9推出了苹果自己的字体——苹方！自此之后苹方字体被广泛应用于移动端设计中。关于字体颜色和是否加粗：字体的颜色设置我们一般很少用纯黑色，一般用深灰色和浅灰色、细体和粗体（注意要用字体本身的字重，不能用PS的加粗功能）来区分重要信息和次要信息，进行信息层级的划分。

08.设计适配
iOS主流设备的分辨率分别是640x1136px（@2x）（iPhone SE）、750 x1334px（@2x）（iPhone 6s/7/8）、1242x2208px（@3x）（iPhone 6s/7/8 Plus）、1125x2436px（@3x）／750x1624px（@2x）（iPhone X）。在设计设计中设计师需要设计一套基准设计图来达到适配多个分辨率的目的，我们可以选择中间尺寸750 x1334px作为基准，向下适配640x1136px，向上适配1242x2208px和750x1624px／1125x2436px。

750x1334向下适配640x1136
由于750x1334px和640x1136px两个尺寸的界面都是2倍的像素倍率，因此它们的切片大小是相同的，即系统图标、文字和高度都无需适配，需要适配的是宽度。为了让大家了解适配的原则，我们以文字描述和图示的方式进行750x1334px到640x1136px的界面推导。绘制一个750x1334px的设计图，这是最常见的首页设计图，从上至下分别是状态栏、导航栏、首焦图、主要入口、分割、列表。

下面开始进行适配，上面提到了由于750x1334px到640x1136px都是2倍的像素倍率，界面的图标、文字大小等都是相同的，所以我们不需要改变图像大小，只需将画布大小改成 640x1136px即可，然后再改变横向元素的间距以达到适配的目的。首先打开750x1334px的设计稿，改变画布大小，设置宽高为640和1136，点击“确定”。

改变画布大小之后，设计稿的右边和下边都被裁切（上面左图中半透明蒙版覆盖区域），画布缩小成640x1136px。
上面左图裁切到右图适配完成，做了如下调整：
1、导航栏右边的图标向左移动保持和原来的右边距一致，标题居中。
2、首焦图高度除以1.17（750／640=1.17得到）后居中，宽度640px。
3、主要入口右边的图标向左移动保持和原来的右边距一致，各图标的间距等宽。
750x1334向上适配1242x2208
由于750x1334px界面是2倍的像素倍率，而1242x2208px是3倍的像素倍率，也就是说1242x2208px界面上所有的元素的尺寸都是750x1334px界面上元素的1.5倍，所以我们在进行适配的时候直接将界面的图像大小变为原来的1.5倍，然后调整画布大小为1242x2208px，最后调整界面图标和元素的横向间距的大小完成适配。上面说了整体思路，下面我们来说说具体怎么适配。首先对750x1334px的画布，调整图像大小，单位设置为百分比，宽高设置为150%，点击“确定”，调整之后的画布大小为1125x2001px。

紧接着对1.5倍之后的1125x2001px界面执行Command+Alt+C（调整画布大小），鼠标单击“定位”左上角的格子，调整宽高为1242和2208px，点击“确定”。

上面左图拓展画布到右图完成适配做了如下调整：
1、导航栏右边的图标向右移动保持和原来的右边距一致，标题居中。
2、首焦图的高度乘以1.65（1242/750=1.65得到）后居中，宽度1242px。
3、主要入口右边的图标向右移动和原来的右边距一致，各图标的间距等宽。注：分割线仍是1px。
这期的UI设计规范分享就到这里啦，下期我们会继续给大家分享~