- 圖文教程 >
- 設(shè)計(jì)教程 >
- UI設(shè)計(jì) >
- 如何在UI設(shè)計(jì)中運(yùn)用顏色
如何在UI設(shè)計(jì)中運(yùn)用顏色
?
作者：紫豆子來源：部落窩教育發(fā)布時間：2018-01-04 14:57:01點(diǎn)擊：3453
版權(quán)說明： 網(wǎng)絡(luò)作品，轉(zhuǎn)載請注明原作者和出處。
編按：
色彩搭配是門看似簡單其實(shí)又很深奧的學(xué)問。今時今日，掌握色彩搭配原理與技巧已成為設(shè)計(jì)師最基本的一項(xiàng)技能，關(guān)于設(shè)計(jì)搭配有很多不同的方法，一起來看看本教程的方法適合你嗎？
本文將分為兩個部分：
?一、法則篇
?二、工具篇
這是一個室內(nèi)設(shè)計(jì)領(lǐng)域中永不過時的裝飾技巧，它可以輕松地幫助你完成一個配色方案。60%+30%+10%的比例分配是為了平衡顏色。這個公式妙在它營造了一種平衡感，使眼睛可以舒適地從一個焦點(diǎn)移動到另一個焦點(diǎn)。同時，它也運(yùn)用起來非常簡單。
60%是主色調(diào)，30%是輔助色，10%是強(qiáng)調(diào)色。
關(guān)注顏色的含義
幾個世紀(jì)以來，科學(xué)家一直在研究顏色的情感效應(yīng)。除了創(chuàng)造美學(xué)，顏色也是情感和聯(lián)想的創(chuàng)造者。顏色的含義會根據(jù)文化和情況而有所不同。這就是為什么你會看到黑白色的時裝店。因?yàn)樗麄兿胍憩F(xiàn)得優(yōu)雅和高級。
Asos電商網(wǎng)站使用黑白配，加上綠色的行為召喚按鈕是有自己的考慮的
?紅色：激情、愛、危險(xiǎn)
?藍(lán)色：冷靜、負(fù)責(zé)、安全
?黑色：神秘、優(yōu)雅、邪惡
?白色：純潔、安靜、干凈
?綠色：新鮮、清新、自然
下圖為顏色在不同的文化下含義不同。
灰度優(yōu)先
我們習(xí)慣在設(shè)計(jì)階段的早期就開始調(diào)整顏色和色調(diào)。但是，當(dāng)你意識到自己花了3個小時來調(diào)整主色調(diào)的時候，你發(fā)現(xiàn)這種行為毫無幫助。雖然把玩顏色很有吸引力，但是你應(yīng)該避免在設(shè)計(jì)初期進(jìn)行這種行為。
相反地，你應(yīng)該強(qiáng)迫自己專注調(diào)整間距和布局元素。這種布局的約束是非常有效的，它會為你節(jié)省很多時間。調(diào)整間距和布局元素并不是那么無聊。如果你想表達(dá)不一樣的東西，嘗試使用不同的色調(diào)即可。
遠(yuǎn)離純灰色和純黑色
多年來，我學(xué)到的一個最重要的顏色技巧之一就是避免使用不帶色調(diào)的灰色。在現(xiàn)實(shí)生活中，純灰色幾乎是不存在的。黑色也是同樣的道理。（沒錯，事實(shí)上就是要五彩斑斕的黑）
記得給你的顏色添加一些色調(diào)。用戶會下意識地覺得這類顏色更加自然和熟悉。
相信自然
最佳的色彩組合來自于大自然。它們總是看起來非常天然。根據(jù)自然環(huán)境來尋找設(shè)計(jì)方案的好處是可以擁有無數(shù)的色板，因?yàn)榇笞匀坏念伾偸窃谧兓?。
我們只需要看看周圍，就能獲取靈感。
保持對比度
有的顏色和某些顏色搭配協(xié)調(diào)，和另一些顏色則會產(chǎn)生沖突。通過色輪，可以很好地觀察到顏色相互作用的規(guī)則。你應(yīng)該清楚地了解這個方法，但是不一樣要親手去做。
獲得靈感
當(dāng)我們談到UI參考的時候，Dribbble是一個很好的選擇。Dribbble也有顏色搜索工具。所以，如果你想要針對某個特定的顏色進(jìn)行視覺研究，可以前往以下網(wǎng)址：dribbble.com/colors
視頻、印刷設(shè)計(jì)、室內(nèi)設(shè)計(jì)、時尚……有很多的啟發(fā)靈感的事物。要對各種形式的色板保持靈敏的感覺，并且把看起來有趣的所有東西存下來。
我會從韓流的視頻短片中獲取顏色靈感
Coolors.co
我最喜歡的顏色選擇工具。你可以簡單地鎖定顏色，并按住空格鍵生成色板。Coolors.co還支持上傳圖片，從圖片中提取色板。Coolors.co酷在，你不僅僅有一個結(jié)果，相反地，你可以通過選擇器，調(diào)整你的顏色，獲得很多配色方案。
鏈接（無需翻墻）：https://coolors.co/
Kuler
這款來自Adobe的工具已經(jīng)陪伴我們很長時間了。它可以在瀏覽器或桌面應(yīng)用中使用。如果你使用的是桌面應(yīng)用程序，那你可以將配色方案導(dǎo)出到Photoshop中。
鏈接（無需翻墻）：https://color.adobe.com/zh/create/color-wheel/
Paletton
它和前面一款工具Kuler相似。不同之處是，它不限于5種色調(diào)。當(dāng)你已經(jīng)確定主色調(diào)，想要調(diào)整輔助色的時候，這是一款很棒的工具。
鏈接（需翻墻）：http://paletton.com/
Shutterstock Lab Spectrum
你可能會問：如果我想用我選擇的顏色搜索圖片呢？那么，Shutterstock旗下有款叫作Spectrum的工具可以滿足你的需求，你可以通過特定的色調(diào)搜索圖片。你甚至不需要稱為會員，因?yàn)榧词故菐〉男☆A(yù)覽圖片已經(jīng)足以生成色板。
鏈接（需翻墻）：https://www.shutterstock.com/labs/spectrum/
Tineye Multicolor
如果你想搜索照片上的色彩組合，甚至確定各個顏色的比例，那么Tineye可以幫助你。這個網(wǎng)站使用的數(shù)據(jù)庫，包含了1000萬張來自Flickr的Creative Commons（知識共享，一個非營利組織）圖像。
鏈接（無需翻墻）：https://labs.tineye.com/multicolr/
最后的想法
色彩是一個非常難以掌握的概念，特別是在數(shù)字時代。上面提到的方法和工具可以幫助你找到合適的顏色。創(chuàng)造令人驚嘆的配色方案的最好的辦法是練習(xí)。所以開始把玩顏色吧。
原文：如何在UI設(shè)計(jì)中運(yùn)用顏色
譯者：紫豆子
出處：https://mp.weixin.qq.com/s/3tEXciFXZiJkE4OZET77Ag
色彩搭配是門看似簡單其實(shí)又很深奧的學(xué)問。今時今日，掌握色彩搭配原理與技巧已成為設(shè)計(jì)師最基本的一項(xiàng)技能，關(guān)于設(shè)計(jì)搭配有很多不同的方法，一起來看看本教程的方法適合你嗎？
本文將分為兩個部分：
?一、法則篇
?二、工具篇
法則篇
60-30-10法則這是一個室內(nèi)設(shè)計(jì)領(lǐng)域中永不過時的裝飾技巧，它可以輕松地幫助你完成一個配色方案。60%+30%+10%的比例分配是為了平衡顏色。這個公式妙在它營造了一種平衡感，使眼睛可以舒適地從一個焦點(diǎn)移動到另一個焦點(diǎn)。同時，它也運(yùn)用起來非常簡單。
60%是主色調(diào)，30%是輔助色，10%是強(qiáng)調(diào)色。
幾個世紀(jì)以來，科學(xué)家一直在研究顏色的情感效應(yīng)。除了創(chuàng)造美學(xué)，顏色也是情感和聯(lián)想的創(chuàng)造者。顏色的含義會根據(jù)文化和情況而有所不同。這就是為什么你會看到黑白色的時裝店。因?yàn)樗麄兿胍憩F(xiàn)得優(yōu)雅和高級。
?紅色：激情、愛、危險(xiǎn)
?藍(lán)色：冷靜、負(fù)責(zé)、安全
?黑色：神秘、優(yōu)雅、邪惡
?白色：純潔、安靜、干凈
?綠色：新鮮、清新、自然
下圖為顏色在不同的文化下含義不同。
我們習(xí)慣在設(shè)計(jì)階段的早期就開始調(diào)整顏色和色調(diào)。但是，當(dāng)你意識到自己花了3個小時來調(diào)整主色調(diào)的時候，你發(fā)現(xiàn)這種行為毫無幫助。雖然把玩顏色很有吸引力，但是你應(yīng)該避免在設(shè)計(jì)初期進(jìn)行這種行為。
相反地，你應(yīng)該強(qiáng)迫自己專注調(diào)整間距和布局元素。這種布局的約束是非常有效的，它會為你節(jié)省很多時間。調(diào)整間距和布局元素并不是那么無聊。如果你想表達(dá)不一樣的東西，嘗試使用不同的色調(diào)即可。
遠(yuǎn)離純灰色和純黑色
多年來，我學(xué)到的一個最重要的顏色技巧之一就是避免使用不帶色調(diào)的灰色。在現(xiàn)實(shí)生活中，純灰色幾乎是不存在的。黑色也是同樣的道理。（沒錯，事實(shí)上就是要五彩斑斕的黑）
在這張圖片中最深的顏色不純黑，而是#0A0A10
記得給你的顏色添加一些色調(diào)。用戶會下意識地覺得這類顏色更加自然和熟悉。
相信自然
最佳的色彩組合來自于大自然。它們總是看起來非常天然。根據(jù)自然環(huán)境來尋找設(shè)計(jì)方案的好處是可以擁有無數(shù)的色板，因?yàn)榇笞匀坏念伾偸窃谧兓?。
我們只需要看看周圍，就能獲取靈感。
保持對比度
有的顏色和某些顏色搭配協(xié)調(diào)，和另一些顏色則會產(chǎn)生沖突。通過色輪，可以很好地觀察到顏色相互作用的規(guī)則。你應(yīng)該清楚地了解這個方法，但是不一樣要親手去做。
獲得靈感
當(dāng)我們談到UI參考的時候，Dribbble是一個很好的選擇。Dribbble也有顏色搜索工具。所以，如果你想要針對某個特定的顏色進(jìn)行視覺研究，可以前往以下網(wǎng)址：dribbble.com/colors
我會從韓流的視頻短片中獲取顏色靈感
工具篇
為了節(jié)省大家時間，下面整理了一些2017年非常好用的色板工具。它們會為你節(jié)省大量的時間。Coolors.co
我最喜歡的顏色選擇工具。你可以簡單地鎖定顏色，并按住空格鍵生成色板。Coolors.co還支持上傳圖片，從圖片中提取色板。Coolors.co酷在，你不僅僅有一個結(jié)果，相反地，你可以通過選擇器，調(diào)整你的顏色，獲得很多配色方案。
Kuler
這款來自Adobe的工具已經(jīng)陪伴我們很長時間了。它可以在瀏覽器或桌面應(yīng)用中使用。如果你使用的是桌面應(yīng)用程序，那你可以將配色方案導(dǎo)出到Photoshop中。
Paletton
它和前面一款工具Kuler相似。不同之處是，它不限于5種色調(diào)。當(dāng)你已經(jīng)確定主色調(diào)，想要調(diào)整輔助色的時候，這是一款很棒的工具。
Shutterstock Lab Spectrum
你可能會問：如果我想用我選擇的顏色搜索圖片呢？那么，Shutterstock旗下有款叫作Spectrum的工具可以滿足你的需求，你可以通過特定的色調(diào)搜索圖片。你甚至不需要稱為會員，因?yàn)榧词故菐〉男☆A(yù)覽圖片已經(jīng)足以生成色板。
Tineye Multicolor
如果你想搜索照片上的色彩組合，甚至確定各個顏色的比例，那么Tineye可以幫助你。這個網(wǎng)站使用的數(shù)據(jù)庫，包含了1000萬張來自Flickr的Creative Commons（知識共享，一個非營利組織）圖像。
最后的想法
色彩是一個非常難以掌握的概念，特別是在數(shù)字時代。上面提到的方法和工具可以幫助你找到合適的顏色。創(chuàng)造令人驚嘆的配色方案的最好的辦法是練習(xí)。所以開始把玩顏色吧。
原文：如何在UI設(shè)計(jì)中運(yùn)用顏色
譯者：紫豆子
出處：https://mp.weixin.qq.com/s/3tEXciFXZiJkE4OZET77Ag