本文介紹在網(wǎng)頁設(shè)計中使用"Z"型模式創(chuàng)建視覺層次結(jié)構(gòu)的理論和實踐。

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

用戶不讀取網(wǎng)頁，他們只是掃描。

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

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

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

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

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

第二步，向頁面的左下側(cè)，創(chuàng)建一條對角線

最后，再次向右轉(zhuǎn)，形成第二條水平線

當(dāng)觀眾的視角以這種模式移動時，它形成一個虛構(gòu)的"Z"字形：

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

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

在哪里使用？

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

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

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

如何使用它？

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

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

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

你想讓他們做什么？

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

創(chuàng)建流程是至關(guān)重要的

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

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

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

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

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

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

建議的Z型布局

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

右曲折模式

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

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

結(jié)論

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

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

原文作者：Nick Babich

譯者：SKYUI