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

來(lái)源:未知 作者:技匠 學(xué)習(xí):6808人次

theoat.com.cn_0333315K3-22.jpg

人工方式識(shí)別色彩

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

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

theoat.com.cn_0333312M1-23.jpg

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

theoat.com.cn_03333161B-24.jpg

使用Adobe Color CC

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

theoat.com.cn_0333314425-25.gif

收集色彩

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

theoat.com.cn_03333140Y-26.jpg

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

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

theoat.com.cn_0333311610-27.jpg

色彩指南

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

theoat.com.cn_0333315K5-28.jpg

Material Design中的色彩

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

theoat.com.cn_0333311V1-29.jpg

Sketch色板

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

theoat.com.cn_0333313455-30.jpg

顏色漸變

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

theoat.com.cn_0333311119-31.jpg

Skala Color

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

theoat.com.cn_03333122a-32.jpg

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

 

 

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
小道不知道2016-04-15 11:55
對(duì)于新手來(lái)說(shuō),解析的通俗易懂,大愛(ài)~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!