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

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

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

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

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

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

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

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

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

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

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

在哪里使用？

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

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

如何使用它？

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

當(dāng)拜候者在登錄頁面時(shí)，你希望他們注意什么信息？你希望他們以什么挨次來查看信息？你想讓他們做什么？

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

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

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

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

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

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

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

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

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

第4點(diǎn)自己就是你的主要行為召喚的抱負(fù)場(chǎng)所。

建議的Z型布局

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

右曲折模式

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

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

結(jié)論

標(biāo)簽：林芝 東營 鹽城 九江 烏魯木齊