你當前所在位置:首頁 > IT技術探討 > 小白學UI|如何做出誘人的UI配色(基礎篇)

小白學UI|如何做出誘人的UI配色(基礎篇)

你懂“色”嗎?

你的作品夠“色”嗎?

你是不是經常在界面設計中

為用什么顏色而糾結煩惱?

辛辛苦苦設計好了,

卻因色彩搭配不合理而被否定?

為什么別人家的設計那么優秀?


UI配色 (1).jpg


如果你在UI設計中有以上煩惱,小編可以鄭重的告訴你:那是因為你還不懂“色”,或者說你“色”的功底還不夠。

 

所以,我想你現在很有必要,放下手頭的事情,好好地跟小寶君一起來學學如何做出誘人的UI配色。

 

為了照顧初學UI設計的小白,我們還是從最基本的色彩原理說起吧:


認識RGB與HSB


· RGB

RGB是一種用于顯示器的色彩模式,由光學三原色(紅Red、綠Green、藍Blue)組成,我們稱之為RGB色彩模式。


UI配色 (2).jpg


RGB色彩模式幾乎包括了人類視力所能感知的所有顏色,我們可以通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各種顏色。例如:


UI配色 (3).jpg


· HSB

HSB是色彩的三個要素,分別是色相(Hues)、飽和度(Saturation)和明度(Brightness)。


·· 色相(Hues)

色相,顧名思義,就是指色彩的相貌,是自然狀態下的色彩。例如橙色的胡蘿卜,這個橙色指的就是色相。下圖是最基本的色相,有紅橙黃綠青藍紫。


UI配色 (4).jpg


需要注意的是:黑色和白色是無色相的。


·· 飽和度(Saturation)

指色彩的鮮艷程度。例如我們說這位姐姐的唇彩顏色好鮮艷,就是指這個唇彩顏色的飽和度很高。


UI配色 (5).jpg


飽和度最高的色彩就是原色,隨著飽和度的降低,色彩就會變黯淡,降到最低就會失去色相,變為無彩色,也就是只剩下灰度(黑白之間的各種灰色)。


·· 明度(Brightness)

指色彩的明暗度,即深淺程度。色彩越接近黑色明度越低,越接近白色明度越高。我們說這個顏色好亮,就是指這個顏色的明度很高。


UI配色 (6).jpg


··· 明度與亮度的區別

亮度是指發光的強度,與物體表面色彩反射的光量有關。一般來說,彩色物體表面的反射光量越多,亮度就越高。


UI配色 (7).jpg


明度是一個心理顏色概念,是指人們所感知到的色彩的明暗程度,它以亮度為基礎,但不等同于亮度。例如藍色的光量很高,但其明度卻低。


UI配色 (8).jpg


色彩搭配基礎


· 色環

UI配色 (9).jpg


色環對于UI設計師來說是一個重要的工具,特別是對于菜鳥級別的設計師。通常包括12種顏色。


· 單色搭配( Monochromatic )

UI配色 (10).jpg


單色搭配就是單一色系的搭配,通過調整顏色的深淺、明暗或飽和度來形成明暗的層次關系。


UI配色 (11).jpg


單色搭配在app UI設計中一直都是一個不錯的選擇,特別是藍色系和綠色系。


· 類比色搭配( Analogous )

UI配色 (12).jpg


類比色搭配是指選用一款顏色作為主色調,色輪中臨近的顏色作為輔色。因為在色輪中相互靠的很近,所以搭配起來不會有很突兀的感覺。


UI配色 (13).jpg


類比色搭配通過一個色彩漸變的效果,來給用戶提供不同任務優先級順序的視覺提示。


· 互補色搭配( Complement )

UI配色 (14).jpg


在色輪上直線相對的兩種顏色稱為互補色。互補色因為互相處于對方的對立面,所以搭配起來會形成強烈的對比效果,進而吸引用戶的注意力。


UI配色 (15).jpg


例如,當我們的眼睛看到一大塊綠色區域時,一小塊紅色就會顯得特別突出。


色彩心理學


· 色彩的情緒影響

我們身處在一個多彩的世界中,物體的不同顏色,會讓我們產生不同的情緒。例如:


UI配色 (16).jpg


· 色彩的性別偏好

男生和女生的色彩偏好是不同的,一般來說,男生較喜歡藍色系,女生較喜歡紅色系。


下圖是根據JoeHallock的研究,不同性別的色彩選擇,從最喜歡的色彩到不那么喜歡的色彩分別所占的比例。


UI配色 (17).jpg


從圖中可以看出:


男生喜歡藍色、黑色、灰色和白色較多;

女生喜歡紫色、紅色、黃色較多;

男生和女生都喜歡綠色,而且占比一致,看來綠色是男女通吃的色彩;

此外,藍色是所有色系中最受歡迎的色彩。


· 不同性格人群的色彩偏好

不同性格人群面對不同的色彩所產生的心理感受也是有差異的。


CSMP性格系統從宏觀上把性格分成了四類:和平型、活潑型、完美型、力量型。


下表是不同性格人群色彩偏好的調查分析結果:


UI配色 (18).jpg


從上表可以看出,灰色在各種性格人群中是比較安全的色彩。


小結


在UI設計中,懂得如何配色,是一項非常重要的美術素養。但許多初學UI的小白,往往一開始就把學習精力放在設計技巧上,而忽略了“色”的功底,這樣就會造成在設計工作中出現“技術有余、水平不足”的現象。


所以,掌握以上這些色彩學的基礎知識是很有必要的。當然,關于UI設計中色彩的知識遠不止這些,限于篇幅,今天就寫到這里。


我們下一篇將帶來色彩運用的進階篇。想跟著我們一起學習的朋友可以多多關注我們哦!

課程預約

澳客彩票网-首页 洛宁县 | 上饶县 | 息烽县 | 邳州市 | 岑溪市 | 扶沟县 | 依安县 | 开远市 | 浦江县 | 丹棱县 | 平安县 | 葵青区 | 敦煌市 | 贵南县 | 青铜峡市 | 东安县 | 望奎县 | 绵竹市 | 保定市 | 哈尔滨市 | 温宿县 | 行唐县 | 师宗县 | 织金县 | 虞城县 | 丰县 |