移动端UI设计尺寸规范整理

时间：2023-09-24 07:42:01 | 来源：网站运营

时间：2023-09-24 07:42:01 来源：网站运营

移动端UI设计尺寸规范整理： 很多新人在开始做移动端UI设计的时候，往往对界面的一些尺寸规范不是十分清楚，很多时候都是凭借自己的感觉和经验去绘制界面，心里并没有一个清晰的概念，导致做出来的页面总是不那么尽如人意。优漫教育小编整理汇总了一些界面设计（iOS系统）中常用的一些尺寸规范和方法，如控件间距、适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。

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

目前主流的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应用中的栏，包括状态栏、导航栏、标签栏、工具栏等，它们的高度又分别是多少呢？

注意：在进行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就是内容了，内容的布局形式多种多样，这里不去探讨内容具体应该如何去布局，我们来说一说内容的间距设置问题。

先来介绍一下格式塔原则中的一个重要的原则就是邻近性，格式塔邻近性原则认为：单个元素之间的相对距离会影响我们感知它是否以及如何组织在一起，，互相靠近的元素看起来属于一组，而那些距离较远的则自动划分组外，距离近的关系紧密。

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

文章来自：http://www.umanedu.com/