如何增加设计的层次感？

什么是层次感？

合理、清晰、有节奏地组合画面中的元素，使整个画面看起来更加舒适、愉悦、和谐。是不是感觉很深刻？嗯，换句话说——不多不少，看起来舒服刚刚好！

本文分为三章，每一章都有若干细分的知识点。请仔细阅读！

为了有一个初步的了解，先来看看文章的大纲:

第一，画面的层次

用点、线、面来划分画面。

消息

在摄影中寻找等级

第二，色彩的层次

色对比度

渐变颜色的流行

多色匹配控制

第三，文字水平

字体的对比度

词的比较

请点击进入图片说明。

第一，画面的层次

1.用点、线、面来划分画面。

点、线、面是设计中最基本的设计元素。学过平面构成的同学应该有所了解。点连成线，线连成面，面缩小到一定程度就是点。平面的边界是一条线，当线的宽度增加，点扩散到一定区域，就成了平面。

上面的话看起来很复杂。其实仔细想想，这是世界上所有元素的原理，甚至宇宙星空。我们举个例子。

请点击进入图片说明。

上图基本可以概括所有的点、线、面的变化。下面我们来分析一下。

请点击进入图片说明。

红色圆圈中的十字元素可以看做是“点”，作为整体画面中的装饰元素。注意，所谓的“点”不仅仅是圆的。图中任何一个尺寸和面积最小的元素都可以看作是一个“点”。图中的点可以看作是“点”，也可以看作是“面”。所以就算是点到面也是对的。

请点击进入图片说明。

你认为黄色圆圈里的线是什么？我认为它不是一条线，而是一个点。为什么？因为无论从它在画面中的比例，还是它的作用，都属于点的属性。界限在哪里？在绿色街区和红色街区的交界处。和色块的边界。而这恰恰说明了“线”的一个重要用途——分段。画面中的“线”将整个画面分割成大小不一的四个区域，使画面更具趣味性和层次感。

请点击进入图片说明。

由线划分的四个区域是元素“面”。

这个图例不仅说明了点、线、面的几个重要特征，而且证明了点、线、面不会因为其形状而固定不变，而是不断变化的。

最后，总结点、线、面的一些特征:

点是最具装饰性的元素，所以大多数情况下在画面中起到装饰作用。

线:除了装饰，还起到划分画面、穿插元素、引导视觉的作用。

脸:经常起到稳定画面，承载重要信息的作用。

另外需要注意的是:点、线、面结合使用。想想吧。没有面的衬托，点和线的特征如何表现出来？

请点击进入图片说明。

请点击进入图片说明。

请点击进入图片说明。

请点击进入图片说明。

通过这些设计案例，我们可以分析总结出，点、线、面的结合可以有效地用来设计层次丰富的作品。我们要怎么做呢？-替换副本。借鉴好的设计作品的元素，点、线、面，然后再利用，再创新。

请点击进入图片说明。

留空

下料是设计中常用的方法。消隐不仅仅是一个整洁、干净、透气的画面，更是对“脸”更深层次的理解和运用。现在广泛使用的极简设计是处理留白比较好的设计类型。

这里，我们来谈谈留白对层次的影响。我们先来看几个设计案例。

请点击进入图片说明。

请点击进入图片说明。

请点击进入图片说明。

以上设计作品的共同特点是有大量的设计空白，同时对画面的层次进行处理，比如空白与主画面的大小对比，标题与补充文字的直接对比。

请点击进入图片说明。

我对上面的图片进行了处理，分为背景层、空白层、主模型层、标题文案层和功能文案层。从这里可以看出这个设计的水平是如何设计的。你不妨通过这种方式解构你喜欢的设计，来研究设计层面。

3.在摄影中找到等级

现在设计中越来越多的使用摄影图片，尤其是高质量的摄影作品可以最大限度的提高设计的质量。但这是为什么呢？有没有想过？原因之一是摄影有层次。

请点击进入图片说明。

请点击进入图片说明。

请点击进入图片说明。

大家都很熟悉这款B装耳机。这是通过摄影来完成的，三个层次都有:近景、中景、远景。不仅画面看起来非常细腻丰富，而且质感十足。

但是图片层次少了怎么办？很简单，我们可以用文字作为图形元素来增加画面的层次。

请点击进入图片说明。

请点击进入图片说明。

第二，色彩的层次

1.色对比度

使用对比色和对比色进行设计也是增加层次感的常用方法，因为有非常强烈的色彩对比，画面的冲击力会非常强，人的视觉感受也会更加刺激。

黑色对比是非常经典的配色。虽然只有两种颜色，但是通过文案和图中图片的结合，会非常丰富。在这种极简的配色中，点、线、面的合理运用更是必不可少，否则会显得有些单调。

