什么是视觉动线
百度百科定义：视觉动线是指眼睛在阅读漫画时，视觉移动时所构成的方向路径。视觉动线决定了漫画构图的焦点以及对白摆放的位置与顺序。
- 同样的内容，通过设计师引导方式的不同，路径也会发生变化。
- 例如我们在阅读文章时，一般是从左到右逐行地阅读，这个阅读顺序就构成了视觉动线。如果文字的排版过于跳跃，没有规律，就会造成视觉焦点过多动线混乱的情况，容易出现阅读障碍，大大影响了阅读体验。
（图源来源网络）
什么是动线
动线一词最早是源自建筑与室内设计领域。指的是人在某个空间内的移动轨迹。* 例如住宅空间的动线设计，我们会经常听到动静分离的概念，讲的就是动线的设计。住宅动线的设计目的是提高居住体验，减少在室内的重复行走轨迹。
- 例如家务动线的设计，从进门到厨房再到生活阳台，是家务劳动中最经常行走的路线。通过设计动线，减少家务劳动的行走，就能提高家务劳动的效率。在这里动线越短，效率越高。
（图源来源网络）
在视觉设计中动线的设计尤为重要，例如下图的banner，左图动线混乱主次不清。右图则能清晰地引导观众从左到右阅读信息，降低无效的阅读成本。
因此构建合理有效的视觉动线，将有助于打造良好的阅读体验，能更高效地让用户获取到信息，避免用户的流失。
（图源来源网络）
视觉动线的形成
大家在生活中有没有遇到这样的情况，你要找的东西就在眼前，但是找了好久仍然没有找到。人眼之所以能看清物体，是因为视网膜中央有个很小的区域叫做中央凹，这个区域集中了大多数的视锥细胞，专门负责视力的高清成像。但是中央凹的面积极小，高清区域有限。人眼只有在10度视角范围内才最为敏感，30度范围内可以分辨出颜色。这就导致人眼可视范围有限，一次只能产生一个视觉焦点。因此人眼在观察物体时，没办法一下子看到所有信息，需要逐个地移动搜寻，这种视线的移动过程，就构成了视觉动线。
（图源来源网络）
为什么要建立视觉动线
为什么我们需要建立视觉动线？早在十多年前，用户体验专家雅各布尼尔森回答了“人们如何在线阅读？”的问题，简单地说：“人们不会逐字阅读网页; 他们用视线扫描页面，只看个别文字”。这种情况至今没有什么改变：如果我们不确定这个网站是否能提供我们想要的内容，那我们不会花时间和精力去探索这个网站。因此，如果网站在一开始没抓住用户的视线，那么用户离开的可能性非常高。无论网站的类型是什么，可进行快速浏览，有阅读逻辑都是网站友好的重要标准之一。精心设计过视觉动线的页面在以下方面变得更加高效：
1.帮助用户快速完成任务，实现用户目标
2.用户在搜索他们需要的内容时会少犯错误
3.用户可以快速了解网站的结构和导航逻辑
4.降低跳出率
5.提高用户留存
6.网站看起来和感觉可靠可信赖
7.提高营销效率
视觉动线的类型
1. 直线型
直线型视觉动线也分为横向引导、竖向引导、对角线引导。左图这张banner就是对角线式的动线轨迹。对角线具有倾斜的角度，容易塑造出速度感。因此这样的动线轨迹往往画面更加的有动感。而竖向的动线一般用在窄长比例的画面中，例如手机端的运营活动。右图的活动页面就构成了从上到下，从标题到主体人物的动线浏览轨迹。
（图源来源网络）
2. Z字型
图文穿插时用z字形居多，用户按照从左到右再到下一行的顺序进行扫视阅读。这种视觉动线经常应用在视觉层次较少的网页上，可以突出主要内容。在Z型模式中，用户不会关注文字内容，而是直接跳到抢眼的按钮、图片等。所以Z型模式布局的原则就是把重点内容放到 Z 的节点上，****不要让次要信息阻碍视觉流。
（图源来源站酷）
3. F字型
2006时，尼尔森诺曼发表过一篇关于用户扫描和阅读网站习惯的文章，经过研究发现，用户倾向于一种F型模式去浏览网站。人们在第一次浏览网页时 基本上呈F形浏览页面的，研究中发现人们习惯从左上角作为阅读的开始点，视线从左到右水平移动。然后视线再往下开始以短线从左到右观看。快速扫视时具体的文字内容并不重要，短句小标题更能引起注意力。F视觉流是2006年尼尔森.诺曼发现的，所以也叫做尼尔森的F视觉流。
（图源来源网络）
现在手机屏上的界面也是基于用户这种习惯的运用。F型模式已经成了目前电商和新闻类APP的首选布局。在专题页面尤其电商页面中，由于信息量比较大，利用视觉动线安排信息，可以让页面显得特别有逻辑性。
（图源来源淘宝、今日头条）### 4. L字型
L字形引导在手机端经常使用，页面视觉引导相对单纯，信息虽然很多，但是用了L型的动线，让最终的落脚点一目了然。
（图源来源学为贵雅思、singlehust）###
5. 更多类型
除了几种常见的视觉引导类型，还有更多类型的引导方式，可用于不同的场景，但都需要经过精心的设计，从而准确高效地传达信息。
（图源来源网络）## 如何制造视觉动线
1. 阅读顺序
制造视觉动线的基础是根据人们的阅读习惯来设计，也就是从左到右，至上而下的顺序。因为人的眼睛，左右转动所看到的角度和区域，要比上下转动所看到的要广阔的多。从左到右也是人们通用的阅读习惯和标准，横向阅读也更为舒适。在设计中我们只需要按照从左至右自上而下的规律来摆放信息元素，就能保证有良好的阅读体验。
（图源来源网络）### 2. 层级的设计
页面中的元素很多，最重要的信息和次要信息的层级排布就很重要，才能保证接收到重要信息的同时兼顾美观。例如下图的排版，我们的阅读轨迹是从左到右，从上到下，先看到上方的大标题，然后是下方的小标题，形成了一条视觉引导轨迹。这就是层级对于视线引导的作用。通过层级的塑造，可以更有效的来制造动线，引导观众的阅读。
3. 保持负空间的平衡
负空间 - 也称为是布局的留白。留白不仅存在于元素周围，也存在于元素和元素之间。负空间是页面或屏幕上所有对象的一种呼吸空间，设计师要进行合理的阅读感受和留白空间的安排。长时间阅读查看眼睛会产生疲劳感，接受度就会变弱，好的动线就会在适当的位置创造出合理的休息空间，来增加页面整体的节奏感。
（图源来源网络）在网站和移动应用的UI设计中，负空间是导航可见的重要因素：没有足够的留白，就很难看到布局元素，用户会错过他们真正需要的东西。
（图源来源网络）### 4. 加入引导视觉的元素
引导用户的视线，明确主题，最终达成目的。让用户有好的视觉体验同时，引导用户完成最终目标才是动线的根本。我们可以通过设计一些引导性的线条来引导观众的视线。常见的有放射线，或者虚拟的线条。例如图中的banner，就是通过左右两侧放射性的线条来增强引导，让观众的视线汇聚到中心，构成了汇聚型的动线
（图源来源网络）下图中除了蜘蛛的视线引导外，标题文字的透视处理也构建出一条无形的引导线，让整个视线的引导更加紧密自然。在元素本身指向性不强的时候，引导线的设计能让视线的引导更加紧密，有规律。
（图源来源网络）我们也可以利用元素本身的指向性来进行引导，特别是主体人物的肢体动作、手势等。如图中的banner就分别通过人物的眼神和手势进行引导，让观众的视线转移到标题上，构成了很强的关联性。让动线的引导更为自然紧密。
（图源来源网络）### 5. 使用数字
这条建议源于尼尔森诺曼集团的另一项调查。他们分享了一个重要的发现：眼动追踪研究表明，在扫描网页的过程中，数字通常会阻止用户的视线徘徊并吸引注视，即便这些数字是在大段文字之中。我们潜意识地将数字与事实，统计数据，大小和距离相关联 - 这些数据可能是有用的。因此，数字可以吸引用户的注意力，并且在页面排版方便，数字比文本数字更紧凑简洁，阅读起来更省时。
（图源来源蜗牛睡眠）## 小结
构建合理有效的视觉动线将有助于打造良好的阅读体验，能更高效地让用户获取到信息，避免用户的流失。信息的传递是我们构建作品和观众之间交流的桥梁，也是设计中首要考虑的因素，有效的信息传递才能发挥设计最大的价值。关于视觉动线还有更多的学问需要自己在设计中慢慢摸索，只要我们能够理解动线的概念和目的，在排列元素时就能有更清晰的目的性，设计更有方向感。# 参考文章
https://mp.weixin.qq.com/s/OFasqx2eRs-IunxeItOguwhttps://mp.weixin.qq.com/s/2JGjVumstWbkTyqbU4WufAhttps://mp.weixin.qq.com/s/M7QHSHJ5g0Yb5tbVIEmBzwhttps://www.zcool.com.cn/article/ZMTM0NDI0MA==.htmlhttps://www.bilibili.com/video/BV1FZ4y1g74Y?spm_id_from=333.999.0.0