建立清楚的視覺(jué)層次和明顯標識可以點(diǎn)擊的區域發(fā)布者：本站     時(shí)間：2020-05-23 11:05:06

1.忙碌——大部分用戶(hù)會(huì )花極少的時(shí)間來(lái)閱讀極多的頁(yè)面，為了提高效率，他們對于大部分的頁(yè)面會(huì )采取掃描的方式，匆匆掠過(guò)。他們不可能也沒(méi)有時(shí)間去閱讀互聯(lián)網(wǎng)帶給他們的所有信息。

2.目標明確——大部分用戶(hù)在某一時(shí)間內都是帶著(zhù)目標去瀏覽頁(yè)面的，他們要么想查找一下資料，要么想網(wǎng)購一份商品，要么想閱讀一下時(shí)事，要么想找一下自己感興趣的東西，要么…因此，掃描才是找到他們想要的內容的方式。

3.習慣——也正是因為用戶(hù)總是忙碌的、用戶(hù)總是目標明確的，在報紙上，在雜志上，在書(shū)籍中，在互聯(lián)網(wǎng)上，用戶(hù)總是習慣著(zhù)掃描，習慣著(zhù)尋找他們想要的和感興趣的。

因此，為了設計更有效的頁(yè)面，我們需要為掃描而設計，接下來(lái)，需要了解以?huà)呙铻榛A的設計需要的一些要素。

我這里主要講的是前面2點(diǎn)

1.建立清楚的視覺(jué)層次 

用戶(hù)每天都會(huì )對視覺(jué)層次進(jìn)行分解，篩選出需要的東西，這樣迫使用戶(hù)不斷去思考。好的視覺(jué)層次通過(guò)預先處理，用一種用戶(hù)能快速理解的方式對頁(yè)面進(jìn)行組織并區分優(yōu)先級，從而減少了用戶(hù)的工作。假如一個(gè)頁(yè)面沒(méi)有清楚的視覺(jué)層次，所有內容都看起來(lái)一樣重要，勢必會(huì )降低用戶(hù)掃描速度。

那么，怎樣建立清楚的視覺(jué)層次？

a.越重要的部分越突出

例如

這個(gè)頁(yè)面最重要的banner、導航、登陸框、頭圖以及按鈕設計師會(huì )刻意讓他們凸顯出來(lái)。一般利用大小對比、色彩反差、質(zhì)感、線(xiàn)條或形狀輔助等這些方式，使重要的內容突出來(lái)，一般采用多種形式，根據內容重要程度進(jìn)行劃分。

以下的頁(yè)面也是如此。

b.邏輯上相關(guān)的部分，視覺(jué)上也相關(guān)

相近的內容形成一組，放在同一個(gè)標題下，采用統一的視覺(jué)樣式，或者統一放置在一個(gè)明確定義的區域內。例如：

c.邏輯上包含的部分，視覺(jué)上也包含 

例如：“圖片中心”下面的幾塊內容之所以看上去是屬于它的，是因為從視覺(jué)上看就是包含的關(guān)系、主欄目條和下面的小標題欄相比，有明顯的主次關(guān)系。

2.明顯標識可以點(diǎn)擊的區域

明顯標識的目的也是為了用戶(hù)掃描，試想用戶(hù)在瀏覽頁(yè)面的時(shí)候，錯過(guò)了我們?yōu)樗臏蕚涞拇蟛?，那是多么遺憾的事情。網(wǎng)站的點(diǎn)擊率也不會(huì )高，一個(gè)清晰可見(jiàn)的點(diǎn)擊區域是很重要的。在網(wǎng)頁(yè)上，我們知道按鈕、帶下劃線(xiàn)的文字、藍色字、帶圖標的文字這些都是可以點(diǎn)擊的。一般灰色說(shuō)明性文字、正文是不可點(diǎn)擊的。但有時(shí)設計師過(guò)分注意頁(yè)面的美觀(guān)性，而忽視了這些地方。

例如：當我們看到第1、2種情況，我們會(huì )思考，這些字母是可以點(diǎn)擊的嗎？可能會(huì )嘗試著(zhù)點(diǎn)擊一下，可能就會(huì )忽略這些操作。當我們看到第3、4種情況，我們會(huì )毫不猶豫的去點(diǎn)擊使用。設計師忽略的這些看上去不起眼的小細節，可能影響到用戶(hù)的操作，甚至可能導致網(wǎng)站的回訪(fǎng)率減少。