大家好，我是肥宅。

这一期，我们将主要针对页面上内容信息比较少的页面进行排版的讲解。我将为大家讲解一个非常套路化的方式来解决这类页面怎么排都不好看的问题。

如图，这是我们本期的内容案例。对于这类信息较少的页面来说，因为它本身的信息比较少，如果我们直接进行排版的话通常都会让人觉得画面太空。对于这种情况，一般我们会选择往上面做加法，通过增加一些东西来丰富画面。当然这个思路大家都能想得到，但是往往得到的效果却不尽人意。那么既然有偷懒的套路和办法，我们就来看一下是怎么一回事。

在了解这个套路之前，我们先按照上一期偷懒的办法将文字的行距、字距、项目编号进行了调整。同时加上了轮廓线，把内容装了起来。就像现在图片上看到的这样，我们会发现整个页面会显得特别的空，内容特别的少。整个页面比较没有质感、层次，看起来平平无奇、不太舒服。这是因为我们本身内容的信息很少，所以一眼瞟过后就很难再吸引人的眼球。

在这个基础上，有些伙伴可能会像我们开头说的那样加一些素材去丰富和装饰画面。最简单的某过于加工作相关的图片了。加上图片以后似乎并没有拯救这个页面，反而如果处理不当很可能会让这个页面变得更加的拥挤，就像我们图片中看到的这样。

那么有没有什么办法让我们的画面看起来更加的漂亮、舒服，而且最好还要简单易操作呢？那就是我们马上要讲解的套路了。这个套路，只需要再借助一个功能就能实现。这个功能就是对形状使用透明度填充。

像我们现在看到的两块形状，它们填充的是同样的颜色，区别在于一个是没有设置透明度的，另外一个是设置了20%的透明度。为了更好的体现对比效果，我它们盖在了同一张图片上。我们可以明显的看到图片会从设置了透明度的图形背后浅浅的透出来，但是没有原来明显。这就是我们需要的一个效果素材，我们通常叫它遮罩或者蒙版。所谓蒙版遮罩，就是指在我们的图片、形状、文字等素材上蒙上一层并做一定处理，以达到一些我们想要的效果或者目的。

通常我们在对图片增加蒙版的时候，会尽量选择一些比较暗一点，深一点的颜色作为蒙版的颜色，而且透明度不会设置的特别高，一般会在5~%20%左右进行选择。这样一来，图片略有虚影的从图形后面透出来，其本身的颜色、质感、信息的复杂程度都会得到降低。在这个基础上，我们将它作为一个背景板往上面填写我们的文字内容，就既可以起到意象的展示的作用，又可以作为一个装饰丰富我们的画面，让整个画面显得更有冲击力。

但是同样是添加素材，为什么这种方式就会获得更好的效果呢？因为在长期的学习和训练下，我们看到一些白色的或者非常接近于白色的区域的时候，大脑默认这个区域是没有任何东西的，没有任何信息的。因此，我们只要稍微有一些改变，大脑都会认为这个区域有信息。

通常情况下我们可能会用色块填充这个区域。但是新的问题又出现了，因为虽然色块起到了一定作用，但是如果色块过大的话，还是会造成视觉上的空旷感。而小的色块却又起不到相关的作用。

这里我们用图片来做背景的原因就是出于这些考虑。因为图片本身就包含很多的信息，不容易产生空旷感。

但是，因为图片本身的信息是比较复杂的，直接在上面摆放文字往往会被图片干扰影响，所以我们需要把图片的信息要进行一个弱化处理，这样我们就可以得到一个带有一定纹理的、看起来更有层次的背景。处理的方式也很简单，就是给它添加一个蒙版遮罩，这样我们就得到了一个既能引起大脑注意又不会抢占视觉的背景。

然后，我们将要呈现展示的文字内容放到这个区域。因为颜色的高度反差和信息的明确清晰，很快就会把让人把注意力集中到文字内容。

在这个基础上，我们再给相关的区域画上一个线框。线框的使用是为了进行画面的分割，并让页面上相互之间有关的信息能聚拢在一起形成一个整体。同时，它也会束缚观众的目光，不让他们的视线往外扩散，让他们精力更集中。

当然，我们在制作的时候这个比例并不是一成不变的。我们可以缩小图片、缩小蒙版、放大文字等等方式。

甚至在这个基础上，如果你觉得画面有一点单调或者有一些信息想要进行强调，还可以对文字或者对轮廓线进行变色处理。至于具体应该怎么简单有效的进行配色，我们会在后续的内容中策划更新。

以上就是本期的内容，喜欢的朋友可以

转载请注明:http://www.aideyishus.com/lkjg/3798.html