移动端UI 设计规范整理汇总

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

目前主流的 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的主页指示器的位置。

设计稿尺寸

只推荐750*1334的尺寸来做设计稿，这是向上向下都最容易适配的尺寸，包括用这个尺寸去适配Android版。

除了IPhone X的比例特殊外，其他的IPhone比例几乎差不多的，比较容易适配。

使用Sketch设计：

使用375 * 667尺寸即可，开发在Xcode里也是使用这个尺寸。

导出的@2x图适配IPhone 5/5S/5C/SE   6/6S/7/7S/8

导出的@3x图适配Iphone 6/6S/7/7S/8 Plus    IPhone X

 

使用Photoshop设计：

画布就建成750 * 1334尺寸的即可，在这个前提之下，

导出原尺寸图片加后缀@2x，适配IPhone 5/5S/5C/SE   6/6S/7/7S/8

导出1.5倍图片加后缀@3x，适配IPhone 6/6S/7/7S/8 Plus    IPhone X

图标尺寸建议

APP应用图标，建议使用1024*1024尺寸去做，逐级缩小去应用到各种场景中。

SKetch已经提供了IOS和Android系统的APP尺寸图标模板，直接使用就可以了。

二、边距和间距

在移动端页面的设计中，页面中元素的边距和间距的设计规范是非常重要的，一个页面是否美观、简洁、是否通透和边距间距的设计规范紧密相连，所以说我们有必要对它们进行了解。

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.内容间距

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

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

三、内容布局

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

1. 列表式布局

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

2. 卡片式布局

其特点在于，每张卡片的内容和形式都可以相互独立，互不干扰，在使用卡片式布局的时候要注意卡片本身一般是白色的，而卡片之间的间距颜色一般是浅灰色，当然不同产品风格颜色可能不一样，有些是浅灰色偏蓝等。

双栏卡片的布局形式，比较常见于以图片信息为主导的 App。例如一些商城的商品陈列页面。这种形式与卡片式类似，但它能在一屏里显示更多的内容，至少4张卡片。同时，由于分开左右两栏的显示，用户可以更加方便地对比左右两栏卡片的内容。

四、界面图片设计比例

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

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

五、界面文字设计规范

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

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

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

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

设计师应该学会从官方获得设计资料，这比其他途径获得的资料更加全面和权威。

• 最新系统版本：IOS 11.4.1

• 中文字体：苹方黑体

• 英文字体：San Francisco

• 官方系统设计模板下载：Apple Design Resources

• 官方系统设计字体下载：点我下载

六.界面适配

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。

程序内部的功能界面：

这种界面通过写成自适应的界面可以很好的适配各种机型；如果有特殊的布局要求，也可以让开发根据特定机型去调整，不需要单独为各类机型再做设计稿。

 

覆盖全屏类的界面：

比如闪屏、启动页、引导界面、插画页面等等，这类覆盖全屏的界面必须要单独为IPhone X的比例重新绘制或者调整设计稿。

其他的IPhone机型，遇到这种界面，整体放大缩小、微调之后按照各机型的设计尺寸输出对应的切图就可以了。

 

IPhone X的安全区域：

IPhone X的安全区域就是扣除顶部刘海状态栏和底部虚拟home键之后，中间的内容显示区域。如果你不得不使用IPhoneX的尺寸做设计稿，请一定设置好参考线，不要把内容做进这两块区域内部。

七.界面标注切图

 1.简单理解标注切图的原理

下图是IOS开发工具Xcode里的一个空白页面，本质上，开发写APP界面和设计做设计稿是一样的，只不过两者实现方法不同。

2. 设计稿的标注

根据上图我们可以理解设计稿和程序之间的关系：

设计稿里的按钮、文字、图标、列表、背景色、线条等所有的设计元素，

在Xcode里都有对应的控件，设计元素必须使用对应控件，才能在APP的界面里显示出来。

