通过根据自然习惯在页面设计中添加特殊设置，用户可以在不知不觉中获得设计者想让他们了解的信息。
您是否曾经打开过网站或应用程序但不知道在哪里查看？页面上的信息太多，让人不知从哪里开始，又很容易关闭。
在互联网时代，用户是扫啊扫，而不是继续阅读我们设计的每一段文字。
扫描意味着只有当你的眼睛被吸引时才停下来阅读。
作为设计师，需要正确控制用户的阅读路径，帮助他们处理信息。我希望您发现这种视觉流技术很有用。
什么是视觉运动？想象一下电视剧。每一集从一个场景移动到另一个场景。这些场景具有连续性，每个场景之间都有顺序。
不知道你是否去过上海迪士尼，但在迪士尼设计中，运动是一个非常重要的环节和过程。
进入场地：从进入的那一刻起，灯光明亮，入口处采用巨型海盗建筑和石头海盗旗，慢慢地将你带入电影中的场景。
入口：潮湿的墙壁，昏暗的灯光，金币宝箱，腐烂的木头，安静的音乐，瞬间将你带入电影世界。
航行中，骷髅挥舞着双手，伴随着海水的声音，发出令人恐惧的笑声，使我们的感官和听觉紧张。
氛围：黑暗的灯光、悬崖、恶棍和不断增加的水流，瞬间将你带入电影之中。
氛围：水面逐渐平静下来，伴随着巨浪的声音，船体突然失去重力，一艘大船出现在你的面前。
高潮：黑暗的场景突然变亮，露出巨大的海面和一艘移动的船。
高潮：在猛烈的炮火声中，队长和他的士兵们在这里战斗。
结局：音乐和轻柔的海水声将观众慢慢拉回现实。
以上是经典的迪士尼设计，整个路径是听觉和视觉，这同样适用于我们的产品。
最近，生鲜店等新零售开始流行，但为了让这些门店的效益最大化，需要对直接影响门店的客流的每一个细节进行设计。销售。
用户购物路线大致可分为L型、F型、曲线型。如果您有兴趣，可以了解更多。
上图中的丝袜中，哪一款看起来更苗条？
国外一些电商为了诱发用户的购买欲望，在设计中融入了动人的线条，在丝袜上放置了几条竖纹，这样穿起来更容易增加丝袜的购买意愿。使人的腿看起来更长意味着利用线条的垂直连续性来创建具有运动的线条。
现在，哪一个看起来更瘦？
显然一根线是不够的，所以设计师添加了多条线。两款产品中，左边一款看起来比右边一款更薄更长。
哪一个看起来很丰满？
如果你想让大腿变得丰满，可以收集更多的光线。设计模式可以让你的大脑看起来更复杂并传达复杂性，从而欺骗你的大脑。
尽管上面的例子看起来与设计无关，但它们涉及很多心理学和对视觉流的思考。
视线有多少种类型？上面我们介绍了什么是动线，但它实际上是人眼处理信息的顺序。设计需要了解这些用户的视觉模式，以创造更好的体验。
现在回到设计的话题，动线有哪些类型？
1. 对于F型F型
阅读时，读者发现喜欢的内容时会横向阅读，因此用户的浏览顺序在热力图上以F形清晰显示。
2.Z型Z型
从左上角开始到右上角，保持从左到右移动的习惯，眼睛一直搜索到页面的最后部分，即页面的底部。
3. 对角型对角型
基于从右到左阅读习惯的更好的布局格式。这包括四个项目行，因为您已经习惯了从左上角到右下角阅读的习惯。稍后将解释更多细节。
Z型的特点就是字面上的形状沿Z排列。这是一种自然的眼球运动模式，用户从左到右、从上到下扫描。页。
UBER官网的设计是非常典型的Z型引导布局。首先，为了符合用户习惯，公司品牌标识置于左侧，司乘人员登录入口置于右侧。页面上，下方有氛围拍照区，左下方为新用户注册入口。
这是典型的Z 布局，常用于许多网站设计中。
Z 形结构通常突出显示操作按钮而不是以文本为中心，并且通常只需要简单的图像和文本以及主要线条和位置。遵循这个自然法则。
这种结构效果很好，因为当用户在图案上移动时会出现一个虚拟的Z 形状。
salesforce 还使用Z 布局，徽标和操作点从左到右排列，导航菜单及其下方的按钮从左到右排列。
Z 布局在日常网页设计中尤其频繁使用，它们不仅可以传达您的品牌，还可以强调您的内容。
早期的杂志和报纸没有图片、文字或标题，只有长句子和专栏。对于这样无聊的设计，用户通常会按照Z 形进行浏览。
特殊Z 形布局之字形布局
这可以理解为Z的重复排列。用户的路线可能从左到右，也可能从左到右，称为之字形移动线。
如何使用它？我们之前谈到了视觉流线和经典流线Z，但是如何在设计中使用它们呢？
设计网站或海报时，在布局之前问自己几个问题。
您希望用户在打开此页面时注意到哪些信息？您希望他以什么顺序看到您的信息？ Z布局的前提其实很简单。在页面中添加一个Z 并在其中放置重要信息，以便用户可以在扫描路径上看到这些重要元素。
因此，Z视觉流线的核心是必须传达给用户的有价值的信息。
前夕笔记
当用户打开此页面时，我们希望他们关注品牌、注册或登录，并轻松理解文本中的产品信息。
图中的Logo是起点，右上角的按钮是动作点，注册和登录该产品是页面的中心动作。
Z形动线的缺点作为控制用户视线移动的模型，Z形结构也有一个缺点，即用户不断移动，因此容易受到外界因素的影响，并且可以偏离既定轨迹。在查看元素时，照片和明亮的灯光很容易分散您的注意力。如果您计划使用Z 行进线，则必须平衡这些因素，以免它们过多干扰核心功能的运行。否则，就无法实现良好的期望。
总而言之，您需要了解运动线作为控制用户的运动模型，设计中常用的运动线包括Z 线、F 线和对角线运动线。各流线的设计意义及使用场景；Z形流线在网页中经常使用，但在使用之前，首先要确定网站的核心用途，然后将内容组织成流线。稍后我会介绍F-type的动感线条，所以希望大家不要只关注视觉表现，还要关注更先进的设计方法。
#专栏作家#Sky，微信公众号：我们的设计日记（ID：helloskys），人人都是产品经理专栏作家。支付宝体验设计专家、阿里巴巴天猫设计专家，著名互联网公司10年设计经验，丰富的从0到1的产品开发、品牌定位、金融产品、设计规范、运营规范、大规模推广等工作经验。
本文最初发表于人人都是产品经理。它禁止未经授权的复制。
标题图片由Unsplash 根据CC0 许可提供。
本文和图片来自网络，不代表火豚游戏立场，如若侵权请联系我们删除：https://www.huotun.com/game/595366.html