編者按:我有特別的搶眼技巧!今天的好文非常值得拜讀,從對比、色彩、字型、留白等方面幫同學們將關鍵的內容呈現出來,文末還附上一個特別有效果的檢測方法,一眼就能看出您的網站是否合格,週末來充電吧。
對比:引發興趣
為了更好地理解對比在網頁設計中的作用,我們先解釋下什麼是對比。對比就是在一個相對封閉的環境裏發生的某種元素間的一種關係,這些元素可以是顏色、紋理、形狀、方向和大小。
只是稍稍對字號大小進行調整,或對色彩進行更改,就會馬上改變整個介面的視覺效果。例如,當您看到下面這個網頁時,把淺色的背景換為深色,頁引人注目的 “try it free” 的要按鈕馬上在視覺重要性上降級,而下方的 “call us” 就會升級為要的按鈕。
再來看看下圖中,顏色和大小是怎樣影響我們的介面視覺的。例如,很多人在眼掃視而過時,不會僅僅就看到了兩個圓。事實上,他們在看這兩個圓時,已經獲得了這樣的訊號 “一個黑色的大圓和一個紅色的小圓” 。也就是説,對比關係已經可以在時間就進入人們的大腦中,形成強烈的印象。
商業工具:顏色,大小和形狀
當我們剛開始設計一個頁面的時候,一定不要忘記了運用這幾個強大的視覺工具:顏色,大小和空間。設計師 Alex Bigman 就相信顏色和大小在管理着我們的視覺注意,而空間則幫助管理視覺元素間的關係。
顏色
簡單説,亮色可以在柔和的色彩中凸顯出來。這是顯而易見的,而更為重要的是,在設計中,您就可以運用這一關係去吸引多用户的注意。另外,特定的色彩也能幫助營造網站的整體氛圍(例如,藍色代表寧靜,紅色顯得張揚和富有攻擊性等)。
上面這個網站採用的是視覺體系中的 Z 模式,在此模式下,他們運用色彩的技巧是非常巧妙的。水藍色的背景立刻將要目標按鈕凸顯在了頂部,這些目標按鈕的色彩可以與 “get active” 的色彩搭配,暗示這一系列的按鈕的相關性。而下方的兩個大的矩形區域由於形狀的相似又相連,因此也暗示着它們之間的相似性。
大小
説到大小,我們通常在説的其實也就是網頁字型的大小。在傳統的從左到右自上而下的閲讀模式中,這就已經是個很強大的元素了。這意味着,大號字型或段落的右下角通常是讀者先閲讀的地方。因此,字號大一點發揮的就是一種強調作用。
講到這一點,不得不提到,着名的網頁設計名博 Smashing Magazine 對 50 個流行的網頁介面進行調查,他們發現這些網站通常都是採用標題字號 18~29px,與此匹配的文章主體字號採用 12~14px,只是這項調查針對的是英文字型,而中文字型相對來説應該字號會大一些易於辨認。當然,這也只是一個大概的調查,並無絕對。但是,您可以從中獲悉更多關於字號比例的排版設計的知識。
留白
網頁設計的目標什麼?簡單講,就是創作一個漂亮的頁面。那麼,您將所有的漂亮的元素全部堆疊在網頁中就漂亮嗎?無節制的增加吸引的元素是快速毀掉自己的設計方法之一。一個網頁中有可以呼吸的空間是非常重要的,也就是我們總是愛説的留白。減少 “視覺噪音” 會讓頁面顯得更有重點。
Usaura 的創始人 Dmitry 就已經指出,適當的留白能增強對網頁內容的理解。 2004 年,一些研究小組就調查過,適當的留白能讓人們對網站內容理解程度增長 20% 。雖然多用户並不會直接對留白的頁面做些什麼,但它卻能影響到多用户的滿足和體驗。大家可以看看下圖的頁面設計。在每一個主體內容,都保留大量留白,多用户的視線流得到了保護,讓觀者專注內容,才是知名的體驗。
網頁設計視覺體系的測試:模糊法
就我所知,有人曾提出這樣一個方法來檢測自己的網站。尤其是當您的網站有特別要強調的內容時,非常適用。將自己的網站頁,放在 PS 裏模糊 5~10 個畫素,這樣來判斷那些您想強調的內容是否仍然能吸引到注意。
上圖的網站經過模糊法測試後,我們會發現那些註冊按鈕和產品特性仍然是很搶眼。這樣的元素安排對我們來説就是合理的。