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

簡(jiǎn)評(píng):人人都是設(shè)計(jì)師,不論生活還是工作泣矛,對(duì)于美疲眷,對(duì)于色彩,我們應(yīng)予以孜孜不倦的追求您朽。不論你是否從事設(shè)計(jì)狂丝,都應(yīng)該看看本文,因?yàn)楹诵恼f的不是顏色,而是美几颜。

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

人機(jī)交互存在大量的 UI 圖形元素倍试,顏色在至關(guān)重要。正如皮埃爾·伯納德所說:

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

在設(shè)計(jì)時(shí)菠剩,無限的顏色方案供我們選擇易猫,而通常也因?yàn)樘嗟念伾街挛覀冸y以抉擇具壮。

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

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

馭色之道攘已,亦為平衡之道。色彩越多怜跑,越難平衡样勃。

根據(jù)多倫多大學(xué)的研究,人們使用 Adobe Color CC性芬,最喜歡用簡(jiǎn)單的顏色組合峡眶,多為兩種或三種配色。所以建議你的配色方案最多支持三種基色植锉,這樣會(huì)獲得更好的效果辫樱。

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

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

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


網(wǎng)上有許多預(yù)設(shè)好的配色方案辉饱,很適合初學(xué)者:

  • Monochromatic — 單色:最簡(jiǎn)單的方案搬男,因?yàn)樗鼈兌际遣捎孟嗤念伾ㄉ{(diào)彭沼,色調(diào)和色調(diào)的變化缔逛。這個(gè)配色,能產(chǎn)生舒緩的效果姓惑。
(單色方案對(duì)眼睛很友好译株,正如你在 Facebook 的例子中可以看到的,該方案看起來干凈而優(yōu)雅)
  • Analogous — 臨色:一種顏色用作主色挺益,相鄰顏色輔助,用于豐富方案乘寒。這種配色方案容易產(chǎn)生疲憊感望众,訣竅在于顏色的梯度,色彩的差別表達(dá)不同的狀態(tài)。
(Clear App:色彩的深淺表達(dá)代辦事項(xiàng)的優(yōu)先級(jí))
(Calm App:用臨色構(gòu)筑整體情緒)
  • Complementary — 互補(bǔ):此方案包含兩種對(duì)比強(qiáng)烈的顏色烂翰。該方案用于吸引用戶的注意夯缺。此方案要注意主色和從色的選擇。例如滿眼的綠色中甘耿,一點(diǎn)紅將脫穎而出踊兜。
(互補(bǔ)是脫穎而出的最簡(jiǎn)單的方法)
  • Custom — 習(xí)慣:創(chuàng)建一個(gè)習(xí)慣的配色方案沒有大家想想的那么難。訣竅就是佳恬,只需要在其他中性的調(diào)色板(例如一些傳統(tǒng)的單色方案)中添加明亮的色調(diào)捏境,這會(huì)讓新的方案很醒目。
(Dropbox:結(jié)合了白色毁葱、灰色和藍(lán)色)

2.接受自然的饋贈(zèng)

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

因?yàn)檫@些方案看起來很自然倾剿。想得到啟發(fā)筷频?我們只需要環(huán)顧四周。

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

推薦文章:設(shè)計(jì)師實(shí)踐手冊(cè):K-pop 中的五個(gè)設(shè)計(jì)元素

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

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

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

這個(gè)概念是非常簡(jiǎn)單的使用:60% 主色調(diào)窒所,30% 次要顏色鹉勒,10% 重點(diǎn)色。

(60 主色吵取,30 次要色禽额,10 點(diǎn)睛的重點(diǎn)色,視線很容易從整體過渡到重點(diǎn)色的焦點(diǎn)上)

4.先做灰度設(shè)計(jì)

顏色設(shè)計(jì)非常有趣皮官。但是再設(shè)計(jì)顏色之前脯倒,先強(qiáng)制自己設(shè)計(jì)灰度。以灰度梯度構(gòu)建應(yīng)用 App 的原型捺氢,并將其用作基準(zhǔn)藻丢。在添加顏色之前,以灰度設(shè)計(jì)摄乒,讓你更專注于間距和布局等元素悠反。

5.避免使用純黑

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

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

純黑色會(huì)過于顯眼疫诽,也會(huì)讓人覺得不自然。許多 App 的黑色不是真的黑旦委,而是深灰色奇徒,比如 Asos 的頂部并不是 #000000,而是#242424社证。所以記得給你的顏色加一點(diǎn)飽和度逼龟。

