hello大家好 ，那这节课程呢我和大家 ，一起来解析一下在UI中应该如何做好 ，间距与留白 ，嗯 首先我们一起来快速联想一下 ，上节课程我们在讲 ，图片专讲的时候讲到过 ，图片对于我们一个产品设计 ，和UI设计来说有哪些好处呢 ，图片设计不仅仅是 ，我们要在网上找到一些好的图片 ，更重要的是呢一个好的图片 ，能够给我们整个App一种品质感 ，包括能够给用户那边呢 ，一个可信的一个产品可信度 ，另外图片在于我们这些 ，UI设计的一个审美角度上 ，也能够给产品一些非常不错的美观性 ，所以图片设计是不容小觑的 ，如果大家对于以下这三点 ，背景干净 烘托主体 色彩联系有所遗忘呢 ，可以课后快速复习一下 ，上节我们是如何讲解图片专讲的 ，好 那正式来切入下我们今天这节 ，课程的一个主题 ，我们做一个UI设计师 ，在拿到一个原型应该如何去做好 ，原型中以及我们视觉稿件中一些 ，间距细节呢 ，我们可以来观察一下 ，一个改版前和改版后 ，就是当我们在做设计的时候 ，如果说你没有这些间距意识的时候 ，和你有这些间距意识的时候 ，在设计角度上 ，会有怎样一种差别点呢 ，首先我们来观察一下就是 ，没有间距意识的时候 ，就是你在做整个间距的时候呢 ，可能排版的角度会做得比较乱 ，我们大概可以看到左边这个案例 ，它在一些涉及一些细节上 ，还是有很大的些提升空间的 ，小的一些间距排版呢特别小 ，大的一些间距排版呢特别大 ，小间距和大间距之间呢 ，没有任何的一些联系 ，那么我们可以来看一下改版之后 ，改版之后我们可以看见 ，它小间距跟大间距呢 ，不是说小的非常小大的又非常大 ，

它是比较平衡的 ，而我们作为一个用户在看到 ，右边这种发的时候呢是比较舒服的 ，而且界面它整个呼吸感是比较均匀的 ，不像左边它呼吸感特别差 ，就是整个界面会显得特别的空 ，这就是你有这种间距意识 ，和没有这种间距意识的时候 ，我们在设计角度 ，可以带来这种非常大的一个差别点 ，那我们刚刚看好一个 ，非常大的一个差异点之后呢 ，相信大家肯定会对这种间距留白 ，产生一个比较大的兴趣 ，那么到底应该如何驻守好整个 ，间距留白呢 ，那我们总结了一下 ，我们作为UI设计师 ，要掌握好这些设计中的间距与留白 ，你就需要掌握好以下这三点技巧 ，等分原则 五分原则以及黄金分割比 ，那下面我们就一起来详细解读一下 ，这三点原则 ，我们在整个设计中到底应该 ，如何把它详细地去深入执行下去 ，那在入手整个三个原则之前呢 ，要给大家梳理清楚两件事情 ，这两件事情我觉得是非常重要的 ，你只有把这两件事情去搞清楚了 ，你才能够更好的进入到我们 ，这三点原则的讲解之中 ，第一点呢就是元素的隶属关系 ，第二点呢是 ，间距留白到底应该体现在哪些方面 ，你不单单要知道 ，间距留白有刚刚我们讲过的等分原则 ，黄金分割比以及五分原则 ，你还得知道 ，这三种原则到底应该用在哪些地方 ，所以呢我们先来看一下第一个小问题 ，元素的隶属关系 ，我们进入到具体案例来 ，看一下什么叫元素的隶属关系 ，首先我们还是把刚刚那个对比图 ，截取了一个板块给同学们一起拿出来一下 ，我们来看一下什么叫隶属关系呢 ，也就是我们在做间距的时候不是说 ，瞎调一些参数的 ，很多同学之前加入我微信之后 ，会给我看他平时做过的一些练习 ，

那我在用眼睛盲测 ，他的这些间距的时候呢 ，有24像素有26像素 ，也有28有30像素 ，反正什么样的尺寸间距都有 ，而且这些间距之间呢又没有些联系 ，这有的时候就会体现出 ，你这个设计师在做些间距留白的时候 ，是特别不成熟的 ，那我们来看一下一些比较成熟的间距留白 ，就要体现出这种层层递进 ，那么层层递进在上面这个图片的案例中 ，是如何体现出来呢 ，我们可以来先看一下红色的这个小版块 ，红色的这个小板块呢代表的意思就是 ，两个相同的板块字段 ，为什么叫两个相同的板块字段呢 ，因为第一行爱看尊享 ，赠送会员以及第二行 ，50元以上流量用户专享 ，这两个呢是属于一样的文本字段 ，是属于同等级别的 ，所以说同等级别的一个字段之间 ，我们要保持一个小间距 ，一般性和小间距呢我会把它做成 ，14像素或者说16像素这些都是些 ，经验型的数值并不是很死的 ，大家在后面自己一些设计过程中呢 ，可以灵活地来去把它调整一下 ，第二个呢我们可以看一下就是 ，这个文案 ，和外边框之间就是 ，大家重点来看一下案例中的这个绿色板块 ，也就是文案和外边框 ，文案和外边框呢 ，这两个就是属于不同板块的一个间距了 ，为什么叫不同板块呢 ，一个是文案一个呢是边框 ，很明显就是两个不同的板块了 ，所以说不同板块之间呢 ，我们应该要有这种 ，整个间距的差异 ，间距差异大概是多少呢 ，20像素 ，或者说整个18像素 ，你要和里面这些小间距14像素 ，产生出来比较大的一个间距差异 ，这就是层层递进 ，层层递进是属于很重要的 ，我们再来通过这个案例 ，和大家再来重复下 ，第一个就是相同板块的字段之间呢 ，间距要小 ，第二个点呢就是不同板块的间距之间 ，间距要大 小间距和大间距 ，要产生出来一个比较明显的差异 ，

这就是我们要讲的第一个要点 ，间距留白中的 ，层层递进的一个原则 ，那我们刚刚所讲到的这样一个 ，间距差异呢 ，其实也有点非常像我们 ，之前在美术中讲的三大关系 ，比如说近大远小就是其中一个 ，非常重要的一个关系 ，当我们在做整个 ，UI设计中呢就没有这种 ，近大远小的一个概念了 ，因为UI基本它追求一个扁平 ，扁平就没有这种远近的这种 ，关系在这里面 ，那么UI中呢我们比较强调是一种格式塔 ，也就是接近法则 ，什么叫接近法则呢 ，其实我们刚刚已经讲了很多遍了 ，就两个字段之间如果说它的 ，板块是属于同等层级的 ，那我们一定要保持一个小间距 ，反之呢就要保持一个比较大的间距 ，来体现出这种 ，区分领域的原则 ，这就是格式塔中的一个接近法则 ，小小的间距大家可以看一看 ，这里面也是有很多门道的 ，不是我们在做设计中的时候呢 ，乱排版 ，乱排版的时候 ，是体现不出设计师的专业水平 ，那我们刚刚花了比较多的一个篇幅吧 ，给大家讲了一个元素的隶属关系 ，相信大家 ，