本文由Norman_HU原創翻譯，原作： Wojciech ZielińskiF
原文地址：https://blog.prototypr.io/how-to-use-colors-in-ui-design-16406ec06753
轉自: 胡圖真探 id:newbee-design
顏色跟其他事物一樣，使用需要恰到好處。如果您在配色方案中堅持使用最多三種基色，您將獲得更好的效果。將顏色應用於設計項目中，要保持色彩平衡，您使用的顏色越多，越難保持平衡。
顏色不會增加設計品質 - 它只是加強了設計的品質感
皮埃爾·波納德（Pierre Bonnard）
如果您需要調色板中定義的顏色以外的其他顏色，請使用明度和色調進行調整。他們將提供不同的顏色基調與之配合。
60–30–10 規則
室內設計規則是一種永恆的裝飾技術，可以幫助您輕鬆地將配色方案放在一起。 60％+ 30％+ 10％的比例是為了保持顏色平衡。這個公式非常有用，因為它創造出一種平衡的感覺，並允許眼睛從一個焦點到另一個焦點舒適地移動。 使用也非常簡單。
60％是主色調，30％是副色和10％用於強調色。
牆面漆（60%），家具（30%），配飾（10%）
顏色的含義
幾個世紀以來，科學家已經研究出某些顏色的生理效應。 除了美學，顏色也是情感交流的創造者。 顏色的含義可能因文化差異而不同。這就是為什麼你看到時裝店鋪的設計是黑白配色。 他們希望看起來優雅而高貴。
Asos採用純黑白配色搭配綠色按鈕設計，這種配色是有原因的。
紅色：激情，愛，危險
藍色：平靜，負責，安全
黑色：神秘，優雅，邪惡
白色：純淨，沉默，清潔
綠色：新鮮，新鮮，自然
首先考慮單色設計
在項目設計初期，我們通常傾向於嘗試不同的顏色進行調整，但這種行為會很快違背你的初衷，當你發現的時候，已經花費了3個小時調整基礎色...這確實很誘人，但你應該學會避免這種態度。
相反，你應當專注於元素的間距和整體布局。它會節省你很多時間。 這種約束是非常有成效的。從另一方面講，它看起來並不乏味。如果你想讓整個作品看起來更好，嘗試不同的顏色選擇。
我在追波（dribbble）上的作品之一。簡約單色處理，專注於元素之間的使用。
避免使用灰色和黑色
我學到的最重要的顏色技巧之一是避免使用灰色等不飽和色彩。 在現實生活中，純灰色幾乎不存在。 黑色也是如此。
這張圖片最黑的顏色不是＃000，而是＃0A0A10
始終記著給你的顏色增加飽和度。潛意識裡會顯得更自然，為用戶所熟悉。
相信自然
最好的顏色組合來自大自然。 他們看起來總是很自然。 尋找顏色設計的解決方案，最好的辦法是調色板總是發生變化。
為了得到設計靈感，我們只需環顧四周。
保持對比
一些顏色相互融合，而其他顏色一起使用會發生衝突。 有一個明確的規則，想要了解不同顏色之間如何融合，最好的辦法是觀察一個色輪。 你應該知道這個方法，但是沒有必要動手操作。
獲取靈感
當我們在談論UI參考時，dribbble是最佳選擇。它還具有通過顏色搜索的工具，所以當你想對其他設計師使用特定顏色進行視覺研究時，然後去這裡：dribbble.com/colors
視頻，平面廣告設計，室內設計，時裝.有這麼多鼓舞人心的地方可供收集。如果說根本就沒有配色參考，那一定是懶惰的原因，把那些調色板保存下來，一切看起來都非常有趣。
通常我喜歡從KPOP（韓國流行音樂）視頻剪輯中選取顏色，他們看起來很華麗。
配色工具推薦
為了方便起見，我搜集了一些最好的配色工具可供選擇，在2017年獲取調色板，他們會為您節省大量的時間。
Coolors.co
這個絕對是我最喜歡的取色工具。 您只需鎖定所選顏色並按空格即可生成調色板。 Coolors還可讓您上傳圖像並從中調出調色板。 很酷的事情是，你不僅僅是一個結果，而是有一個選擇器，允許你修改參考點。
網址連結：https://coolors.co/（請使用科學上網工具打開）
Kuler
這款Adobe旗下的配色工具已經和我們在一起了很長時間。它在瀏覽器和桌面版本中都可用。 如果您使用的是桌面版本，則可以將配色方案導出到Photoshop中。
網址連結：https://color.adobe.com/zh/
Paletton
它類似於Kuler，但不同的是，您不僅限於5個色調。 當您擁有原色並希望使用其他色調時，您可以使用這款很棒的工具。
網址連結：http://paletton.com/
（請使用科學上網工具打開）
Designspiration.net
試想一下，你有自己的配色的想法，但你要看到幾種顏色組合的例子。 Designspiration是一個偉大的工具。 您可以選擇最多5種顏色，並搜索符合您的查詢的圖像。 真的很好，不僅用於找到具有特定調色板的圖像，還可以在設計中實現它們。
網址連結：http://designspiration.net/
（請使用科學上網工具打開）
ShutterstockLab Spectrum
你可能會問：如果我想用我所選擇的顏色搜索照片？ 那麼，Shutterstock有一個叫做Spectrum的工具，你可以用特定的語氣搜索照片。 您甚至不需要訂閱，因為具有水印的小預覽圖像將足以生成調色板。
網址連結：https://www.shutterstock.com/labs/spectrum/
（請使用科學上網工具打開）
Tineye Multicolr
但是，如果你想搜索照片中的顏色混合，甚至指定每個顏色的數量，那麼Tineye會幫助你。 本網站使用了來自Flickr千萬張共享圖像的資料庫。
網址連結：http://labs.tineye.com/
最後的想法
掌握配色技巧是一件苦差事，特別是在數字時代。 上面提到的技巧將會減輕工作中尋找正確顏色方案的困難度。 學習創造令人驚嘆的配色方案，最佳方法是練習，讓自己有所幫助，用玩的心態去使用顏色。
越努力，越幸運。
這裡是龐門正道。