寫給新手的色彩搭配快速入門指南 - 優設網 - UISDC

寫給新手的色彩搭配快速入門指南

2019/09/03 13412評論 7

一個設計作品呈現到用戶面前,第一眼進入眼簾的就是產品的視覺表現,而產品的色彩在其中起到了舉足輕重的作用,毫無疑問色彩搭配對于設計師來說是非常重要的。那么具體到實際項目中該使用什么怎樣的色彩,需要怎么做呢?下面我將逐步去分析。

色輪的概念

設計時不同電子終端上顯示的色彩都是基于 RGB 模式,是一種加色模型。色光三原色就是紅(Red)、綠(Green)和藍(Blue)。首先來了解一下色輪。

色輪,是一個非常有用的東西??梢雜紗酥憊鄣亓私獾絞裁詞僑?、互補色、類似色。在基礎色輪之上,可以建立一個色彩體系,進行項目設計時可以依據色彩體系去選擇顏色,保證了顏色使用的準確性及設計效率。

  • 同類色:15°以內
  • 鄰近色:60°以內
  • 類似色:90°以內
  • 對比色:120°~180°
  • 互補色:180°

五種搭配方法

1. 同種色搭配

使用一種色調及其相應的多種亮色和暗色,整個頁面會非常統一。

2.?類似色搭配

使用色相相近的顏色,頁面元素不會相互沖突,更加協調有質感。

3.?互補色搭配

如果選擇使用互補色,最佳搭配是一種作為主色,另一種用于強調。它們有著非常強烈的對比度,用在需要特別強調某個元素時會非常有效。

4.?分散互補色搭配

尋找三種顏色,其中兩種互相類似,另一種與它們形成對比。這個配色非常易學而且容易出效果。

5.?三角對立色搭配

顧名思義,就是色環上三角對立的顏色。最經典的就是蒙德里安風格的紅黃藍格構圖,時至今日仍然非常符合設計趨勢。

色彩是有情緒的

色彩本身是沒有情緒的,只是因為不同波長的光通過人的眼睛傳到大腦,引起了人們不同的心理感受,所以色彩才有了情緒。每種顏色都會給人獨特的心理感受,引起我們不同的情緒,因此在設計過程中色彩情緒是必須要考慮的一個重要元素。

1. 黑色

沉穩、品質感、收斂。

單獨使用時黑色可以很容易吸引用戶的注意力。和其他顏色搭配使用時可以很好地搭配組合,使用黑色的背景可以非常好的突出頁面中的內容,容易出效果,應用場景非常廣泛??梢蘊岣咂涿鞫鵲玫講煌鞫鵲幕疑?,例如蘋果系統的深色模式。

設計時一般不會使用純黑色,因為純黑在顯示屏上的顯示效果并不是很好,所以通?;嵫≡窕疑?。靈活使用灰色可以讓你的設計更加優秀。

2. 白色

干凈、純潔、簡潔。

白色中包含了所有的顏色。頁面設計中經?;崾褂玫槳咨?,你可以在上面排列布局任何元素而不會感覺突兀,作為頁面的背景色。因為白色是無色相的,在設計中通常也會稍微變色,使用到像乳白色、雪白色等顏色,這樣不會顯得過分單調。黑色和白色搭配是一個非常經典的組合,只要把握好使用的占比,可以創造出非常高級的設計。

3. 紅色

熱情、躁動、危險、警告。

紅色元素很容易吸引到用戶的注意,可以特別強調頁面的某個元素,比如消息的小紅點,但是時間一久就會引起眼睛疲勞,所以設計中紅色元素一般不會大片使用。但是我們可以通過降低調整明度、純度,來使用。

另外,紅色還代表著危險及警告。紅綠燈上的紅燈停,炙熱的火焰災害。頁面設計中可以在刪除提醒、禁止操作功能時使用。

4. 橙色

溫暖、活潑、年輕。

