一、色不過(guò)三
一個(gè)界面中的主要色彩不要超過(guò)三種，表達(dá)出主題即可，不管是做平面還是做網(wǎng)頁(yè)和APP，都要遵循這個(gè)最簡(jiǎn)單的道理。
但是我一開(kāi)始以為色不過(guò)三是指一個(gè)頁(yè)面顏色最多不要超過(guò)三種，后來(lái)又多看了一些文章發(fā)現(xiàn)，這個(gè)是指不要超過(guò)三種色相的搭配。在單個(gè)色相中可以運(yùn)用顏色明度或者飽和度做色彩的豐富性，而這種不要超過(guò)三種。
如果設(shè)計(jì)的界面顏色太多，用戶(hù)打開(kāi)的第一眼印象會(huì)覺(jué)得有點(diǎn)亂，如下圖：

正確的配色方式

58同程的金剛區(qū)其實(shí)是比較有特點(diǎn)的，但是顏色有點(diǎn)過(guò)多，會(huì)讓用戶(hù)覺(jué)得整個(gè)界面在視覺(jué)上會(huì)稍微有點(diǎn)凌亂，可能也是因?yàn)楫a(chǎn)品的LOGO顏色比較多，識(shí)別度上來(lái)說(shuō)是挺好的，但是用到界面搭配上會(huì)有點(diǎn)多了。
右圖中的VIPKID以統(tǒng)一的色彩風(fēng)格為導(dǎo)向，加上鄰近色作為輔助色，增強(qiáng)用戶(hù)對(duì)產(chǎn)品的記憶，在視覺(jué)上也讓用戶(hù)覺(jué)得更加舒適和自然。但是如果整個(gè)頁(yè)面都換成主題色的話，會(huì)讓用戶(hù)覺(jué)得整個(gè)界面沒(méi)有重點(diǎn)同時(shí)還很單調(diào)。
小結(jié)：三色搭配，要控制在不超過(guò)三種顏色的色相范圍即可，運(yùn)用單色的設(shè)計(jì)，會(huì)顯得單調(diào)乏味，而整體顏色飽和度過(guò)高會(huì)顯得界面雜亂無(wú)章而不透氣，因此我們?cè)谠O(shè)計(jì)的時(shí)候要把控好顏色的數(shù)量，通過(guò)顏色的把控讓我們的界面主次分明。
二、確定主色

好的色彩搭配同時(shí)還需要符合產(chǎn)品的特征和想要給用戶(hù)帶來(lái)的氛圍，比如藍(lán)色能給人帶來(lái)平靜，因此大部分的閱讀和學(xué)習(xí)類(lèi)的主色調(diào)用的是藍(lán)色。

正確的配色方式

想大家都會(huì)在做產(chǎn)品之前做一些競(jìng)品分析，和主要針對(duì)人群劃分以及產(chǎn)品定位，當(dāng)確定好了產(chǎn)品的方向和消費(fèi)人特征之后，就可以在上圖中選擇合適的顏色來(lái)做細(xì)微的調(diào)整。
我們?cè)谠O(shè)計(jì)初期需要對(duì)項(xiàng)目有比較明確的了解和定位，然后提煉出比較貼切的主色來(lái)進(jìn)行定位設(shè)計(jì)。如下圖所示：

正確的配色方式

每種顏色代表的意義也有所不同，會(huì)導(dǎo)致整個(gè)的視覺(jué)方向和感覺(jué)也會(huì)有所不同。從第一張圖中我們能夠發(fā)現(xiàn)淺藍(lán)色代表可靠，黃色代表活力，而這兩個(gè)顏色就比較符合產(chǎn)品的定位，因此在確認(rèn)了主色之后，再來(lái)搭配輔助色和點(diǎn)綴色，就會(huì)更加容易一些，因?yàn)槟阈睦镆呀?jīng)知道需要搭配出怎樣的整體感覺(jué)出來(lái)。
而網(wǎng)頁(yè)設(shè)計(jì)、界面設(shè)計(jì)、banner設(shè)計(jì)等，主色調(diào)運(yùn)用的規(guī)律也會(huì)有所不同，網(wǎng)頁(yè)和界面會(huì)將主色調(diào)運(yùn)用在結(jié)構(gòu)和裝飾上，而banner和海報(bào)則視覺(jué)上要求會(huì)比較高，將主色調(diào)運(yùn)用在背景上，重點(diǎn)突出。如下圖所示：

