UI設計之色彩搭配神器 Color Cube

UI設計之色彩搭配神器 Color Cube

效果圖：

步驟1 色彩基礎：

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

步驟2 色彩三原色：

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

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

設計中的三原色是指色彩原色，即 紅黃藍

步驟3 色彩三屬性：

色相：色彩的相貌。例如：紅橙黃綠青藍紫;

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

飽和度：又稱為純度，色彩的鮮艷程度。

色彩打牌關于明度，色彩本身是具有明度區(qū)別的，黃色的明度最高，紫色的明度最低，紅、藍、綠明度相當;

明度和飽和度是相互影響的，在設計時候需要綜合考慮;

步驟4 色彩搭配：

常見色彩搭配

單色搭配：只通過一種色相通過明度和飽和度的改變進行搭配;

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

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

分裂色搭配：同時用補色和近似色的搭配方式稱為分裂色。

原色搭配：用三原色進行色彩搭配的稱為原色搭配

步驟4 那么重點來了——認識了色彩，知道了搭配如何選擇顏色搭配呢?

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

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

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

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

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

近似色：注意在過度的時候一定不要太明顯;

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

補色：20%、80%的基本原則;

方法二：配色工具介紹

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

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

例如：

2. 可根據(jù)分析出的色彩進行“導出色板”，放入PS里面使用：

打開PS，導入色板，就可以通過色板取色啦!

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

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

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

復制地址：

右鍵設置：

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

設置好之后，點擊

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

此時，這個URL地址的頁面即加載到了這個下載列表中了;點擊三角開始下載;

右鍵：

下載完成!

5. 屏幕取色：

打開后直接取得屏幕任意位置的顏色，與PS搭配，得心應手;

獲得16進制代碼，復制到PS中使用;

有了色彩神器的幫助，設計中我們再也不用為色彩的選擇而勞神了！

本文版權歸黑馬程序員UI設計綜合設計師學院所有，歡迎轉載，轉載請注明作者出處。謝謝！

作者：黑馬程序員UI設計綜合設計師培訓學院

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