用超多案例，帮你掌握大厂设计师都会的视觉动线

我们平时在大厂的项目总结和一些作品集案例中，会经常看见和视觉动线有关的讲解和说明，虽然大家可能对它有个模糊的概念，但并不知道具体怎么应用和分析，所以今天这篇干货，就是围绕视觉动线进行具体的解释和分享。

更多动线干货：

一、什么是视觉动线

视觉动线这个词可以分解成 “视觉”·“动线” 两个部分，视觉就是我们观看的图形内容，而动线则主要是建筑和室内相关行业的术语，指人在空间中移动的路线、轨迹。

比如住房设计中的走廊过道的预留，餐厅、展馆中的路线规划和引导等，都是空间中的动线设计内容。

优秀的动线设计可以让处于该空间的人获得良好的行动体验，比如大家都逛过的宜家，之所以购物体验好，很大一部分原因就是它的动线设计，通过规划一条蜿蜒的单一的路线，让顾客体验宜家的所有商品和主题区域。

同理，目前新商场越来越多采用中空式的设计，使用两侧环形回廊，也是因为动线设计的需要，顾客直接沿着走廊逛，能获得更佳的购物体验。所以商铺堆在一起路线阡陌交错的老式百货商场逐渐被顾客抛弃，不是倒闭就要重新改造。

动线的设计对人的体验有非常大的影响，同理，视觉的动线也一样需要经过设计，也会对用户的体验产生非常大的影响。

讲到视觉动线，就要提人的视觉特点。人眼虽然可以接受大量的视觉信息，但是我们的意识、注意力，一般只能注意到这些视觉信息的某个特定的区域、对象、点，所以我们需要通过移动视觉的中心来完成对信息的获取和识别，而视觉中心的移动轨迹，就叫视觉动线。

但这个过程并不是随机的，而是会遵循一定的特征和规律。比如现代报纸设计之父 Edmund C. Arnold 在长期的排版经历中，认为阅读是应该遵循某种原则、习惯进行的，比如看书阅读就是从左到右从上到下（不同国家地区可能不同）。并且设计了一个四象限图例来解释视觉的关注顺序。

简单解释，就是一个平面中，左上角是视觉的优先关注区域和起点，到右下角结束。左下角和右上角都是相对弱势的关注区域，但是右上角关注度更低一点。这个模式主要应用在平面的版式中，相信大家看过不少类似的排版方案。

但是，视觉的关注模式并不是仅仅只有这一种，还有尼尔森的《眼睛轨迹的研究》中，通过眼动仪记录视觉热区，发现人们会不由自主使用 F 字母形状的模式来阅读网页。

而在非搜索引擎型的其它网站中，还能得到 Z 字型的浏览习惯。

这些都是对人类视觉原生习惯、行为的研究，但是，这些结论并不是完美的、通用的、绝对的！如果这些理论能作为基本定理使用，那就没有这篇分享存在的必要，大家随便看点材料就行了。

比如阿拉伯语系，它们的阅读是从右往左的，也就是上面提到的这几种习惯得做个镜像反转。

同时，如果学过绘画或摄影的同学，应该也会发现构图教学中包含大量引导观众视觉的说明和案例，不同构图的重心所在位置和浏览顺序是完全不同的，比如根据黄金螺旋的重心，或者黄金三分法的左右中心线或四个交点重心等等……

再深入研究不同设计领域的视觉和浏览模式，你会发现并不存在统一的理论，每个理论仅仅都只是提供一个可能性或建议。

这要说明，人的视觉习惯是后天培养的，且基于不同的场景可以培养出不同的习惯，而这些习惯大多不是固定的。因为人是很容易受到暗示而被劫持注意力的生物，所以创作者可以根据自己的需要去引导用户的视觉和关注顺序，这为我们的创作提供了大量的可能性，也是设计的挑战和魅力。

在 UI 设计中，对动线的应用并不是学习相关的理论然后照搬进设计里，而是理解这些概念以后，结合使用场景以及用户的视觉习惯，有意识的，有目的性的去创建产品的视觉动线。

二、视觉动线的应用

