網(wǎng)頁(yè)設(shè)計(jì)配色精彩十例_網(wǎng)頁(yè)配色教程
顏色的使用在網(wǎng)頁(yè)制作中起著非常要害的作用,有很多網(wǎng)站以其成功的色彩搭配令人過(guò)目不忘。但是對(duì)于剛開始學(xué)習(xí)制作網(wǎng)頁(yè)的人來(lái)說(shuō),往往不輕易駕馭好網(wǎng)頁(yè)的顏色搭配。除了學(xué)習(xí)各種色彩理論和方法之外,筆者認(rèn)為多學(xué)習(xí)一些聞名網(wǎng)站的用色方法,對(duì)于我們制作漂亮的網(wǎng)頁(yè)可以起到事半功倍的作用。所以,筆者總結(jié)了一些聞名網(wǎng)站的顏色搭配方法,這些方法可以讓我們的學(xué)習(xí)少走彎路,快速提高我們的網(wǎng)頁(yè)制作水平。
一、網(wǎng)頁(yè)顏色原理和象征意義
我們所有網(wǎng)頁(yè)上顏色,在HTML下看到的是以顏色英文單詞或者十六進(jìn)制的表示方法(如#000000表示為黑色)。不同的顏色有著不同的含義,給人各種豐富的感覺(jué)和聯(lián)想。
紅色:熱情、奔放、喜悅、莊重
黃色:高貴、富有、燦爛、活潑
黑色:嚴(yán)厲、夜晚、沉著
白色:純潔、簡(jiǎn)單、潔凈
藍(lán)色:天空、清爽、科技
綠色:植物、生命、生氣
灰色:莊重、沉穩(wěn)
紫色:浪漫、富貴
棕色:大地、厚樸
二、網(wǎng)頁(yè)顏色的使用風(fēng)格
不同的網(wǎng)站有著自己不同的風(fēng)格,也有著自己不同的顏色。網(wǎng)站使用顏色大概分為幾種類型:
1、 公司色
在現(xiàn)在企業(yè)中,公司的CI形象顯得尤其重要,每一個(gè)公司的CI設(shè)計(jì)必然要有標(biāo)準(zhǔn)的顏色。比如新浪網(wǎng)的主色調(diào)是一種介于淺黃和深黃之間的顏色,同時(shí)形象宣傳、海報(bào)、廣告使用的顏色都和網(wǎng)站的顏色一致。再比如國(guó)富投資公司的主色調(diào)是C:100%,M:60%,Y:0%,K:0%。這樣的顏色使用到網(wǎng)站上顯得色調(diào)自然、底蘊(yùn)深厚。
2、 風(fēng)格色
許多網(wǎng)站使用顏色秉承的是公司的風(fēng)格。比如海爾使用的顏色是一種中性的綠色,即布滿朝氣有不失自己的創(chuàng)新精神。女性網(wǎng)站使用粉紅色的較多,大公司使用藍(lán)色的較多……這些都是在突出自己的風(fēng)格。
3、 習(xí)慣色
這些網(wǎng)站的顏色使用很大一部分是憑自己的個(gè)人愛(ài)好,以個(gè)人網(wǎng)站較多使用,比如自己喜歡紅色、紫色、黑色等,在做網(wǎng)站的時(shí)候就傾向于這種顏色。每一個(gè)人都有自己喜歡的顏色,因此這種類型稱為習(xí)慣色。
三、設(shè)計(jì)用色十例
以下我將分別介紹十個(gè)配色較好的網(wǎng)站,大家可以學(xué)習(xí)和借鑒一下,培養(yǎng)對(duì)色彩的敏感以及獨(dú)到的審美能力�!�

圖1

圖2

圖3 4)現(xiàn)在介紹的網(wǎng)站相對(duì)簡(jiǎn)單,但是她的用色也別具匠心,現(xiàn)在我們來(lái)看一看,整體上使用的是白色RGB(255,255,255),輔助色為RGB(79,88,95),菜單色為RGB(48,64,64)和RGB(0,81,111)字體使用的是RGB(83,86,91)。雖然簡(jiǎn)單,但顏色搭配非常的科學(xué)合理。如圖4

圖4