黃色+紅色得到橙色。屬于暖色調的顏色,既不會像紅色那樣躁動,又不會像黃色那么燦爛,非常具有親和力,用戶對其接受程度非常高。柑橘類的水果都是橙系的,代表著健康、積極。和秋天相關的一些項目上,也會采用明度稍低的橙褐色來設計。橙色可以和綠色搭配,非常適用于 K12 教育類的產品,綠色為主色,橙色為強調色,象征著青少年健康有活力的特征。

5. 黃色

陽光、輝煌、醒目、高貴。

這是一個明度非常高的顏色。本身是不適合應用在數字化領域的設計的,因為其顯示效果較差,但是可以通過調整它的明度和純度來得到我們想要的色調?;粕蛻罨疑且桓齪芎玫淖楹?,閑魚美團都采用了這種色彩,黃色的高明度的色彩與明度較低的深灰色可以形成極強的對比效果,通過這種對比效果我們可以實現強調的功能點。其他都是應用在比較特定的一些場景,例如紅綠燈的黃色的提醒作用,古代皇帝的專用色,農作物成熟的顏色等。

6. 綠色

健康、大自然、清新、環保、安全。

綠色是大自然的顏色,大多數植物的顏色,現在非常提倡的環保生活都是采用綠色為主色調,健康無污染。代表著春天,在策劃設計春天相關事物活動,可以使用綠色為主色進行設計。綠色是有著安全屬性的,在支付、保障方面通常是應用很多的,與紅色正好是相反的作用。

7. 藍色

科技、純凈、深邃、放松、忠誠

藍色是三原色之一。和大海、天空有著不可分割的聯系,是忠誠、放松的象征,在設計中應用是極其廣泛的。另外,藍色也是科技宇宙領域的專屬顏色,是理智、效率的代名詞,隨處可見的企業官網、VI、軟件、宣傳物料等。像是心理治療室都是使用藍色系的環境,可見藍色是非常易接受的顏色,在設計中使用起來非常方便。

8. 紫色

神秘、富貴、壓抑。

紫色是一個非常刺激性的顏色。單獨使用容易給用戶造成心理上的壓力,通?;崠釓淦淥丈褂?,紫色和藍色搭配使用時可以創造出既理智又有些夢幻的色彩,紫色和粉色配合使用時,可以創造出非常美麗的女性化的色彩。

9. 粉色

戀愛、可愛、溫馨、浪漫。

粉色是一種戀愛的顏色。通常和愛情、浪漫相關,像是情人節七夕節等,都會使用粉色來設計。不同純度明度的粉色適用于不同的場景,純度較低,明度較高的淺粉色可以傳達出嬌嫩、甜美的感覺。和紅色、橙色、黃色暖色調搭配,藍色冷色調搭配都可以結合出很多不同的色彩效果。

建立色彩體系

作為設計小白,色彩的使用可能是很難的,面對一個項目時不知道該如何選擇主題色、輔助色,這個時候我們可以先通過借鑒他人優秀的作品,從中提取一套設計色彩。這里推薦是優秀的設計作品或攝影圖片,是否優秀有一個基本的評判標準,那就是你自己看到這個作品圖片是好看的優秀的。下面是一些從攝影圖片中提取的幾套色彩體系,拋轉引玉。

總結

同類色、鄰近色、類似色、互補色,這些顏色關系構成了我們日常設計的色彩基礎,衍變出很多種色彩搭配方法。了解不同顏色的色彩情緒,為進行項目設計時選擇合適的顏色提供依據。建立色彩體系,可以將體系按照不同行業、不同特性、針對的用戶等標簽分類整理,積累自己的色彩庫。

歡迎關注作者的微信公眾號:「YI易設計」

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.utsvcz.com.cn/introduction-to-color-matching

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

sketch 界面設計 版式設計 排版布局 職場 優設專訪 設計師干貨 優設大課堂 設計達人 配色 web前端開發 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 設計規范 海報設計 設計趨勢 用戶體驗設計 動效設計 平面設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里