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

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

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

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

1. F模式

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

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

2. Z模式

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

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

猜你喜歡：

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

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

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

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