瀏覽網(wǎng)站UI視覺規(guī)律：訪客瀏覽頁面的視覺習(xí)慣(F模式和Z模式)

一個(gè)藝術(shù)大師除了要具備創(chuàng)造性外，還應(yīng)該考慮一些細(xì)節(jié)，比如文字、顏色、大小、應(yīng)該包含什么內(nèi)容，也許更重要的是，應(yīng)該放棄什么。這并不容易，所以我們欽佩達(dá)·芬奇和梵高這樣的大師。Web UI設(shè)計(jì)師也應(yīng)該這樣做。網(wǎng)站也是視覺藝術(shù)的一種形式。在其獨(dú)特的方式上，它應(yīng)該遵循許多傳統(tǒng)藝術(shù)形式的規(guī)則。這是一門美學(xué)科學(xué)，夾雜著一些商業(yè)規(guī)則。與眾不同的網(wǎng)站界面一定會(huì)讓人感到?jīng)]有壓力和迷人。

我們首先看看視覺層次是什么，它是如何創(chuàng)建的，然后我們理解它如何在視覺的自然運(yùn)動(dòng)中發(fā)揮作用。

通常網(wǎng)站的訪問者不會(huì)將網(wǎng)頁內(nèi)容全部閱讀，而是采取避重就輕的原則，閱讀一些醒目的內(nèi)容或者感興趣的信息。因此在進(jìn)行網(wǎng)頁布局前，首先要了解一下網(wǎng)站訪客的瀏覽模式。根據(jù)人眼視覺習(xí)慣，訪客在瀏覽網(wǎng)頁時(shí)主要分為F模式和Z模式兩種方式。

1. F模式

F模式是指用戶沿著左側(cè)垂直瀏覽而下，先去尋找頁面中每個(gè)段落開頭的興趣點(diǎn)，如果發(fā)現(xiàn)了感興趣的點(diǎn)，用戶就會(huì)從該處開始沿水平線方向的閱讀。最終結(jié)果就是用戶的視線呈F型。

值得一提的是，通常F模式會(huì)出現(xiàn)在一些以文字為主的網(wǎng)頁中，例如博客、論壇等。用戶的級(jí)少逐字閱讀文字，因此初始段落，副標(biāo)題和要點(diǎn)都要保持醒目。

2. Z模式

Z模式是指用戶的瀏覽視線沿著從左到右自上而下的閱讀方式。用戶首先關(guān)注的頁頭水平方向的內(nèi)容，當(dāng)視線抵達(dá)尾部時(shí)則又重復(fù)遵循著水平方向從左到右的習(xí)慣模式，人眼以這種模式移動(dòng)時(shí)，瀏覽視線形成了一個(gè)虛構(gòu)的“Z”形。

Z模式幾乎可以適用到任何的網(wǎng)頁交互，能夠?qū)⒅匾畔⒆匀欢坏赝怀觥?Z模式的優(yōu)點(diǎn)就是簡(jiǎn)單，簡(jiǎn)化布局可以增加轉(zhuǎn)化率。

猜你喜歡：

交互設(shè)計(jì)有什么原則?

設(shè)計(jì)原則有哪些？盤點(diǎn)那些深入人心的設(shè)計(jì)原則

UI設(shè)計(jì)是什么?UI設(shè)計(jì)師有哪些職能？

傳智教育UI設(shè)計(jì)課程