阅读逻辑与视线的引导

我们在搭建版面时，除了要注意重心的平衡和信息的对比，还要考虑视觉的流程。人的视野极为有限，没办法一眼看到所有的信息。所以必须将信息有效组织，按一定顺序进行编排。视觉流程就是控制视线在版面空间中移动的轨迹。就像一条无形的线索引导着读者清晰准确的阅读和理解版面中所要传达的信息；如果需要传达的内容主次不分、信息混乱无序，也就失去了视觉传达的意义了。由此可见，合理的引导读者视线在版式设计中是非常重要的环节，这是本期要讨论的内容。

1.在短时间内自然流畅的阅读，提高画面易读性。

2.将视线锁定在版面内，阻止视线移出，使读者接收更多信息。

3.更有趣的传达内容，吸引读者视线，使其愿意继续阅读。

4.通过引导视线，让读者看到你想传达的信息内容。

在编排版面时，我们一般会运用两套视觉规则作为版面布局的参考。即阅读逻辑和视觉心理，两者的视线移动轨迹并不一致。关注的重点也有所不同，视觉逻辑更加关注元素的顺序和位置，视觉心理关注视觉信息引起的心理反应。

不可控因素

我们可以完全控制版面中的阅读逻辑，因为文字的阅读规律是不变的，但我们不能完全控制视觉心理，每个人的心理反应各不相同，即使我们完全参照理论进行设计也无法保证百分百有效，区分这点很重要。我们在搭建版面时会同时参考两种视觉规则。考虑图像中元素的视觉感受和文字的阅读逻辑。

适用范围

按照常规来说，在阅读杂志内页、书籍、报纸和轻图表的网页时，阅读逻辑的规则会占据主导地位。而在海报、招贴、网站主视觉等以视觉图像为主的版面设计中。视觉心理的规则会作为版面编排的主要参考依据。

文字的阅读顺序

在观看横向编排的文字时，我们倾向于从左往右的顺序阅读；而在观看竖向文字时的顺序则是从上往下的方向移动。

由上往下换行

不管是横排文字还是竖排文字都会受到视觉重力影响从上往下移动，这样的规律是由文字在书写时的方式来决定的，书写横向文字时，我们从左上角开始书写直到右下角结束；而竖向书写是从右上角开始自然移动到左下角。

版面中视线的移动

根据文字的基本阅读规则，在编排版面时，横排文字的版面视线会整体从版面的左上角到右下角的规律移动；而竖排文字会从右上角到左下角进行移动。我们可以参考对角线原理排布画面中的元素。

提高文字的阅读性

字距与行距的比例会影响视线的移动，如果行距过小，会使文字在阅读时产生疲劳感，而且容易发生串行的情况，如果行距和字距的比例关系失调，还会造成阅读方向的错误。无论横排还是竖排，文字之间的距离都应该小于行与行的距离。

添加图片的注意事项

在向文章中添加图片时，视线应该被看成流水一样畅通。图片的出现不可以切断水流的流动轨迹。如果文字的流向被图片打断，就会出现不知道下一段文字在哪里的情况。在编排文字类版面时需要格外注意这点。

视线的流动被图片阻断，增大了读者的阅读负担。

通过调整图片的位置，让视线流畅的移动。

建立信息层级

想要在短时间内传达信息，就要将信息合理拆分，按照一定顺序依次呈现出来。在杂志或报纸、网页等设计中的主流做法是采用倒三角模式编排梳理版面信息，最重要的信息在最上面，以下信息的重要程度性依次递减。

这是一个没有按照阅读逻辑编排的版面，下面我们分析一下它出现的问题。

主标题的文字的阅读方向出现了问题，由于行距相对于字距较小。我们会认为他是竖排文字，但是原文显然不是这个意思。

图像的位置将左栏完全一分为二，使阅读逻辑变得混乱，让人们不知道下一段应该阅读右侧段落，还是应该阅读图片下端的文字。

这个属于视觉心理范围，我们通常会跟随版面中人物的视线移动，如果视线被引出版面，那么信息的传播会大打折扣。为了让读者视线留在版面中，我们通常会将视线朝向版面内侧。但并不是说绝对不可以朝向画面外，应根据实际内容决定。

