首頁(yè)技術(shù)文章正文

UI設(shè)計(jì)之色彩搭配神器 Color Cube

更新時(shí)間:2018-01-10 來源:黑馬程序員 瀏覽量:

UI設(shè)計(jì)之色彩搭配神器 Color Cube

效果圖:

UI設(shè)計(jì)

步驟1 色彩基礎(chǔ):

色彩是光照在物體上反射到人眼的一種視覺效應(yīng)。也是我們常說的彩色。

步驟2 色彩三原色:

紅綠藍(lán)稱為色光三原色(下圖左);

紅黃藍(lán)稱為色彩三原色(下圖右);

設(shè)計(jì)中的三原色是指色彩原色,即 紅黃藍(lán)

UI設(shè)計(jì)

步驟3 色彩三屬性:

色相:色彩的相貌。例如:紅橙黃綠青藍(lán)紫;

明度:色彩的明亮程度。例如:早上和晚上;

飽和度:又稱為純度,色彩的鮮艷程度。

色彩打牌關(guān)于明度,色彩本身是具有明度區(qū)別的,黃色的明度最高,紫色的明度最低,紅、藍(lán)、綠明度相當(dāng);

明度和飽和度是相互影響的,在設(shè)計(jì)時(shí)候需要綜合考慮;

UI設(shè)計(jì)

步驟4 色彩搭配:

常見色彩搭配

單色搭配:只通過一種色相通過明度和飽和度的改變進(jìn)行搭配;

UI設(shè)計(jì)

近似色搭配:在色相環(huán)中,鄰近顏色的之間搭配。也稱之為鄰近色搭配。

UI設(shè)計(jì)

補(bǔ)色搭配:在色相環(huán)中180°搭配稱為補(bǔ)色搭配。

UI設(shè)計(jì)

分裂色搭配:同時(shí)用補(bǔ)色和近似色的搭配方式稱為分裂色。

UI設(shè)計(jì)

原色搭配:用三原色進(jìn)行色彩搭配的稱為原色搭配

UI設(shè)計(jì)

步驟4 那么重點(diǎn)來了——認(rèn)識(shí)了色彩,知道了搭配如何選擇顏色搭配呢?

分享一些好的色彩搭配的方法:

方法一:把畫面組織成主色和輔色。

主色選擇由產(chǎn)品決定。即,不同產(chǎn)品選擇不同色主色,例如:男性選擇藍(lán)、灰、黑等;女性選擇紅、黃、紫色;

輔色選擇根據(jù)搭配規(guī)律;

例如:紅色可通過單色搭配、近似色(黃、紫)、對(duì)比色(綠色)等方式搭配。搭配的一般規(guī)律為:

近似色:注意在過度的時(shí)候一定不要太明顯;

分裂色: 70%、25%、5%的基本原則;

補(bǔ)色:20%、80%的基本原則;

方法二:配色工具介紹

UI設(shè)計(jì)

官網(wǎng)地址:http://www.fancynode.com.cn/colorcube/home

1. 色彩分析:將任意圖像文件拖入軟件界面并點(diǎn)按“分析”按鈕即可按照 蜂巢圖、色板、色彩索引 三種樣式向用戶展示圖像中的主要配色;

例如:

UI設(shè)計(jì)

UI設(shè)計(jì)

UI設(shè)計(jì)

2. 可根據(jù)分析出的色彩進(jìn)行“導(dǎo)出色板”,放入PS里面使用:

UI設(shè)計(jì)

UI設(shè)計(jì)

打開PS,導(dǎo)入色板,就可以通過色板取色啦!

UI設(shè)計(jì)

3. 色彩索引:可獲得主要色和輔色的搭配;

UI設(shè)計(jì)

4. 批量網(wǎng)頁(yè)截圖

如果覺得網(wǎng)頁(yè)還不錯(cuò)的,可以支持批量網(wǎng)頁(yè)截圖,只用復(fù)制URL地址到Color Cube中即可;

UI設(shè)計(jì)

復(fù)制地址:

UI設(shè)計(jì)

右鍵設(shè)置:

UI設(shè)計(jì)

UI設(shè)計(jì)

支持三種顏色格式(#9d2613、9d2613、157 38 19)

設(shè)置好之后,點(diǎn)擊

UI設(shè)計(jì)

(中間變?yōu)樗{(lán)色即為使用狀態(tài))Ctrl+V即可;

UI設(shè)計(jì)

此時(shí),這個(gè)URL地址的頁(yè)面即加載到了這個(gè)下載列表中了;點(diǎn)擊三角開始下載;

右鍵:

UI設(shè)計(jì)

UI設(shè)計(jì)

下載完成!

5. 屏幕取色:

UI設(shè)計(jì)

打開后直接取得屏幕任意位置的顏色,與PS搭配,得心應(yīng)手;

UI設(shè)計(jì)

獲得16進(jìn)制代碼,復(fù)制到PS中使用;

有了色彩神器的幫助,設(shè)計(jì)中我們?cè)僖膊挥脼樯实倪x擇而勞神了!


本文版權(quán)歸黑馬程序員UI設(shè)計(jì)綜合設(shè)計(jì)師學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明作者出處。謝謝!

作者:黑馬程序員UI設(shè)計(jì)綜合設(shè)計(jì)師培訓(xùn)學(xué)院

首發(fā):http://ui.itheima.com/

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!