什么是 Z 图案布局以及何时使用它？

已发表: 2017-01-27

与网页一样，点击后登录页面应始终遵循某种有组织的视觉层次结构。 很有可能，您已经知道这一点，但值得重申。 您可以做的任何事情来影响您的观众专注于您希望他们注意到的内容，这几乎就是游戏的名称。

优秀的设计师了解用户如何在线查看和处理信息。 这些知识为他们的设计决策提供信息，并引导他们以他们会注意到的方式放置最重要的元素。 如果一切正常，设计将吸引游客采取所需的行动。

优秀的设计师了解用户如何在线查看和处理信息。

点击推文

设计师影响用户并引起对页面最重要元素的注意的主要方式之一是使用 Z 模式设计页面。

什么是 Z 模式？

Z-Pattern 设计追踪人眼在阅读时行进的路线——从左到右，从上到下：

  • 首先，人们从左上角到右上角扫描，形成一条假想的水平线
  • 接下来，向下和向可见页面的左侧，创建一条假想的对角线
  • 最后，再次回到右侧，形成第二条水平线

当观众的眼睛以这种模式移动时，它会形成一个假想的“Z”形：

此图向营销人员展示了如何使用 Z 模式设计创建点击后登录页面以增加转化率。

需要注意的是，Z-Pattern 设计不需要符合传统的 Z-Shape，并且沿该模式的 Z-Angles 的数量可能会有所不同。

Z 模式如何应用于点击后登录页面

使用 Z 布局创建网页有助于创建人们可能会遵循的视觉层次结构，使其成为点击后登录页面设计的完美布局选项。

但是为什么要使用 Z-Pattern 而不是 F-Pattern 设计页面呢？

虽然 F-Layout 往往更适合内容密集的页面，但 Z-Layout 主要用于副本最少的页面。 从本质上讲，Z-Pattern 更适合以简单性为重中之重且主要内容是 CTA 的页面。

设计时考虑到 Z 布局：

  • 顶部水平线应包括您希望观众首先关注的主要组件
  • 对角线应包含构成您的号召性用语的任何信息
  • 底部的水平线应在图案的某个点突出显示 CTA

根据 Z 模式布局创建点击后登录页面可以带来更多转化，因为您可以控制查看者眼睛的移动位置。

让我们通过检查一些点击后登录页面示例来更多地了解 Z 模式设计。

请记住，对于较短的点击后登录页面，我们显示了整个页面。 但是，对于较长的页面，我们只显示在首屏。 您可能需要点击进入每个点击后登录页面才能看到我们讨论的一些要点。 此外，列出的一些示例可能是使用不同于下面显示的版本的替代版本对其页面进行 A/B 测试。

忽略 Z 模式的点击后登录页面

下面的交通灯媒体点击后登录页面不遵循 Z 模式。 然而，它确实提供了一个有意识的流程，它是一个干净、有组织的页面，说服观众的眼睛沿着页面中间的预期路径到达 CTA 按钮：

此图向营销人员展示了如何使用 Z-Pattern 布局创建视觉层次结构以增加转化率。

他们很聪明地使用下面的变体对页面进行 A/B 测试。 这一次，他们遵循 Z-Pattern 布局：

这张图片向营销人员展示了 Traffic Light Media 如何使用 Z-Pattern 布局让访问者专注于转换。

看到这种变化后，Z-Path 如下：

  1. 白色标题首先在较暗的背景下引起注意，即使公司徽标列在页面的较高位置。
  2. 从那里，路径扫描到表单标题，因为它就在页面标题旁边，并且与它的白色背景形成鲜明对比。 这是第一个 Z-Pattern 角度。
  3. 接下来，图案设计继续斜向页面左侧到黄色的“发现机会”副本。
  4. 沿着路径走，注意力会回到右侧并集中在橙色的 CTA 按钮上。

请记住，这些眼球运动是主观的，并非所有用户都会以相同的方式浏览页面。 要记住的关键是让您的观众专注于您希望他们遵循的路径并说服他们转换您的 CTA。

现在，让我们检查一些遵循 Z 模式布局的点击后登录页面。

遵循 Z 模式的点击后登录页面

生命锁

这张图片向营销人员展示了 LifeLock 如何使用 Z 模式设计他们的点击后登录页面，以让访问者专注于转换。

这个 LifeLock 点击后页面遵循 Z 模式，但没有以 CTA 结束：

  1. 访问者可能会从标题开始，因为它的字体比副本的其余部分更大，并且与深色背景形成鲜明对比。
  2. 向右扫描，观看者将专注于男人的脸，这是第一个 Z 角。
  3. 接下来，视线将在第二个转折点斜向移动到鲜红色的 CTA 按钮。
  4. 最后，焦点将转向智能手机图像。

就像 Z-Pattern 设计不能形成传统的“Z”一样，重要的是要认识到 Z-Pattern 角度不需要CTA。 如果 CTA 位于转弯处就更好了，因为这是观众的眼睛最终会到达的地方。

CallFire

这张图片向营销人员展示了 CallFire 如何使用 Z-Pattern 点击后登录页面设计让访问者专注于转换。

这个 CallFire 点击后页面是另一个没有形成传统 Z 的例子，但模式仍然很明显：

  1. 浏览者将从页面标题开始，因为它比副本的其余部分大。
  2. 从这里，访问者将向下和向右扫描图像，重点关注表单和 CTA 按钮 - 创建第一个 Z 角。
  3. 接下来，观众向左移动到视频——创建第二个 Z 角。
  4. 最后，观众的眼睛将继续穿过页面到图像和三个步骤。

甲骨文

这张图片向营销人员展示了 Oracle 如何在其点击后登录页面上使用 Z-Pattern 布局来让访问者专注于转换。

Oracle 的页面是另一个不遵循传统 Z 的示例，但路径指向末尾的 CTA：

  1. 页面访问者可能会从标题开始，因为它是页面上最大的字体，并且易于阅读周围的所有空白。
  2. 接下来，它们将水平移动到右侧的图像。
  3. 从这里开始，人眼自然会流向图形左侧。
  4. 最后，观众的眼睛会扫过页面底部到 Z-Layout 结束的 CTA。

Fleetmatics

这张图片向营销人员展示了 Fleetmatics 如何使用具有许多 Z 角度的点击后登录页面来形成 Z 模式。

此 Fleetmatics 点击后登录页面包含多个 Z 角度的 CTA：

  1. 很有可能，左上角的标题和副标题会首先吸引观众的注意力。
  2. 从那里，访问者将向右扫描以查看背景视频。
  3. 创建 Z 形中的第一个对角线，访问者可能会向左向下扫描第一个橙色 CTA 按钮。
  4. 接下来，用户的目光将穿过客户徽章，在项目符号副本中来回切换到第二个橙色 CTA 按钮。
  5. 最后，Z-Layout 继续向左返回图像并再次返回到第三个 CTA 按钮。

该图案在页面下方继续延伸，创建更多 Z 角。 而且，通过多次加入 CTA，观众将很难忽略它们并被说服点击和转换。

使用 Z-Pattern 布局设计下一页

上面讨论的每个品牌都在将点击后登录页面元素放置在 Z 模式布局方面做得很好。 在此过程中，它们有效地影响了观众的视线，并将他们引导至 CTA。

考虑到这些示例，并让您的访问者更加关注转化，请使用 Instapage 设计您的下一个点击后登录页面。 立即注册 Instapage Enterprise 演示。