什麼是 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 演示。