配色知識,教你掌握UI設(shè)計的配色方法(3)
通過人工方式(肉眼識別色彩)創(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。
使用Adobe Color CC你還能夠選擇不同的配色模式,甚至移動取色標(biāo)識選擇不同的顏色加入到你的色板中。
收集色彩在Dribble上,你可以瀏覽和保存色板。你可以根據(jù)一個色彩來尋找所有以這個色彩為主色的設(shè)計,從而激發(fā)你的靈感。
你還能夠選擇不同的配色模式,甚至移動取色標(biāo)識選擇不同的顏色加入到你的色板中。
另一個,我最常去的地方是Pintrest,上面可以看到很多設(shè)計師收集的色板,下面是我Pintrest上的色板Board。
色彩指南理解顏色的基本原理,它們之間的關(guān)系,以及如何選取顏色進(jìn)行配色對于你做APP設(shè)計非常重要。我建議閱讀下面關(guān)于色彩的指南,它除了解釋基本色彩原理之外,還能幫你更深入地了解如何運用色彩。
Material Design中的色彩Google推出的Material Design 色彩設(shè)計指南,其中推薦的色板對你進(jìn)行Web UI或iOS設(shè)計同樣非常有幫助。
Sketch色板Sketch色板 使你能夠非常方便地保存或?qū)肴只蛭臋n色板。其中推薦的色板對你進(jìn)行IOS設(shè)計同樣非常有幫助。我們一般可以從一個包含了iOS,Material Design,和Flat UI 的全局色板開始。
顏色漸變iOS中非常多地使用漂亮的漸變效果。通過選取兩個相匹配的顏色,然后簡單設(shè)置就能產(chǎn)生漸變效果。下面是一個收集了很多漸變效果的優(yōu)秀集合。
Skala Color一個能在Sketch和XCode中使用的顏色拾取器。支持RGB,HEX等不同格式。
歡迎關(guān)注作者「技匠」的微信公眾號 techmask 喔
學(xué)習(xí) · 提示
相關(guān)教程