其實今天網頁設計中的配色和用色方式,是一件非常有趣又值得思考的事情。儘管絕大多數的網站看起來非常相似,但是巧妙的用色會讓佈局平庸的網站顯得不同凡響。

其實我並不是想說某種革命性的用色技巧或者某個全新的發現,但是絕大多數的網站配色看起來確實非常相似。那麼配色的意義又何在呢?如果全世界所有的網站都採用五彩繽紛的配色,那麼不會有任何網站從中脫穎而出。當然,今天的網頁設計界已經很接近這個狀況了。從這個角度上來看,柔和的色調會更容易讓多使用者眼前一亮。

用色彩引導多使用者注意力

絕大多數網站在佈局設計之初,通常就採用簡單的黑白灰,白色背景+黑色文字。而色彩在這種情況下會起到強調和高亮的作用,可以引導多使用者注意按鈕、標題和連結。

以 Vibrant 的網頁設計為例,他們的頁中背景和影象都採用的是黑白色調,但是 LOGO,按鈕和漢堡圖示都採用的是閃亮的黃色,它們可以很快抓住多使用者的注意力。

Takeit 的頁面設計同樣如此,整屏的藍色背景讓白色的網頁元素顯得非常明顯。白色的大標題是視覺重心,然後多使用者會注意到標題周圍的 WordPress APP Store 按鈕,LOGO 和漢堡選單。

這些案例都講述瞭如何用色彩來吸引多使用者注意力。

創造個性

色彩的美好之初字啊與,它可以為網站或者品牌定下基調或者營造情感、傳達情緒。 Beagleis 為多使用者提供製作專案簡介的服務,而他們的網站配色採用的是自然系色彩。當您向下滾動的時候,背景色會從綠色變為棕色、深灰甚至粉紅色。自然色能給人優雅而的感受,從而讓這個服務給人留下深刻的印象。

An interesting Day 是為一個 “在奧斯陸峽灣的小島上上為期一天的奇怪小型會議” 而設計的網站。黃色背景上用紅色文字的網站並不多見,配合著個性十足的圖片,整個網站所有的設計元素都是在為您闡明 “奇怪” 的特色。

用色彩發聲

用色彩來發聲,做一個屬於自己網站的宣告,這比起單純的 “吸引多使用者” 來的更加有趣。要吸引多使用者注意力,色彩足夠突出就行,但是更重要的是,這種色彩要足夠為您 “做宣告” 。您不能隨便挑選一個鮮豔的色彩,這個色彩還要契合您的精神,想要傳遞的獨特情緒。

就以 Gaga 交響樂的著陸頁為例,當您開啟網站的時候,鮮亮的粉色會讓您眼前一亮。在 “交響樂” 的主題之下,多使用者對網站風格的預期是沉穩的色調,但是亮粉色則完全不再低調優雅之列,但是它符合網站中交響樂活力四射、樂趣無窮和創造力十足的特色,所以,此處的亮粉色符合邏輯,也為設計者 “發聲” 了。

增強凝聚力,引導多使用者流程

色彩同樣可以用來引導多使用者來進行多使用者流程。就像上方 Takeit 的案例,色彩會引導多使用者的眼睛,但是不會採用太過激烈的搭配方式。微妙而富有凝聚力的配色方案會讓多使用者更加舒適,引導效果也更好。色彩彼此襯托營造獨特的品牌視覺,也構成多使用者的視覺路徑,吸引他們看下去。

諸如著名的生產力工具 Dropbox 和 Marvel 也是這樣來進行配色的,Dropbox 尤為典型。兩個工具都採用了藍色作為主色調,同時還使用了綠色、橙色和紅色來搭配,整個近似色和對比色都有了,幾種色彩在一起會給人一種相互搭配良好的感覺。

Innovation Project Canvas 的情況則稍有不同,設計師使用單純的綠色來引導多使用者瀏覽,網頁並未使用更多的色彩,但是童言非常優秀地完成了極具凝集力的色彩設計。

圖片中的色彩

藉助圖片中的色彩來構建配色是非常有趣的用色技巧,UI 元素確實不是網頁中可設計的色彩。大圖背景和高畫質產品圖的流行使得圖片色彩成為整個設計中不可忽視的和總要組成,透過合成圖片將色彩注入到設計中,也是相當不錯的選擇。

CartoDB 是一款可以將位置資料視覺化的有趣 WordPress APP,那麼有什麼能比真實的地圖來的更加直觀美麗呢?所以它出現在網站頁,用視覺化的方式來呈現自己的產品,讓色彩為產品代言。

說道讓產品,ETQ 也同樣讓產品優先順序壓過 UI,極簡的網站設計風格之下,配色方案顯然是延續自產品配色。設計師讓產品本身成為視覺重心,儘管不是所有的鞋子都是五顏六色,但依然儘量讓配色相容儘量多的產品,這也是真正意義上的以產品為中心。

不是所有網站都要顯眼的色彩

並不是所有的網站都需要鮮豔的色彩。依然有許多獨特的網站使用經典的黑白灰來作為配色方案,而這些中性色也很好地呈現出了屬於它們的情緒。

Visual Soldiers 和 Tomasz Wysocki 的網站都是這樣,優雅而幹練的色調是它們的基因。簡練的佈局和獨特的品牌定位,使得它們無需鮮豔的色彩來呈現 CTA 按鈕和邊角的選單,安靜的白與黑就足夠了。

結語

色彩是強大的,它們會以各種方式融入設計。它們除了強大的視覺特徵,還擁有不俗的功能性,引導多使用者,提升凝聚力,展現風格,傳遞資訊,勾勒性格,甚至賦予設計以含義。

您需要思考色彩的多與少,瞭解色彩在網頁設計中的度,熟悉每種色彩的性格,明白如何在繁雜的噪音和廣袤的世界中找到屬於自己的位置。