2授课教案视觉传达设计第七章排版原理

第七章基本的设计原理本章研究视觉元素间的相互关系，以及它们在整个视觉画面中的关系，我们通过分析和练习，初步体会视觉平衡、主次关系和统一整体性等视觉传达设计的基本原理。

第一节视觉平衡[课前准备]在一个空白的平面中，放置一个视觉元素，可以是一幅图，也可以是一组字，也可以是一个标徽。

请试试在平面中改变该元素的位置、大小、颜色等，然后再试试改变背景的明暗与色彩，体会画面的平衡性，试着找出几种视觉上能够接受的情况。

我们一直在跟平衡打交道，简单的象在墙上挂一幅画，我们总要来回摆放好几次位置，才能让自己感到满意，这其实是我们的平衡感在起作用。

在课前准备中，就是一个最简单的寻找平衡感的练习，在这样只有一个视觉元素和一个视觉平面的情况中，只有元素与背景画面的相对位置的变化，能够影响视觉上的平衡变化。

一、平衡我们从课前准备的练习中可以得到一些规律性的东西，典型的例子和规律如下：①画面中心部位是个平衡中心，无论元素大小怎么变化都能感到平衡。

相反的，距离平衡中心越远，越有不平衡的感觉。

②元素在对称轴线上也能够获得一定的平衡感，尤其在垂直的对称轴线上。

③无色（白色）的背景与有色背景是大不一样的，这是明暗与色彩对比的作用，使背景产生了份量感。

在背景有分量的情况下，能够对画面起到一定的稳定作用，但背景与元素的对比才是左右平衡的关键。

④足够小的视觉元素在画面中的影响力是有限的，原因是没有份量感，易被忽视。

⑤色彩能够加强和减弱元素与画面之间的对比关系，从而影响画面的平衡。

突出显示的元素对平衡的影响最大，而弱的对比使元素不够醒目，对平衡影响较小。

图07-1-1，平衡的规律。

二、视觉重量视觉元素在画面中会给人眼带来或多或少的视觉刺激，人眼感觉到的刺激随着情况不同而改变，这种引发视觉刺激的加强与减弱的变化是我们设计中的关键。

视觉重量就是视觉刺激的大小，视觉刺激的大小主要通过对比而产生，比如视觉元素的大小、明暗、形态、纹理对比都能对视觉重量产生影响。

在前面我们使用了“份量感”、“突出显示”和“醒目程度”这些描述，这其实就是指视觉重量。

与背景相比，一个足够小的元素，视觉重量轻；深色背景一般比白背景拥有较多的视觉重量，这是直观感受；在背景中被强烈对比而突出显示的标志，拥有较多的视觉重量。

视觉元素在画面中的视觉重量，对平衡的影响很大，我们只要通过对位置、视觉重量的恰当调整，就可以达到视觉平衡。

在多元素的画面中，视觉重量较轻的元素对平衡的影响小，可以不用考虑平衡中心的要求；但象画面主体元素，一般是突出和醒目的，其视觉重量对平衡的影响很大，我们必须考虑平衡中心的要求，将其尽可能的放在容易达到平衡的位置上。

一般而言，只要画面中所有视觉重量的中心与平衡中心重叠，画面就达到了视觉平衡。

当然，是否追求平衡需要根据版面设计需要来决定，有的设计需要通过不稳定的画面来表现特定的主题。

视觉重量概念的引入，对于我们设计是很有用的。

在视觉传达设计中，我们可以通过不同视觉重量的处理，让重要信息获得较多的重量而达到突出，或减弱次要信息的视觉重量。

图07-1-2，视觉重量与平衡中心。

图07-1-2三、对称平衡从上面这些案例中，可以看到视觉元素随位置变化对平衡所产生的影响是很大的。

我们可以充分利用一些位置的特殊性，恰当地分布元素，从而使画面平衡。

最容易和方便的方法主要是利用中心和对称轴。

①在中心达到平衡，最容易的是让所有视觉重量分布在画面平衡中心上。

让所有元素都放在中心上并不现实，尤其是多元素情况下，于是我们可以变通为下面“沿轴线的平衡”。