设计稿的标注，实质上是标注的各类控件的属性以及相对于其他控件的关系：

 

设计稿中：

• 文字的自身属性：颜色、字号、字体、行间距、对齐方式、透明度；

• 图片的自身属性：宽高、间距、距离、透明度。

 

程序的对应控件：

• Label的自身属性：颜色、字号、字体、行间距、对齐方式、透明度；

• Image View的自身属性：宽高、间距、距离、透明度。

 

使用本地化插件Sketch Measure，几乎不用手工标注，标注导出HTML后，扔给开发，他们想看什么属性自己点击查看就是了，所以我们这里了解下标注原理就行。

还有一些线上工具的插件，比如蓝湖、墨刀、Mockplus等等，

Sketch Measure去Sketch.im下载

3. 设计稿的切图

(1)切图输出套数

IOS目前常用的还是输出2套PNG图片。

@2x、@3x的后缀，是为了在Xcode导入图片资源时，识别对应机型所用的图片。

Xcode里提供了相应的位置，相同命名图片会根据后缀填入到对应的位置。

(2)切图输出格式

目前Sketch提供了PNG、JPG、TIFF、WebP、PDF、EPS、SVG格式。

但是对于UI设计来说，常用的图片格式就以下几种：

• PNG      常用图片格式，没什么解释的，目前大部分产品还在使用此格式；

• WebP    安卓的图片格式，同等质量图片下体积非常小，非常推荐给安卓使用；

• SVG      矢量格式，完美解决适配问题，但也有部分缺点。

(3)切图输出规范

前提：同一类型、位置的切图，请保证切图尺寸、规格一致，图片尺寸为偶数大小。

1.有操作功能、可点击的功能性切图：最小点击区域问题

苹果官方提供的能准确点击的最小点击区域：88 * 88，单位px。

小于这个范围也可以点击，但是点击不灵敏，体验较差。

对于比这个范围小的可点击按钮，周围需要用透明区域填充后再输出切图。

为什么用透明区域填充来扩大点击区域范围？

图标，对设计师来说没区别，都是图片。但对开发来说，可操作和不可操作的图标是两种类型的控件，图标的样式不过是传给该控件的显示图片罢了。

 

可操作的功能图标在Xcode对应控件是UIButton。

对控件来说，如果不在代码里明确固定控件的大小、点击区域等等各类属性，设计师传给我多大的图，这个控件就会被这张图撑到多大。

 

设计师给开发一张40*40的按钮切图，如果开发什么都不做，那这个UIButton在手机界面里就被撑到40*40的大小。开发也可以在Xcode里写几行代码，固定图片的大小就是40*40，扩大UIButton这个控件的大小变成88*88，这样这个控件的点击区域也扩大了。

 

2.非功能性切图，比如列表图标、说明图标等，按统一规格的最小尺寸切。

这么切还可以减少一些程序因图片资源大小导致的体积大小问题。

这类切图，对应的是UIImageView控件，就是一张图片，无操作，只是占位和显示。所以你按照相同规格，最小尺寸切就可以了。

一定要切正方形的吗？如果图标都是30*20的，那我统一切30*20的行不行？

答案是：可以，这个没有完全的硬性规定。正方形规格切图是为了方便开发，还是推荐使用正方形规格来切图。实际开发过程中，只要保证同一位置，切图规格统一就可以。

(4)切图输出状态

同一按钮、元素的不同状态，要明确命名对应状态之后，分别输出对应图片。

下图示例按钮的选中状态多出现在游戏APP中，这里仅表示说明。

(5)切图的命名规则

不要使用中文、特殊字符，请使用英文、下划线、数字对切图命名，数字不要打头。

命名方式尽量清晰，推荐采用：种类_位置_功能_状态

示例说明：btn_homepage_seach_normal@2x.png

开发看到就会明白：这是位于首页，处于正常状态的搜索按钮2倍切图。