厲害了，一種顏色也能做出世界級的網頁設計！
+ 查看更多

發布日期：2018-10-20

瀏覽次數：2348

與多色相比，單色并不是網頁設計師的首選配色方案。單色配色，顧名思義，是指整個網站只使用一種色相（色輪上可以找到的顏色，比如紅色、綠色、藍色）。雖然單色不比多色配色方案那樣常見，但這種設計手法同樣也有自己的優點，它可以很好地突出網站品牌，能給網站帶來新的生機與活力，使用單色的網站在"滿大街"的多色網頁范例中也更能脫穎而出。那么在網頁中使用單色配色我們要注意些什么？下面小飛就給大家整理的一些實用技巧。

選擇基礎色

單色配色最困難的地方就在于基礎色的挑選。因為整個網站只能使用一種顏色，哪種顏色才能和各種網頁元素和諧搭配呢？這時站長們可以從網站的整體基調著手，選擇與網站基調相配的顏色。不同的顏色常常給人以不同的聯想意義，下面是各種顏色的情感基調：

紅色：愛，激情；
藍色：和諧，信任；
綠色：希望，自然；
黃色：有趣，能量；
粉色：浪漫，女性化；
紫色：神秘，幻想；

在確定網站基本色時站長們也要考慮一下網站的品牌形象和產品定位。想想如果將這個顏色用在品牌Logo或產品上，會有怎樣的效果？另外，你是希望營造一個明亮還是柔和的網站？又或是兩者相結合？總而言之，在確定網站的基礎色時我們可以從多個角度出發，比如網站基調、品牌形象、產品定位、色彩飽和度等等。

調整色彩明暗度和飽和度

雖然在單色配色方案中，網站只使用一種色相，但這還是有很多種設計方案可供選擇的。色相是可以在色輪上找到的顏色，它的飽和度和亮度默認都是100%的，站長們可以通過改變Tint（色彩）、Tone（色調）、shade（色度）這三個屬性調整色彩的亮度和飽和度，創造屬于自己獨特的配色方案。下面是三種屬性的簡單介紹：

Tint（色彩）：是色相與白色組合產生的顏色，也就是在基礎色中添加不同比例的白色，從而產生一系列的Tints；
Tone（色調）：是色相與灰色組合產生的顏色，也就是在基礎色中添加不同比例的灰色，從而產生一系列的Tones；
Shade（色度）：是色相與黑色組合產生的顏色，也就是在基礎色中添加不同比例的黑色，從而產生一系列的Shades；

當然，一個色相的屬性調整之間最好有充分的對比，這樣用戶才能輕松識別出來。我們還可以讓不同元素在整個設計中保持色相相同但明暗次第變化的效果，以構成一個階梯型的色階。總的來說，單色配色在網站中有著不俗的表現，它不僅可以用來呈現單個顏色，還能借助不同的屬性讓網站更有質感。

和其他元素搭配使用

如何有效引導用戶進行瀏覽也是單色配色方案的一個難點。因為單色配色中往往只有一個基礎色，有時難以營造充分的對比。而在這一點上多色配色就有著得天獨厚的優勢，比如它可以使用對比強烈的兩種顏色重點突出CTA按鈕，吸引用戶的注意力。那么，在單色配色方案中，怎樣才能有效引導用戶瀏覽網頁呢？將基礎色與其他元素搭配使用就是一種有效的解決方案，下面是幾種不同的搭配方案：

顏色疊加 在網站中使用顏色疊加時，一定要記得將背景元素設置為黑白，這樣才能保證網站整體色彩是一致的，不會出現色彩混亂疊加的問題。
加粗字體 在網站中使用加粗字體是為了讓文本內容在單色配色的背景中更易為用戶所識別。
使用陰影和其他視覺線索 這些視覺線索可以很好地區分網站元素和背景層，讓網站的可讀性更強。
使用插畫 將單色背景與插畫結合起來，可以給用戶呈現更加現代化的視覺體驗，同時也可以強化單色配色方案的表現力。
搭配同色圖片 如果你需要在單色背景中使用圖片或視頻，不妨選擇與背景色調一致的圖片，這樣更能給整個網站帶來和諧美。Cuberto網站就是這樣做的（見下圖）。

大膽使用流行色

近年來網站的流行色大多是Material Design中飽和度高的明亮色，目前主要的流行色有馬爾斯綠、芭蕾鞋粉等。在單色的網頁背景中使用流行色，不僅可以讓網站顯得更加有趣、漂亮，還能凸顯網站的時尚潮流。在單色配色方案中使用飽和度高的明亮色還有一個好處，那就是站長們在調整色彩、色調和色度上有很大自由發揮的空間。不過，如果你決定在網站中使用流行色，那一定要及時關注時尚圈的趨勢，如果流行色有所改變，你也需要適時更換網站的配色方案。另外，關注最新的流行趨勢沒準還能給你接下來的設計提供更多的靈感。

使用現代化的深色系

并不是所有的單色配色都只使用一種顏色。不少更為現代化的深色系配色方案開始在網站中使用豐富的黑色、灰色，或是幾乎等于黑色的藍色。這些暗色系的配色方案很有趣，也足夠獨特。不過它們在創造上有些難度，因為顏色差別比較少，可供設計師自由發揮的空間很小。盡管如此，深色系配色，尤其是黑色系，往往讓網站顯得十分時髦、現代，他們最適合用在內容較少的網站中、或者作為長滾動網站的首屏。當然，在這種風格的網頁設計中，最好使用淺色系的文本，比如白色，這樣用戶瀏覽起來會更加順暢。

嘗試"準單色"設計

除了使用標準的單色方案以外，我們還可以在網站中使用“準單色”方案。也就是說，我們可以在網頁中使用一種標準色，再加上一種對比色。這種近乎單色的配色方案可以解決單色設計的所有問題，比如如何讓用戶輕松注意到CTA按鈕。這里添加的對比色可以選擇色輪中相對的顏色，以形成最大的反差。選取的顏色也要能很好地搭配文本，這樣CTA按鈕等元素上微文案的可讀性才會更強。