②沿轴线的平衡，即轴线两侧的重量达到一致，轴线成为平衡支撑线。

在上述的一些案例中，你可以发现对称轴无处不在，而且对称构图是很容易平衡的。

对称是处理画面平衡的一种最方便和最合适的思路，能够将画面迅速稳定和简化，使页面的设计与调整变得相对简单，不失为一种好的平衡方法，尤其在刚开始学习阶段，可以经常的研究这种方法。

对于不对称的画面，则需要对所有视觉元素进行反复的大小、位置、色调等的调整，以求得一个恰当的平衡的画面。

不对称平衡的方式千变万化，几乎无法一一列出，需要我们在平时不断学习和积累经验。

四、个人公司系列的课堂考察以前我们完成了个人公司的标志、字体、主题画面和明信片的设计，我们在这里将以明信片的设计为例进行平衡的练习。

[课堂考察]视觉平衡。

请准备好你个人公司的相关内容：一张主题图片、公司标志、公司名称和一段文字介绍（100字左右）共四个元素，我们将通过以下几组练习，分别来体会视觉平衡的获取，注意元素的位置、大小、对称关系对视觉重量和画面平衡的影响。

以下每组练习无论简单复杂，都是独立的设计，因而要求画面视觉效果。

1、一个元素、中心位置：将一个元素放在视觉画面的中心，通过大小变化、色彩变化体会其视觉感受力的强弱变化。

注意：这是个完全中心对称构图。

2、二个元素、画面垂直对称轴位置：将标志放在画面垂直对称轴的中心（其实就是画面中心），然后在中轴的上部位置放置公司全称。

请先确定好图标的大小色彩后，再放置文字。

然后通过文字的上下位置与字距、色彩、大小来调节文字的视觉重量，使画面达到较好的视觉平衡。

注意：这是个左右对称构图。

3、三个元素、画面水平对称轴位置，包括图片＋文字段＋图标：先在画面左侧放置好图片，图片可以占满左侧空间，调整好图片的色调和大小并保持不变，在右侧空间中先放文字段，留好位置放图标。

通过调整文字段的字大小行距段落宽窄，以及图标的大小，从而获得视觉平衡。

注意左侧图片的色调和面积对画面平衡的影响，明暗度、鲜艳度会极大影响视觉重量，从而也对右侧元素的视觉重量能否平衡画面提出了要求。

4、四个元素，要求基本同上，唯一不同是要求先确定一个底色，左侧图片不需辅满，保持与边界一段距离。

由于有底色，从而使画面的视觉重量产生一些影响。

图07-1-3，视觉平衡案例。

第二节主次关系[课前准备]在一个以视觉元素A为主体的画面中，放置另一个重要的视觉元素B，通过相对位置、大小、地与图、色彩等关系处理，令B成为画面中的视觉突出的主体，而A成为次要的视觉元素。

请体会主次关系的变化。

信息有重要与否的区分，相应的视觉化后的元素也有主次区分，如何在一个画面中达到所需的主次关系，是本节所要研究和讲述的主要内容。

主次很重要，它决定画面中最先让观众注意的是什么，其次注意的是什么，哪些东西要求让观众过目不忘，哪些是不强求观众记住的，等等。

在上一节介绍了视觉重量，这是以视觉的感受力为基础的，能够吸引眼球注意的元素拥有较好的视觉重量，当然也就容易成为画面中的主体。

当然主次是一种相对关系，我们通过对视觉元素的大小、色彩等处理让元素之间产生足够的视觉重量的区别，即可达到主次的区分。

一、主次我们首先从课前准备的例子中进行分析和总结，得到的结论有：①次要元素应尽量避开中心位置，以减少视觉感知机会；②面积的大小对视觉重量有影响，但并不是大的就重，小的视觉重量就轻；③地与图的关系一般是地为次要，图为主体，但这也不是绝对的，地有图的映衬下可以获得相当的视觉重量超过图而成为主体。

