每一個用戶都會認(rèn)真的閱讀你每一個文字是一件令人興奮的事情。然而，別瞎想了。用戶才不會認(rèn)真閱讀，他們只是瀏覽。
Users don’t read web pages, they scan.
用戶不是閱讀網(wǎng)頁而是瀏覽而已。
瀏覽就是說用戶只會在吸引他們眼球的內(nèi)容下他們才會停下來。
作為設(shè)計師，你可以把控瀏覽你設(shè)計的網(wǎng)頁的用戶的視線。為了創(chuàng)建一個正確的用戶瀏覽視覺路徑，你需要清楚我們眼睛處理信息的方式。本文，我會講解相關(guān)理論，并講解如何使用Z型路徑創(chuàng)建視覺系統(tǒng)。
什么是Z型布局？怎么用？里面的機(jī)制是怎樣的呢？
就如字面含義，z型布局就是按照字母z的形狀。z型追蹤人們?yōu)g覽頁面人眼動的路徑：從左到右，從上到下。
首先，人的視線從上面的左面到上面的右面，形成一條水平線；
其次，底部到頁面右上角，構(gòu)成一條斜線；
最后，從底部左側(cè)出發(fā)形成一條水平線。
這時瀏覽者的視線在這個形狀中移動，形成了個虛擬的“Z
z型視線的運作機(jī)制是由于大部分西方人的閱讀習(xí)慣都是：從左到右，從上到下的。
應(yīng)用場景？
z型瀏覽通常出現(xiàn)在非文本為中心的頁面（針對大量文字的頁面比如文章或者搜索結(jié)果，最好采用F型。）z型對于大量復(fù)制和只有少數(shù)關(guān)鍵元素的界面是比較完美的解決方案。只有一兩個主要元素的極簡頁面或者引導(dǎo)頁可以采用z型布局引導(dǎo)用戶體驗自然的瀏覽方式。
如何使用？
再設(shè)計頁面布局之前，找到下列問題的答案是非常有必要的：
當(dāng)用戶登錄頁面后，什么信息是你想要他們注意的？
你希望他們用怎樣的順序瀏覽信息？
你希望他們做什么？
z型布局的前提實際上會很簡單：將Z印在頁面上。理論上，你期望用戶一開始就看到最重要的信息，然后看到第二重要的信息。所以，重要的元素應(yīng)該沿著瀏覽路徑放置，應(yīng)該在正確的時間給用戶展現(xiàn)正確的信息。
It’s essential to create a flow. 創(chuàng)建視覺流是非常重要的。
流可以將視線按你期望它移動的方向，從一部分引導(dǎo)到另一部分。你可以將視覺重量和視覺方向結(jié)合創(chuàng)建流。創(chuàng)建流時，要記住這些最好的方式：
Point1，用戶視線的起始點，最好放logo；
Point2，放置你期望讀者首先看到的，沿著z的上半部分。眼睛自然而然的遵守z型，所以目標(biāo)是放置第二重要的“call to action”在結(jié)束的位置。加強(qiáng)Point2位置上的元素，這地方的按鈕或其他關(guān)鍵元素使用亮色來吸引用戶注意，引導(dǎo)用戶遵循z型瀏覽順序。
頁面的中心位置：技巧是用用戶干ing去的內(nèi)容填滿這個區(qū)域，并且向下引導(dǎo)他們的視線。比如你可以這個地方放置一個hero image在頁面中心，從而分割頂部和底部的區(qū)域，并且引導(dǎo)用戶視線繼續(xù)沿著z型。
Point3，第三點的目的是將用戶引導(dǎo)到放置CTA的第四點。比如，你的頁面是推銷搞活動的東西，你希望潛在的顧客看到第三點能加強(qiáng)他們的購買欲望，并且為他們點擊“立即購買”的按鈕提供便利。
Point4，是結(jié)束線。在3通往4的線條上的箭頭的位置，應(yīng)該包含能夠推動用戶視線的內(nèi)容到那個角落。Point4是一個最佳放置Call to Action的地方。
下面是一些使用z型布局的例子：
Zig-Zag Pattern 曲線布局
最有趣和有用的事情我們可以將z型結(jié)構(gòu)擴(kuò)展成一系列的z而不是一個大的z。
如下圖所示，這正是dropbox所做的，重復(fù)的z型放置一系列的產(chǎn)品功能介紹，將用戶引導(dǎo)到“免費注冊”的CTA按鈕。在這個布局中的“l(fā)earn more”按鈕是第二重要的CTA按鈕將用戶指向相關(guān)的頁面而不用閱讀全部內(nèi)容。
結(jié)論：
z型布局非常好用，這也是為什么那么多網(wǎng)頁采用它的原因。你可以充分利用z型布局，將重要的信息放在視線自然落到的地方，并且增強(qiáng)視覺強(qiáng)點。