在界面设计中，视觉的动线本质上就是信息设计的一部分，通过对信息的规划来实现对视觉动线管理。

而针对视觉动线的管理中，可以分为两个层级，模块视觉动线和内容视觉动线。因为这是两个不同的层级，也是用户查看一个页面识别、查询信息的认知顺序。
比如我们看 Adobe PhotoShop 的界面，我们会先识别模块是什么，然后再关注下方的信息和操作内容。

而内容视觉动线则是模块内具体内容信息的浏览路径，例如字段、选项、数据、按钮等细节元素。

之所以这么拆，原因就是 UI 的界面不是书籍、杂志，很多分享拿 F 形或 Z 形的动线来套 UI 界面是不合理的。用户观看页面并不是根据内容依次往下看，更多是根据模块作为视觉的着陆点。如果一个模块本身内容不实用户想要的，那么用户就会转移到别的模块去，再查看模块内的信息。

比如下面的饿了么的首页，我们第一次打开的话，肯定第一步注意到顶部的 Banner，但我们几乎不用看字就能知道这是个广告模块，多数人肯定选择直接忽视掉。除非匆匆一瞥中里面有文案是吸引你的，你会再去认真看里面的信息。

接着实现就会被下方红包的模块吸引，部分用户也会发现这是个广告模块直接略过，另一部分用户可能会被吸引查看具体的优惠信息。

第三步才会开始查看顶部的快速入口模块，如果看了几个不知道有什么用也不想点的话，那么才上滑查看底部的商家列表。

移动端中，正常的阅读顺序肯定是从上到下的，但显然在画面中增加了这种强视觉的元素时，我们的视觉是会被它们吸引的，于是视觉动线就并不是根据常规的顺序行进。

这种体验好嘛？肯定不好。但是大厂的专业设计师们会不明白这个道理嘛？当然是主动这么去做的，因为运营的需要，部分模块对用户权重很高很重要，但它们是用户主动要去操作和使用的模块，往往是固定不变的，不能产生额外价值。而运营内容则多数是侵入式的让用户被动接受，但又不能放在符合逻辑最重要的地方，于是就通过视觉的手段来进行强引导，修改用户的视觉动线来实现自己的商业目标。

这在移动端是非常普遍的，大家可以多打开一些国内的应用看看，就会发现你的视觉动线往往并不是按常理推进的，总是会被吸引到一些别的东西上面，这就是模块视觉动线上的设计结果。

所以在界面设计的前期规划中，就需要通过原型的方式去放置模块，除了符合上下、左右的基本顺序外，可以通过视觉的对比来进行 “插队”，完成模块视觉动线的管理。

即使在 B 端的设计中也适用，我们想强行让用户关注到的模块，就用对比突出它。

有了第一级模块的划分，然后才是模块内部的视觉动线梳理。同理，一个大的模块如果比较复杂，就可能包含子模块，我们就要进一步先识别子模块，再进入具体的内容。

比如饿了么的店铺卡片，可以拆分成左上的店铺图片，左下的评价，右上的店铺名，右中的店铺信息，右下的店内商品。主要的视觉动线大概率是这样的：

到这里是不是发现开始难受起来了？不仅仅是难受，我们也没办法像上面一样用业务需要来解释这个动线的有效性、和理性，这是一个非常非常重要的设计判断标准。

内容视觉动线同理，同样可以归纳视觉动线的顺序和轨迹。比如我们之前分享的腾讯云产品面板，就是视觉的动线凌乱而又缺乏逻辑性的代表，所以我们对它改版的核心目标就是调整视觉的动线，让产品选项的查找更容易。

如果我们设计出来的界面、模块内容看起来很别扭，往往就是视觉动线的混乱引起的。可以使用上面的方法将动线画出来，往往就可以发现问题出在哪里，并进行对应的优化。

结尾

更进一步的案例和演示我会在之后分享，希望你们看完以后可以认真思考自己项目中的动线是怎么安排的，尤其是想在作品集中添加这种说明就一定是要经过自己规划后的动线轨迹，而不是套个 F 或者 Z 形模式强行解释。

我们在下一篇干货中再贱！

欢迎关注作者的微信公众号：「超人的电话亭」