APP设计进阶知识分享：间距与边距的设计要点

通常设计APP界面的时候，每个icon、列表间距之类的都是APP UI设计师标注的，一般都有设计规范的，移动端需要根据不同的平台，比如安卓和ios系统来适配界面。

所以，行间距和边距的规范就非常的重要。如下图的APP间距标注图。

今天25学堂小编跟大家分享的是APP 字间距、行间距、外边距、元素边距等四个方面。

而这些边距与间距的距离是标注里面最大的一项工作量。我们看看那些视觉设计规范就知道啦。

1、手机APP界面设计规范：如何定义视觉规范

2、Android APP界面设计视觉规范大全【完整版】

3、APP设计案例与教程-Panli代购网APP1.0版视觉规范

4、APP设计规范实例：悦商城APP视觉界面设计规范

5、网易云音乐Android 3.0视觉设计规范文档 等等规范里头，都有间距的标注规范和设计要点。

其实，APP里面间距和边距的设计，很有学问，设计的好不好就看间距和边距的设计啦。

下面，25学堂小编举例来跟大家说明一下。

第一个APP边距的设计要点：特别是图文与屏幕边距是否符合产品诉求

通常来说，在图片和屏幕边距之间保留一定的像素边距可以更好的引导用户竖向往下阅读

而当图片与屏幕边距为0的时候，用户更容易将注意力集中在每个图文内容本身，其视觉流线在往下浏览时，因为没有留白的引导，被图片直接割裂，造成在图片上的停留时间更长。

我们也对比一下，当图片不留边距时，用户更加聚焦在每个图文本身，而非被留白引导往下翻阅。

通常我们设计APP界面与边距的距离留白最佳是

ios端：@2x倍的时候是24px，@3x为32px最佳

android端的边距规范：常用字体边距规格对照表

第二个APP行间距的设计要点：行间距是否适合用户阅读

在内容型文本中，文本行间距太窄会容易造成阅读困难。通常的经验值，行间距大约是字体间距的1.2~1.5倍之间，总体阅读会比较舒服。

对比行间距 1.5倍    VS     行间距 1倍

第三个APP行间距的设计要点：元素块之间的间距

如果当行间距较大时，其本身可以作为分割内容的一种方式。意思就不一样啦。代表的不同的区域设计。所以，把控好元素块之间的间距很关键。

间距也代表了对比和排列的分隔。所以，APP设计师们一定要好好把握好APP间距与边距的设计要点。具体的还需要根据自己的界面来定。