6.對(duì)比的重要性

顏色是引導(dǎo)視覺的工具。你如果想要吸引用戶注意力追葡,那就要靠對(duì)比來脫穎而出腺律。重要內(nèi)容或者關(guān)鍵元素,需要高對(duì)比色來突出宜肉。

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

簡(jiǎn)評(píng):人人都是設(shè)計(jì)師匀钧,穿衣搭配,繪畫設(shè)計(jì)谬返,

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

當(dāng)我們構(gòu)建配色方案時(shí),我們需要思考顏色對(duì)于感知層面的影響酿炸。

紅瘫絮、橙、黃

  • 紅色:強(qiáng)大填硕、激情麦萤、危險(xiǎn)、重要扁眯。紅色是極其刺激的顏色壮莹,想著這力量、速度姻檀,能量命满。紅色已經(jīng)被證明能夠增加血液循環(huán)和促進(jìn)新陳代謝。這就是為什么人們看到紅色绣版,他們會(huì)增加閱讀速度胶台。紅色能夠抓住用戶的注意力狭莱,或突顯出某個(gè)元素。
  • 黃色:快樂概作,友善,刺激默怨,注意力讯榕。黃色是一種非常多才多藝的顏色,淺黃色與太陽相關(guān)聯(lián)匙睹,因此對(duì)于傳播具有積極性和溫暖度愚屁。黃色的深色(如金色)給人的印象是復(fù)古和年齡。這些較深的色調(diào)通常與永恒和智慧有關(guān)痕檬。
  • 橙色:嬉戲霎槐、活力、吸引力梦谜、便宜丘跌。橙色是一種溫暖而充滿活力的顏色。充滿精力唁桩,為用戶創(chuàng)造溫馨感闭树。一些研究表明,橙色代表著廉價(jià)荒澡。

綠报辱、藍(lán)、紫

  • 色:自然单山,安全碍现,新鮮。綠色反映了環(huán)保主義和自然接近的感覺米奸。它也意味著增長(zhǎng)昼接,這就是為什么它經(jīng)常與業(yè)務(wù)相關(guān)聯(lián)。綠色意味著對(duì)或錯(cuò)躏升。
  • 藍(lán)色:平靜辩棒,負(fù)責(zé)任,值得信賴膨疏,可靠一睁。藍(lán)色常常與平靜和放松的情緒相關(guān)聯(lián)。它也與實(shí)力和可靠性相關(guān)聯(lián)佃却,給人以信任和敬業(yè)精神者吁。藍(lán)色預(yù)示著內(nèi)心的安全感。這就是為什么你可能會(huì)看到銀行和技術(shù)企業(yè)使用這種顏色饲帅。社交媒體巨頭如 Facebook复凳,Twitter 和 LinkedIn 都在網(wǎng)絡(luò)上使用藍(lán)色的藍(lán)色瘤泪。
  • 色:豪華,神秘育八,浪漫对途,靈性。歷史上與皇室相關(guān)聯(lián)髓棋,紫色暗示了產(chǎn)品是高端的实檀。

粉、黑按声、白膳犹、灰

  • 色:女性,天真签则,青春须床。粉紅色以其女性氣質(zhì)而聞名。
  • 色:強(qiáng)大渐裂,復(fù)雜豺旬,神秘,深邃芯义。黑色比其他顏色(包括紅色)吸引更多的注意力哈垢。這就是為什么它最常用于文字和強(qiáng)調(diào)。
  • 色:純潔扛拨,健康耘分,干凈,無辜绑警。白色可以突出周圍的其他顏色求泰,白色作為次要顏色,很受歡迎计盒。
  • 色:中性渴频,正式,復(fù)雜北启,素寫卜朗。灰色代表中立咕村,它可以承擔(dān)黑色或白色的特征场钉。當(dāng)用作原色時(shí),會(huì)給人以正式的印象懈涛。

請(qǐng)注意逛万,顏色的含義可能因文化和情況而異。要了解更多信息批钠,請(qǐng)查看世界各地顏色和色彩意義這篇文章宇植。

8.無障礙設(shè)計(jì)

無障礙是設(shè)計(jì)色彩時(shí)候的重中之重得封。今天的產(chǎn)品必須要服務(wù)所有人,所 - 有 - 人指郁。

※ 顏色應(yīng)該對(duì)所有人友好

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

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

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

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

※ 避免文字低對(duì)比度

