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

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

創(chuàng)想設(shè)計學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計學(xué)院UI設(shè)計是不是出現(xiàn)了這么一個顏色的殘影，那么為何會這樣?因為我們的眼睛需要看到完整的東西，當視覺受到一定刺激后，心理產(chǎn)生了平衡這個色彩的渴望，需要通過看到的顏色的互補色來平衡你的心理需求。創(chuàng)想設(shè)計學(xué)院平衡的色彩關(guān)系是心理和生理的渴望創(chuàng)想設(shè)計學(xué)院官網(wǎng)：/

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

創(chuàng)想設(shè)計學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計學(xué)院UI設(shè)計那么我們在設(shè)計與繪畫中將冷暖色分為三種色調(diào)：?暖色調(diào)分為紅橙黃?冷色調(diào)分為青色、藍色,紫色和綠色相對中性，因為他們偏冷暖的調(diào)性不強，紫色介于紅藍之間，綠色介于黃藍之間。創(chuàng)想設(shè)計學(xué)院案例1：創(chuàng)想設(shè)計學(xué)院官網(wǎng)：/

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

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

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

創(chuàng)想設(shè)計學(xué)院官網(wǎng)：/創(chuàng)想設(shè)計學(xué)院互補色，是我們最常見也是用的最廣泛的配色；色環(huán)180°左右的兩個色區(qū)為互補，注意是180左右，因為顏色是不絕對的。創(chuàng)想設(shè)計學(xué)院案例1：創(chuàng)想設(shè)計學(xué)院官網(wǎng)：/

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

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

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