本文介紹在網頁設計中使用"Z"型模式創建視覺層次結構的理論和實踐。

很容易想象每個用戶在興奮地閱讀你寫的每封信時。其實他們不是在閱讀而是在掃描。

用戶不讀取網頁，他們只是掃描。

掃描意味著只有當他們的視角集中在一些事物上時才會停下閱讀。

作為一名設計師，你可以很好地控制人們在查看你所設計的網頁的外觀。為了創造出訪客眼睛要遵循的正確途徑，你需要了解我們的眼睛是如何處理信息的。在本文中，我將介紹在網頁設計中使用"Z"型模式創建視覺層次結構的理論和實踐。

什么是"Z"型模式，它的工作原理是什么？

正如你所期望的，"z"型模式的布局遵循字母Z的形狀。"Z"型模式的設計跟蹤了人眼掃描頁面時的路線——從左到右，從上到下：

首先，人們從左上角到右上角進行掃描，形成一條水平線

第二步，向頁面的左下側，創建一條對角線

最后，再次向右轉，形成第二條水平線

當觀眾的視角以這種模式移動時，它形成一個虛構的"Z"字形：

"Z"型布局的一個例子。圖片來源： Tutplus

這種模式是有效的，因為大多數西方讀者會像掃描一本書一樣掃描你的頁面——從上到下，從左到右。

在哪里使用？

"Z"型模式的掃描發生在不以文本為中心的頁面上（對于文本繁重的頁面，如文章或搜索結果，最好使用"F"型模式（ F-Pattern））。這使得"z"型模式很好地解決了最小化復制及需要被看到的幾個關鍵元素的簡單設計。以主要圍繞一個或兩個主要元素為中心的簡約頁面或登錄頁面來實現"Z"型模式，鼓勵用戶遵循這種方法。

Z型布局在設計項目中是真正的閃耀，其中簡約性和號召性用語是最重要的原則。

Facebook的登錄頁面是Z型布局的一個例子。

如何使用它？

在開始設計頁面布局之前，首先要查找以下問題的答案：

當訪問者在登錄頁面時，你希望他們注意什么信息？

你希望他們以什么順序來查看信息？

你想讓他們做什么？

Z型布局的前提其實很簡單：在頁面上加上字母Z。理想情況下，你希望人們首先查看最重要的信息，再次查看第二個重要的信息。因此，重要的元素應該沿著掃描路徑放置，訪客應在正確的時間被提供正確的信息。

創建流程是至關重要的

流程是將你的視線從一個頁面的一部分引導到另一個你想要移動的方向。 通過視覺重量和視覺方向的組合創建流程。創建流程時要注意以下幾個最佳做法：

第1步：第1步是觀眾旅程的起點。這是你的標志的黃金地段。

第2步：首先沿著Z的頂部放置你希望讀者最先看到的東西。自然地將視線遵循Z字型的路徑，將次要的"行為召喚"目標放在最后。將更多的視覺重量放在第2步的元素中——讓按鈕（或另一個關鍵元素）鮮明，吸引用戶注意力并讓其沿著"Z"型路徑引導用戶視線。

頁面的中心區域：這個區域是來填補用戶感興趣的內容，同時將其視線向下延伸到下一行。例如，你可以將英雄圖像放置在頁面的中央，以分離頂部和底部，并沿Z路徑引導用戶視線。

第3步：第3步的目的是引導用戶在第4步進行最后的行為召喚。例如，如果你的網頁宣傳你想要銷售的某些產品，你希望潛在客戶在看到"立即購買"按鈕之前看到可以說服他們購買的副本。因此，用第3步為他們提供福利或其他有用的信息。

第4步：第4步是終點線，它與第3點之間的行應包含將用戶的視線推向角落的內容。第4點本身就是你的主要行為召喚的理想場所。

建議的Z型布局

在下面可以看到Basecamp和Evernote的兩個Z型布局很好的例子。

右曲折模式

關于Z型模式的有趣且有用的是，我們可以更多地看到它是作為一個Z型的系列在移動而不是一個大的Z型移動來擴展這種模式。

正如你可以在下面看到的，這正是Dropbox通過引導用戶通過幾個關鍵產品功能，并用"免費注冊"號召性用語按鈕完成他們重復的Z型布局的功能。 在此布局中，"了解更多"按鈕起輔助呼叫按鈕的作用，可幫助讀者進入下一個相關頁面，而無需閱讀完整副本。

結論

Z型布局提供了一些不錯的東西，這正是它被許多網站采用的原因。 你可以利用Z型模式將重要信息放在視線自然而然能看到的地方，以增加其視覺突出。記住要先溝通信息。

譯文地址：http://www.ui.cn/detail/252379.html

原文作者：Nick Babich

譯者：SKYUI