這時候我們可以根據不同的配色目標來選擇合適的色系,豐富整個畫面的配色。需要注意的是,在豐富配色的同時,仍然要嚴格控制色彩層級,以保證整體色彩層級的精簡。明確配色目標,確定主色以及色彩層級后,色系是指在色環上相距不超過45°的兩種顏色,我們可以選擇主色的同色系范圍內的顏色來豐富整體配色。那么如何選擇同色系的顏色呢?如何進行下一步的配色?
首先在色環中確定顏色的位置,通過色環兩邊45°延展出我們所需要的同色系。在主色的同色系范圍內,我們可以選出同色系顏色作為延展色,單獨使用或者組合成漸變色進行使用。運用同色系原理來進行配色的。可以看到,整個頁面在保持色彩統一的前提下,增強了畫面的層次和豐富性,從而提升了整個頁面的層次感和品質感。同色系的配色特點是整體頁面統一而富有層次,從而傳遞出一種穩定、專業的形象,適合絕大多數的場景使用,是最為簡單和有效的配色方式。我們可以總結一下同色系的配色方法。首先確定主色,主色兩邊45°以內的同色系色彩范圍,在范圍中選取合適的單色作為輔助色,或者選取一段漸變色單獨使用。
在不同的場景中,對比色同樣有著不一樣的使用方式。在產品設計中,通過小面積的顏色對比,可以加強主色的活力與整體豐富性;而在推廣設計中,通常會使用大面積的對比色增強頁面的吸引力。對比色是指在色環上相距120°~180°之間的兩種顏色(180°時則互為互補色)。處于對比色關系的兩種顏色,通常色相差異較大,能夠相互產生強烈的對比效果,我們可以利用這種原理來增強畫面的吸引力。
首先第一步,需要找出舊版官網存在的問題。這時候,我們就需要再次運用前面所講的目標分析法。通過不同維度的目標分析,尋找頁面中存在的問題。產品界面的配色對于產品來說至關重要,好的配色不僅能夠準確地反映產品的調性,還能正確地引導用戶閱讀并理解產品。我們可以結合網易七魚的官網改版案例,來了解如何通過配色來提升官網的設計品質。在配色上,產品方認為原來的配色過于單調和沉悶,希望可以讓整體更活潑一些。且網站的整體跳出率過高,希望我們能夠找到原因并通過改版解決這個問題。
除了掌握以上的幾種基本色系的配色方法外,大家可以在此基礎上嘗試更多的配色風格。比如在同色系、對比色系的基礎上,有目的地加入色彩元素豐富色調,在保持整體色彩層級的同時,加入更豐富的變化,從而達到配色目標。在推廣頁面中,我們需要注意的是,重點信息并非只能是文字內容,也可以是最吸引用戶的畫面核心元素。可以看到,整個頁面主要由橙色和深藍紫色兩個主要對比色構成。大面積的對比色產生了強烈的視覺沖擊,讓整個頁面充滿了吸引力。整個畫面用最強烈的對比色重點突出了兩個主要的人物角色,從而吸引用戶注意并進行閱讀,最終將用戶引導至購買入口。至此,整個頁面的任務也算是完成了。
而對于很多初學者來說,我建議大家能夠首先明確配色的目標,在配色時保持色彩層級的精簡明確。在此基礎上,循序漸進,逐步去嘗試更多地配色風格。只有這樣,才能養成良好的配色習慣。