UI設(shè)計(jì)必備色彩設(shè)計(jì)方法

創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院UI設(shè)計(jì)必備色彩設(shè)計(jì)方法你好色嗎？我相信每個(gè)人都是好色的，只是好色的程度不一樣罷了。你好色嗎？我相信大家都是好色的，只是每個(gè)人好色的程度不一樣罷了。有些老司機(jī)會(huì)天天開火車，你會(huì)跟不上他的節(jié)奏。那其實(shí)配色也是一樣，每個(gè)人對(duì)色彩的敏感度不同，配色弱一點(diǎn)的同學(xué)總是不敢用色，也可能不知道為什么用這樣的顏色？那么老司機(jī)熊貓帶你上車，探索你不知道的色彩密碼!首先我們來看一個(gè)顏色UI設(shè)計(jì)創(chuàng)想設(shè)計(jì)學(xué)院當(dāng)我們盯著它看10秒再看白色的地方，會(huì)有什么不一樣？有沒有出現(xiàn)一個(gè)新的顏色呢？創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/

創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院UI設(shè)計(jì)是不是出現(xiàn)了這么一個(gè)顏色的殘影，那么為何會(huì)這樣?因?yàn)槲覀兊难劬π枰吹酵暾臇|西，當(dāng)視覺受到一定刺激后，心理產(chǎn)生了平衡這個(gè)色彩的渴望，需要通過看到的顏色的互補(bǔ)色來平衡你的心理需求。創(chuàng)想設(shè)計(jì)學(xué)院平衡的色彩關(guān)系是心理和生理的渴望創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/

創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院UI設(shè)計(jì)上圖中圖1這個(gè)畫面中只用了一個(gè)紅色系，而且都是暗紅色，畫面就會(huì)變得陰森、恐懼和詭異而圖2運(yùn)用到了我們的生理補(bǔ)色，整個(gè)畫面就會(huì)變得美觀、自然和舒適。如何才能做帶色彩平衡創(chuàng)想設(shè)計(jì)學(xué)院.冷暖色的平衡創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院UIUI設(shè)計(jì)什么是絕對(duì)冷暖創(chuàng)想設(shè)計(jì)學(xué)院絕對(duì)冷暖就是你一眼就能看出這個(gè)顏色的冷暖差異，比如偏紅的是暖色，偏藍(lán)的是冷色，這是我們最常見的晚霞，我們會(huì)覺得很美，他是天然的冷暖色平衡。所以冷暖色的搭配符合自然平衡的規(guī)律，也會(huì)影響你的心理情緒。創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/