并不是说画面元素一定要按照按照视觉逻辑的轨迹排布，适当打破规律，会给人热闹和趣味的感觉。但是过度打乱阅读顺序，也会造成信息的混乱无序，针对阅读性为主的版面，大方向上遵守阅读逻辑，让读者在短时间内了解要传达的内容是非常有必要的。

将图片人物视线朝向书籍内测，使视线停留在版面中。

将版面划分为两个区域，一个放置正文，另一边放置辅助说明类信息。

将画面信息按照阅读逻辑的方向整齐排布于版面当中，重要的信息上移，不重要的移，注释信息以不影响正文阅读的方式编排以人物眼睛的视平线为基准对齐文本顶部。

阅读逻辑导向:

我们按照阅读逻辑的走向，将标题放置在版面上方是为了让读者首先看到它，接着是引言和正文，而补充说明部分放置在正文旁边也是为了不影响正文的流畅阅读。

视觉心理导向:

视觉心理方面，我们并不能完全控制它。上图中视线首先会被最大的照片吸引，接着按照从大到小的顺序移动，元素的位置同样也会影响到视觉路径的移动方向，某些读者的视线可能会向距离较近的元素移动。

最终效果展示

在阅读时人们并不是连续不断的在扫视内容，而是有一系列的停顿或跳跃。这种间断具有一定规律，不全是随机出现的。首先最初被捕捉视线的是具有视觉性的图片，不管在什么位置出现，人们都会优先被具有视觉性的元素吸引。之后视线会在各个元素之间以某种规律移动，最终停留于视觉落点处。

创建焦点

无论在画面的什么位置，视线都会首先被具备视觉性的要素吸引。我们眼睛首先捕捉到的内容就是画面中的焦点，它是视觉的入口点；是版面中首先被识别到的元素；是版面中的视觉重心。

我们第一眼看到的是苹果组成的阵列，但是上图中并没有吸引视线的焦点元素。

焦点是画面中最瞩目的部位，是眼睛最感兴趣的地方，

通过把其中一个苹果添加变化，画面出现了视觉焦点，视线会落到红色苹果上。

上图也是一样，并没有吸引视线的焦点元素存在。

当画面中出现了一条更大的鱼，那么它就成为了视线的焦点，眼睛会不由自主的看向这个画面中最大的部分。

在空白的版面中，视线会在四个角落来回游走着寻找视觉信息。

当画面中出现了图像或文字时，就出现了视觉焦点，它是我们浏览页面的视觉入口。

接着安排文字元素的摆放位置根据视线移动的原理，匹配文字层级和位置让版面能够既美观又能有效的传达信息。

引导视线

我们的眼睛看事物时，会按照一定的顺序进行移动，虽然每个人的视觉心理略有差异，但是还是有一些规律是可以借鉴的。下面我们一起了解一下视觉流动的心理倾向。

1.大小

我们会第一眼看面积最大的物体，之后会移向第二大物体，视线会按照从大到小的规律移动。如果两个元素材质相同而大小不同，我们的视线往往会集中在大的元素身上。

2.颜色

视线习惯向相同颜色的元素方向移动，暖色比冷色相更容易吸引视线；纯色调比暗色调更能引起我们眼睛的注意。

3.编号

生活中还有很多地方会应用到编号，当看到1的时候就会向数字2移动。在需要设计引导的时候，可以尝试添加编号。

4.指向

视线会跟随如箭头或模特的手势、脸部的朝向等等具有指向性的元素移动，特别是人脸的朝向，如果版面中人物观看的方向与想传达的内容位置相反，读者的目光将被吸引到与内容相反的方向。

5.线条

线条具有引导读者视线和增强元素间关联的特性，横线有从左向右的方向感；竖线有从上到下的方向感；曲线具有柔美感；斜线具有不稳定的动感。将不同元素用线条连接，可使其被认为是一个整体。

锁定视线

一个成功的版面，会让视线尽可能多的接触到版面中的所有元素。当视线对关注的元素失去兴趣时便会继续移动，为了避免视线移出版面，我们需要想办法把视线锁定在画面中。

