閱讀過Steve Krug 所著的《Don't make me think》-訪客至上的的網(wǎng)頁設(shè)計(jì)秘笈，從中學(xué)到了很多交互設(shè)計(jì)方面的知識，在這里和大家分享。

之前寫過一章，“我們是如何使用Web”的，今天我們來說一下廣告牌/banner設(shè)計(jì)的要點(diǎn)。

上次講了第一個(gè)：在每個(gè)頁面“建立清楚的視覺層次”和“盡量利用習(xí)慣用法”

這次繼續(xù)：把頁面劃分成明確定義區(qū)域，明顯標(biāo)示可以點(diǎn)擊的地方，降低視覺噪點(diǎn)。

 

廣告牌設(shè)計(jì)101法則

未掃描設(shè)計(jì)，不為閱讀設(shè)計(jì)

 

如果用戶們都是一覽而過，那么，你需要注意以下5個(gè)重要方面，來保證他們盡可能地看到了，并理解了你的網(wǎng)站：

- 在每個(gè)頁面建立清楚地視覺層次

- 盡量利用習(xí)慣用法

- 把頁面劃分成明確定義的區(qū)域

- 明顯標(biāo)識可以點(diǎn)擊的地方

- 最大限度的降低干擾

 

 

 

把頁面劃分成明確定義的區(qū)域

 

理想情況下，用戶應(yīng)該能在任何設(shè)計(jì)良好的網(wǎng)頁上玩Dick Clark的25000美元金字塔游戲（給訂“水管工人用品”的類型，游戲一方將提供“扳手、切管機(jī)、防脫落褲子…”來讓對方猜出這個(gè)類別。）在網(wǎng)頁上上四處掃視之后，他們應(yīng)該能指著頁面上的不同區(qū)域說出：“這是我在這個(gè)網(wǎng)站能進(jìn)行的活動(dòng)”，“這是到今日頭條的鏈接”，“這是這個(gè)公司銷售的產(chǎn)品”，“他們正在向我推銷的東西”，“到網(wǎng)站其他部分的導(dǎo)航”。

把頁面劃分成明確定義的區(qū)域很重要，因?yàn)檫@個(gè)可以讓用戶很快的決定關(guān)注頁面的哪些區(qū)域，或者放心的跳過哪些區(qū)域。對網(wǎng)頁掃描所進(jìn)行的幾項(xiàng)初始眼動(dòng)研究表明，用戶很快就會確定頁面哪些部分包含有用信息，然后對其他部分看都不看——就像他們不曾來過一樣。

 

明顯標(biāo)識可以點(diǎn)擊的地方

因?yàn)槿藗冊诰W(wǎng)絡(luò)上所做的大多數(shù)事情就是找到下一個(gè)地方點(diǎn)擊，那么明確的標(biāo)識哪些地方可以點(diǎn)擊，哪些地方不能點(diǎn)擊，這很重要。

 

例如，在議員Orrin Hatch 2000年落選總統(tǒng)選舉時(shí)的主頁上（Orrin Hatch 先生在可用性歷史上至少貢獻(xiàn)了一個(gè)腳注，因?yàn)樗牵〒?jù)我所知）第一個(gè)讓網(wǎng)站可用性成為影響選舉問題的總統(tǒng)候選人。在2000年大選的第一次共和黨候選人電視辯論上，他對 喬治W.布什 說：“我得說，州長先生，和你的網(wǎng)站相比，在我的網(wǎng)站上很容易就能找到所有的內(nèi)容，{輕笑}，你當(dāng)網(wǎng)站相當(dāng)難用，對用戶不友好”（他的網(wǎng)站確實(shí)更容易使用））的確呈現(xiàn)了很多內(nèi)容，但是什么地方是可以點(diǎn)擊的，還是全都不能點(diǎn)擊讓人并不清楚。該頁面上有18個(gè)鏈接，只有兩個(gè)通過其外觀可以明確知道能夠點(diǎn)擊：一個(gè)是標(biāo)有“Click here to CONTRIBUTE！”的大按鈕，另一個(gè)是帶下劃線的文字鏈接“FULL STORY”。

 

其他連接都是彩色的文字。但問題是，這個(gè)頁面的所有文字都是彩色的，所以無法一眼看出哪些是鏈接。

 

這并不是很嚴(yán)重的問題。我相信，用戶確定點(diǎn)擊哪些并不會花很長時(shí)間，但如果你迫使用戶去思考某些通過下意識就可以知道的東西，例如什么地方可以點(diǎn)擊，那么你完全是在浪費(fèi)每個(gè)用戶對新站點(diǎn)有限的耐心和好感。

 

www.orrinhatch.com

（下圖為2000年選舉時(shí)的網(wǎng)頁）

 

（下圖為現(xiàn)在的網(wǎng)頁）

 

 

另一個(gè)反面例子就是drkoop.com（C.Everett Koop 的健康站點(diǎn)）上的搜索框。

每當(dāng)看到它的時(shí)候，隊(duì)會讓我思考，因?yàn)閳?zhí)行搜索的按鈕看起來實(shí)在不像按鈕——盡管它提供了兩個(gè)很好的視覺暗示：包含“SEARTH”(搜索)字樣，這是對于搜索按鈕來說極其完美的兩個(gè)用詞之一（另一個(gè)是“Go”，但是只有在你已經(jīng)將“搜索”用在輸入框標(biāo)簽上的情況下。），而且他是搜索輸入框旁唯一的目標(biāo)。

 

他甚至還使用了一個(gè)小小的三角箭頭，這是Web習(xí)慣用法“點(diǎn)擊這里”的指示器之一，但是箭頭所指的地方在文字之外，似乎表示它是指向一個(gè)別的東西，而習(xí)慣用法應(yīng)該是指向可點(diǎn)擊的文本。

 

如果把箭頭移到左邊也許能除去我腦袋中的問號了。

 

降低視覺噪聲

讓頁面不易理解的一個(gè)最大的原因是視覺噪聲，實(shí)際上有兩類視覺噪聲。

 

1.眼花繚亂。一些網(wǎng)站頁面給我的感覺就像在 PCH（Pupblisher’s Clearing House）的來信中小心穿行，生怕不小心粘錯(cuò)了表格訂閱雜志一樣。（PCH 一年一度給很多人發(fā)送訂閱普通雜志的信件，在這些信件里也有供填寫并參加抽獎(jiǎng)的位置，但要看過搜有的雜志才能找到中獎(jiǎng)規(guī)則，不小心就會填錯(cuò)，誤定了雜志。）

如果頁面上所有的內(nèi)容都在嚷嚷著希望得到我的注意，那么效果可能適得其反：滿眼都是促銷信息！滿眼都是驚嘆號和搶眼的顏色！一大堆大喊大叫正在進(jìn)行。

 

2.背景噪聲。有些頁面就像是在開雞尾酒會一樣。雖然沒有一個(gè)地方會造成過分的干擾，但是這些很小的噪聲太多也會讓人覺得厭煩。

 

例如，MSNBC的菜單有效而聰明的把用戶快速導(dǎo)航到站內(nèi)的新聞故事處，但是這些菜單項(xiàng)之間的建個(gè)線帶來了很多噪聲。把這些線變成灰色會讓這些菜單更容易掃描。

 

 

下圖是對比：

 

用戶們對復(fù)雜性和干擾的容忍度不一樣，一些人不在乎眼花繚亂的頁面和背景噪聲，但很多人在乎。當(dāng)你設(shè)計(jì)頁面的時(shí)候，這樣做可能是一個(gè)好方法：先假定所有內(nèi)容都是視覺噪聲，除非得到證明它們并不是視覺噪聲。