創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院UI設(shè)計(jì)那么我們?cè)谠O(shè)計(jì)與繪畫中將冷暖色分為三種色調(diào)：?暖色調(diào)分為紅橙黃?冷色調(diào)分為青色、藍(lán)色,紫色和綠色相對(duì)中性，因?yàn)樗麄兤渑恼{(diào)性不強(qiáng)，紫色介于紅藍(lán)之間，綠色介于黃藍(lán)之間。創(chuàng)想設(shè)計(jì)學(xué)院案例1：創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/

創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院UI設(shè)計(jì)創(chuàng)想設(shè)計(jì)學(xué)院圖1：情感失衡；圖2:冷暖色平衡合理。冷暖色的搭配是情感的表達(dá)。我們有意識(shí)的去將畫面進(jìn)行冷暖平衡搭配的時(shí)候，我們的視覺就能得到滿足。而其中的比例關(guān)系需要我們根據(jù)情感去調(diào)整，如果我們需要一個(gè)個(gè)性張揚(yáng)的冷暖配色。那我們就把各自的比例放大。創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/

創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院UI設(shè)計(jì)大面積的使用冷暖對(duì)色會(huì)是情感更加夸張，通常我們使用飽和度比較高的冷暖搭配會(huì)使產(chǎn)品變得很炫酷。創(chuàng)想設(shè)計(jì)學(xué)院案例2：創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/

創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院UI設(shè)計(jì)這是我在一家餐廳門口看到的易拉寶，先去不說他字體排版的問題，我們看到他想突出的內(nèi)容是什么？創(chuàng)想設(shè)計(jì)學(xué)院他把最重要的信息忽略了，因?yàn)樗驯尘坝昧伺?，然后想突出〃砍〃?省〃字，加了一個(gè)大紅色，這是我們?cè)O(shè)計(jì)中最忌諱的配色，在一個(gè)暖色上加了一個(gè)更暖的顏色，會(huì)讓你的畫面看不清，如果你對(duì)顏色的敏感度不高，在冷暖搭配中運(yùn)用不好，那我這有個(gè)小技巧一一暖前冷后搭配法。創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院畫過色彩油畫的同學(xué)應(yīng)該都知道，每一個(gè)顏色都是有冷暖的，會(huì)有冷色的紅，也有暖色的青。這是我10年前畫的一副色彩，當(dāng)時(shí)老師就說，你前面的物體畫暖一點(diǎn)，后面畫的冷一點(diǎn)，你們有發(fā)現(xiàn)嗎？創(chuàng)想設(shè)計(jì)學(xué)院 官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院讀性會(huì)更強(qiáng)這是我工作中做的一些設(shè)計(jì)稿，運(yùn)用冷暖配色，背景為冷色，前景是暖色，這樣我們的信息可2.什么是相對(duì)冷暖其實(shí)設(shè)計(jì)也是一樣的，我們?cè)谧鲈O(shè)計(jì)時(shí)，也需要做冷暖對(duì)比的平衡原則，冷暖對(duì)比并不是說我環(huán)境，相對(duì)冷暖是顏色的細(xì)節(jié)冷暖一個(gè)紅就一定要一個(gè)藍(lán)色去撞色，那是一種比較強(qiáng)烈的冷暖對(duì)比，剛剛講的絕對(duì)冷暖是一個(gè)大網(wǎng)易云信提供什幺？8J5+APP讀性會(huì)更強(qiáng)這是我工作中做的一些設(shè)計(jì)稿，運(yùn)用冷暖配色，背景為冷色，前景是暖色，這樣我們的信息可2.什么是相對(duì)冷暖其實(shí)設(shè)計(jì)也是一樣的，我們?cè)谧鲈O(shè)計(jì)時(shí)，也需要做冷暖對(duì)比的平衡原則，冷暖對(duì)比并不是說我環(huán)境，相對(duì)冷暖是顏色的細(xì)節(jié)冷暖一個(gè)紅就一定要一個(gè)藍(lán)色去撞色，那是一種比較強(qiáng)烈的冷暖對(duì)比，剛剛講的絕對(duì)冷暖是一個(gè)大網(wǎng)易云信提供什幺？8J5+APP正在用網(wǎng)易云信M快開發(fā)遞度創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院我們來看一下ps的色相盤，最中間的是青色，也就是這個(gè)色盤的冷極點(diǎn)，當(dāng)上面的紅色往下走的時(shí)候是越來越冷的，走到了冷極點(diǎn)后，在往下走是越來越暖的。所以上面的紅色是偏冷,也就是冷紅，下面的紅偏暖，也就是暖紅。創(chuàng)想設(shè)計(jì)學(xué)院我們來看一個(gè)案例來說明一下。創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院淘寶的兩個(gè)入口按鈕淘寶的兩個(gè)入口按鈕創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院當(dāng)我們?nèi)ノ档臅r(shí)候發(fā)現(xiàn)，紅色是偏冷的紅，藍(lán)色是偏冷的藍(lán)。所以有些同學(xué)在做設(shè)計(jì)時(shí)一些細(xì)節(jié)上的顏色會(huì)不在一個(gè)調(diào)子上面，這時(shí)候你要檢查一下，同一個(gè)屬性里面是否都在一個(gè)色調(diào)里面，除非你是要突出某個(gè)東西刻意去做的不一樣。小結(jié)：冷暖色是情感傾向的表達(dá)，平衡視覺心理。不同的主題適合不同的冷暖，過冷或者過暖都會(huì)導(dǎo)致情感失衡。創(chuàng)想設(shè)計(jì)學(xué)院2.互補(bǔ)色的平衡創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/

創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院互補(bǔ)色，是我們最常見也是用的最廣泛的配色；色環(huán)180°左右的兩個(gè)色區(qū)為互補(bǔ)，注意是180左右，因?yàn)轭伾遣唤^對(duì)的。創(chuàng)想設(shè)計(jì)學(xué)院案例1：創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/

創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院當(dāng)我們會(huì)設(shè)計(jì)海報(bào)時(shí)，做成這樣已經(jīng)覺得還不錯(cuò)了，可能你覺得這樣的配色很舒服，但是你想表達(dá)什么？是好好吃飯？還是袋鼠的眼睛？，當(dāng)一個(gè)顏色在畫面中過多時(shí)就會(huì)造成缺失感。我們很多同學(xué)在做推廣的時(shí)候，經(jīng)常會(huì)遇到這些問題，需求要你突出產(chǎn)品還是文案，還是兩者都要突出，那么在這些推廣中，都是屬于張揚(yáng)的性格畫面，我們將背景與產(chǎn)品文案用互補(bǔ)色平衡的方法，調(diào)節(jié)你補(bǔ)色的明度和飽和度，這樣你的頁面會(huì)很跳。創(chuàng)想設(shè)計(jì)學(xué)院^例2：創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/

創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院在這個(gè)畫面中其實(shí)沒有大問題，他用黑色去平衡畫面，黑白灰的平衡我們后面會(huì)講到。我們只要看畫面的視覺沖擊，如果使用互補(bǔ)色會(huì)怎樣？我們看到紅綠色版本的視覺沖擊會(huì)更強(qiáng)，更有張力！所以當(dāng)我們?cè)僭O(shè)計(jì)一些品牌推廣的時(shí)候，需要搶占用戶的眼球，這時(shí)候用互補(bǔ)色的平衡對(duì)比，大膽使用顏色，利用飽和度、明度去嘗試能讓你的畫面產(chǎn)生不一樣的效果。創(chuàng)想設(shè)計(jì)學(xué)院案例3：創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/

