配色知識(shí),教你掌握UI設(shè)計(jì)的配色方法(3)
通過(guò)人工方式(肉眼識(shí)別色彩)創(chuàng)建色板是最理想的,但這需要我們對(duì)色彩有很好的理解。任何靠工具自動(dòng)識(shí)別產(chǎn)生的色板,總是在準(zhǔn)確性上有所欠缺,因此最好使用你自己的視覺(jué)。
在下面的例子中,我選擇了支付寶應(yīng)用的界面,通過(guò)識(shí)別分析出應(yīng)用使用的主色,次色以及中性色。
主色一般與整個(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。
使用Adobe Color CC你還能夠選擇不同的配色模式,甚至移動(dòng)取色標(biāo)識(shí)選擇不同的顏色加入到你的色板中。
收集色彩在Dribble上,你可以瀏覽和保存色板。你可以根據(jù)一個(gè)色彩來(lái)尋找所有以這個(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)用色彩。
Material Design中的色彩Google推出的Material Design 色彩設(shè)計(jì)指南,其中推薦的色板對(duì)你進(jìn)行Web UI或iOS設(shè)計(jì)同樣非常有幫助。
Sketch色板Sketch色板 使你能夠非常方便地保存或?qū)肴只蛭臋n色板。其中推薦的色板對(duì)你進(jìn)行IOS設(shè)計(jì)同樣非常有幫助。我們一般可以從一個(gè)包含了iOS,Material Design,和Flat UI 的全局色板開(kāi)始。
顏色漸變iOS中非常多地使用漂亮的漸變效果。通過(guò)選取兩個(gè)相匹配的顏色,然后簡(jiǎn)單設(shè)置就能產(chǎn)生漸變效果。下面是一個(gè)收集了很多漸變效果的優(yōu)秀集合。
Skala Color一個(gè)能在Sketch和XCode中使用的顏色拾取器。支持RGB,HEX等不同格式。
歡迎關(guān)注作者「技匠」的微信公眾號(hào) techmask 喔
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- 顏色管理,讓自己的照片在網(wǎng)上正確地顯示
- 設(shè)計(jì)界面最常用最舒服的12種顏色(含色
- Photoshop初級(jí)教程-命令的技巧
- 用戶(hù)體驗(yàn),分享20個(gè)有影響力的包裝設(shè)計(jì)
- 移動(dòng)設(shè)計(jì),移動(dòng)應(yīng)用導(dǎo)航模式設(shè)計(jì)方法
- 用戶(hù)體驗(yàn),如何讓用戶(hù)心動(dòng)?
- 調(diào)色知識(shí),簡(jiǎn)單實(shí)用的調(diào)色原理
- 色彩知識(shí),講解顏色基礎(chǔ)知識(shí)和配色理論
- UI知識(shí),尺寸對(duì)UI設(shè)計(jì)的影響
- 圖片畫(huà)冊(cè)平面設(shè)計(jì)排版ps理論教程