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

今天我們來聊聊設計中的三大視覺瀏覽模型之二：Z型視覺模型。

一、什么是Z型視覺模型

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

首先，人們從左上角到右上角進行掃描，形成一條水平線第二步，向頁面的左下側，創建一條對角線最后，再次向右轉，形成第二條水平線當觀眾的視角以這種模式移動時，它形成一個虛構的“Z”字形：

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

Z型模型與古騰堡圖一樣，設計師將把最重要的信息沿圖案的路徑放置，它與古騰堡圖的主要區別在于Z模式表明觀眾將穿過兩個休閑區域。否則，它們仍將在相同的地方開始和結束，并且仍然穿過中間。

二、兩個Z模型的拓展模型

1. 鋸齒型

多個Z模型組合成右曲折模型，如果我們繼續向圖案中添加更多的鋸齒和曲折，隨著Z的對角線部分越來越淺，最終我們將產生一系列接近水平的左右移動。

鋸齒型是Z型布局方式使用最多的，因為用戶一般會繼續向右移動，然后稍微向下然后向左移動，然后再次開始向右的另一次水平移動，這就形成我們自然閱讀大塊文本的方式。

上圖右圖通過引導用戶通過幾個關鍵產品功能，并用“了解功能”的入口完成重復的Z型布局的功能。在此布局中，“了解XX”按鈕起輔助的作用，可幫助讀者進入下一個相關頁面，而無需閱讀完整內容。

2. 金三角圖案

Z模型還會導致所謂的金三角形圖案出現。如果先進行水平和對角線的第一次運動，然后關閉形狀，則最終得到一個直角三角形，其直角為上/左角。

頁面頂部的三角形區域將是最?？吹降膮^域，該模型表明您需要在其中三個放置最重要的信息，形成封閉的三角形。

三、Z型視覺模型在設計中的應用

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

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

1. 卡片瀑布流布局

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

2. 列表布局

z形閱讀習慣適用于大面積的可視區域，需要根據瀏覽習慣，把重要的信息快速呈現給用戶，一般在新聞類產品中通常會出現大面積文字，需要通過圖片引導用戶去關注該模塊，因此根據z形瀏覽順序可以在對應的視覺點放置圖片或者內容。

如圖知乎的文本編排從左側標題到右側圖片的閱讀順序

3. web端頁面布局

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

騰訊文檔的登錄頁面是Z型布局的一個例子，這樣的布局還有很多，有興趣的小伙伴可以多找幾個網頁看看。

總結

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

應用建議：

• 原則是設計的基礎，并非一成不變，需要結合設計原則與產品目標之間的關系進行合理運用；
• 不需要死遵循原則，比如焦點模式下用戶將首先查看頁面上最主要的元素（視覺重量最大的元素或區域）。順序將取決于這些焦點的相對權重以及指示下一步要看的任何視覺提示。
• 想要讓用戶進行某種操作時，正常情況下主要按鈕放在右側，操作流程暢通，提高效率，需要用戶確認思考的場景下，主要按鈕可放在左側，達到反復確認的目的。
• 創建層次結構和流程會顛覆視覺動線的模型。