創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院暖紅與暖綠的互補(bǔ)小結(jié)：互補(bǔ)色能補(bǔ)充色彩情感表達(dá)的缺失感，調(diào)節(jié)互補(bǔ)色的明度、飽和度能改變情感的走向。3.深淺色的平衡3.深淺色的平衡創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院說到深淺色用的最多的地方是漸變，漸變是為了讓畫面更加通透和具有層次感。但漸變也是要講究色彩的韻律，他不是隨意的。案例：創(chuàng)想設(shè)計(jì)學(xué)院之前很火的一款游戲叫紀(jì)念碑谷，這款游戲火的原因就是因?yàn)樗玫搅撕芏嗌顪\色的配色方法來豐富畫面的層次。創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院我們把這類深淺稱為單色深淺，只需調(diào)整他的明暗就可以做出不同程度的漸變了。這樣我們?cè)谖覀儼堰@類深淺稱為單色深淺，只需調(diào)整他的明暗就可以做出不同程度的漸變了。這樣我們?cè)趩紊锟梢宰龅讲煌膶哟侮P(guān)系和明暗關(guān)系。3.1.單色深淺TINTCCJLOUkTOWERTINT我們可以制作一個(gè)深淺的調(diào)色板，從5%-100%的一個(gè)亮度調(diào)色板。創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院深淺色運(yùn)用的地方很多，比如我們的ps,ai。左深右淺，背景深，文字淺，這樣的一個(gè)對(duì)比關(guān)系能拉開信息的層次。比如。我們?cè)谥谱靼粹o的狀態(tài)時(shí)也是如此。我們可添加10%亮度得到一個(gè)hover的狀態(tài)，降低10%深淺色運(yùn)用的地方很多，比如我們的ps,ai。左深右淺，背景深，文字淺，這樣的一個(gè)對(duì)比關(guān)系能拉開信息的層次。比如。我們?cè)谥谱靼粹o的狀態(tài)時(shí)也是如此。我們可添加10%亮度得到一個(gè)hover的狀態(tài)，降低10%明度得到一個(gè)點(diǎn)擊狀態(tài)，如果10%不夠，那就20%。切記深淺平衡并不是說用透明度去調(diào)，這樣很不專業(yè)然后顏色會(huì)偏離。案例:HiustratorCC*1Q4?-R&S7號(hào)*AtQMiEamd..再*禹十臺(tái)時(shí)用/通髀牛方，鼻■4卑Crtimiiwnft置于一，?■AAitsr{jTfiQiwtluuifPhotoshopCC麗?鼻。Wwovimt*5IpuVlMW-IjhBij?b-創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/3.2.多色深淺?11-29-創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/3.2.多色深淺?11-29-1225一些家裝設(shè)計(jì)的色彩搭配也能運(yùn)用到設(shè)計(jì)上，通常我們用相鄰色的不同深淺去搭配，比如黃綠<4i7^-1創(chuàng)想設(shè)計(jì)學(xué)院色。創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院無印良品的紅金搭配小結(jié):深淺色調(diào)節(jié)畫面的節(jié)奏感，是畫面層次更加豐富；通過調(diào)節(jié)色彩的明度，拉開主次關(guān)系，突出重點(diǎn)。4.黑白灰的平衡案例1：創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院我們把紅黃藍(lán)綠放在黑色上對(duì)比，效果是很明顯的。黃色是最亮的，然后是綠色，紅色偏灰，藍(lán)色就很暗了。案例2案例2：創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院當(dāng)一個(gè)畫面產(chǎn)生多種顏色的時(shí)候，除去中性色，你就可以利用這個(gè)平衡法則，三種顏色是處于黑白灰的穩(wěn)定關(guān)系。案例3:同樣，看這個(gè)畫面，這個(gè)畫面看似顏色很多，好像很復(fù)雜的樣子。除去中性色之后，其實(shí)藍(lán)色是最暗的，青色是最亮的，他在做一個(gè)漸變的是時(shí)候是按照黑白灰平衡的原理，所以漸變出來的顏色不會(huì)亂，很有韻律，所以它的配色也是成立的。創(chuàng)想設(shè)計(jì)學(xué)院案例4：創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院我們回到之前互補(bǔ)色的這個(gè)畫面，我們用黑白灰的平衡法測(cè)試一下看是什么樣的效果？我們發(fā)現(xiàn)紅綠都是灰色的。因?yàn)楫?dāng)你直接用紅綠互補(bǔ)的時(shí)候，畫面會(huì)很刺眼，辣眼睛對(duì)吧。這時(shí)候我們需要中性色黑白的介入去控制畫面的平衡，這樣的紅綠互補(bǔ)才會(huì)成立而且更美觀。比如我用這個(gè)案例給你解釋一下:創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：比如我用這個(gè)案例給你解釋一下:創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計(jì)學(xué)院當(dāng)我再綠色上面加個(gè)紅色，哇，是不是非常的辣眼睛，刺眼，難受。當(dāng)我加上黑白