1.反弹视线

在角落设计一个遮挡元素，视线会像弹球一样被弹回版面中。在版面的两侧添加元素也会有同样效果。只要有一个遮挡元素，视线就会被锁定在画面中。

2.添加点缀元素

如果版面中留白过于松散，会让画面失去紧张感从而使视线游离出版面。我们通过在角落添加点缀元素的方式阻挡视线溢出。丰富版面的同时也为版心添加了张力。视线被反弹回去达到了锁定视线的效果。通常会使用logo或优先级不重要的文字作为点缀元素。

口红的结构呈现出一个直角三角形。具有稳定的视觉印象，而口红的顶端给人向上的心理感受，我们可以利用它将视线引导至上方的标题。

在后方加入口红的笔触，使画面平衡的同时，也让主体在视觉上更加美观。

倾斜的线条具有不稳定的动感，为整个横平竖直的组合带来了活力。从左上倾斜到右下也顺应了人们普遍的书写习惯，显得自然流畅。

修复笔触的轮廓，将过于空的位置拼贴填补好，使主体看上去更加饱满。

为了和画面匹配，我们为后方的笔触添加光影质感。

继续烘托产品的真实感和品质感，为画面加入倒影和阴影。阴影部分有两个层次，一个实一个虚，并且这里使用正片叠底的方式与下方图层融合。

主体已经刻画的差不多了，我们将它置入版面中，因为想要利用图像向上的指向性引导视线，这里将主体放在画面偏下方。

根据画面气质与线条，搭配与之相吻合的字体，产品的本身线条简洁时尚，搭配与口红笔触类似的手写体，两款字体搭配在一起，也具有软和硬的对比效果。

将两款字体放在一起显得格格不入，因为它们太不相同了，将两个字体组合在一起也显得外形复杂多变，而且不是很美观，解决这个问题的办法就是模仿主体的叠压组合方式。让两款完全不同的字体产生联系。

将标题放置在画面中，留白重复着标题的高度，上方有一个半的标题高度，标题与主体间存在一个标题高度，下方主体与页面底部存在两个标题高度。

添加剩余文字信息到版面中，将文字组合放置在画面底部居中，标志压在角落处，以达到锁定视线的作用。至于放置在左上角还是右上角，这里按照阅读逻辑将标志安排在画面的左上角入口点的位置。

最后，检查一下视线流动的路径是否顺畅，每个人的阅读路径可能会略有不同，这里视线按照从大到小的顺序移动。

根据题目“异想空间”得出关键词：梦幻、空间、神秘、童趣、遨游太空根据气质调性寻找相关参考图。

我们添加一个线框与主体做一个叠压组合，以此来为版面添加层次感。注意线框不宜太粗或太细，经过反复调整后，选择一个视觉看上去舒适的粗细度就可以了。原图是黑白画面，通过加入具有幻想气质的紫蓝色渐变，为画面带来色彩的对比。

继续丰富线框，在右上角添加装饰性元素，让后方的边框显得不那么过于硬朗，同时也为版面中带入了灵动的点元素，注意加号与边框的边缘对齐。

为了增加主体与装饰元素的联系性，将线框与主体人物进行穿插处理，让组合更加有一体感。在贴合的位置添加阴影效果，使得两者结合的更加真实一些。

继续烘托主体，为画面添环境光，模拟线框发出的光源照射在人物身上。

置入版面当中，确定好位置与大小，在后方加入月球图像与黑色的底色，烘托出神秘的幻想空间，左侧空白处用来编排文字信息。当视线被主体捕捉后，人物的脸部朝向会将我们引导到左侧的文字区域中。

添加第一层级文字信息并贴近人物视线的区域。同时为了加大向标题移动的可能性，使用相同的颜色继续加强引导性。

注意文字的对齐，通过距离的远近将信息依次编排到画面中去。人们首先看到主体，之后被引导至文字区域，根据阅读逻辑视线会从左上到右下阅读。

那么文字如果换成左图右字的构图会发生什么事情呢，

我们将图像区域与文字区域调换位置，视线的流动发生了变化，因为文字的阅读是从左往右移动，而人物的视线朝向页面外侧，画面中出现两个向外拉扯的心理引导。使得版面视线流动受到了一定程度的干扰。

