網(wǎng)頁中的Z型布局設(shè)計(jì)

Z型布局提供了一些不錯(cuò)的東西，這正是它被許多網(wǎng)站采用的原因。

很容易想象每個(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的形狀。“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)鍵元素的簡(jiǎn)單設(shè)計(jì)。以主要圍繞一個(gè)或兩個(gè)主要元素為中心的簡(jiǎn)約頁面或登錄頁面來實(shí)現(xiàn)“Z”型模式，鼓勵(lì)用戶遵循這種方法。

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

如何使用它

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

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

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

你想讓他們做什么?

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

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

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

第1步：第1步是觀眾旅程的起點(diǎn)。這是你的標(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)品，你希望潛在客戶在看到“立即購(gòu)買”按鈕之前看到可以說服他們購(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)來擴(kuò)展這種模式。

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

結(jié)論

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

文章名稱：網(wǎng)頁中的Z型布局設(shè)計(jì)
鏈接地址：http://www.muchs.cn/news7/158957.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站策劃、網(wǎng)站營(yíng)銷、品牌網(wǎng)站設(shè)計(jì)、ChatGPT、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)