每日簡(jiǎn)訊：【設(shè)計(jì)法則】如何精進(jìn)你的設(shè)計(jì)知識(shí)體系之—Z型視覺(jué)模型！

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

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

(資料圖片)

一、什么是Z型視覺(jué)模型

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

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

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

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

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

1. 鋸齒型

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

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

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

2. 金三角圖案

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

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

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

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

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

1. 卡片瀑布流布局

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

2. 列表布局

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

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

3. web端頁(yè)面布局

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

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

總結(jié)

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

應(yīng)用建議：

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

本文由 @三原設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash ，基于 CC0 協(xié)議

關(guān)鍵詞： 設(shè)計(jì)法則如何精進(jìn)你的設(shè)計(jì)知識(shí)體系之—Z型視覺(jué)模型