作为一个UI设计师，拿到一个原型图后应该如何做好界面的留白？在回答这个问题之前我们要先明白，在界面设计中好的留白就是所谓的到位的间距细节。当我们在做设计时，有间距意识和没有间距意识，在设计角度上会有多大的差别呢？看下面这张图，左边是没有间距意识设计师设计的，排版上会做得比较乱，小间距和大间距之间没有任何联系，甚至连亲密性都没有做好，在细节上还有很大的提升空间。而右边这个界面就是我们经常使用的“某某云音乐”了（哦吼，大厂就是大厂），整体给人感觉比较舒服，界面的呼吸感比较均匀。相信大家已经明白了间距留白对于一个界面的重要性了吧，那么该如何做好整个间距留白呢？别急，首先你需要掌握以下三点原则：等分原则五分原则黄金分割比在讲解三个原则之前，我们必须了解清楚什么是亲密性。观察下图，红色部分代表两个字段之间的小间距（一般做成14px或者16px），蓝色部分代表文字与外边框之间的间距，可以明显发现，红色部分的间距明显小于蓝色部分，将文字部分间距设置小一些（因为它们属于相同版块），这样它们在视觉上就是一个整体，这符合我们原本的设想，而且间距相差要大，避免出现模棱两可的感觉！接下来我将带大家通过案例讲解以上几大原则1.等分原则以我们生活中用得比较多的某宝APP为例，在它的商品列表流界面中可以发现红色部分都用到了等分原则。也就是主标题和副标题以及标签之间都应用到了这个原则，还包括图片的两侧。其一，大量相同的间距，有利于画面的统一；其二，大量的等分间距可以减轻开发大大的记忆负担，加快开发效率。综上所述，等分原则有以下两点好处：1.界面规范，防止参差不齐（针对设计师）2.利于规范沉淀，以及开发记忆数值（针对开发大大）2.五分原则五分原则在UI设计中也非常的普遍，比如在“某某云音乐”首页图片流的排版中，图片和文字之间的间距与外边框的间距就是一半的关系，如果外边框间距是30px，那图片和文字之间的间距就可以设置成15px。这就和我们所说的亲密性有关了，利用小间距很好的将图片和文字组成一个新的整体，区别于其他的版块。到了这里，我们可以做一个总结，在什么情况下使用等分和五分原则等级相同的板块，保持相同间距（等分原则）等级不同的板块，保持不同间距（五分原则）举个例子，图片和图片是相同的，因此之间要使用等分的距离，当文字出现之后，每张图片对应它的标题，想要区别于其他的版块，就要将间距做的小一些，就要应用一半的距离，采用五分原则。3.黄金分割五分原则和等分原则可以解决大部分界面的基础布局，那么黄金分割可以应用到哪些地方呢？黄金分割相比于五分原则更能提升页面的精细度，如下图，图片和图片之间的间距与外边框之间的距离几乎就是黄金比的关系（大厂不愧是大厂）另一个用到黄金比最多的地方就要属图标了，在我们金刚区里的图标往往都是通过黄金比去设计的总结：等分原则和五分原则解决了界面间距问题，而黄金分割解决了留白呼吸感的问题。在一个界面中我们只有灵活运用了所有的原则，才能让别人看出我们的专业度。界面上一切的一切都是有理有据的！最后的最后我将从头带大家回顾大厂设计师设计路径，准备好了吗？1.确定外边框2.确定各个相同大板块之间的间距，运用等分原则和五分原则3.确定不同小板块之间的间距，同样运用等分等分原则和五分原则4.填充内容下面看下对比图片：