平面干货！3个章节学会运营设计中的视觉动线

我们的作品信息传输效率高吗？什么样的设计清晰有效？要了解这些问题，首先要了解视觉动线的概念。

往期回顾：

一、什么是视觉动线？

1. 动线

“移动线”一词起源于建筑和室内设计领域。它指的是人们在某个空间中的移动轨迹。例如，在住宅空间的移动线设计中，我们经常听到动态和静态分离的概念，这是关于移动线的设计。住宅移动线的设计目的是改善居住体验，减少室内重复的行走轨迹。

比如家务线的设计，从入口到厨房再到生活阳台，是家务中最常走的路线。通过设计移动线路，减少家务行走，可以提高家务效率。这里的移动线越短，效率越高。

在商业建筑领域，移动线的设计也得到了频繁的应用。例如，商店的客户移动线设计通过兴趣区域吸引客户，引导客户尽可能多地浏览商店的商品，从而增加销售额。商业空间的移动线设计注重平面效率（每平方米销售额），移动线设计更注重迂回。

此外，动物园和操场的路线设计还涉及到游戏顺序的体验和缓解拥堵。因此，移动线路设计的目的是提高效率，并已广泛应用于家居和商业空间领域。在视觉设计领域，也有移动线路的概念。

2. 视觉动线

你在生活中遇到过这样的情况吗？你要找的就在眼前，但是找了很久还是找不到。

人眼之所以能看清物体，是因为视网膜中央有一个叫中央凹的小区域，集中了大部分视锥细胞，专门负责视力的高清成像。

但中央凹面积极小，高清面积有限。人眼只在 10 视角范围内最敏感，30 颜色可以在程度范围内区分。这导致人眼视觉范围有限，一次只能产生一个视觉焦点。因此，当人眼观察物体时，它不能突然看到所有的信息，需要逐个移动搜索。这种视觉的移动过程构成了视觉移动线。

例如，当我们阅读文章时，我们通常从左到右逐行阅读，这种阅读顺序构成了一条视觉移动线。如果文本的排版过于跳跃和不规则，就会导致视觉焦点过于混乱，容易出现阅读障碍，极大地影响阅读体验。

动线的设计在视觉设计中尤为重要，如下图所示 banner，左边的动线很混乱。右边的图片可以清楚地引导观众从左到右阅读信息，并降低无效的阅读成本。因此，构建合理有效的视觉动态线将有助于创造良好的阅读体验，使用户能够更有效地获取信息，避免用户的损失。

二、有哪些动线类型？

以操作设计为例，讨论常见的动线类型。在操作设计中，banner 而活动主题是最常见的，这种设计，画面往往很有感染力，内容丰富。这里介绍的动线是指某张照片 banner 或者移动头部与屏幕相同的动线轨迹。一般来说，我们可以将常见的动线分为直线型、聚合型、发散型、扇型和 Z 型。

1. 直线型

顾名思义，直线动线就是在一条路上依次展示信息元素。我们使用它 banner 以如何应用为例。

在分析移动轨迹时，我们应该逐一找到视觉焦点。在这种情况下，我们第一眼看到的是左边的标题，我们称第一眼看到的焦点为视觉入口点；然后视线转移到右边的龙身上。这构成了从左到右清晰的视觉轨迹。

banner 只在标题和火焰上使用颜色，其他背景使用灰色系统，使视觉焦点突出，动线清晰。

① 动线角度

使用直线动线时，不一定是从左到右的横向角度。常见的形式有对角线和垂直线。

例如左图 banner 是对角线动线轨迹。对角线有倾斜的角度，容易塑造速度感。所以这样的动线轨迹往往更有动感。垂直动线一般用于窄长比例图片，如手机操作活动。右边的活动页面构成了从上到下的动线浏览轨迹，从标题到主角。

② 视觉焦点的数量

在直线移动线路中，人们的浏览轨迹是根据视觉焦点的位置进行的。视觉焦点依次排列在直线上，但焦点越多越好。一般来说 2-3 视觉焦点更合理。更多的视觉焦点会影响阅读效率。

2. 汇聚型

聚合动线是一种将用户的视线聚焦到中心的动线轨迹。一般有多个视觉入口点来引导用户的视线。

比如下面这个 banner，我们的视线将首先被左右两侧的英雄所吸引，并将视线转移到中间的标题，以延长他们的冲刺方向，这构成了一条聚集的视觉移动线。聚合移动线通常在元素放置方面具有指导作用。最终目标是将观众的注意力集中在中心，以突出中心的标题或主要信息。

