为什么你的界面总是不精致？

APP上面的宽度和间距的设计，很有学问的，最近设计公司的产品，大个别都是列表，这些页面视觉效果不强，但是难点在于要做的看上去舒服，而其中一个难点就是间距的设计。不要小看间距这个问题，新手做起来的界面大个别翻车的弊端就是在于间距。今天我们就来好好研究一下关于间距的弊端，主要有APP外边距，字宽度、行长度和元素边距等四个方面，希望对你们有所帮助。

间距的重要性

当我们想知道间距乃至更加标准的使用厚度，首先我们要知道为什么要使用间距。间距的使用有众多作用，可以引来用户注意力、提升界面内容的可读性，阐述元素之间的关系。其实简单来说，间距的作用可以归纳成一句话：建立视觉层级来简化界面内容，让顾客更容易接受。那么我后面就先来看第一种现在要讨论的间距：外边距。

外边距

我们现在说的边距不是关于设计APP时必须留一定的屏幕间距，这个是最基础的知识了，相信你们都懂，这里我们要研究的是图文与屏幕边距怎样更好的体现。通常来说，在照片和后盖边距之间保留一定像素间距从而更好的鼓励用户竖向往下读，如右图图示：

然而当照片与屏幕边距为0的之后，用户的注意力更多的集中在照片上，如以下对比图图示：

因为没有留白做视觉引导，视线在往下浏览时，会被截图直接割裂，造成在照片上停留的时间更长，因此通栏的设计大多更合适出现在页面中间的运营banner上，如右图图示：

这些设计视觉上很易于就能吸引顾客的切记，但是也很容易喧宾夺主，因此现在来说照片与屏幕边距为0的状况使用的不是这些，个人觉得是有边距的照片以及banner可控性更强一点，也更推荐新手设计师借鉴。但是也有一个产品针对外边距的处理有别的方式，如右图图示：

MOO音乐的外边距是30px，但是它上面卡片的标签外边距是20px，也就是说MOO对标签的处理是让标签冲出卡片上面10px，这样的设计也让用户的注意力更集中在了标签上，值得借鉴。

字间距1、图文单行结合

首先要说的这些状况在我们经常使用的产品中是一直见的，大字号搭配小字号，如右图图示：

这些相互对比明显，能够更好的进行信息的主次传递，那么在大字号与小字号之间的宽度使用很大比较适合呢？如右图图示：

此处是以国美金融、淘宝、微信读书和QQ读书四个主流产品里的单行文字宽度为例的，上图中我们可以看出文字与文字之间的间隔大多在16-20px之间，至于选择16px还是20px，个人觉得是借助上面图片的高度决定的，同时不论后面的文字是两行以及是三行，也都以右边图片的高度居中。除了文字和图是左右搭配的，还有一种常用的状况是上下结构的，如右图图示：

这类卡片式的设计，在我们的设计中常常用到，但行间距永远是一个无法让界面看上去精致的点，从上图中我们无法看起来，标题文字的大小是不一样的，但行间距却都是大几率的重合，因此个人觉得我们可以参考这类型型的行长度数值：16-20px，而文字的个别有各自产品的设计规范。

2、图文多行结合

图文多行在设计上面算是非常复杂的状况，如右图图示：

这类型型要考量到的原因众多，标题是否换行、多行的宽度、字体大小这些都是我们在设计的之后必须处理的细节，首先我们先来看标题只有单行的状况，如右图图示：

从上图中我们无法看起来，虽然不存在折行的状况，但是由于展现的信息太多，所以页面设计的之后也会非常复杂，这种结构大多发生在电商产品中，因为外露的信息非常多，想要尽量在列表页展示更多的信息来打动用户点击。而此处应该遵循的方式有两个，第一个是亲密性方法，将你认为是同组的信息做亲密处理，上图中红色高亮的个别就是表示同组信息之间的行间距，而巧合的是，其中有三个产品的行间距都是16px，饿了么的行间距是20px。因此16px是在图文设计时展现亲密信息非常好的选取。第二个方法是4的倍数定律，上图中的所有长度都是4的倍数，这跟我们在设计页面定间距是的道理是一样的。

行间距

行间距也是我们经常要非常留意的小细节，因为不清楚大家看到一个问题没有，行间距没有处理好，一旦界面的信息有点多，整体视觉上经常变得很拥挤，不如我们先来说说线上的作品是怎样解决这种难题的。这个问问题通常会有2种，我们今天就都来说说吧！

1、标题行间距

这些状况通常发生在标题会有折行的状况下，但是后面的内容却都是单行，如右图图示：

后面四个产品中，除了京东的行间距是12px，其余的都是16px，个人觉得是由于淘宝的商品建立个别信息太多，因此整体的字体也偏小，所以12px的行间距不会变得太过拥挤。

2、正文行间距

这些状况是发生在标题最多只有一行，但是正文都是折行的状况，如右图图示：

在图文列表的文字行间距都是12px，但是掌阅书籍详情页的文字行间距确是16px，关于行长度至今大个别的做法都是字体的大小除以1.2~1.5倍，得起来的结果就是文字的行间距，但这些算法仅限于行间距，不适用于其它的间距。

元素间距

在元素之间的间距我们常常犯的弊端在于，设计的之后会让对方难以看出那个信息是同一组的，如右图图示：

左图中的问题在我们的作品中常常看到，大组件之间的宽度会与统一模块的间距设定成一样的高度，这样才会导致模块之间的关系不够清晰，从图中我们就可以看起来，元素间的间距也是亲密原则，一起的就靠近，不同组的就分开，从视觉上就做出区别，这一点不只是用在界面中，图标中也相同适用，如右图图示：

后面的内容是一组的，因此间距会靠近，同时也会与外面的边框间距近，虽然并非图标，也是从视觉上来简化信息，便于用户理解。

划重点

从信息层级的视角上来说，级别越高的内容长度越大，因为越重要的内容还要越吸引用户越多的留意力，运用亲密原则，能够从视觉上降低客户对文字信息处理的成本。面对多行和单行的信息处理，除了查找数值规律之外也要结合实际的项目状况，比如说文章中有提及的几个特例，都是选择了最合适产品的信息展示方法。

参考引文

《间距与宽度的设计要点》