1 、
需要配色的是畫布,而不是您的圖片
一個在網頁設計中 zui 根本的原則是,無論您花了多少時間創造了一個輝煌的設計,其 zui 終的作用是發揮出內容的核心位置。您的配色方案永遠不應該比它呈現的內容的更加 “響亮” 。您的設計應該是在後臺,目的是幫助突出網站的內容。
淡色的畫布突出了影象,而明亮的畫布有時反而不能突出您的內容。
用 Photoshop 或者 Sketch 等軟體設計網站的時候,建立設計的過程往往是相互獨立的。有些設計單個看起來很不錯,也能被您的客戶所接受,但是當它真正被設計成網頁的時候不適當的配色往往會分散訪客的注意力。事實上,網頁設計的過程是和內容緊密相連的,很多製作高品質的網頁看上去空空蕩蕩,幾乎沒有內容。
2 、
選擇簡單的灰色作為網站的基調
您可以為您的網站基調選擇無數種顏色,不過我建議您採用 zui 簡單的顏色,比如白色/淺灰色與深灰色的搭配文字背景。
您可以看看任何熱門的網站、模版、主題,白色或淺灰色與深灰色搭配成了大多數的選擇,這當然也是有充分理由的。這樣的搭配對訪客而言提高了您內容的可讀性,並且把您的圖片突出在 zui 前方。
一般來說,您的文字 zui 好避免使用墨黑色,深灰色一般更容易閱讀。
文字顏色建議範圍:#333333 到#666666;背景顏色建議範圍:#FFFFFF 到 #CCCCCC 。
當然,這些顏色的選擇都不是固定死的。只不過如果您是新手,以上的配色方案您可以放心使用。
3 、
只選擇一種顏色突出顯示
如果您選擇好幾種不同的色調來,那麼您的配色方案絕大多數是有問題的。您顏色用得越多,您的頁面就越來越難以控制。所以,在您網頁以灰色基調的前提下,您 zui 好只選擇一種鮮豔的顏色來作為您想要突出的事物,比如標題、選單、按鈕等等。您的高亮顏色可以是藍色、紅色、綠色,等等。
您 zui 好選擇與您的基調顏色相關的高亮顏色。開啟您的顏色選擇器,並單擊您彩色方塊的中心。
4 、
如果有疑問,請使用藍色
如果您對您的高亮色的選擇有疑惑的話,不妨使用藍色。藍色是一種彈性比較大的顏色,可以和很多種顏色搭配。
這裡介紹了 30 個以藍色為主調的網站,可以作為借鑑:Blue
另一方面,如果您是用藍色,那麼您用錯顏色的機率就會很低。如果您正猶豫著不知道用什麼顏色好,不妨使用藍色。比較安全的藍色包括從海軍藍到深藍色(H235-H190),而我通常選擇 H205 的藍色。
5 、
給您的高亮色增加變化
您一旦選擇了高亮的顏色,從該點移動滑塊來選擇接下來的顏色。在您的設計中也需要其他的顏色,高亮色的稍微變化會讓您的顏色選擇變得簡單,但又不顯得乏味。
6 、
儘量不用顏色選擇器右上角的顏色
顏色選擇器的右上角是一塊肥沃的土地。它們可以執行出驚人的效果,而且非常誘人,但通常想用好需要大量的經驗。如果沒有足夠的經驗,它們可能會導致事故的發生,所以 zui 好以削弱您的顏色,zui 好都保持比較淡化的色彩。
這就是為什麼在本教程的第三部分,我問您點選的顏色在地圖右上角的中心選擇您的高亮顏色之前,要確保您有一個比較柔和的顏色拉開序幕。