推薦:深入淺出!從零開始學配色(內(nèi)附配色工具和方案)

簡評:人人都是設計師,不論生活還是工作,對于美,對于色彩,我們應予以孜孜不倦的追求。不論你是否從事設計,都應該看看本文,因為核心說的不是顏色,而是美。

紅·白·藍 | 人人都該知道的調(diào)色板 8 原則

人機交互存在大量的 UI 圖形元素,顏色在至關重要。正如皮埃爾·伯納德所說:

Color does not add a pleasant quality to design?—?it reinforces it.

在設計時,無限的顏色方案供我們選擇,而通常也因為太多的顏色,到致我們難以抉擇。

本文,介紹八種基本規(guī)則,幫助讀者玩轉(zhuǎn)色彩。

1.限制色彩數(shù)量

馭色之道,亦為平衡之道。色彩越多,越難平衡。

根據(jù)多倫多大學的研究,人們使用 Adobe Color CC,最喜歡用簡單的顏色組合,多為兩種或三種配色。所以建議你的配色方案最多支持三種基色,這樣會獲得更好的效果。

如果你需要調(diào)色板以外的顏色,請使用漸變和渲染。

※ 如何創(chuàng)建一個方案

如何選擇顏色?色輪可以幫助你。


網(wǎng)上有許多預設好的配色方案,很適合初學者:

  • Monochromatic — 單色:最簡單的方案,因為它們都是采用相同的顏色,但包括色調(diào),色調(diào)和色調(diào)的變化。這個配色,能產(chǎn)生舒緩的效果。
(單色方案對眼睛很友好,正如你在 Facebook 的例子中可以看到的,該方案看起來干凈而優(yōu)雅)
  • Analogous — 臨色:一種顏色用作主色,相鄰顏色輔助,用于豐富方案。這種配色方案容易產(chǎn)生疲憊感,訣竅在于顏色的梯度,色彩的差別表達不同的狀態(tài)。
(Clear App:色彩的深淺表達代辦事項的優(yōu)先級)
(Calm App:用臨色構筑整體情緒)
  • Complementary — 互補:此方案包含兩種對比強烈的顏色。該方案用于吸引用戶的注意。此方案要注意主色和從色的選擇。例如滿眼的綠色中,一點紅將脫穎而出。
(互補是脫穎而出的最簡單的方法)
  • Custom — 習慣:創(chuàng)建一個習慣的配色方案沒有大家想想的那么難。訣竅就是,只需要在其他中性的調(diào)色板(例如一些傳統(tǒng)的單色方案)中添加明亮的色調(diào),這會讓新的方案很醒目。
(Dropbox:結(jié)合了白色、灰色和藍色)

2.接受自然的饋贈

最好的顏色組合來自大自然。為什么?

因為這些方案看起來很自然。想得到啟發(fā)?我們只需要環(huán)顧四周。

如果你在日常生活中看到特別美麗或醒目的色彩,請嘗試創(chuàng)建一個方案。只需拍攝一個美麗的時刻,并從中提取顏色創(chuàng)建方案。

推薦文章:設計師實踐手冊:K-pop 中的五個設計元素

3.遵循 60-30-10 規(guī)則

這是一個經(jīng)典的裝飾規(guī)則,可以幫助你輕松地將配色方案放在一起。

60%,30%,10% 的比例是為了平衡任何空間中使用的顏色。

這個概念是非常簡單的使用:60% 主色調(diào),30% 次要顏色,10% 重點色。

(60 主色,30 次要色,10 點睛的重點色,視線很容易從整體過渡到重點色的焦點上)

4.先做灰度設計

顏色設計非常有趣。但是再設計顏色之前,先強制自己設計灰度。以灰度梯度構建應用 App 的原型,并將其用作基準。在添加顏色之前,以灰度設計,讓你更專注于間距和布局等元素。

5.避免使用純黑

