原标题：干货｜超全面的移动端UI 设计规范整理汇总(下)

来源：优秀网页设计

六、APP版式设计规范

版式设计又叫做版面编辑，即在有限的版面空间里，将版面的构成要素如文字、图片、控件等根据特定的内容进行组合排列。一个优秀的排版要考虑到用户的阅读习惯和设计美感，在 UI设计中版面设计的原则有哪些呢？

1. 对齐

对齐是贯穿版式设计的最基础，最重要的原则之一，它能建立起一种整齐划一的外观，带给用户有序一致的浏览体验。

2. 对称

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

3. 分组

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

七、界面文字设计规范

文字是 APP 中最核心的元素，是产品传达给用户的主要内容，所以说文字在 APP 的设计中是非常重要的，那么，文字的字体如何选择，字号如何设定，是否加粗，颜色如何设置？

在一款 APP 中字号范围一般在20-36之间(@2x),当然 iOS 11中出现了大标题的设计，字号还是要根据产品属性酌情设定。另外需要注意的一点是所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号。

关于字体：在 iOS 9推出之前设计师普遍采用华文黑体、谷歌思源、冬青等字体进行设计，iOS 9推出了苹果自己的字体——苹方！自此之后苹方字体被广泛应用于移动端设计中。

关于字体颜色和是否加粗：字体的颜色设置我们一般很少用纯黑色，一般用深灰色和浅灰色、细体和粗体(注意要用字体本身的字重，不能用 PS 的加粗功能)来区分重要信息和次要信息，进行信息层级的划分。

八、设计适配

iOS 主流设备的分辨率分别是640x1136px(@2x)(iPhone SE)、750 x1134px(@2x)(iPhone6s/7/8)、1242x2208px(@3x)(iPhone 6s/7/8 Plus)、1125x2436px(@3x)／750x1624px(@2x)(iPhone X)。

在设计设计中设计师需要设计一套基准设计图来达到适配多个分辨率的目的，我们可以选择中间尺寸750 x1134px作为基准，向下适配640x1136px，向上适配1242x2208px和750x1624px／1125x2436px。

1. 750×1334向下适配640×1136

由于750x1334px和640x1136px两个尺寸的界面都是2倍的像素倍率，因此它们的切片大小是相同的，即系统图标、文字和高度都无需适配，需要适配的是宽度。

为了让大家了解适配的原则，我们以文字描述和图示的方式进行750x1334px到640x1136px的界面推导。

绘制一个750x1334px的设计图，这是最常见的首页设计图，从上至下分别是状态栏、导航栏、首焦图、主要入口、分割、列表。

下面开始进行适配，上面提到了由于750x1334px到640x1136px都是2倍的像素倍率，界面的图标、文字大小等都是相同的，所以我们不需要改变图像大小，只需将画布大小改成640x1136px即可，然后再改变横向元素的间距以达到适配的目的。

首先打开750x1334px的设计稿，执行 Command+Alt+C(改变画布大小的快捷键)，鼠标左键单击「定位」的左上角的格子，设置宽高为640和1136，点击「确定」。

改变画布大小之后，设计稿的右边和下边都被裁切(上面左图中半透明蒙版覆盖区域)，画布缩小成640x1136px。

上面左图裁切到右图适配完成，做了如下调整。

导航栏右边的图标向左移动保持和原来的右边距一致，标题居中。

首焦图高度除以1.17(750／640=1.17得到)后居中，宽度640px。

主要入口右边的图标向左移动保持和原来的右边距一致，各图标的间距等宽。

2. 750×1334向上适配1242×2208

由于750x1334px界面是2倍的像素倍率，而1242x2208px是3倍的像素倍率，也就是说1242x2208px界面上所有的元素的尺寸都是750x1334px界面上元素的1.5倍，所以我们在进行适配的时候直接将界面的图像大小变为原来的1.5倍，然后调整画布大小为1242x2208px，最后调整界面图标和元素的横向间距的大小完成适配。

上面说了整体思路，下面我们来说说具体怎么适配。

首先对750x1334px的画布执行 Command+Alt+I 命令(调整图像大小)，单位设置为百分比，宽高设置为150%，点击「确定」，调整之后的画布大小为1125x2001px。

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

