配色知識，教你掌握UI設(shè)計(jì)的配色方法

通過人工方式（肉眼識別色彩）創(chuàng)建色板是最理想的，但這需要我們對色彩有很好的理解。任何靠工具自動識別產(chǎn)生的色板，總是在準(zhǔn)確性上有所欠缺，因此最好使用你自己的視覺。

在下面的例子中，我選擇了支付寶應(yīng)用的界面，通過識別分析出應(yīng)用使用的主色，次色以及中性色。

主色一般與整個品牌的顏色一致，在圖標(biāo)，按鈕，菜單中都會有所使用。次色可以選擇與主色色調(diào)一致的同色系色彩，也可以使用如對比色，鄰近色等與主色存在反差的色彩。次色使用得比較少，僅用在需要引起用戶注意的地方，如消息提醒，折扣推銷等需要醒目標(biāo)識的地方。對于背景色，它們用來襯托內(nèi)容，也可以起到調(diào)和整個應(yīng)用色調(diào)的做用。這也是為什么，我們會同時看到明亮主題的UI和暗色主題的UI。

你還能夠選擇不同的配色模式，甚至移動取色標(biāo)識選擇不同的顏色加入到你的色板中。

在Dribble上，你可以瀏覽和保存色板。你可以根據(jù)一個色彩來尋找所有以這個色彩為主色的設(shè)計(jì)，從而激發(fā)你的靈感。

你還能夠選擇不同的配色模式，甚至移動取色標(biāo)識選擇不同的顏色加入到你的色板中。

另一個，我最常去的地方是Pintrest，上面可以看到很多設(shè)計(jì)師收集的色板，下面是我Pintrest上的色板Board。

理解顏色的基本原理，它們之間的關(guān)系，以及如何選取顏色進(jìn)行配色對于你做APP設(shè)計(jì)非常重要。我建議閱讀下面關(guān)于色彩的指南，它除了解釋基本色彩原理之外，還能幫你更深入地了解如何運(yùn)用色彩。

Google推出的Material Design 色彩設(shè)計(jì)指南，其中推薦的色板對你進(jìn)行Web UI或iOS設(shè)計(jì)同樣非常有幫助。

Sketch色板 使你能夠非常方便地保存或?qū)肴只蛭臋n色板。其中推薦的色板對你進(jìn)行IOS設(shè)計(jì)同樣非常有幫助。我們一般可以從一個包含了iOS，Material Design，和Flat UI 的全局色板開始。

iOS中非常多地使用漂亮的漸變效果。通過選取兩個相匹配的顏色，然后簡單設(shè)置就能產(chǎn)生漸變效果。下面是一個收集了很多漸變效果的優(yōu)秀集合。

一個能在Sketch和XCode中使用的顏色拾取器。支持RGB，HEX等不同格式。

歡迎關(guān)注作者「技匠」的微信公眾號 techmask 喔