圖5

圖6 7)鮮紅色也是一種震撼感很強(qiáng)茨顏色,假如搭配不當(dāng),也可能使網(wǎng)站沒(méi)有風(fēng)格和特點(diǎn)。下面的這個(gè)網(wǎng)站就是使用紅色比較好的網(wǎng)站。我們來(lái)看看他的顏色搭配。他使用的主色調(diào)是RGB(200,9,0),配以抽象的圖形,文字使用的是RGB(213,229,167)顯得美觀而不失獨(dú)特,大氣而不逼人。如圖7圖7

圖8
圖9 10)下面舉出這個(gè)例子是想證實(shí)一個(gè)道理——只要你有足夠的想象力,你就能夠設(shè)計(jì)出漂亮的網(wǎng)頁(yè)。目前在網(wǎng)上非常流行一句話就是網(wǎng)頁(yè)的搭配不要超過(guò)四種主要顏色,否則就有雜亂之感。下面的這個(gè)網(wǎng)站遠(yuǎn)遠(yuǎn)的超過(guò)了三種顏色,但是她并不失漂亮。因此重要的還是色彩的駕馭能力。下面這個(gè)例子的菜單就使用了7種顏色,但是我們看到的網(wǎng)頁(yè)并不雜亂,相反感覺(jué)作者很有創(chuàng)意。如圖10
圖10 網(wǎng)頁(yè)設(shè)計(jì)的顏色搭配需要在實(shí)踐中不斷的摸索和不斷的創(chuàng)新,認(rèn)真學(xué)習(xí)別人的先進(jìn)方法和經(jīng)驗(yàn),可以快速的提高我們的制作水平。可以說(shuō)。網(wǎng)頁(yè)顏色搭配得當(dāng),成功也就走了一半。假如大家有什么好的方法,別忘了和別人交流,讓我們共同進(jìn)步!
- 網(wǎng)站配色指南-互聯(lián)網(wǎng)的色彩心理學(xué)
- 網(wǎng)頁(yè)設(shè)計(jì)配色基礎(chǔ)分析:RGB與HSB
- 網(wǎng)頁(yè)設(shè)計(jì)色彩搭配寶藍(lán)色的介紹
- 看圖學(xué)配色藝術(shù),學(xué)習(xí)設(shè)計(jì)
- 學(xué)習(xí)HTML的一些關(guān)于顏色方面的參考
- 網(wǎng)頁(yè)配色:正文中國(guó)傳統(tǒng)色彩名錄
- 韓國(guó)在線配色網(wǎng)頁(yè)
- 網(wǎng)頁(yè)設(shè)計(jì)配色:原色
- 網(wǎng)頁(yè)設(shè)計(jì)配色:和色
- 網(wǎng)頁(yè)設(shè)計(jì)配色應(yīng)用實(shí)例剖析——黑色系
- 主流web2.0網(wǎng)站的配色參考方案
- 網(wǎng)站設(shè)計(jì)中的對(duì)比配色和相近配色
網(wǎng)頁(yè)配色教程Rss訂閱網(wǎng)站制作教程搜索
網(wǎng)頁(yè)配色教程推薦
猜你也喜歡看這些
- 摧毀用戶體驗(yàn)
- 一個(gè)設(shè)計(jì)師的PS經(jīng)驗(yàn)技巧及設(shè)計(jì)心得
- PHOTOSHOP中改進(jìn)IOS設(shè)計(jì)流程的30個(gè)訣竅
- WEB可用性測(cè)試的問(wèn)題設(shè)計(jì)
- 導(dǎo)航的流行趨勢(shì)
- 談?dòng)脩趔w驗(yàn),別落下商業(yè)利益
- 專題技巧淺析
- 網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)- 撞色風(fēng)
- 設(shè)計(jì)師的框架
- 中國(guó)互聯(lián)網(wǎng)黑色產(chǎn)業(yè)人數(shù)近10萬(wàn) 5分鐘1起網(wǎng)絡(luò)入侵
- 相關(guān)鏈接:
- 教程說(shuō)明:
網(wǎng)頁(yè)配色教程-網(wǎng)頁(yè)設(shè)計(jì)配色精彩十例
。