超全面的移动端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，这样的距离可以展示多的内，不建议比20还小，否则就会使界面内过于拥挤，给用户的浏览视觉负担。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. 列表式布局

列表式布局方式非常普遍，随便开一个 APP，基本都存在这种布局方式，其布局形式的点在于能够在较的屏幕中显示多条息，用户通过上下滑动的势能获得大量的息反馈。而列表也是一种非常容易理解的展示形式。

以我们最常用的微信和 QQ 为例，其「信息」页面是采用的列表式局，在采用种局形式的时要注意列表舒适验的最小高度是80px，最大的高度要视内容的少而定。

继续举例，自（列表高度110px）和唯品（列表高度106px）的列表式局。

2. 卡片式布局

形式非常灵活。其点在于，每张卡片的内容和形式都可以相互独立，互不干扰，所以可以在同一个页面中出现不同的卡片承载不同的内容。而由于每张卡片都是独立存在的，其息量可以相对列表更加丰。

在使用卡式局的时要注意卡身一般是白的，而卡之间的间距颜一般是浅灰，当不同产品风颜能不一样，有是浅灰偏蓝等。

双栏卡的局形式，比常见以图信息为主导的 App。例一的品陈列页面。种形式与卡式类似，但它能在一屏里显示更的内容，至少4卡。同时，由分开左右两栏的显示，用户以更加方便地对比左右两栏卡的内容。

四、界面图片设计比例

在 UI计中，对于图片的尺寸和比例没有严格的规范，计往往凭借经验和觉置一个起来不错的尺寸，但事实上是有章可循的。运用科学的段置图片的尺寸，可以获得最优的方案，常见的图片尺寸有16:9、4:3、3:2、1:1和1:0.618（黄金比例）等。

比例不无根据，它们和图尺寸有关。16:9 是根据人工程学的研究，现人的两只眼睛的视野范围是一个长宽比例为16:9的长方形，4:3 是勾三股四弦，在摄影中非常常见……

五、建立统一风格的图标

在应用界面的计中，功能图标不是独的个体，通常是由许多不同的图标构成整个系列，它贯穿于整个产品应用的所有页面并向用户传递息。

一套 APP图标应该具有相同的风，包括造型规则、圆角大小，框粗细，图形样式和个细节等元素应该具有统一的规范。

通分析以上三组图标以得出：他们具有统一的彩，统一的圆角大小，统一的框粗细，综合来也就是具有统一的风，给用户高度统一的视验。

六、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系统的设计规范，在这里说明一，本来卓系统设计规范是要涵盖的，但通过查阅资发现卓设计规范介绍之又，并且标准统一，借鉴意义大，省略了这分规范的编写。

欢迎关注作者的微信公众：「UI充能站」

图片素作者：Ted Kulakevich