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

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

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

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

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

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

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

• 首先，人們從左上角到右上角進(jìn)行掃描，形成一條水平線
• 第二步，向頁(yè)面的左下側(cè)，創(chuàng)建一條對(duì)角線
• 最后，再次向右轉(zhuǎn)，形成第二條水平線

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

“Z”型布局的一個(gè)例子。圖片來(lái)源：?Tutplus

這種模式是有效的，因?yàn)榇蠖鄶?shù)西方讀者會(huì)像掃描一本書一樣掃描你的頁(yè)面——從上到下，從左到右。

在哪里使用？

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

Z型布局在設(shè)計(jì)項(xiàng)目中是真正的閃耀，其中簡(jiǎn)約性和號(hào)召性用語(yǔ)是最重要的原則。 Facebook的登錄頁(yè)面是Z型布局的一個(gè)例子。

如何使用它？

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

• 當(dāng)訪問者在登錄頁(yè)面時(shí)，你希望他們注意什么信息？
• 你希望他們以什么順序來(lái)查看信息？
• 你想讓他們做什么？

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

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

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

• 第1步：第1步是觀眾旅程的起點(diǎn)。這是你的標(biāo)志的黃金地段。
• 第2步：首先沿著Z的頂部放置你希望讀者最先看到的東西。

自然地將視線遵循Z字型的路徑，將次要的“行為召喚”目標(biāo)放在最后。將更多的視覺重量放在第2步的元素中——讓按鈕（或另一個(gè)關(guān)鍵元素）鮮明，吸引用戶注意力并讓其沿著“Z”型路徑引導(dǎo)用戶視線。

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

• 第3步：第3步的目的是引導(dǎo)用戶在第4步進(jìn)行最后的行為召喚。

例如，如果你的網(wǎng)頁(yè)宣傳你想要銷售的某些產(chǎn)品，你希望潛在客戶在看到“立即購(gòu)買”按鈕之前看到可以說(shuō)服他們購(gòu)買的副本。因此，用第3步為他們提供福利或其他有用的信息。

• 第4步：第4步是終點(diǎn)線，它與第3點(diǎn)之間的行應(yīng)包含將用戶的視線推向角落的內(nèi)容。

第4點(diǎn)本身就是你的主要行為召喚的理想場(chǎng)所。

建議的Z型布局

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

右曲折模式

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

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

結(jié)論

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

譯者：SKYUI

原文作者：Nick Babich

原文地址：https://uxplanet.org/z-shaped-pattern-for-reading-web-content-ce1135f92f1c?

本文由 @SKYUI 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。