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

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

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

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

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

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

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

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

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

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

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

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

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

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