上面左图拓展画布到右图完成适配做了如下调整：

导航栏右边的图标向右移动保持和原来的右边距一致，标题居中。

首焦图的高度乘以1.65(1242/750=1.65得到)后居中，宽度1242px。

主要入口右边的图标向右移动和原来的右边距一致，各图标的间距等宽。

注：分割线仍是1px。

3. 750×1334向上适配1125x2436px(@3x)

与苹果之前发布的 iOS设备相比，iPhone X 的像素分辨率发生了变化，为1125x2436px(@3x)，在实际工作中为了方便向上和向下的适配，我们仍然可以选择熟悉的 iPhone 7(750x1334px)的尺寸作为模版进行设计，只是高度增加了290px；设计尺寸为：750x1624px(@2x)。设计完成之后将设计稿的图像大小拓展1.5倍即可得到1125x2436px(@3x)尺寸的设计稿。

在适配的时候需要注意，状态栏由之前的40px增加到88px，标签底部预留68px用于放置主页指示器，如下图所示。

关于主页指示器的适配涉及到两种情况：底部出现标签栏、工具栏等操作设计时，需要将底色下延68px并填充原有颜色，这样的处理可以让底部设计更佳简洁舒适，没有功能操作时，页面底部不需要填充颜色，只需盖住主页指示器即可。

对于大多数采用瀑布流的页面来说，仅仅是屏幕高度上的变化，可以无视。但对于如：新手引导页、音乐播放器等需要单屏显示的界面就需要重新布局。

九、切图规范

当界面设计定稿之后，设计师需要对图标进行切片提供给开发工程师，通常我们只需要对 icon 进行切图即可，文字、线条和一些标准的几何形状是不需要切图的，例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可，开发工程师可以用代码实现这种效果。

1. 输出切片

先将设计稿中的图标重新排列在一张新的画布中，保证同样尺寸的图标间距相同，这样做的好处是为图标建立一个控件库，有利于图标的整理。

给每一个图标建立好参考线之后，用 PS 自带的切片功能，沿着建立好的每个图标的参考线画框即可，注意最后要输出 PNG 格式的切片(PNG 格式拥有更多的颜色和细节并且支持透明)。

在具体操作时首先要将画布背景色去掉，让画布变成透明，做好切片后执行文件-存储为 Web 所用格式，在对话框中选择 PNG 格式，点击「存储」即可。

注：图中标签栏图标的底色块是为了保证统一的切片尺寸，可以根据色块建立参考线，具体切图时要将色块去掉。

2. 切片命名

切片命名的通用规范是，界面_功能_状态.png。名称应使用英文命名，不要使用数字或者符号作为开头，使用下划线进行连接，例如一个首页处于正常状态下的按钮命名是 home_btn_nor@2x.png。其中界面首页是 home、空间按钮是 btn、状态正常是 normal。为了命名的正确性，设计师需要先和合作的开发工程师进行沟通确认。

十、设计稿标注

当界面设计定稿之后，设计师需要对界面进行标注给开发工程师在还原界面时进行参考。借助一些专业的标注工具有利于我们提高工作效率，常用的标注工具有 Mark Man 或 PX Cook。

在一份设计稿中需要标注的内容是文字的字号大小、粗细、颜色、不透明度；界面的背景颜色、不透明度；各个图标、列表、文字之间的间距。

界面标注的作用是给开发工程师提供参考，因此在标注之前需要和开发工程师进行沟通，了解他们的工作方式，标注完成之后宣讲你的注意事项，以更快捷高效的完成工作，并且最大限度的完成视觉高的还原。

总结

本文整理汇总了包括界面尺寸、控件间距、版式设计规范、文字设计规范、设计适配、标注、切图等等一系列的移动端UI设计规范，在此期间查阅了大量的资料，共耗时一周完成本文的编写，希望为刚刚从事 UI设计的设计师们提供入门级别的帮助。

至于为什么只总结了 iOS系统设计规范，而没有 Android系统的设计规范，在这里说明一下，本来安卓系统设计规范也是要涵盖的，但通过查阅资料发现安卓设计规范介绍少之又少，并且标准不统一，借鉴意义不大，所以省略了这部分规范的编写。

责任编辑：