【设计法则】如何精进你的设计知识体系之—Z型视觉模型！

今天我们来聊聊设计中的三大视觉浏览模型之二：Z型视觉模型。

一、什么是Z型视觉模型

“z”型视觉模式的布局遵循字母Z的形状，跟踪人眼扫描页面时的路线——从左到右，从上到下的规则。

首先，人们从左上角到右上角进行扫描，形成一条水平线第二步，向页面的左下侧，创建一条对角线最后，再次向右转，形成第二条水平线当观众的视角以这种模式移动时，它形成一个虚构的“Z”字形：

“Z”型布局的一个例子。图片来源：Tutplus

Z型模型与古腾堡图一样，设计师将把最重要的信息沿图案的路径放置，它与古腾堡图的主要区别在于Z模式表明观众将穿过两个休闲区域。否则，它们仍将在相同的地方开始和结束，并且仍然穿过中间。

二、两个Z模型的拓展模型

1. 锯齿型

多个Z模型组合成右曲折模型，如果我们继续向图案中添加更多的锯齿和曲折，随着Z的对角线部分越来越浅，最终我们将产生一系列接近水平的左右移动。

锯齿型是Z型布局方式使用最多的，因为用户一般会继续向右移动，然后稍微向下然后向左移动，然后再次开始向右的另一次水平移动，这就形成我们自然阅读大块文本的方式。

上图右图通过引导用户通过几个关键产品功能，并用“了解功能”的入口完成重复的Z型布局的功能。在此布局中，“了解XX”按钮起辅助的作用，可帮助读者进入下一个相关页面，而无需阅读完整内容。

2. 金三角图案

Z模型还会导致所谓的金三角形图案出现。如果先进行水平和对角线的第一次运动，然后关闭形状，则最终得到一个直角三角形，其直角为上/左角。

页面顶部的三角形区域将是最常看到的区域，该模型表明您需要在其中三个放置最重要的信息，形成封闭的三角形。

三、Z型视觉模型在设计中的应用

“Z”型模式的扫描发生在不以文本为中心的页面上（对于文本繁重的页面，如文章或搜索结果，最好使用“F”型模式（ F-Pattern））。

Z型布局的前提其实很简单：在页面上加上字母Z。理想情况下，你希望人们首先查看最重要的信息，再次查看第二个重要的信息。因此，重要的元素应该沿着扫描路径放置。

1. 卡片瀑布流布局

移动端经常会遇到双列的信息流卡片设计，眼睛从左向右移动，在视线移到右上角后沿着斜对角向下方走，然后视觉再次向右移动，视觉移动的轨迹就像字母Z形状，用户的视线来回切换。

2. 列表布局

z形阅读习惯适用于大面积的可视区域，需要根据浏览习惯，把重要的信息快速呈现给用户，一般在新闻类产品中通常会出现大面积文字，需要通过图片引导用户去关注该模块，因此根据z形浏览顺序可以在对应的视觉点放置图片或者内容。

如图知乎的文本编排从左侧标题到右侧图片的阅读顺序

3. web端页面布局

web端“z”型模式很好地解决了以主要围绕一个或两个主要元素为中心的简单页面，或登录页面的设计视觉路径。

腾讯文档的登录页面是Z型布局的一个例子，这样的布局还有很多，有兴趣的小伙伴可以多找几个网页看看。

总结

你可以利用Z型模式将重要信息放在视线自然而然能看到的地方，以增加其视觉突出。

应用建议：

• 原则是设计的基础，并非一成不变，需要结合设计原则与产品目标之间的关系进行合理运用；
• 不需要死遵循原则，比如焦点模式下用户将首先查看页面上最主要的元素（视觉重量最大的元素或区域）。顺序将取决于这些焦点的相对权重以及指示下一步要看的任何视觉提示。
• 想要让用户进行某种操作时，正常情况下主要按钮放在右侧，操作流程畅通，提高效率，需要用户确认思考的场景下，主要按钮可放在左侧，达到反复确认的目的。
• 创建层次结构和流程会颠覆视觉动线的模型。

本文作者 @三原设计 。

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！