為實習(xí)者量身打造的UI界面配色方法

如何快速選擇或搭配顏色？今天和大家介紹在界面中最為常用的三個方法，簡單實用，特別適合剛?cè)腴T的色彩新手，學(xué)起來！

很多同學(xué)要設(shè)計活動頁面或者APP界面大改版等，那么如何快速的選擇或搭配顏色呢？“選擇”和“搭配顏色”，聽到這兩個詞匯的時候，是不是從潛意識上就會有反感，心理琢磨著，這絕對是個坑！肯定得翻來覆去的折騰一把。其實很多初學(xué)設(shè)計師都會碰到同樣的問題。

那我們就橫刀直入的來說說這三招吧。

第一刀：色不過三

經(jīng)常很多大神在網(wǎng)上說配色不要超過三種色，在這我只說三遍，色不過三，色不過三，色不過三！不管是做平面也好，還是網(wǎng)頁，還是做APP等設(shè)計，都需要遵守這個基本的道理。

那啥才算是不超過三種顏色的搭配呢？

在這里很多人都會認(rèn)為就是不要超過三種不同的顏色值。其實不然，不超過三種顏色的搭配，是指不超過三種色相的搭配。在單個色相中可以運用顏色明度或飽和度做色彩的豐富性，而色相不要過三！

如果設(shè)計的界面的顏色太多，炫酷的眼花繚亂是個什么樣的效果？下面我們來看看一家知名的招聘網(wǎng)站。

我想你和我一樣頓時淚流滿面了~

是的，我們單純的就想找份合適的工作，過上幸福美好的生活。并沒有那么簡單，一進(jìn)入主頁面，剎那間，狗皮膏藥鋪面而來。這種感覺，我的小心臟頓時崩潰了……就一小小塊面積，一個城市地址就出現(xiàn)了三種顏色。難道這樣真的好嗎？

我們來做一個對比。有一種設(shè)計，叫別人家的設(shè)計。綠色永遠(yuǎn)是品牌色，紅色就是網(wǎng)站的裝點色，這就叫傳承。

統(tǒng)一的主色彩風(fēng)格的導(dǎo)向，能加強用戶對產(chǎn)品的記憶程度，也然產(chǎn)品的體驗感更加舒適和自然。

三色搭配，只要控制在不超過三種色相的范圍即可。學(xué)過畫畫的商業(yè)設(shè)計師，應(yīng)該都清楚知道顏色的明度、暗度、飽和度。

運用單色的設(shè)計，會顯得單調(diào)乏味。而整體顏色飽和度過低會導(dǎo)致畫面沉悶而不透氣。明快的顏色和明暗的色彩搭配能使畫面顯得層次感豐富而又有朝氣。

做精致的顏色，提煉格調(diào)

在界面設(shè)計中，色彩是設(shè)計中的重中之重，是否正確和完整的表現(xiàn)出產(chǎn)品氣質(zhì)至關(guān)重要。單一的色相，豐富的明度和飽和度能使界面看的有層次感和豐富性。而精簡的色，處理器來也會跟容易統(tǒng)一和把控。在用色時，顏色越少越好，但要保證正確的傳達(dá)出需要表現(xiàn)的功能和元素為前提。在我們每添加一種顏色的時候都需要好好的考慮一下，有沒有必要。因為再復(fù)雜的設(shè)計，也不會多個三種主色彩。

以下界面為了區(qū)分更多的內(nèi)容區(qū)域運用了三種顏色，但因為顏色過度導(dǎo)致頁面分割凌亂，紅色在頁面中就是多余的，功能分割相對也是多余的?？梢杂脙煞N顏色時候，就不要用到三種顏色。可以用一種顏色的時候就不要用三種顏色。簡潔，會使作品更為成熟。

三色搭配，只要控制在不超過三種色相的范圍即可。學(xué)過畫畫的商業(yè)設(shè)計師，應(yīng)該都清楚知道顏色的明度、暗度、飽和度。

運用單色的設(shè)計，會顯得單調(diào)乏味。而整體顏色飽和度過低會導(dǎo)致畫面沉悶而不透氣。明快的顏色和明暗的色彩搭配能使畫面顯得層次感豐富而又有朝氣。

做精致的顏色，提煉格調(diào)

