内容讲稿设计.pptx

UI设计规范

01.界面设计尺寸及栏高度

目录02.边距和间距

CONTENTS03.内容布局

04.界面图片设计比例

05.建立统一风格的图标

06.APP版式设计规范

07.界面文字设计规范

08.设计适配

09.切图规范

10.设计稿标注

一、边距和间距

在移动端页面的设计中，页面中元素的边距和间距的设计

规范是非常重要的，一个页面是否美观、简洁、是否通透

和边距间距的设计规范紧密相连，所以说我们有必要对它

们进行了解。

全局边距

全局边距是指页面内容到屏幕边缘的距离，整个应用的界面都应该以此来进行规范，以达到页面

整体视觉效果的统一。全局边距的设置可以更好的引导用户竖向向下阅读。

在实际应用中应该根据不同的产品气质采用不同的边距，让

边距成为界面的一种设计语言，常用的全局边距有32px、

30px、24px、20px等等，当然除了这些还有更大或者更小

的边距，但上面说到的这些是最常用的，而且有一个特点就

是数值全是偶数。

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

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

通常左右边距最小为20px，这样的距离可以展示更多的内容，不

建议比20还小，否则就会使界面内容过于拥挤，给用户的浏览带

来视觉负担。30px是非常舒服的距离，是绝大多数应用的首选边

距。

还有一种是不留边距，通常被应用在卡片式布局中图片通栏显示，

比如站酷APP（当然站酷APP也进行了改版，首页已经采用了不

通栏的卡片式设计）。这种图片通栏显示的设置方式，更容易让

用户将注意力集中到每个图文的内容本身，其视觉流在向下浏览

时因为没有留白的引导被图片直接割裂，造成在图片上停留更长

时间。

卡片间距

在移动端页面设计中卡片式布局是非常常见的布局方式，至于卡

片和卡片之间的距离的设置需要根据界面的风格以及卡片承载信

息的多少来界定，通常最小不低于16px，过小的间距会造成用户

的紧张情绪，使用最多的间距是20px、24px、30px、40px，当

然间距也不宜过大，过大的间距会使界面变得松散，间距的颜色

设置可以与分割线一致，也可以更浅一些。

以iOS（750*1334px）为例，

设置页面不需要承载太多的

信息，因此采用了较大的

70px作为卡片间距，有利于

减轻用户的阅读负担，而通

知中心承载了大量的信息，

过大的间距会让浏览变得不

连贯和界面视觉松散，因此

采用了较小的16px作为卡片

的间距。

微信的卡片间距设置，以及颜色值。

下面的两张截图分

别是巨划算（卡片

间距20px）和拼多

多（卡片间距16px）

的首页截图，这种

电商类的APP因

为需要承载大量的

信息，所以一般间

距设置的都比较小。

总结：

卡片间距的设置是灵活多变的，一定要根据产品的气质和实

际需求去设置，平时也可以多截图测量一下各类APP的卡

片间距都是怎么设置的，看的多了并融会贯通，卡片间距设

置自然会更加合理，更加得心应手。

内容间距

一款APP除了各种栏（状态栏、导航栏、标签栏、工具栏）

和控件icon就是内容了，内容的布局形式多种多样，这里不

去探讨内容具体应该如何去布局，我们来说一说内容的间距设

置问题。

先来介绍一下格式塔原则中的一个重要的原则就是邻近性，

格式塔邻近性原则认为：单个元素之间的相对距离会影响

我们感知它是否以及如何组