以下是关于移动端 UI 设计规范的综合梳理

许多初涉移动端 UI 设计领域的新人，往往对界面的相关尺寸规范缺乏清晰认知，多数时候仅凭自身感觉与经验来绘制界面，心中没有明确的概念，致使所做页面难以达到理想效果。本文汇总梳理了部分 iOS 系统界面设计中常用的尺寸规范与方法，像控件间距、适配、标注、切图等。设计师在设计过程中虽不必严格遵循，但应对这些规范有所知晓并能灵活运用。

目录

• 界面设计尺寸及栏高度

• 边距和间距

• 内容布局

• 界面图片设计比例

• 建立统一风格的图标

• APP 版式设计规范

• 界面文字设计规范

• 设计适配

• 切图规范

• 设计稿标注

一、界面设计尺寸及栏高度

当下主流的 iOS 设备主要包括 iPhone SE（4 英寸）、iPhone 6s/7/8（4.7 英寸）、iPhone 6s/7/8 Plus（5.5 英寸）、iPhone X（5.8 英寸），它们皆采用了 Retina 视网膜屏幕。其中，iPhone 6s/7/8 Plus 和 iPhone X 采用的是 3 倍率的分辨率，其余则是 2 倍率的分辨率。不管是栏高度还是应用图标，设计师提供给开发人员的切片大小，前者始终是后者的 1.5 倍，并分别以@3x 和@2x 在文件名结尾命名，程序会依据不同分辨率自动加载@3x 或者@2x 的切片。

通过上述讲解与图示，我们了解了 iPhone 不同设备的物理尺寸，那么它们的像素分辨率究竟是多少呢？换言之，我们运用 Photoshop 进行设计时新建画布应如何设置尺寸？此外，iOS 应用中的栏，诸如状态栏、导航栏、标签栏、工具栏等，它们的高度又分别是多少？（需注意：iOS 对各个栏的高度有严格规定，这是必须遵循的）通过以下表格和图示为您解答上述问题。

注意：在进行 iPhone X 设计时，我们仍可采用熟悉的 iPhone 7 的设计尺寸作为模板，只是高度增加了 290px，设计尺寸为 750*1624（@2x）。注意状态栏的高度由原来的 40px 变为 88px，另外底部要预留 68px 的主页指示器位置。

二、边距和间距

在移动端页面的设计进程中，页面中元素的边距和间距的设计规范极为关键，一个页面是否美观、简洁、通透，与边距间距的设计规范紧密相关，所以我们很有必要对其加以了解。

1. 全局边距

全局边距指的是页面内容与屏幕边缘的距离，整个应用的界面都应当以此进行规范，以达成页面整体视觉效果的统一。全局边距的设定能够更好地引导用户竖向向下阅读。

在实际运用中，应当依据不同的产品特质采用不同的边距，让边距成为界面的一种设计语言。常用的全局边距有 32px、30px、24px、20px 等等，当然除了这些，还有更大或者更小的边距，但上述所提及的是最为常用的，而且有一个特点，就是数值均为偶数。

以 iOS 原生页面为例，「设置」页面和「通用」页面均使用 30px 的边距。

再以微信和支付宝为例，它们的边距分别是 20px 和 24px。

通常左右边距最小为 20px，这样的距离能够展示更多内容，不建议小于 20px，否则会使界面内容过于拥挤，给用户的浏览带来视觉负担。30px 是非常舒适的距离，是绝大多数应用的优先选择边距。

还有一种是不留边距，通常应用于卡片式布局中图片通栏显示，比如站酷 APP（当然站酷 APP 也进行了改版，首页已采用不通栏的卡片式设计）。这种图片通栏显示的设置方式，更易让用户将注意力集中于每个图文的内容本身，其视觉流在向下浏览时因无留白的引导被图片直接割裂，导致在图片上停留时间更长。

2. 卡片间距

在移动端页面设计中，卡片式布局是极为常见的布局方式。至于卡片与卡片之间的距离设定，需依据界面的风格以及卡片承载信息的多少来确定，通常最小不低于 16px，过小的间距会引发用户的紧张情绪，使用最多的间距是 20px、24px、30px、40px，当然间距也不宜过大，过大的间距会使界面变得松散。间距的颜色设置可以与分割线一致，也可以更浅一些。

以 iOS（750*1334px）为例，设置页面无需承载过多信息，因而采用了较大的 70px 作为卡片间距，有利于减轻用户的阅读负担，而通知中心承载了大量信息，过大的间距会使浏览变得不连贯且界面视觉松散，所以采用了较小的 16px 作为卡片的间距。

下面来看一下微信的卡片间距设定是多少，以及颜色值。

△ 卡片间距和颜色值是直接截图测量和吸取的，可能不十分准确

继续举例，下面的两张截图分别是巨划算（卡片间距 20px）和拼多多（卡片间距 16px）的首页截图，此类电商类的 APP 因需承载大量信息，所以一般间距设定得都比较小。

总结：卡片间距的设定是灵活多变的，必须依据产品的特质和实际需求进行设置，平时也可以多截图测量各类 APP 的卡片间距是如何设定的，看得多了并加以融会贯通，卡片间距的设置自然会更合理，更得心应手。

3. 内容间距

一款 APP 除了各种栏（状态栏、导航栏、标签栏、工具栏）和控件 icon，剩下的就是内容了。内容的布局形式多种多样，在此不探讨内容具体应如何布局，我们来谈谈内容的间距设定问题。

先来介绍一下格式塔原则中的一个重要原则——邻近性。格式塔邻近性原则认为：单个元素之间的相对距离会影响我们对其是否以及如何组织在一起的感知，相互靠近的元素看起来属于一组，而距离较远的则自动划分组外，距离近的关系紧密。来看下图，左图中的圆在水平方向比垂直距离近，那么，我们看到了 4 排圆点，而右图则看成 4 列。

在 UI 设计中进行内容布局时，一定要重视邻近性原则的运用。比如在下面这款轻芒阅读 APP 的主界面中，每一个应用名称都远离其他图标，与对应的图标距离较近，保持亲密关系，也让用户的浏览变得更直观。如果应用名称与上下图标距离相同，就分不清它属于上面还是下面，从而让用户产生错乱的感觉。

再来看一个案例，日日煮 APP，上面图片与文字较近，下面图片与文字较远，所以我们能清晰地知道文字是属于上面的图片的。

三、内容布局

在 APP 的设计中，内容的布局形式丰富多样，这里介绍最为常用的两种布局形式，即列表式布局和卡片式布局。

1. 列表式布局</strong