當(dāng)前位置:首頁>ps入門教程>ps基礎(chǔ)教程>設(shè)計知識>教程內(nèi)容

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

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

theoat.com.cn_0333315K3-22.jpg

人工方式識別色彩

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

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

theoat.com.cn_0333312M1-23.jpg

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

theoat.com.cn_03333161B-24.jpg

使用Adobe Color CC

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

theoat.com.cn_0333314425-25.gif

收集色彩

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

theoat.com.cn_03333140Y-26.jpg

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

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

theoat.com.cn_0333311610-27.jpg

色彩指南

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

theoat.com.cn_0333315K5-28.jpg

Material Design中的色彩

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

theoat.com.cn_0333311V1-29.jpg

Sketch色板

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

theoat.com.cn_0333313455-30.jpg

顏色漸變

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

theoat.com.cn_0333311119-31.jpg

Skala Color

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

theoat.com.cn_03333122a-32.jpg

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

 

 

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

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

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

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