解構介面設計如何配色

2019-12-28     MICU設計


配色,首先要有主色,在選好主色的基礎上才能配色,其中找到配色的快速手段就是在對比色中尋找輔助色。通常大家認為只要是面積最大的顏色就是主色,其實不然,因為人們的閱讀心理是有差異的。如果顏色飽和度較低,就容易被相對面積少的高飽和度顏色搶去眼球,所以在定義介面主色的時候要選擇飽和度(純度)高的顏色作為主色,這樣設計出來的介面會很穩定。

互補色搭配


在顏色搭配中,互補色的對比是最強烈的。這種色彩搭配能使用戶的視覺產生強烈的刺激,可以給人留下鮮明的印象,且這種配色易於傳播,適用於誇張、張揚的場景。但這種顏色如果用的太過於頻繁,則容易造成視覺疲勞,給人一種不安定的感覺。因此,在使用互補色搭配的時候要控制好使用的面積,減少來回的顏色穿插。


在介面設計中,常用的互補色有3種: 紅綠、藍橙和黃紫。我們可以看到很多App和icon為了吸引用戶的注意力就用到了強烈對比的互補色,例如番茄快點、QQ空間和相機360,如圖所示。


互補色設計


在7-ELEVEN的介面設計中,運用到了紅綠互補色進行設計,造成的視覺衝擊力極強,如圖所示。

紅綠互補色

另外,互補色的搭配會讓整個設計顯得平衡、舒服。圖中的App中使用了紅色與綠色進行搭配,讓背景顏色顯得更為平衡和舒服(在整體頁面設計中使用紅綠配色能很好地區分按鈕和提示信息的關係)。

平衡感與舒適感極強的設計

圖中採用了冷色到暖色的漸變過渡作為背景,用色非常大膽,頁面的衝擊力極強。

衝擊力極強的設計

在運用大膽的互補色進行設計時,可以讓整個主題風格顯得格外鮮明。將兩個色相的飽和度都調到最高,面積比例保持在1:1左右,這種設計的氣氛最為濃烈,衝擊感也最強。見圖這是「代購現場」的Logo設計,採用了黃紫互補色進行設計,顏色占比保持在1:1,整個設計很突出,在應用市場中很容易讓用戶找到,將品牌的傳播做到了極致。

互補色飽和度很高的設計


冷暖對比搭配


冷暖對比色是自然平衡的規律,可以在設計中大量使用,這樣的配色會使作品非常的出彩,不會顯得單調,如圖所示。

冷暖對比色

下面我們來看一些優秀App的icon設計,並對其冷暖配色進行分析。圖中這款App叫KOI,個人很喜歡這款App的配色,運用到了冷暖配色,起到了非常好的點綴效果,看起來靈動而醒目;Tweetbot的icon也用到了冷暖顏色的對比,整個設計醒目又可愛,如圖所示;Seedling Comic Studio的icon設計也運用到了冷暖搭配,整個設計顯得相當精彩,將用戶的視線集中到了圖標的圓形上,如圖所示。

在設計中,冷色與暖色的對比搭配是介面設計中使用最廣的配色方法,設計出來的效果也非常出眾。色彩好比是陰陽太極,冷與暖的兩級可以讓用戶感覺舒適平和。冷暖色彩的搭配基本沒有什麼缺點,所以我們可以大膽運用冷暖配色進行設計。


見圖這是支付寶的主頁面設計,雖然支付寶的主圖標發生了改變,變成了簡潔的藍色支付寶,但主頁面中還是用到了冷色與暖色的搭配,不僅很好地區分了分類,同時還將原本很零散的分類處理得井井有條。很多設計師在碰到滿版分類圖標的時候都很頭大,在處理的時候容易把頁面做得眼花繚亂,遇到這種情況時,不妨採用冷暖對比進行調整,這樣可以將頁面的平衡感調到最佳狀態。

支付寶主頁面設計

在Posse的顏色設定中,將青色定義為主色,同時選擇互補的紅色作為點睛色,讓畫面的視覺中心一下就集中到了暖色(紅色)上,如圖所示。

Posse的顏色搭配

最後我們來看一組關於配色的設計練習,並分析其配色的優劣,如圖所示。

第1點:都定義了色彩的基調,找到了主色。

第2點:為了讓用戶的視線聚焦在主要的功能上,在設計主要功能時都用了互補色。這種方式比用造型進行區分顯得更為直接。

第3點:用過多的顏色進行設計會使介面顯得沒有秩序感。這種色彩搭配給用戶的第一感受就是混亂不堪。

第4點:用色不僅需要考慮聚焦,還有講究色彩的呼應性。同類色彩會彼此呼應,聚焦點只能出現在主要的點上。


經過以上分析可以得出:色彩的關係與功能的區分極其重要,這樣才能把握好色彩的節奏感。現在大家知道哪一幅作品是最優秀的吧?

分析配色的優劣


文章來源: https://twgreatdaily.com/zh-tw/HxX3TG8BMH2_cNUgUcX5.html