原創(chuàng)譯文 | 如何在UI設(shè)計(jì)中正確地運(yùn)用色彩

顏色和其他東西一樣,最好是適度使用——少了,寡淡無味,多了,過猶不及。如果你能堅(jiān)持在自己的配色方案中最多不會(huì)超過三種主色調(diào),那么一般來講,你的設(shè)計(jì)都會(huì)獲得比較好的效果。在一個(gè)設(shè)計(jì)項(xiàng)目中,應(yīng)用的顏色與設(shè)計(jì)最終呈現(xiàn)出來的平衡感有著莫大的關(guān)系,你選擇使用的顏色越多,那么想要實(shí)現(xiàn)平衡感就越難。

"色彩并不能為你的設(shè)計(jì)作品增添令人愉悅/舒適的質(zhì)感——它的實(shí)際作用是強(qiáng)化了這種質(zhì)感。"

—— Pierre Bonnard

如果在設(shè)計(jì)過程中,你已經(jīng)確定好了自己的調(diào)色板,但是又需要一些額外的顏色來做補(bǔ)充,可以運(yùn)用陰影和色調(diào)來做一些變化,它們結(jié)合起來會(huì)呈現(xiàn)出一種和諧的效果。

一.60-30-10原則

這個(gè)室內(nèi)裝修的配色原則是經(jīng)時(shí)間檢驗(yàn)的配色技巧,可以幫助你輕松地將配色方案組織在一起。60%+30%+10% 的比例是為了實(shí)現(xiàn)平衡色彩,這個(gè)公式之所以起作用,是因?yàn)樗鼊?chuàng)造了一種平衡感,讓眼睛可以舒服地從一個(gè)焦點(diǎn)移動(dòng)到另一個(gè)焦點(diǎn)。難得的是它的使用也非常簡(jiǎn)單。

其中:

主色調(diào)占60%

輔助色占30%

重點(diǎn)突出顏色占10%

墻漆;家具;配飾


二.顏色的含義

科學(xué)家研究了幾個(gè)世紀(jì)以來某些顏色對(duì)生理的影響。除了美學(xué),色彩是情感和想象力的創(chuàng)造者。顏色的含義很大程度上取決于文化和環(huán)境。這就是你經(jīng)常看到黑色和白色的時(shí)尚商店的原因——他們想要使自己顯得優(yōu)雅、品質(zhì)卓越。

?Asos網(wǎng)頁(yè)

?Asos網(wǎng)頁(yè)設(shè)計(jì)是純粹黑白色,而“加入購(gòu)物袋”按鈕選擇了綠色,這是有原因的。

· 紅色:激情、愛、危險(xiǎn)

· 藍(lán)色:冷靜、可靠的、安全的

· 黑色:神秘、高雅、惡魔

· 白色:純潔、安靜、干凈

· 綠色:嶄新的、新鮮的、自然的

如果你想了解更多顏色的含義,可以查看這個(gè)列表:

色彩文化

三.?灰度優(yōu)先

在設(shè)計(jì)過程中,我們都喜歡不停地嘗試各種色彩和色調(diào),但是當(dāng)你意識(shí)到你花了3個(gè)小時(shí)來調(diào)整基色,卻發(fā)現(xiàn)你之前都在做無用功。這種習(xí)慣對(duì)于設(shè)計(jì)師來說具有致命的吸引力,但是你應(yīng)該學(xué)會(huì)克制,避免總是走進(jìn)這個(gè)死胡同。

相反,你要強(qiáng)迫自己專注于元素的間距、布局等,這樣會(huì)為你節(jié)省大量的時(shí)間。這種約束是十分有效的,而且它并不是一件無聊的事情。如果你想讓它更加好看,可以嘗試使用不同的色調(diào)。

我在dribbble上的作品,只用了簡(jiǎn)單的單色,專注于元素的調(diào)整

四.避免使用純粹的灰色或黑色

我所學(xué)的用色技巧中,有一點(diǎn)很重要,那就是避免使用沒有飽和度的灰色。在現(xiàn)實(shí)生活中,純粹的灰色基本上是不存在的,同理黑色也是一樣。

這張照片中最深的顏色色值不是#000,而是#0A0A10

?你要始終記得給自己的顏色添加一點(diǎn)飽和度,這樣潛意識(shí)中,用戶看著它會(huì)覺得更加自然和親切。

五.相信自然

最棒的色彩組合來源于大自然,這些色彩組合總會(huì)看起來非常舒服自然。從環(huán)境中選取適合的顏色組合,但是設(shè)計(jì)最佳的最終方案還是需要不停地調(diào)試你的調(diào)色板。

?要汲取(配色)靈感,我們只需看看周圍

六.保持對(duì)比度

