編者按：我有特別的搶眼技巧！今天的好文非常值得拜讀，@飛屋睿UIdesign 同學(xué)從對比、色彩、字體、留白等方面幫同學(xué)們將最關(guān)鍵的內容呈現出來(lái)，文末還附上一個(gè)特別有效果的檢測方法，一眼就能看出你的網(wǎng)站是否合格，周末來(lái)充電吧。

對比：引發(fā)興趣

為了更好地理解對比在網(wǎng)頁(yè)設計中的作用，我們先解釋下什么是對比。對比就是在一個(gè)相對封閉的環(huán)境里發(fā)生的某種元素間的一種關(guān)系，這些元素可以是顏色、紋理、形狀、方向和大小。

只是稍稍對字號大小進(jìn)行調整，或對色彩進(jìn)行更改，就會(huì )馬上改變整個(gè)界面的視覺(jué)效果。例如，當你看到下面這個(gè)網(wǎng)頁(yè)時(shí)，把淺色的背景換為深色，首頁(yè)引人注目的“try it free”的首要按鈕馬上在視覺(jué)重要性上降級，而最下方的“call us”就會(huì )升級為首要的按鈕。

再來(lái)看看下圖中，顏色和大小是怎樣影響我們的界面視覺(jué)的。例如，很多人在第一眼掃視而過(guò)時(shí)，不會(huì )僅僅就看到了兩個(gè)圓。事實(shí)上，他們在看這兩個(gè)圓時(shí)，已經(jīng)獲得了這樣的信號“一個(gè)黑色的大圓和一個(gè)紅色的小圓”。也就是說(shuō)，對比關(guān)系已經(jīng)可以在第一時(shí)間就進(jìn)入人們的大腦中，形成強烈的印象。

商業(yè)工具：顏色，大小和形狀

當我們剛開(kāi)始設計一個(gè)頁(yè)面的時(shí)候，一定不要忘記了運用這幾個(gè)強大的視覺(jué)工具：顏色，大小和空間。設計師Alex Bigman就相信顏色和大小在管理著(zhù)我們的視覺(jué)注意，而空間則幫助管理視覺(jué)元素間的關(guān)系。

顏色

簡(jiǎn)單說(shuō)，亮色可以在柔和的色彩中凸顯出來(lái)。這是顯而易見(jiàn)的，而更為重要的是，在設計中，你就可以運用這一關(guān)系去吸引用戶(hù)的注意。另外，特定的色彩也能幫助營(yíng)造網(wǎng)站的整體氛圍（例如，藍色代表寧靜，紅色顯得張揚和富有攻擊性等）。

上面這個(gè)網(wǎng)站采用的是視覺(jué)體系中的Z模式，在此模式下，他們運用色彩的技巧是非常巧妙的。水藍色的背景立刻將首要目標按鈕凸顯在了頂部，這些目標按鈕的色彩可以與“get active”的色彩搭配，暗示這一系列的按鈕的相關(guān)性。而下方的兩個(gè)大的矩形區域由于形狀的相似又相連，因此也暗示著(zhù)它們之間的相似性。

大小

說(shuō)到大小，我們通常在說(shuō)的其實(shí)也就是網(wǎng)頁(yè)字體的大小。在傳統的從左到右自上而下的閱讀模式中，這就已經(jīng)是個(gè)很強大的元素了。這意味著(zhù)，大號字體或段落的右下角通常是讀者最先閱讀的地方。因此，字號大一點(diǎn)發(fā)揮的就是一種強調作用。

講到這一點(diǎn)，不得不提到，著(zhù)名的網(wǎng)頁(yè)設計名博Smashing Magazine對50個(gè)流行的網(wǎng)頁(yè)界面進(jìn)行調查，他們發(fā)現這些網(wǎng)站通常都是采用標題字號18~29px，與此匹配的文章主體字號采用12~14px，只是這項調查針對的是英文字體，而中文字體相對來(lái)說(shuō)應該字號會(huì )大一些易于辨認。當然，這也只是一個(gè)大概的調查，并無(wú)絕對。但是，你可以從中獲悉更多關(guān)于字號比例的排版設計的知識。

留白

網(wǎng)頁(yè)設計的目標什么？簡(jiǎn)單講，就是創(chuàng )作一個(gè)漂亮的頁(yè)面。那么，你將所有的漂亮的元素全部堆疊在網(wǎng)頁(yè)中就漂亮嗎？無(wú)節制的增加吸引的元素是快速毀掉自己的設計方法之一。一個(gè)網(wǎng)頁(yè)中有可以呼吸的空間是非常重要的，也就是我們總是愛(ài)說(shuō)的留白。減少“視覺(jué)噪音”會(huì )讓頁(yè)面顯得更有重點(diǎn)。

Usaura的創(chuàng )始人Dmitry就已經(jīng)指出，適當的留白能增強對網(wǎng)頁(yè)內容的理解。2004年，一些研究小組就調查過(guò)，適當的留白能讓人們對網(wǎng)站內容理解程度增長(cháng)20%。雖然用戶(hù)并不會(huì )直接對留白的頁(yè)面做些什么，但它卻能影響到用戶(hù)的滿(mǎn)足和體驗。大家可以看看下圖的頁(yè)面設計。在每一個(gè)主體內容，都保留大量留白，用戶(hù)的視線(xiàn)流得到了保護，讓觀(guān)者專(zhuān)注內容，才是最好的體驗。

網(wǎng)頁(yè)設計視覺(jué)體系的測試：模糊法

就我所知，有人曾提出這樣一個(gè)方法來(lái)檢測自己的網(wǎng)站。尤其是當你的網(wǎng)站有特別要強調的內容時(shí)，非常適用。將自己的網(wǎng)站首頁(yè)，放在PS里模糊5~10個(gè)像素，這樣來(lái)判斷那些你想強調的內容是否仍然能吸引到注意。

上圖的網(wǎng)站經(jīng)過(guò)模糊法測試后，我們會(huì )發(fā)現那些注冊按鈕和產(chǎn)品特性仍然是很搶眼。這樣的元素安排對我們來(lái)說(shuō)就是合理的。