Z-layout提供了一些很好的东西，这就是许多网站使用它的原因。

很容易想象每个用户都兴奋地阅读你写的每一封信。事实上，他们不是在阅读而是在扫描。

　用户不读取网页，他们只是扫描。

扫描意味着只有当他们的视角集中于某些东西时才会停止阅读。

作为设计师，您可以很好地控制人们如何看待您设计的网页外观。为了为访问者创建正确的路径，您需要了解我们的眼睛如何处理信息。在本文中，我将介绍使用“Z”创建视觉层次结构的理论和实践。模型“在网页设计中。

1

　　什么是“Z”型模式

　　它的工作原理是什么

正如您所料，Z&rdquo的布局;模特遵循字母Z的形状。“Z”模型设计跟踪人眼扫描页面时的路线——从左到右，从上到下：

首先，人们从左上角扫描到右上角以形成水平线，并在页面左下方创建一条对角线。

最后，再次右转以形成第二条水平线。

当观众的视角以这种模式移动时，它形成一个虚构的“Z”字形：

“ Z”的布局的一个例子。图片来源：Tutplus是有效的，因为大多数西方读者像书一样扫描你的页面——从上到下，从左到右。

2

　　在哪里使用

&ndquo; Z”类型扫描发生在以文本为中心的页面上（对于文本较重的页面，例如文章或搜索结果，最好使用F&Pquon; F-Pattern）。这使得“Z&rquo”模型成为最小化复制的简单设计和需要看到的几个关键元素的良好解决方案。 “Z&rdquo”模型在以一个或两个主要元素为中心的简约页面或登录页面中实现，鼓励用户遵循这种方法。

Z形布局在设计项目中真正闪耀，简约和号召性用语是最重要的原则。 Facebook的登录页面是Z形布局的一个例子。

　3

　　如何使用它

在开始设计页面布局之前，请先找到以下问题的答案：

您希望他们在登录页面时注意哪些信息？

您希望他们以什么顺序查看信息？

你想让他们做什么？

Z-layout的前提实际上非常简单：在页面上添加字母Z.理想情况下，您希望人们首先查看最重要的信息，然后再次查看第二个重要信息。因此，应沿扫描路径放置重要元素，并应在适当的时间向访问者提供正确的信息。

创建流程是至关重要的

该过程是将您的视图从页面的一个部分引导到您想要移动的方向。创建一个结合了视觉重量和视觉方向的过程。创建流程时需要遵循一些最佳做法：

第1步：第1步是观众旅程的起点。这是您的徽标的主要位置。

第2步：首先，放置你希望读者首先看到Z的顶部。当然，视线遵循之字形路径，次要的“行为调用”放在最后。在步骤2的元素中加入更多的视觉重量。——使按钮（或其他关键元素）不同，吸引用户的注意力并让他们遵循“Z”路径。

页面的中心区域：该区域用于填充用户感兴趣的内容，同时将其视线向下延伸到下一行。例如，您可以将英雄图像放置在页面的中心，以分隔顶部和底部，并沿Z路径引导用户。

第3步：步骤3的目的是引导用户在步骤4中进行最终的行为召唤。例如，如果您的页面宣传您要销售的某些产品，您希望潜在客户看到他们可以说服的副本在他们看到“立即购买”按钮之前。因此，请使用步骤3为他们提供福利或其他有用信息。

第4步：第4步是终点线，它与第3点之间的线应该包含将用户的视线推到角落的内容。第4点本身就是一个称呼你主要行动的理想场所。

建议的Z形布局

下面你可以看到Basecamp和Evernote的两个Z-layout的好例子。

4右曲折模式

关于Z模式的有趣和有用的是，我们可以看到更多的是Z系列延伸而不是大型Z形机芯来扩展这种模式。

正如您在下面看到的，这正是Dropbox通过引导用户完成几个关键产品功能并使用“免费注册”号召性用语按钮来完成重复的Z-layout所做的事情。在此布局中，“了解更多”按钮充当辅助呼叫按钮，以帮助读者导航到下一个相关页面，而无需阅读完整副本。

　结论

Z-layout提供了一些很好的东西，这就是许多网站使用它的原因。您可以使用Z模式将重要信息放在可以自然地看到视线的地方，以增加其视觉突出性。请记住首先传达信息。

作者：？尼克巴比奇

来源：开始课程产品100