有些顏色很相配,但是有些顏色卻會(huì)相互沖突。關(guān)于它們是如何相互匹配、相互作用的規(guī)則,是可以在色輪上觀察到的。你應(yīng)該對(duì)這套理論有認(rèn)識(shí),但是不必自己手動(dòng)去操作。

從左至右:互補(bǔ)色、相近色、三色系、分散的互補(bǔ)色、方形色系、矩形色系

如果你想學(xué)習(xí)更多更詳細(xì)的色彩搭配理論,可以看這篇文章:Color Theory For Designers: Creating Your Own Color Palettes(《設(shè)計(jì)師的色彩理論:創(chuàng)建你自己的調(diào)色板》)

七.獲取靈感

當(dāng)我們說起UI設(shè)計(jì)參考的時(shí)候,dribbble是最好的尋找靈感的地方。它也有搜索顏色的工具,所以當(dāng)你想對(duì)其他設(shè)計(jì)師“如何使用特殊顏色”進(jìn)行視覺研究時(shí),請(qǐng)你到這里來:dribbble.com/colors

視頻、印刷設(shè)計(jì)、室內(nèi)設(shè)計(jì)、時(shí)尚……有太多可以獲取靈感的地方。不要太依賴那些固有的調(diào)色板樣式,而是要把所有你看起來非常喜歡、覺得有趣、讓你眼前一亮的東西存起來。

我經(jīng)常從一些韓國(guó)視頻里偷顏色,它們非常漂亮

八.工具

為了提高效率,我2017年收集了一些特別棒的選色工具。它們會(huì)節(jié)省你大量的時(shí)間。

1.Coolors.co

這是我最喜歡的選色工具。你只需簡(jiǎn)單地鎖定選定的顏色,然后按空格生成調(diào)色板。在Coolors上你可以上傳一張圖片,并從中生成一個(gè)調(diào)色板。最酷的事情是,你不僅限于一個(gè)調(diào)色板結(jié)果,它會(huì)給你提供一個(gè)選擇器,允許你隨時(shí)修改引用點(diǎn)。

?2.Kuler

這個(gè)來自于Adobe的工具已經(jīng)陪伴了我們很久了。它可以在網(wǎng)頁(yè)端使用,也有桌面本地版本。如果你使用的是桌面版本,可以把配色方案導(dǎo)入到Photoshop里。

?3.Paletton

這個(gè)工具跟Kuler很像,不同的是,它生成的調(diào)色板里不局限于5種顏色。當(dāng)你已經(jīng)確定了主色調(diào),想要找一些填充色的時(shí)候,這是個(gè)非常棒的工具。

?4.Designspiration.net

想想一下,你已經(jīng)有了一套配色方案,但是你還是想看一下他們組合起來的實(shí)際效果。這時(shí)候,強(qiáng)烈安利Designspiration給你。你可以選擇5種顏色,然后搜索到使用這5種顏色的設(shè)計(jì)圖。真的很贊,不是因?yàn)槟憧梢圆榈綉?yīng)用了這些色彩的圖像,而是因?yàn)槟憧梢哉嬲吹剿鼈冊(cè)谠O(shè)計(jì)中真實(shí)被使用、實(shí)現(xiàn)的樣子。

5.Shutterstock Lab Spectrum

你可能會(huì)詢問——如果我想根據(jù)某特定色彩搜索圖片呢?Shutterstock有個(gè)功能,名叫Spectrum,可供你根據(jù)特定的顏色來搜索圖片。你甚至不需要訂閱,因?yàn)閹〉男D預(yù)覽足夠生成調(diào)色板。

?6.Tineye Multicolr

但如果你想搜索擁有多種色彩混合在一起的照片,并指定每種色彩的數(shù)量,那么Tineye會(huì)幫上大忙。這個(gè)網(wǎng)站使用了來自Flickr的1000萬(wàn)個(gè)創(chuàng)意共享圖像數(shù)據(jù)庫(kù)。

總結(jié)

色彩是一個(gè)很難掌握的概念,特別是在數(shù)字時(shí)代。上面提到的技巧可以為查找正確的色彩這項(xiàng)工作提供一些便利。而如果你想創(chuàng)造出讓人驚艷的配色方案,最好的方法歸根到底,還是需要不斷地練習(xí)。所以,別光看文章,動(dòng)起手來,沉浸到色彩的世界中,玩兒起來~

原文作者:Wojciech Zieliński

如需轉(zhuǎn)載,請(qǐng)注明原文及編譯信息哦~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,316評(píng)論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,481評(píng)論 3 415
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,241評(píng)論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,939評(píng)論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,697評(píng)論 6 409
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,182評(píng)論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,247評(píng)論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,406評(píng)論 0 288
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,933評(píng)論 1 334
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,772評(píng)論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,973評(píng)論 1 369
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,516評(píng)論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,209評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,638評(píng)論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,866評(píng)論 1 285
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,644評(píng)論 3 391
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,953評(píng)論 2 373

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