在UI設計中色彩的運用

原文：How to use color in UI Design

原文地址：https://blog.prototypr.io/how-to-use-colors-in-ui-design-16406ec06753

作者：Wojciech Zielińsk

翻譯：Annieway

顏色和其他東西一樣，使用起來需要適度。在一個界面中顏色過多會讓人找不到重點，而太少友讓畫面太單調。此時配色方案就是為了擺脫設計中對顏色難以取捨的困難而要必須去做的，以其為基準，在你的設計中靈活運用，讓顏色使畫面飽滿而不雜亂。那如何做到顏色在設計中的平衡，如何讓顏色成為你設計的一大利器，我們就此來討論下。

Color does not add a pleasant quality to design — it reinforces it. ——波納爾（Pierre Bonnard，1867-1947）（顏色不是給設計添加了優點而是強化了它）

在你的默認的調色板滿足不了你的需求時，利用色相、飽和度、明度做出對應調整，將會提供一種不同的表現方式。

60–30–10 原則

室內設計原則是一個永恆的裝飾技術，從室內裝飾的配色中，可以去年輕鬆完成你設計的配色方案。60%+30%+10%的比例分配指的是畫面中顏色的面積佔比，從而讓畫面的色彩平衡。這種平衡讓我們的眼睛從一個焦點自然過渡到另一個焦點。堅持這個原則達到平衡也是很容易做到的。

60%是你的主色調，30%是二色，10%是重音色。

色彩意義

科學家們研究了幾個世紀以來某些顏色的生理作用。研究顯示，顏色的含義可以根據文化和環境而有所不同。除了理論，色彩是情感和聯想的創造者，不同的顏色會讓人產生不同情感，也會讓人產生無限的聯想。這就是為什麼你會看到黑白時裝店。他們想顯得優雅和崇高。

紅色：激情，愛，危險

藍色：平靜，負責，安全

黑色：神秘，優雅，邪惡

白色：純凈，沉默，清潔

綠色：新生，新鮮，自然

首先考慮單色設計

在項目設計初期，我們通常從挑選顏色設計配色方案開始，但是這個習慣總會讓我們在花了3個小時調整基色後發現，挑選的顏色跟我們的設計初衷不符合，都用不了。

相反，如果強迫自己從開始就專註於間距和布局元素，那會節省很多時間。從單色開始設計的界面雖看上去簡單，但從另一方面講，通過控制項元素和分區排版的設計，它看起來並不乏味。如果你想讓整個作品看起來更好，可以嘗試不同的飽和度或者明度來進行調整。

避免使用純色和黑色

課堂和工作上學到的最重要的色彩技巧之一就是避免使用純灰色。在現實生活中，純粹的灰色幾乎從來沒有存在過。黑色也一樣。

這個照片中的最黑的顏色並不是# 000，而是# 0a0a10

要記得給你的顏色增加一點飽和度。人們的潛意識裡，會看起來更自然更熟悉。

相信自然

最好的顏色組合來自大自然。源於大自然的顏色才是最自然的。而且環境總是在變化，這也為我們的設計提供著無窮盡的方案。為了得到設計靈感，我們只需環顧四周。

保持對比

有些顏色想相互融合，而有些顏色會互相衝突。關於它們如何相互作用的規則是可以在色輪上觀察到的。在色輪上相對的一對顏色的對比強烈的顏色，色輪上臨近的顏色則是相互融合的。相互融合的顏色雖然看上去比較舒適，但是沒有對比就沒有突出，適當的運用才會有主有輔。

獲取靈感

當我們談論UI參考的時候，Dribbble是最好的地方。它具有通過顏色搜索的工具，如果當你想對其他設計師使用特定顏色進行視覺研究時，然後去這裡：http://dribbble.com/colors

配色工具推薦

為了方便起見，我搜集了一些最好的配色工具可供選擇，在2017年獲取調色板，他們會為您節省大量的時間。

http://Coolors.co

這個絕對是我最喜歡的取色工具。 您只需鎖定所選顏色並按空格即可生成調色板。 Coolors還可讓您上傳圖像並從中調出調色板。最酷的是，他提供不僅僅是一個結果，而是給了一個選擇器，可以隨著參考點的更改而變換顏色。

Kuler

這款Adobe旗下的配色工具已經和我們在一起了很長時間。它在瀏覽器和桌面版本中都可用。 如果您使用的是桌面版本，則可以將配色方案導出到Photoshop中。

Paletton

它類似於Kuler，但不同的是，您不僅限於5個色調。 當您擁有原色並希望使用其他色調時，您可以使用這款很棒的工具。

http://Designspiration.net

試想一下，你有自己的配色的想法，但你要看到幾種顏色組合的例子。 Designspiration是一個偉大的工具。 您可以選擇最多5種顏色，並搜索符合您的查詢的圖像。 真的很好，不僅用於找到具有特定調色板的圖像，還可以在設計中實現它們。

ShutterstockLab Spectrum

你可能會問：如果我想用我所選擇的顏色搜索照片？ 那麼，Shutterstock有一個叫做Spectrum的工具，你可以用特定的語氣搜索照片。 您甚至不需要訂閱，因為具有水印的小預覽圖像將足以生成調色板。

Tineye Multicolr

但是，如果你想搜索照片中的顏色混合，甚至指定每個顏色的數量，那麼Tineye會幫助你。 本網站使用了來自Flickr千萬張共享圖像的資料庫。

最後

掌握配色技巧是一件苦差事，特別是在如今的數字時代。 上面提到的技巧將會減輕工作中尋找正確顏色方案的困難度。 學習創造令人驚嘆的配色方案，最佳方法是練習，放鬆心態重視平時積累，這些將對自己有所幫助。

以上是本篇文章全部內容，感謝您的閱讀，希望對您設計產生幫助。

以上是翻譯小組成員的作品，閣主真為他們感到驕傲，不管是選材還是從語言組織，都很用心。這樣每周大夥所學的知識就更加多了，閣主也有更多的精力去做相對更完善的設計知識體系的搭建，服務於大家，以及更深入的思考怎樣更有效的傳達給大家。現階段在從清華大學本科的設計知識體系上出發，畫出一些設計的知識樹形結構，相信大家能很快就可以看到。同時自己也在翻譯最近大熱的原型工具Framer的手冊，下周起以後每周更新一篇，全部無償送給大家~

跟著感覺走，靜靜地。學著去相信自己的內心

職場設計教程搶先看～一枚愛折騰、愛健身的設計師妹紙~

詳情請關注微信公眾號：Sophia的玲瓏閣，獲取更多有關交互、健身及其它相關信息。

推薦閱讀：