在設(shè)計(jì)中，我們需要不斷精進(jìn)自己的能力，提高看待事物的水平，讓自己更加有說服力，在設(shè)計(jì)師中更加有說話的分量。本文分享了Z型視覺模型，助力你提高設(shè)計(jì)水平，希望對(duì)你有所啟發(fā)。

今天我們來聊聊設(shè)計(jì)中的三大視覺瀏覽模型之二：Z型視覺模型。

一、什么是Z型視覺模型

“z”型視覺模式的布局遵循字母Z的形狀，跟蹤人眼掃描頁面時(shí)的路線——從左到右，從上到下的規(guī)則。

首先，人們從左上角到右上角進(jìn)行掃描，形成一條水平線第二步，向頁面的左下側(cè)，創(chuàng)建一條對(duì)角線最后，再次向右轉(zhuǎn)，形成第二條水平線當(dāng)觀眾的視角以這種模式移動(dòng)時(shí)，它形成一個(gè)虛構(gòu)的“Z”字形：

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

Z型模型與古騰堡圖一樣，設(shè)計(jì)師將把最重要的信息沿圖案的路徑放置，它與古騰堡圖的主要區(qū)別在于Z模式表明觀眾將穿過兩個(gè)休閑區(qū)域。否則，它們?nèi)詫⒃谙嗤牡胤介_始和結(jié)束，并且仍然穿過中間。

二、兩個(gè)Z模型的拓展模型

1. 鋸齒型

多個(gè)Z模型組合成右曲折模型，如果我們繼續(xù)向圖案中添加更多的鋸齒和曲折，隨著Z的對(duì)角線部分越來越淺，最終我們將產(chǎn)生一系列接近水平的左右移動(dòng)。

鋸齒型是Z型布局方式使用最多的，因?yàn)橛脩粢话銜?huì)繼續(xù)向右移動(dòng)，然后稍微向下然后向左移動(dòng)，然后再次開始向右的另一次水平移動(dòng)，這就形成我們自然閱讀大塊文本的方式。

上圖右圖通過引導(dǎo)用戶通過幾個(gè)關(guān)鍵產(chǎn)品功能，并用“了解功能”的入口完成重復(fù)的Z型布局的功能。在此布局中，“了解XX”按鈕起輔助的作用，可幫助讀者進(jìn)入下一個(gè)相關(guān)頁面，而無需閱讀完整內(nèi)容。

2. 金三角圖案

Z模型還會(huì)導(dǎo)致所謂的金三角形圖案出現(xiàn)。如果先進(jìn)行水平和對(duì)角線的第一次運(yùn)動(dòng)，然后關(guān)閉形狀，則最終得到一個(gè)直角三角形，其直角為上/左角。

頁面頂部的三角形區(qū)域?qū)⑹亲畛？吹降膮^(qū)域，該模型表明您需要在其中三個(gè)放置最重要的信息，形成封閉的三角形。

三、Z型視覺模型在設(shè)計(jì)中的應(yīng)用

“Z”型模式的掃描發(fā)生在不以文本為中心的頁面上（對(duì)于文本繁重的頁面，如文章或搜索結(jié)果，最好使用“F”型模式（ F-Pattern））。

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

1. 卡片瀑布流布局

移動(dòng)端經(jīng)常會(huì)遇到雙列的信息流卡片設(shè)計(jì)，眼睛從左向右移動(dòng)，在視線移到右上角后沿著斜對(duì)角向下方走，然后視覺再次向右移動(dòng)，視覺移動(dòng)的軌跡就像字母Z形狀，用戶的視線來回切換。

2. 列表布局

z形閱讀習(xí)慣適用于大面積的可視區(qū)域，需要根據(jù)瀏覽習(xí)慣，把重要的信息快速呈現(xiàn)給用戶，一般在新聞?lì)惍a(chǎn)品中通常會(huì)出現(xiàn)大面積文字，需要通過圖片引導(dǎo)用戶去關(guān)注該模塊，因此根據(jù)z形瀏覽順序可以在對(duì)應(yīng)的視覺點(diǎn)放置圖片或者內(nèi)容。

如圖知乎的文本編排從左側(cè)標(biāo)題到右側(cè)圖片的閱讀順序

3. web端頁面布局

web端“z”型模式很好地解決了以主要圍繞一個(gè)或兩個(gè)主要元素為中心的簡單頁面，或登錄頁面的設(shè)計(jì)視覺路徑。

騰訊文檔的登錄頁面是Z型布局的一個(gè)例子，這樣的布局還有很多，有興趣的小伙伴可以多找?guī)讉€(gè)網(wǎng)頁看看。

總結(jié)

你可以利用Z型模式將重要信息放在視線自然而然能看到的地方，以增加其視覺突出。

應(yīng)用建議：

• 原則是設(shè)計(jì)的基礎(chǔ)，并非一成不變，需要結(jié)合設(shè)計(jì)原則與產(chǎn)品目標(biāo)之間的關(guān)系進(jìn)行合理運(yùn)用；
• 不需要死遵循原則，比如焦點(diǎn)模式下用戶將首先查看頁面上最主要的元素（視覺重量最大的元素或區(qū)域）。順序?qū)⑷Q于這些焦點(diǎn)的相對(duì)權(quán)重以及指示下一步要看的任何視覺提示。
• 想要讓用戶進(jìn)行某種操作時(shí)，正常情況下主要按鈕放在右側(cè)，操作流程暢通，提高效率，需要用戶確認(rèn)思考的場景下，主要按鈕可放在左側(cè)，達(dá)到反復(fù)確認(rèn)的目的。
• 創(chuàng)建層次結(jié)構(gòu)和流程會(huì)顛覆視覺動(dòng)線的模型。