每一個(gè)用戶都會認(rèn)真的閱讀你每一個(gè)文字是一件令人興奮的事情。然而筛婉，別瞎想了户侥。用戶才不會認(rèn)真閱讀，他們只是瀏覽硕糊。
Users don’t read web pages, they scan.
用戶不是閱讀網(wǎng)頁而是瀏覽而已院水。
瀏覽就是說用戶只會在吸引他們眼球的內(nèi)容下他們才會停下來腊徙。
作為設(shè)計(jì)師，你可以把控瀏覽你設(shè)計(jì)的網(wǎng)頁的用戶的視線檬某。為了創(chuàng)建一個(gè)正確的用戶瀏覽視覺路徑撬腾，你需要清楚我們眼睛處理信息的方式。本文恢恼，我會講解相關(guān)理論民傻，并講解如何使用Z型路徑創(chuàng)建視覺系統(tǒng)。
什么是Z型布局场斑？怎么用漓踢？里面的機(jī)制是怎樣的呢？
就如字面含義漏隐，z型布局就是按照字母z的形狀喧半。z型追蹤人們?yōu)g覽頁面人眼動的路徑：從左到右，從上到下锁保。
首先薯酝，人的視線從上面的左面到上面的右面，形成一條水平線爽柒；
其次吴菠，底部到頁面右上角，構(gòu)成一條斜線浩村；
最后做葵，從底部左側(cè)出發(fā)形成一條水平線。
這時(shí)瀏覽者的視線在這個(gè)形狀中移動心墅，形成了個(gè)虛擬的“Z
z型視線的運(yùn)作機(jī)制是由于大部分西方人的閱讀習(xí)慣都是：從左到右酿矢，從上到下的。
應(yīng)用場景怎燥？
z型瀏覽通常出現(xiàn)在非文本為中心的頁面（針對大量文字的頁面比如文章或者搜索結(jié)果瘫筐，最好采用F型。）z型對于大量復(fù)制和只有少數(shù)關(guān)鍵元素的界面是比較完美的解決方案铐姚。只有一兩個(gè)主要元素的極簡頁面或者引導(dǎo)頁可以采用z型布局引導(dǎo)用戶體驗(yàn)自然的瀏覽方式策肝。
如何使用？
再設(shè)計(jì)頁面布局之前隐绵，找到下列問題的答案是非常有必要的：
當(dāng)用戶登錄頁面后之众，什么信息是你想要他們注意的？
你希望他們用怎樣的順序?yàn)g覽信息依许？
你希望他們做什么棺禾？
z型布局的前提實(shí)際上會很簡單：將Z印在頁面上。理論上峭跳，你期望用戶一開始就看到最重要的信息膘婶，然后看到第二重要的信息缺前。所以，重要的元素應(yīng)該沿著瀏覽路徑放置竣付，應(yīng)該在正確的時(shí)間給用戶展現(xiàn)正確的信息诡延。
It’s essential to create a flow. 創(chuàng)建視覺流是非常重要的滞欠。
流可以將視線按你期望它移動的方向古胆，從一部分引導(dǎo)到另一部分。你可以將視覺重量和視覺方向結(jié)合創(chuàng)建流筛璧。創(chuàng)建流時(shí)逸绎，要記住這些最好的方式：
Point1，用戶視線的起始點(diǎn)夭谤，最好放logo棺牧；
Point2，放置你期望讀者首先看到的朗儒，沿著z的上半部分颊乘。眼睛自然而然的遵守z型，所以目標(biāo)是放置第二重要的“call to action”在結(jié)束的位置醉锄。加強(qiáng)Point2位置上的元素乏悄，這地方的按鈕或其他關(guān)鍵元素使用亮色來吸引用戶注意，引導(dǎo)用戶遵循z型瀏覽順序恳不。
頁面的中心位置：技巧是用用戶干ing去的內(nèi)容填滿這個(gè)區(qū)域檩小，并且向下引導(dǎo)他們的視線。比如你可以這個(gè)地方放置一個(gè)hero image在頁面中心烟勋，從而分割頂部和底部的區(qū)域规求，并且引導(dǎo)用戶視線繼續(xù)沿著z型。
Point3卵惦，第三點(diǎn)的目的是將用戶引導(dǎo)到放置CTA的第四點(diǎn)阻肿。比如，你的頁面是推銷搞活動的東西沮尿，你希望潛在的顧客看到第三點(diǎn)能加強(qiáng)他們的購買欲望丛塌，并且為他們點(diǎn)擊“立即購買”的按鈕提供便利。
Point4蛹找，是結(jié)束線姨伤。在3通往4的線條上的箭頭的位置，應(yīng)該包含能夠推動用戶視線的內(nèi)容到那個(gè)角落庸疾。Point4是一個(gè)最佳放置Call to Action的地方乍楚。
下面是一些使用z型布局的例子：
Zig-Zag Pattern 曲線布局
最有趣和有用的事情我們可以將z型結(jié)構(gòu)擴(kuò)展成一系列的z而不是一個(gè)大的z。
如下圖所示届慈，這正是dropbox所做的徒溪，重復(fù)的z型放置一系列的產(chǎn)品功能介紹忿偷，將用戶引導(dǎo)到“免費(fèi)注冊”的CTA按鈕。在這個(gè)布局中的“l(fā)earn more”按鈕是第二重要的CTA按鈕將用戶指向相關(guān)的頁面而不用閱讀全部內(nèi)容臊泌。
結(jié)論：
z型布局非常好用鲤桥，這也是為什么那么多網(wǎng)頁采用它的原因。你可以充分利用z型布局渠概，將重要的信息放在視線自然落到的地方茶凳，并且增強(qiáng)視覺強(qiáng)點(diǎn)。