④色彩中的明暗对比、色相对比和纯度对比永远是值得尝试的方法，在不使用其他手段情况下，色彩可以轻松分清主次。

图07-2-1，主次的改变。

运用不同的技巧，都可以改变画面中元素的主次关系。

图07-2-1二、焦点与重点在视觉画面中根据重要性程度视觉元素可以分为：焦点、重点和次要或辅助元素。

很显然焦点是主要的视觉元素，需要加以强调，使其引人注目。

当然不能强调所有的元素，否则会产生视觉混乱（我们常说“花”和“乱”指的就是这个）。

对于辅助元素的作用也不能忽视，正是元素间的对比才产生了主次的区别，离开了次要元素的衬托，焦点与重点就会变得平淡无奇。

焦点与重点是画面中主体性的视觉元素，传递着关键信息。

在这些重要元素中，焦点则是最为强调的一部分，常常是趣味中心或最需要关注的部分。

要将焦点或重点从画面中突出和强调出来，有这样一些方法是值得尝试的：a、将其作为最亮的元素b、将元素颜色与其他部分截然不同c、将其他部分作为灰色调，而焦点为彩色；d、与其他部分方向不同；e、使其拥有不同的色调；f、在位置上区分；g、用底纹区分其他元素（或与其他底纹不同）；h、让其他元素指向焦点或以焦点为核心；i、形状区分；j、与其他元素隔离；k、焦点的清晰化与辅助元素的模糊化；l、将焦点变异（如颠倒）；m、不透明化与辅助元素的透明化；n、光泽化与辅助元素的暗淡化。

图07-2-2，产生焦点的办法。

图07-2-2三、视觉主次关系人们往往首先注意到引人注目的部分，其次是较突出的内容，最后是最不起眼的元素，这就是视觉上的主次关系。

视觉画面中，根据重要性程度，从焦点、重点到次要元素的安排顺序产生了一种“视觉流向”的作用。

首先看的是什么，其次是什么，然后看的是什么，这些问题的解答将得到一个按照重要性次序排列成的信息流。

正确选择信息流的次序，对信息传达的准确与有效具有重要的意义。

我们在设计中，应该分析好视觉信息，将视觉元素按照重要性程度建立一个主次关系，决定各元素的优先权，然后在画面设计中去体现这种主次关系。

通过有目的建立视觉主次关系，可以引导观众按照设计好的信息流从最重要的元素依次看下来，直至最不重要的。

这是视觉传达中常用的一个方法。

在前后层次中使用主次关系。

在视觉画面中，由于大面积元素的存在，如图等等，使得画面中的元素经常会产生一些交叠，从而有了前后的层次。

就如同一幅照片中有近景、中景、远景一样，对于视觉画面，当然也能借用前景、中景、背景的方式来处理元素。

我们把这些前、后景的关系定义为前后层次，前后层次是与主次关系相一致的，我们可以通过前后层次的处理，达到信息传达的主次区分。

前后层次最常见的印象是前景清晰、背景模糊，前景体量大而背景体量小，前景物体少而背景物体多。

这都是人眼的视觉特征所产生的，如果背景的人比前景人还大，会产生不自然的感觉。

根据这种特征，我们可以作出一些附合视觉习惯的前后层次：①前大后小的前后层次，如底纹；②前清晰后模糊；③前景元素的色彩饱合与背景的色彩纯度低；④前景对比强，背景对比弱。

在下面这个课堂考察中，对同样的元素，我们提出了三个不同的重要性程度排列次序，也就是视觉主次关系。

如图所示，根据这种信息要求，我们得到了不同的设计，使观众沿着不同的重要次序接收信息，最终出现不同的效果。

可以看出，利用视觉主次关系对信息进行加工处理，从而引导观众，可以达到信息传达的目的。

[课堂考察]视觉主次关系。

选择一个图标，名称文字，图形（或一个文字段），请选择好它们的重要性程度，建立两种主次关系，然后在分别在画面中表现出来。

可以将前面完成的游戏系列设计中的图标、名字和主题画面作为该练习。

图07-2-3，信息流与视觉主次关系。

[课后练习]主次关系的分析与学习。