在現(xiàn)實生活中,純黑色幾乎不存在。我們周圍的所有黑色物體都有一些光線反射,這意味著它們不是真正的黑色,它們是深灰色的。

(一匹黑狼,皮色是深灰色而不是黑色)

純黑色會過于顯眼,也會讓人覺得不自然。許多 App 的黑色不是真的黑,而是深灰色,比如 Asos 的頂部并不是 #000000,而是#242424。所以記得給你的顏色加一點飽和度。

6.對比的重要性

顏色是引導視覺的工具。你如果想要吸引用戶注意力,那就要靠對比來脫穎而出。重要內(nèi)容或者關鍵元素,需要高對比色來突出。

(對比度使得該區(qū)域與屏幕的其余部分產(chǎn)生反差)

簡評:人人都是設計師,穿衣搭配,繪畫設計,

這是一個眾所周知的事實,顏色具有固有的意義,可以引起情緒。這些含義將直接影響到用戶感知產(chǎn)品的方式。

當我們構建配色方案時,我們需要思考顏色對于感知層面的影響。

紅、橙、黃

  • 紅色:強大、激情、危險、重要。紅色是極其刺激的顏色,想著這力量、速度,能量。紅色已經(jīng)被證明能夠增加血液循環(huán)和促進新陳代謝。這就是為什么人們看到紅色,他們會增加閱讀速度。紅色能夠抓住用戶的注意力,或突顯出某個元素。
  • 黃色:快樂,友善,刺激,注意力。黃色是一種非常多才多藝的顏色,淺黃色與太陽相關聯(lián),因此對于傳播具有積極性和溫暖度。黃色的深色(如金色)給人的印象是復古和年齡。這些較深的色調(diào)通常與永恒和智慧有關。
  • 橙色:嬉戲、活力、吸引力、便宜。橙色是一種溫暖而充滿活力的顏色。充滿精力,為用戶創(chuàng)造溫馨感。一些研究表明,橙色代表著廉價。

綠、藍、紫

  • 色:自然,安全,新鮮。綠色反映了環(huán)保主義和自然接近的感覺。它也意味著增長,這就是為什么它經(jīng)常與業(yè)務相關聯(lián)。綠色意味著對或錯。
  • 色:平靜,負責任,值得信賴,可靠。藍色常常與平靜和放松的情緒相關聯(lián)。它也與實力和可靠性相關聯(lián),給人以信任和敬業(yè)精神。藍色預示著內(nèi)心的安全感。這就是為什么你可能會看到銀行和技術企業(yè)使用這種顏色。社交媒體巨頭如 Facebook,Twitter 和 LinkedIn 都在網(wǎng)絡上使用藍色的藍色。
  • 色:豪華,神秘,浪漫,靈性。歷史上與皇室相關聯(lián),紫色暗示了產(chǎn)品是高端的。

粉、黑、白、灰

  • 色:女性,天真,青春。粉紅色以其女性氣質(zhì)而聞名。
  • 色:強大,復雜,神秘,深邃。黑色比其他顏色(包括紅色)吸引更多的注意力。這就是為什么它最常用于文字和強調(diào)。
  • 色:純潔,健康,干凈,無辜。白色可以突出周圍的其他顏色,白色作為次要顏色,很受歡迎。
  • 色:中性,正式,復雜,素寫?;疑碇辛?,它可以承擔黑色或白色的特征。當用作原色時,會給人以正式的印象。

請注意,顏色的含義可能因文化和情況而異。要了解更多信息,請查看世界各地顏色和色彩意義這篇文章。

8.無障礙設計

無障礙是設計色彩時候的重中之重。今天的產(chǎn)品必須要服務所有人,所 - 有 - 人。

※ 顏色應該對所有人友好

大約 8% 的男性和 0.5% 的女性會受到某種形式的色盲影響。相當于 12 名男子中有 1 名,200 名女性中有 1 名色盲。雖然有多種形式的條件,但是紅/綠色盲是最常見的。患有這種形式的色盲的人無法區(qū)分紅綠。

