文章：画面太乱了？这6种方法就能帮你解决

来自公众号：研习设

呼应这个词有彼此声气相通一呼一应，文章前后相照应等解释，它描述了事物之间的联系性。人们天生就具有分辨眼前事物的能力，能够轻松辨别出元素之间的相似性与联系性。

上图是我们大家都非常熟悉的游戏连连看，它就充分运用了这个原理，在了解这个视觉原则后，我们可以将其应用到版面中，使元素之间产生关联性并建立统一感。呼应也可以为版面带来规律性。重复的元素可以方便人们区分版面的层级。

圆形图案以点阵的形式排列，它们大小相同，位置间隔相同。唯一可以产生区分的是两个带有颜色信息的点，两个有颜色的圆点虽然位置不同，但我们的眼睛依然会认为两个点之间具有联系，它们是相互呼应的。

产品的摆放与文字简介并没有放置在一起，而是分开编排的。但因为有色彩的关联属性存在，我们在看到某一产品时，依然能正确地通过色彩的呼应关系找到与产品相对应的文字信息。同样的原理，在图表的制作中也经常会运用到。

为了让文字信息与主体产生呼应关系，我们可以通过吸取主体的色彩并填充到文字上的方式实现两者的关联，这里需要注意的是，因为文字之间的轮廓与属性是相似的，所以并不需要将所有文字都填充颜色就可以产生元素之间的联系。

即使元素的大小与色彩都不相同，我们也可以通过形状来建立呼应关系。在版面中字体的轮廓与主体形象也可以通过形状的相似性来建立联系。统一版面中元素的表现形式，会让元素之间和谐地组合在一起。

这是介绍地图中某一地区的版面，只需要将相同形状的图形放置到版面中就可以使两者产生关联，并不需要任何箭头或线条的指引，人眼会下意识的将两者联系在一起。

左图是介绍摄影照片中某一细节区域的范例，相同的形状与内部纹理使得观者能够轻松辨认出讲解的位置。右图中锅的角度与形状虽然是不同的，但是人们依然会根据视觉经验判断出它们是相似的。

除上面提到的方法以外，改变元素的位置也可以让元素之间产生关联性，上图中的图形虽然形状与颜色都不相同，但因为位置的变化产生了联系。这种方式在处理文字信息或元素组合的时候会经常用到。

在设计书籍或画册的版面时，我们会在每个页面的固定位置上重复地加入页码、页眉和栏题等元素，除功能性外，也是为了将不同的页面关联到一起并建立呼应关系。

在自然界中，事物总是趋于平衡稳定的状态呈现，人们经过研究发现，无论你是否刻意观察，平衡与重心总是在下意识的影响着我们的判断。

左图版面中圆点偏离中心，会给人带来紧张感。这是因为版面中心与圆点相互牵制视线造成的。右图在版面中添加大圆，并在视觉重量上调整到与小圆相等的状态，版面产生平衡效果，会给人带来稳定和舒适的感觉。

那些空白区域的面积大小同样需要与元素本身建立某种视觉关联，上图上方是文字与文字之间的负空间区域预留一个字的高度的例子，下方是文字与文字的间距设定为三分之一高度的例子。面积的大小呼应通常会以倍数关系呈现。

这是视窗操作系统的标志VI部分的截取，其中规范了标志的最小侵入范围，目的是保证标志不会因为过于贴近边界而导致识别变差的问题。同时边界的距离重复着标志的高度与宽度，使边距留白与标志元素产生呼应关系。

和上方标志与边界的处理方式相同，在文字组与组之间的负空间距离也同样可以运用这种倍数关系来设定，但是需要注意的是，元素之间距离大小，取决于参照元素与负空间的倍数比例。究竟应该设置多大距离则要根据实际情况而定。

文字的绕排也是建立呼应关系的一种方法，上图中顶部版面采用了常规的文本形式与图像元素组合，曲线的图像轮廓与垂直的文字边界之间产生了不舒服的空白区域；底部图片将文本处理成绕排的形式与图像组合，两者之间的空白问题 得到了解决。但使用这种形式需要注意的是，尽量避免大面积文本出现右齐左不齐的现象，因为这样会对文本的阅读性带来很多障碍。

这是文字与图形结合的范例，左侧是将文字置入圆形图形内部的例子，文本的轮廓与圆形轮廓产生呼应；除此之外，我们也可以运用文本绕排的形式将文字围绕在图形周围，形成与之前完全不同的效果。

通常来说人眼会将面积大的元素看作背景，而面积小的元素看成图形或图像。上图中顶部版面的文字叠压在主体上，除给人不舒服的感觉以外，文字的识别性也遭到了破坏；底部版面将文字组合移动到背景位置，左侧与曲线的主体产生呼应，同时右侧也与方正的页面边缘产生了关联，是比较适合这个版面的编排形式。

文案信息

案例演示

首先编排文字部分，根据项目调性选择这款具有手写痕迹的古风衬线体，我们看右侧调整前的字体是软件默认的间距设置，最大的问题出在字母R与A的间隔过宽，I与N的间距过窄，作为标题文字来说，我们需要手动调整文字的间距，最终目的是让文字的内白空间与字母间距的面积在视觉上产生平衡，诀窍是用眼睛去测量而非数值的一致。

将调整好的文字信息添加到版面中，接下来决定文字与主体的位置关系，第一张图是直接将主标题文字放大并放置到版面顶部的例子，这种形式经常出现在杂志的封面中。这里为了实现版面的差异化，我们选择更具表现力的编排形式来呈现。将文字缩小，采用图叠字的方式放置到人物雕像的上方，将文字的宽度与玻璃宽度统一。

为了增强版面的形式感，将汉字“雨”运用裁切的处理方式编排到版面两端，在降低了文字的识别性的同时，也为版面带来了装饰性图形元素。吸取主体的色彩并为主标题填色，为主体与文字之间建立关联性。

我们可以继续刻画主体与文字之间的叠压部分，具体步骤是：首先将玻璃水珠的轮廓抠出，并降低图层的透明度，使底部文字被遮挡的部分显现出来，在物理世界中曲面玻璃所映射出的影像应该是具有扭曲效果的，这里我们可以通过滤镜菜单下的球面化命令来实现。

文字组合中，顶部区域的空白有些别扭，我们可以添加其他文字信息来解决这个矛盾，而这里装饰性信息在灰度上也有些抢占其他文字的视线了，为了保证主标题的层级地位，我们将装饰信息弱化处理。

汉字的选择与西文字体的匹配，通常是根据笔画末端的处理形式以及汉字的中宫大小与西文的X高度的高低来决定的。同时文字的历史与整体风格也是决定性的因素之一。上图中，选择复古风格并带有装饰性的衬线体来搭配同样具有复古属性的宋体字，两者的字形都是具有手写痕迹，并且笔画末端都是圆润的处理方式。

接下来添加其他信息，这里将信息经过整理后以绕排的形式编排到版面中，这里需要注意的是，文字并不是一定要以绕排的形式来编排，我们也可以将文字信息与主形象做叠压处理，一切都需要根据文字信息与实际情况而判断采用何种编排形式。

接下来将剩余信息依次编排到版面中，同样根据左侧的空间形式编排并整理文字信息。将日期信息填充色彩与版面上方色彩产生呼应。

文字信息编排好后，接下来我们运用网格规范一下版面，通过微调版面中各个元素的位置，使内容与页面之间建立比例关联，竖向网格分为五栏，人物头部宽度占整个页面的五分之三，而横向分为八栏，主要信息占用了五栏的面积，规范好位置关系后，这个版面就完成了。