正確的配色方式

但是這種形式大部分會(huì)在我們的視覺(jué)稿和練習(xí)里面使用的比較多，在我們平時(shí)的工作中，還是要根據(jù)所推的產(chǎn)品和主題來(lái)確定banner的顏色，但選擇范圍要在界面整體視覺(jué)效果比較協(xié)調(diào)和統(tǒng)一的情況下。如下圖所示：

正確的配色方式

那么我們的主色從哪里來(lái)選擇呢？最常見(jiàn)以及最普遍的用法就是講產(chǎn)品LOGO的顏色來(lái)作為主題色，這樣能夠有效的保持品牌基金和視覺(jué)上的一致性。如下圖所示：

正確的配色方式

產(chǎn)品LOGO這個(gè)要如何設(shè)計(jì)，這又是另外一篇文章的啦，我爭(zhēng)取下周出一篇文章來(lái)專(zhuān)門(mén)寫(xiě)產(chǎn)品logo的設(shè)計(jì)。
不過(guò)有一點(diǎn)需要注意的是從視覺(jué)的角度上出發(fā)，選擇了飽和度比較高的色彩做主色時(shí)，要考慮用戶(hù)是否會(huì)在使用時(shí)造成視覺(jué)疲勞。
三、色盤(pán)里尋找靈感

解決了主色調(diào)的問(wèn)題，在界面需要搭配其他輔助顏色的時(shí)候，如何搭配也是個(gè)很大的問(wèn)題，要怎么搭配才能好看又平衡呢？我們可以從色盤(pán)里尋找靈感。

正確的配色方式

在色彩運(yùn)用中能夠達(dá)到平衡色的有三種類(lèi)型：
1、互補(bǔ)色搭配
在界面的設(shè)計(jì)中，使用互補(bǔ)色的對(duì)比是視覺(jué)上最為強(qiáng)烈的，能夠給用戶(hù)的視覺(jué)產(chǎn)生強(qiáng)烈的刺激。如下圖所示：

正確的配色方式

這種使用的比較少，但是很容易就能夠讓用戶(hù)記住，因此音遇的這種孟菲斯風(fēng)格目前在是市面上還是比較少見(jiàn)的，但它的整體風(fēng)格讓用戶(hù)一打開(kāi)就能夠記住。
2、冷暖色搭配
用冷色和暖色的造成的視覺(jué)平衡是設(shè)計(jì)師經(jīng)常使用的方法，也是很容易就出效果的，如下圖所示：

正確的配色方式

這種顏色的搭配使用由于技巧比較多，因此對(duì)設(shè)計(jì)師的要求比較高，需要多練習(xí)
3、深淺色搭配
在設(shè)計(jì)時(shí)都用淺色會(huì)顯得界面不夠穩(wěn)定，但是使用深色又會(huì)顯得比較沉悶，因此兩者互相搭配，能夠更好的平衡畫(huà)面。如下圖所示：

正確的配色方式

深淺色搭配最經(jīng)典的案例是蘋(píng)果的產(chǎn)品圖，而最直觀給人的感受是高大上，淺色的背景搭配深色的產(chǎn)品，較多的空間留白，頁(yè)面整體穩(wěn)定平衡，同時(shí)突出產(chǎn)品主體 。

正確的配色方式

（鄭重聲明：本文版權(quán)歸海鹽社潘團(tuán)子所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如有侵權(quán)，請(qǐng)聯(lián)系我們刪除；如作者信息標(biāo)記有誤，請(qǐng)聯(lián)系我們修改。）

分享名稱(chēng)：網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)時(shí)如何配色
網(wǎng)頁(yè)網(wǎng)址：http://www.rwnh.cn/news/115411.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、品牌網(wǎng)站設(shè)計(jì)、域名注冊(cè)、網(wǎng)頁(yè)設(shè)計(jì)公司、自適應(yīng)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)

廣告

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