请点击进入图片说明。

从上面的设计来看，设计师在搭配黑色和黄色的时候使用了黄蓝色的对比色，不仅让画面的色彩更加丰富而不单调，也让画面中的一些重要元素凸显出来，起到了强调的作用。

请点击进入图片说明。

请点击进入图片说明。

请点击进入图片说明。

请点击进入图片说明。

黄色配色和红绿配色也是经常使用的经典配色。从上面两个案例可以看出，黄蓝色的配色饱和度比较高，显得年轻时尚又有科技感，而另一种设计是红绿蓝配色，饱和度低，显得比较复古有深度。

2.渐变的流行。

渐变色已经流行好几年了。今年淘宝的手机app也是渐变色设计。可见渐变色的应用范围也在不断增加。渐变本身具有层次丰富的特点。所以，渐变的运用加上点、线、面元素的合理搭配，会在最大程度上丰富画面层次的同时产生影响。

在我们的日常设计中，渐变的使用还是需要更仔细的选择色值。一般来说，我们会选择同色渐变、相邻色渐变、对比色渐变。渐变颜色的数量不应超过2种。2种以上的渐变色需要非常强的色彩控制能力来控制。(我说的是同一渐变中的2种以上的颜色。)

请点击进入图片说明。

请点击进入图片说明。

请点击进入图片说明。

请点击进入图片说明。

渐变色的使用大多出现在UI设计中，而随着UI设计的发展，网页端设计的设计方法和配色方法也很多，无论是网页还是电子商务。

请点击进入图片说明。

请点击进入图片说明。

请点击进入图片说明。

请点击进入图片说明。

请点击进入图片说明。

渐变色可以组合使用，比如上图，都属于同一个颜色渐变。但是这样使用有一个规则，就是相互搭配的几种渐变色的饱和度要基本相同，否则会出现颜色“花”。

3.多色匹配控制

对于多色设计，我们要做的就是控制饱和度和明度，尽量保持每种颜色的饱和度和明度协调一致。无论是淡淡的中国风，还是浓浓的欧美风，都会让画面丰富有层次感，而不会“乱”也不会“花”。

请点击进入图片说明。

请点击进入图片说明。

我们可以看到上面的图例中有很多颜色，但是为什么我们会觉得那么丰富有层次感呢？没错，就是饱和度和亮度的控制很到位。

请点击进入图片说明。

请点击进入图片说明。

第三，文字水平

1.字体的比较

字体是我们设计中一个必要且困难的环节，但是让大家比较苦恼的形式环节会让画面的层次极其丰富。即使只有文字没有图案的时候，只要布局合理，也能获得惊人的效果。

请点击进入图片说明。

请点击进入图片说明。

不同的字体表达不同的意境和含义，尤其是中国的字体传承了几千年，每个字都有特定的含义。而西文主要是用衬线和非衬线字形来装饰。有时粗糙，有时纤细。

请点击进入图片说明。

请点击进入图片说明。

请点击进入图片说明。

2.词的比较

这里的比较包括字体、大小、粗细、颜色等等。为什么要单独选择比较？因为对比是最好的打开和体现层次的方式，我们就一个一个来说吧。

请点击进入图片说明。

我来这部作品是为了分析和解构。30%是文字中最大的面积，也是图片元素中最大的比例。折扣券的说明显示这是折扣信息，这个说明也是图片中文字比例第二大的。然后是下面的信息，比如时间，地址，电话等。，并使用最少的字数。通过这三种文字大小，打开层次，一下子获得三个层次。加上最后的图案背景、白底、金弓，一共六个层次。另外，为了统一画面，文字的字体是衬线。

请点击进入图片说明。

请点击进入图片说明。

以上两张海报也是如此。你可以解读它们。

字体颜色，上面两张aranya的海报是一个系列，主题文字aranya的颜色分别改为绿色和蓝色，一方面可以增加文案的层次感，另一方面与视觉主题的颜色统一。这里有一些你可以尝试分析的设计案例。

请点击进入图片说明。

请点击进入图片说明。

请点击进入图片说明。

最后，对齐是为了让画面更有序，更合理，更舒适。我们用上面的海报来分析一下。

请点击进入图片说明。

看这些蓝线，那是这张海报的走向。

摘要

其实层次感是通过综合运用点线面的划分、色彩的搭配、文字的排版来形成的，在大小比例、色彩的选择、对齐等细节上力求完美，这样层次感自然就显现出来了。

设计主题怎么设计？

设主题要抓住它的中心部分，概括整个要想设计的东西 所以设计主题是最重要的 整个层次上的想法和一些看法的主要内容都概括在主题上