對(duì)比是色彩理論中至關(guān)重要的一個(gè)領(lǐng)域咒吐。當(dāng)在文本中使用顏色時(shí),請(qǐng)注意属划,將兩個(gè)顏色相對(duì)較低的兩種顏色放在一起可能會(huì)使文本難以閱讀恬叹。

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

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

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

好消息是菱农,你不必手動(dòng)檢查。使用顏色對(duì)比度檢查器晤愧,只需點(diǎn)擊幾下就可以檢查顏色組合大莫。

彩蛋:UX 設(shè)計(jì)師的基本工具

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

**※ **Adobe Color CC

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

**※ **Dribbble Search-by-color

當(dāng)你想對(duì)其他設(shè)計(jì)師使用特定顏色進(jìn)行視覺研究時(shí)忘蟹,請(qǐng)到 dribbble.com/colors 并選擇所需的顏色。

**※ **Material Design

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

**※ **Colorzilla

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


**※ **Coolors.co

Coolors是一個(gè)強(qiáng)大的工具來創(chuàng)建多彩多姿的方案锰扶。可以簡(jiǎn)單地鎖定所選顏色寝受,然后按空格鍵生成新的調(diào)色板坷牛。這個(gè)工具很酷的東西是,你不僅僅只有一個(gè)結(jié)果很澄,只需修改參考點(diǎn)就可以接收幾種配色方案京闰。


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


※ Adobe Photoshop 中的色盲模擬模式

使用 Photoshop忙干,可以測(cè)試設(shè)計(jì)的可訪問性。只需去 *View *> Proof Setup浪藻,然后可以選擇兩種類型(Protanopia 型或 Deuteranopia 型)捐迫。

**※ **NoCoffee Vision Simulator for Chrome

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

顏色是設(shè)計(jì)師最強(qiáng)大的武器之一辆雾,希望上述規(guī)則能為設(shè)計(jì)師肪笋,或者對(duì)設(shè)計(jì)感興趣的你有所幫助。現(xiàn)在,是時(shí)候?qū)嵺`了藤乙,因?yàn)樯试O(shè)計(jì)中最關(guān)鍵的一個(gè)環(huán)節(jié)猜揪,就是真的去創(chuàng)造,去實(shí)踐坛梁!

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末褐缠,一起剝皮案震驚了整個(gè)濱河市政鼠,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌队魏,老刑警劉巖缔俄,帶你破解...
    沈念sama閱讀 216,372評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異器躏,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)蟹略,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門登失,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人挖炬,你說我怎么就攤上這事揽浙。” “怎么了意敛?”我有些...
    開封第一講書人閱讀 162,415評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵馅巷,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我草姻,道長(zhǎng)钓猬,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,157評(píng)論 1 292
  • 正文 為了忘掉前任撩独,我火速辦了婚禮敞曹,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘综膀。我一直安慰自己澳迫,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評(píng)論 6 388
  • 文/花漫 我一把揭開白布剧劝。 她就那樣靜靜地躺著橄登,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上拢锹,一...
    開封第一講書人閱讀 51,125評(píng)論 1 297
  • 那天谣妻,我揣著相機(jī)與錄音,去河邊找鬼面褐。 笑死拌禾,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的展哭。 我是一名探鬼主播湃窍,決...
    沈念sama閱讀 40,028評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼匪傍!你這毒婦竟也來了您市?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,887評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤役衡,失蹤者是張志新(化名)和其女友劉穎茵休,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體手蝎,經(jīng)...
    沈念sama閱讀 45,310評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡榕莺,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了棵介。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片钉鸯。...
    茶點(diǎn)故事閱讀 39,690評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖邮辽,靈堂內(nèi)的尸體忽然破棺而出唠雕,到底是詐尸還是另有隱情,我是刑警寧澤吨述,帶...
    沈念sama閱讀 35,411評(píng)論 5 343
  • 正文 年R本政府宣布岩睁,位于F島的核電站,受9級(jí)特大地震影響揣云,放射性物質(zhì)發(fā)生泄漏捕儒。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評(píng)論 3 325
  • 文/蒙蒙 一邓夕、第九天 我趴在偏房一處隱蔽的房頂上張望肋层。 院中可真熱鬧,春花似錦翎迁、人聲如沸栋猖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蒲拉。三九已至肃拜,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間雌团,已是汗流浹背燃领。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評(píng)論 1 268
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留锦援,地道東北人猛蔽。 一個(gè)月前我還...
    沈念sama閱讀 47,693評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像灵寺,于是被迫代替她去往敵國(guó)和親曼库。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容