在界面設(shè)計中，色彩是設(shè)計中的重中之重，是否正確和完整的表現(xiàn)出產(chǎn)品氣質(zhì)至關(guān)重要。單一的色相，豐富的明度和飽和度能使界面看的有層次感和豐富性。而精簡的色，處理器來也會跟容易統(tǒng)一和把控。在用色時，顏色越少越好，但要保證正確的傳達(dá)出需要表現(xiàn)的功能和元素為前提。在我們每添加一種顏色的時候都需要好好的考慮一下，有沒有必要。因為再復(fù)雜的設(shè)計，也不會多個三種主色彩。

以下界面為了區(qū)分更多的內(nèi)容區(qū)域運用了三種顏色，但因為顏色過度導(dǎo)致頁面分割凌亂，紅色在頁面中就是多余的，功能分割相對也是多余的?？梢杂脙煞N顏色時候，就不要用到三種顏色?？梢杂靡环N顏色的時候就不要用三種顏色。簡潔，會使作品更為成熟。

同時還發(fā)現(xiàn)，這幾個產(chǎn)品的界面設(shè)計主色面積使用也是非常一致。首頁中使用的主色彩面積較大，導(dǎo)航條全部填充了主色。在二級頁面中則使用的面積較少，將主色點綴到界面中。

我們可以這樣去理解，在用戶使用產(chǎn)品時，更希望用戶記憶產(chǎn)品。而在用戶進(jìn)入了信息頁面時則更注重易用性，希望用戶能找到自己需要的東西。所以主色在首頁使用的面積較多，而二級頁面使用在關(guān)鍵的操作點上。從產(chǎn)品角度出發(fā)，我們在使用主色的時候要考慮頁面的內(nèi)容關(guān)系，理解界面的層次與功能性質(zhì)。從視覺出發(fā)，選擇了飽和度較高的色彩做為主色時，要考慮因為顏色面積過多而造成的視覺疲勞。

在banner和海報的設(shè)計中主色的面積一般會運用在背景色中，相對面積較大。可謂是直奔主題式。

第三刀：從對比色中找輔助色

通常大家覺得只要色彩面積最多就是主色。其實不然，人們的閱讀心理是有差異的，如果顏色飽和度較低容易被相對面積少的高飽和度顏色搶眼，所以在定義界面主色的時候要懸著飽和度（純度）高的顏色作為主色會比較的穩(wěn)定。

在界面設(shè)計匯總使用互補色彩的對比是最為強烈的。這種色彩能使用戶的視覺產(chǎn)生強烈的刺激，情感濃烈，給人留下鮮明的印象。這種方式是最易于傳播的。適合在夸張的、張揚的場景下使用。但這種顏色用的太過于平凡容易造成用戶的視覺疲勞。給人一種不安定的感覺。那么在使用這樣的搭配方式時需要控制使用的位置和信息的面積了，核心的地方可以這樣去使用。

主要的三對互補色：紅綠、藍(lán)橙、黃紫

我們可以看到很多APP的icon為了吸引用戶的注意就用到了強烈對比的互補色

色彩中還會運用到冷暖對比

冷暖對比色是自然平衡的規(guī)律，可以在設(shè)計中大量使用，這樣的配色會使作品非常的出彩，不顯單調(diào)。

在設(shè)計中，冷色與暖色的對比是界面設(shè)計中最為廣泛的使用方法，效果也非常的出眾。

色彩好比就是陰陽太極，冷與暖的兩級平衡還原了生活中的和諧。用這樣的配色效果讓用戶感覺舒服平和。

冷暖色彩搭配的方法基本沒有啥缺點，使用在設(shè)計中，技巧性比較多，對設(shè)計的細(xì)膩感受要求比較高。

先寫到這里?；仡櫼幌陆裉煳覀冎v的知識點。

1.色不過三 2.主色的定義，及面積 3.找輔助色，還記的有那幾對輔助色嗎？

今天和大家分享的這不僅是運用在界面中，更是選擇顏色時至為重要的三個點！實用性極高！看似簡單，大家運用起來還要多加分析哦~

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

文章題目：為實習(xí)者量身打造的UI界面配色方法
本文鏈接：http://www.muchs.cn/news11/319261.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、網(wǎng)站營銷、網(wǎng)站設(shè)計公司、定制網(wǎng)站、小程序開發(fā)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)