Date 2026-05-11 10:49:29
我不知道你是否打开了一个网站或一个网站 APP，但我不知道去哪里，因为页面上有太多的信息，我们很难决定从哪里开始，然后我们很容易关闭它 APP 或者网站。众所周知，在互联网时代，用户不是在阅读，而是在阅读我们设计的每一段文本。他们扫描和扫描！扫描意味着他们只有在眼睛被吸引时才会停止阅读。
作为一名设计师，我们需要很好地控制用户在使用我们的产品的过程中，他的视觉浏览路径，需要了解我们的眼睛如何处理界面信息，我将结合我的一些学习与您沟通如何使用视觉移动线在设计中。
从字面上看，看起来很高，你可以想象一部电视剧，每一集都从一个场景转移到另一个场景。通常，这些场景是连续的，每个场景之间都有序列。
加勒比海盗是上海迪士尼项目之一。在迪士尼的设计中，动线往往是一个非常重要的环节和过程。观众在动线视觉中是否凉爽、刺激或刺激。
进场:从进场开始，光线越来越亮，门口用巨大的海盗建筑和石头的海盗旗慢慢把你带入电影的场景。
入口:潮湿的墙壁，昏暗的灯光，金币宝箱的感觉，破旧的木头，低沉的音乐让你瞬间进入电影世界。
航行:阴暗的灯光，骷髅人向你挥手，发出惊悚的笑声，伴随着海水的声音，让我们的感官和听觉竖起来。
气氛:黑暗的灯光里到处都是悬崖和恶棍，水流越大越大，瞬间把我们放在电影里 。
气氛：水面慢慢平静，突然出现在大船前，船体突然失去重力，伴随着巨大的海浪声。
高潮:昏暗的场景突然明亮起来，巨大的海面和行使的船只就在我们面前。
高潮：船长和他的士兵在这里互相战斗，伴随着强烈的炮火声。
结尾：伴随着音乐的声音，和平的海水声慢慢地把观众带回现实。
以上是迪士尼在移动线上的经典设计。整个路径伴随着听觉和视觉，让你感觉很好。我们的产品也是如此。
最近，新的零售业非常受欢迎，尤其是各种新鲜的商店。为了最大限度地提高新鲜商店的效率，这些商店需要在设计中灵活地使每个死角，这是顾客的视觉移动线。顾客购买商品，影响超市的销售。超市的购物线一般分为 L型、F型、曲线型，有兴趣可以了解一下。
在上面的丝袜中，哪一种看起来更瘦？在一些外国电子商务中，用户的购买欲望也通过设计的移动线来增强。在左边的图片中，丝袜增加了几条垂直线，这让我们觉得丝袜会让人们的腿看起来更长！其中，它是利用线条的垂直连续性来创建移动线。
那么哪一条看起来更苗条呢？显然，只有一条线是不够的。设计师添加了多条线。在这两种产品中，左侧看起来比右侧更苗条。
哪一个看起来更苗条？黑色可以让我们看起来更瘦，但它实际上是不透明的，因为它可以反射更多的光，所以它可以带来更多的幻觉，不透明可以让你的腿更苗条。
哪一个看起来更丰满？如果你想让大腿更丰满、更大胆的颜色，它通常会吸引更多的灯光，另一个丰满的技巧是图案设计，图案看起来更复杂，可以传达复杂性，可以欺骗大脑。
上述案例似乎与设计无关，但它们有很大的相关性，包含了许多心理学和视觉移动线的思维。如果你感兴趣，你可以去看看 https://www.viennemilano.com/ 该电子商务公司在商品中的一些研究充分利用了许多经典的动线、视觉错觉等技术。
以上介绍了什么是移动线。事实上，这是人们处理信息时眼睛的顺序。在设计中，我们需要了解这些用户的视觉规律，从中创造更好的体验。回到设计中，移动线的类型是什么？
1. F类型
2. Z类型
Z类型，顾名思义，从左上角到右上角，保持从左到右的习惯，然后眼睛会找到页面底部的最后一部分。
3. 对角线类型
对角线类型是一种更好的布局形式，基于从右到左的阅读习惯。因为我们已经习惯了从左上角到右下角的扫描习惯，包括四条线。
从字面意思可以看出，Z形布局沿线 Z 图形跟踪，用户扫描时从左到右，从上到下，这是页面上眼睛的自然移动模式。
在 UBER 在官网设计中，是典型的 Z形引导布局，首先遵循用户习惯从左到右，所以左边放公司品牌标志，右边是司机和乘客登录入口，以下是氛围图片区域，左下角是新用户注册入口，这是典型的 Z布局广泛应用于许多网站设计中。
Z形结构不会专注于文本，而是通常突出动作按钮。它广泛应用于一些机器简化设计项目中。它通常只需要一个简单的图片和文本，一个关键的位置案例作为突出显示。
这种结构非常有效，因为当用户在这种模式下移动时，就会出现虚构 Z 形状。
salesforce 也是采用 Z布局，从左到右，从左到右 LOGO 和行动点，从左到右是导航菜单和按钮。
Z布局，特别是在平时的网页设计中，其规则适用于大多数网站设计，在传递品牌的同时，也能很好地突出内容。
在早期，杂志和报纸没有图片、文字和标题，只有长文本、列和列。在这样一个非常无聊的设计中，用户通常会遵循它 Z型浏览。
这种特殊 Z布局叫字形布局，我们可以理解为 Z 有一些重复排序 Z型布局出现，用户路线，从左到右，然后从左到右开始，这有一个 Z 我们称之字型动线为运动浏览奇观。
我们谈到了视觉移动线和经典的移动线Z，那么我们如何在设计中使用它呢？当我们设计一个网站或海报时，在布局之前问自己几个问题：
当用户打开这个页面时，你想让他注意到这些信息吗？你想让他们按什么顺序查看你的信息？你想让他做什么？Z布局的前提其实很简单，加上页面 Z，然后把重要的信息放进去 Z 让用户在扫描路径上看到这些重要元素。因此 Z视觉动线的核心是你需要向用户传达有价值的信息。
Eveynote 这是一个很好的案例。当用户打开此页面时，他们希望用户注意到该品牌，然后注册或登录，并通过文本简要了解产品信息：
图中的LOGO是起点右上角的按钮，是行动信息的内容。该产品的注册和登录是什么？页面的核心操作Z型结构也有缺点。作为一种控制用户视线移动的模型，它很容易受到外部元素的干扰，并使用户脱离我们设定的轨迹，因为如果你准备使用它，用户在浏览时总是很容易被图片或明亮的元素所吸引 Z 在移动线路时，我们必须平衡这些元素，不要过多地干扰我们的核心功能操作，否则我们就无法达到良好的预期。
移动线作为我们控制用户的移动模型，作为设计师，我们需要刻意制作用户浏览的移动线。
Z是设计中常用的动线、F、对角线形式，我们需要了解每个动线设计的含义和使用场景。
Z型动线广泛应用于网页，但在使用之前，我们必须确定我们网站的核心目标，然后将核心内容组织到我们的动线上。
欢迎关注作者微信微信官方账号:我们的设计日记，每周分享最新的设计趋势和经验，科学的设计方法。
图片素材作者：Julian Ybarra
「让作品有节奏的设计案例」
“如何掌握设计的节奏？让我们来看看这个全面的总结！”想成为一名高级视觉设计师吗？首先学习如何引导读者的视线！”想要提高工作的层次感吗？首先学习这12个字体应用技能！”
热评 Carol