作者: 賈凡，用戶體驗設計師，GE數(shù)字集團
Z型布局是網(wǎng)頁設計中比較常見的一種布局,之所以普遍使用,是因為它可以很容易的滿足一個網(wǎng)站所有的需求: 網(wǎng)站 logo – 網(wǎng)站導航 – 網(wǎng)站內(nèi)容和架構(gòu) – 網(wǎng)站的執(zhí)行按鈕.
當然還有其他常見的網(wǎng)頁設計布局,例如 F型布局,我們會在下一次分享.
關于 Z型布局
很明顯, Z型布局指的就是把信息按照 Z 字來布局.把最想讓用戶先看到的信息放在最上面,眼睛會按照 Z 的路線移動, 最后轉(zhuǎn)移到”執(zhí)行按鈕”上,如下圖所示:
上圖標識的數(shù)字代表了用戶閱讀的順序.轉(zhuǎn)化為網(wǎng)頁設計,表現(xiàn)形式是這樣的:
把 Z型布局附加在網(wǎng)頁設計上:
是不是很簡單?
Z型布局的確不復雜,但是卻很有效的指引用戶的關注點從1移動到4,最后到執(zhí)行按鈕.我們再加一點到這個設計上:
1. 背景分割讓用戶的視線聚焦在設計的框架之內(nèi).
2. 一個有設計感的 logo 在#1 處 抓住用戶眼球
3. 一個彩色的”注冊”按鈕 在#2處,這可以保證我們想要的視覺移動
4. 在屏幕正中間的”幻燈片”控件,這可以將網(wǎng)頁的上部和下部區(qū)分開來,有效引導用戶的視覺往網(wǎng)頁下部移動
5. 為每一個處于#3 處的內(nèi)容標題加上圖標或者背景,以保證用戶的視覺流向可以指向最后的執(zhí)行按鈕
為什么要用Z型布局
Z 型布局當然不會 成為所有網(wǎng)站的布局結(jié)構(gòu),但正如前文提到的,它是一個很好的切入點, 因為它有效串起了有效的網(wǎng)頁設計的4大部分:
1. 品牌 logo
2. 導航架構(gòu)
3. 內(nèi)容
4. 執(zhí)行按鈕
之所有說它有效,是因為很多用戶瀏覽網(wǎng)頁的行為習慣和讀書的行為習慣一樣:從左往右,從上到下. 基于此,你可以做更多的設計擴展.
我們擴展一下,看看其他一些利用 Z 型布局的 網(wǎng)站設計. 值得注意的是, Z 型布局是一個可以適應很多場景的布局,例如 最后的 “執(zhí)行按鈕”有可能會有其他的展現(xiàn)形式(比如一些網(wǎng)站想要引導你去他們的產(chǎn)品目錄而不是注冊); 其中, Z 型布局中的內(nèi)容部分,也可以和案例中的大不相同.
舉個例子:
Facebook看起來很復雜,但仔細看一下不難發(fā)現(xiàn)這是一個很典型的以”下載”按鈕為 結(jié)束點的 Z 型網(wǎng)頁布局.
很明顯, Airbnb這是一個Z 型布局的典型網(wǎng)頁,更多的內(nèi)容可以通過縱向滾動放在首屏以外.
上面的例子可能是一個更加典型的 Z 型結(jié)構(gòu)布局.
其他
通過眼動儀的幫助,很多研究發(fā)現(xiàn) F 型瀏覽布局(下一章會介紹) 在控制瀏覽者 眼動順序上更為有效. 但實際上,除去這些所謂的”規(guī)則”,用戶永遠會 第一眼就看到網(wǎng)頁中最大的,最亮的,對比度最強的部分. 所以要記住: 如果你希望用戶的瀏覽路線跟隨 Z 型布局,那么不要在他的瀏覽路線上設置其他障礙來分散他的注意力.
對于要求很簡單并且需要執(zhí)行操作的網(wǎng)頁來說, Z 型布局是一個很好的設計方案. 試圖用 Z 型設計布局來設計一個很復雜的網(wǎng)站可能不是一個正確的選擇,但是允許 Z 型布局成為網(wǎng)站的基本架構(gòu)可以帶來秩序感,能夠幫助提升網(wǎng)站的轉(zhuǎn)化率.