试着把将主体调换方向，主体的方向与文字的阅读方向统一，视线流动的速度会相互叠加。但从美观性上并不如第一版，以上只针对本画面来分析，并不是说不能这样编排，而是应从整体考虑是否适合。

文字的阅读方向从左往右移动，图像的视觉心理减缓了移动速度，让视线在页面内部停留的时间增加。与之前人脸朝向画册内页的原理类似。焦点位于版面右侧也会给人稳定的心理感受。而本设计中文字的优先级相对高于画面，所以选择左字右图的方式作为构图依据。

分析画面的视觉流程，首先视线被主体元素吸引，接着通过方向与色彩引导到主标题，并按从大到小的顺序移动。

以文字作为主体，默认状态下打出的文字紧凑有序，如何为主标题添加变化让它变得好玩有趣呢，这里给大家介绍一种简单的方法，利用线条的引导作用为版面添加趣味点，因为线条本身也具有连接属性，所以可以不用考虑行距与字距的比例关系。

过于统一总会带来呆板僵硬的感觉，通过为线条添加曲线，给画面带来柔和与硬朗的对比，版面中出现了直线和曲线两种变化。

虽然文字间距是相等排列的，但是肉眼看上去总是会有中心向下沉的感觉。这是因为人们看物体时存在视错觉，几何中心与视觉中心并不一致。

将版面中间文字的位置向上提升，以矫正眼睛产生的错觉。经过调整后在视觉上是大致处在中间位置的。

主标题以英文为主搭配中文的补充说明，英文中加入大小写的形状对比，与中文的比例是二比一的关系。接着我们为组合添加图形元素，它可能是展览者的个人标志，或是针对标题的补充图形。两个圆形一虚一实，同时透叠处形成一个眼睛的轮廓，以体现出用与众不同的目光看世界的主题。

将文字组合放置在主题中心位置，让版面显得饱满一些，接下来我们将其他文字信息依次填充到画面中来。

将文字信息填充到左侧“另”和“种”的中间位置，右方空白处添加活动时间和日期，因为线条的引导作用以及大小的不同，在文字的空隙中添加信息不会影响到主体文字的阅读顺序。

将之前组合好的主体信息置入到版面中，在底部添加其他文字信息。版面的排布就基本完成了。

添加照片作为底图，注意照片的构图与文字的吻合，经过裁切让画面与文字自然的搭配在一起。

最后，检查一下视线流动是否流畅自然。根据阅读逻辑，首先第一眼我们会看到最大的主体文字，但是以视觉心理来说，主标题在位置和色彩上的优势，会首先映入眼帘，从画面传达内容来说，两者并不冲突。而随后读者会根据层级逐渐向更小的元素阅读。

如果去掉线条会发生什么呢？线条去掉后，画面丧失了引导和连接的作用。画面阅读发生混乱，画面可读性大大降低。

分析得出画面由倾斜的产品图与带有石头纹理的背景组成。因为主体元素偏右，画面在视觉上给人向右倾斜的心理感受。

文字的编排位置安排在画面左侧以平衡版面重心。水平的文字也会制约倾斜的主体元素带来的不稳定感。

将文字信息分出层级后编排到版面中，注意元素间的对齐，标志与右下角的点缀元素起到了阻挡视线的作用。

文字围绕着图像元素，形成绕拍效果，加深了文字信息与图像信息的联系性。

读者会首先看到最具视觉性的信息，就是版面中的表盘位置，接下来会向标题移动，按照从大到小的顺序移动，最后停留在品牌的标志上面。

通过引导读者的视线，让读者能够更有兴趣的接收信息，也使得文字变得更容易阅读。用户并不一定会完全按照我们为版面预设的视觉轨迹阅读，因为每个人的阅读习惯会有所差异。依照阅读逻编排的版面会使人自然流畅的阅读，而了解视觉心理，也有助于将读者视线引导到我们最想让读者看到的重要信息上。

长按二维码关注研习设

每周一篇精品、原创设计文章

（每周四晚9:00）

欢迎个人转发，转载请参照“转载须知”