汇聚动线的视觉入口点一般在 2 以上，如以下活动头部，通过两侧的烟雾塑造视觉入口点，引导观众聚集在中心。这是一种关注突出中心内容的移动线类型。

3. 发散型

聚合动线是从周围聚集到中心的动线轨迹，而发散动线则相反，它是从中心转移到周围的动线轨迹。视觉入口点在中心，并逐渐扩散到周围。

例如，下面的暑期活动页面是从中心转移到周围的发散线。我们第一眼就会被引人注目的标题所吸引，这就是视觉入口点。然后，视线逐渐移动到两侧，依次看到角色、书籍、台灯和两侧的云。构成了一个渐进的视觉浏览轨迹。

以下四周年最引人注目的活动是标题。它将观众的注意力集中在中心，然后逐渐传播到周围。按照放射方向，依次浏览人物、按钮、奖励、球等信息。

由此可见，发散式动线一般用于具有较多信息元素的图片，浏览顺序层层递进，更适合对信息元素进行分类阅读。

入口点位置

发散动线一般由中心向四周发散，视觉入口点一般位于中心线位置。但是，入口点也位于边缘。例如，下面这个 banner，人物作为视觉入口点位于右下角，通过手势逐渐引导观众阅读标题和玩具。它是一种单边发散的动线类型。

4. 扇型

风扇动线通常在中心线上创建一个视觉入口点，然后保持从左到右的视线轨迹，就像一个风扇。

例如，在下面的移动终端活动中，我们第一眼就会被可爱的狗的头部所吸引。然后我们往下看，看到主标题和副标题，并根据从左到右的视线轨迹阅读标题。这构成了风扇的移动轨迹。

可以看出，风扇类型的动线轨迹保持了从上到下的结构关系，通常用于图片较长的布局。很容易形成从上到下、内容从少到多的阅读关系。

5. Z 型

Z 型动线是最常见的类型，它遵循人们从左到右的阅读顺序习惯。并且可以在长页面上反复延续。

例如，在下图的活动页面中，我们的阅读顺序是从左到右逐行扫描关系。首先是主标题，然后是副标题，最后是木牌上的信息。这构成了一个循环 Z 类型动线轨迹。这种动线更适合用于文字信息较多的图片。

三、如何制造动线

在移动线的设计过程中，如何引导信息之间的顺序关系更为困难。以下是一些方便的技能，如何更有效地设计移动线。

1. 阅读顺序

第一种是根据人们的阅读习惯进行设计，即从左到右，从上到下的顺序。因为人们的眼睛，从左到右旋转的角度和区域比从上到下旋转的角度和区域宽得多。从左到右也是人们常见的阅读习惯和标准，水平阅读更舒适。在设计中，我们只需要按照从左到右自上而下的规律来放置信息元素，以确保良好的阅读体验。

2. 元素指向性

二是利用元素本身的方向性来引导，尤其是主体人物的肢体动作和手势。例如，下图中 banner 引导角色的眼睛和手势，让观众的视线转移到标题上，形成强烈的相关性。让动线的引导更加自然和紧密。

3. 导线的设计

第三种是引导线的设计，我们可以通过设计一些引导线来引导观众的注意力。常见的有放射线或虚拟线。

例如下图 1 的 banner，是通过左右两侧的放射性线来增强引导，让观众的视线聚集到中心，形成聚集动线。图片 2 除了蜘蛛的视线引导外，标题文本的透视处理还构建了一条无形的导线，使整个视线的引导更加紧密和自然。当元素本身没有很强的方向性时，导线的设计可以使视线的引导更加紧密和有规律。

4. 层级的设计

第四种方法是通过层次关系的设计来构建动态线，这也是一种常用的方法。建立层次关系的方法有很多。这里只做一个简单的介绍，并有机会与您沟通。

例如，在以下活动的头部，我们的阅读轨迹是从左到右的关系。首先，我们看到左边的角色，然后是标题，最后是右边的角色，形成一个直线的移动轨迹。如果我们打开角色之间的空间关系，我们首先会注意到靠近我们的物体，并根据距离形成一个视觉指导轨迹。这就是层次对视觉指导的作用。

通过层次塑造，可以更有效地制作动线，引导观众阅读。

小结

综上所述，只要我们能理解移动线的概念和目的，我们就能有更清晰的目的，在元素的排列中有更多的方向感。信息传递是我们在作品和观众之间建立沟通的桥梁，也是设计中首要考虑的因素。有效的信息传递可以充分发挥设计的最大价值。以上只是个人的感知和经验，我希望能帮助你。