(左側(cè)是正常人眼中的調(diào)色盤,中、右圖是紅綠色盲眼中的調(diào)色盤)

所以,使用多種視覺線索來傳達產(chǎn)品中的重要狀態(tài)很重要。除了顏色之外,還可以使用筆畫,指示符,圖案,紋理或文字等元素來描述動作和內(nèi)容。

(不只是顏色來傳達,還要其他的圖形來輔助)

※ 避免文字低對比度

對比是色彩理論中至關重要的一個領域。當在文本中使用顏色時,請注意,將兩個顏色相對較低的兩種顏色放在一起可能會使文本難以閱讀。

檢查對比度,以確保背景和前景顏色與色盲人或視力低的人具有足夠的對比度。

對比度表示顏色與另一種顏色的差異(通常寫為 1:1 到 21:1)。這兩個數(shù)字之間的差值越大,顏色之間的相對亮度差越大。W3C 建議對文本文字和圖像文字的對比度如下:

  • 與其背景相比,小文本的對比度應至少為 4.5:1。
  • 大文本(14 pt bold/18 pt regular 和更粗)應該具有至少 3:1 的對比度與其背景。

好消息是,你不必手動檢查。使用顏色對比度檢查器,只需點擊幾下就可以檢查顏色組合。

彩蛋:UX 設計師的基本工具

為了使事情變得更簡單,我還將提供一些選擇調(diào)色板的最佳工具。

**※ **Adobe Color CC

Adobe Color CC(以前稱為Kuler),查找、修改和創(chuàng)建配色方案的好工具。調(diào)色板上的每種顏色都可以單獨修改,或者選擇作為基本顏色,只需點擊幾下。調(diào)色板可以保存并添加到 library,還有一些由社區(qū)在網(wǎng)站上創(chuàng)建的優(yōu)質(zhì)配色方案:

**※ **Dribbble Search-by-color

當你想對其他設計師使用特定顏色進行視覺研究時,請到 dribbble.com/colors 并選擇所需的顏色。

**※ **Material Design

MD 指南提供了一個夢幻般的調(diào)色板,可用于圖示或開發(fā)你的產(chǎn)品。該調(diào)色板中的所有顏色均設計為相互協(xié)調(diào)的色調(diào)。

**※ **Colorzilla

ColorZilla 是 Google Chrome 和 Mozilla Firefox 的擴展程序,其中包含一系列與顏色相關的工具,包括顏色選擇器,CSS 漸變生成器和調(diào)色板瀏覽器。


**※ **Coolors.co

Coolors是一個強大的工具來創(chuàng)建多彩多姿的方案??梢院唵蔚劓i定所選顏色,然后按空格鍵生成新的調(diào)色板。這個工具很酷的東西是,你不僅僅只有一個結(jié)果,只需修改參考點就可以接收幾種配色方案。


我個人最喜歡的創(chuàng)建配色方案之一是使用照片。該工具可以上傳圖像并從中進行調(diào)色。


※ Adobe Photoshop 中的色盲模擬模式

使用 Photoshop,可以測試設計的可訪問性。只需去 *View *> Proof Setup,然后可以選擇兩種類型(Protanopia 型或 Deuteranopia 型)。

**※ **NoCoffee Vision Simulator for Chrome

為了防止設計中的無障礙問題,在設計時自己體驗色盲是個好主意。NoCoffee Vision Simulator 可用于模擬任何色差缺陷和低視力條件。例如,使用「顏色缺陷」設置「Deuteranopia」,就可以灰度查看網(wǎng)頁。讓我們可以站在色盲者的角度去思考。

顏色是設計師最強大的武器之一,希望上述規(guī)則能為設計師,或者對設計感興趣的你有所幫助。現(xiàn)在,是時候?qū)嵺`了,因為色彩設計中最關鍵的一個環(huán)節(jié),就是真的去創(chuàng)造,去實踐!

原文:Red, White, and Blue
延伸閱讀:

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容