建站常識(shí)
網(wǎng)站設(shè)計(jì)的思考之如何配置網(wǎng)頁(yè)色彩
2006-07-13 10:27:00
網(wǎng)頁(yè)的色彩是樹立網(wǎng)站形象的關(guān)鍵之一,色彩搭配卻是網(wǎng)友們感到頭疼的問題。網(wǎng)頁(yè)的背景,文字,圖標(biāo),邊框,超鏈接...,應(yīng)該采用什么樣的色彩,應(yīng)該搭配什么色彩才能最好的表達(dá)出預(yù)想的內(nèi)涵呢?阿捷這里談一些心得,希望對(duì)你有所啟發(fā)。
首先我們先來了解一些色彩的基本知識(shí):
1.顏色是因?yàn)楣獾恼凵涠a(chǎn)生的。
2.紅,黃,藍(lán)是三原色,其它的色彩都可以用這三種色彩調(diào)和而成。
網(wǎng)頁(yè)html語(yǔ)言中的色彩表達(dá)即是用這三種顏色的數(shù)值表示
例如:紅色是color(255,0,0)十六進(jìn)制的表示方法為(FF0000)
白色為(FFFFFF), 我們經(jīng)常看到的"bgColor=#FFFFFF"就是指背景色為白色。
3.顏色分非彩色和彩色兩類。
非彩色是指黑,白,灰系統(tǒng)色。
彩色是指除了非彩色以外的所有色彩。
4.任何色彩都有飽和度和透明度的屬性,屬性的變化產(chǎn)生不同的色相,所以至少可以制作幾百萬(wàn)種色彩。
網(wǎng)頁(yè)制作用彩色還是非彩色好呢?根據(jù)專業(yè)的研究機(jī)構(gòu)研究表明:彩色的記憶效果是黑白的3.5倍。也就是說,在一般情況下,彩色頁(yè)面較完全黑白頁(yè)面更加吸引人。
我們通常的做法是:主要內(nèi)容文字用非彩色(黑色),邊框,背景,圖片用彩色。這樣頁(yè)面整體不單調(diào),看主要內(nèi)容也不會(huì)眼花。
●非彩色的搭配
黑白是最基本和最簡(jiǎn)單的搭配,白字黑底,黑底白字都非常清晰明了。
灰色是萬(wàn)能色,可以和任何彩色搭配,也可以幫助兩種對(duì)立的色彩和諧過渡。如果你實(shí)在找不出合適的色彩,那么用灰色試試,效果絕對(duì)不會(huì)太差。
●彩色的搭配
色彩千變?nèi)f化,彩色的搭配是我們研究的重點(diǎn)。我們依然需要進(jìn)一步學(xué)習(xí)一些色彩的知識(shí)。
一.色環(huán)。我們將色彩按"紅->黃->綠->藍(lán)->紅"依次過度漸變,就可以得到一個(gè)色彩環(huán)。
色環(huán)的兩端是暖色和寒色,當(dāng)中是中型色。(如下圖)
紅.橙.橙黃.黃.黃綠.綠.青綠.藍(lán)綠.藍(lán).藍(lán)紫.紫.紫紅.紅
|___________| |____| |_________| |_________|
| | | |
暖色系 中性系 寒色系 中性系
二.色彩的心理感覺。不同的顏色會(huì)給瀏覽者不同的心理感受。
紅色---是一種激奮的色彩。刺激效果,能使人產(chǎn)生沖動(dòng),憤怒,熱情,活力的感覺。
綠色---介于冷暖兩中色彩的中間,顯得和睦,寧?kù)o,健康,安全的感覺。
它和金黃,淡白搭配,可以產(chǎn)生優(yōu)雅,舒適的氣氛。
橙色---也是一種激奮的色彩,具有輕快,歡欣,熱烈,溫馨,時(shí)尚的效果。
黃色---具有快樂,希望,智慧和輕快的個(gè)性,它的明度最高。
藍(lán)色---是最具涼爽,清新,專業(yè)的色彩。
它和白色混合,能體現(xiàn)柔順,淡雅,浪漫的氣氛(象天空的色彩:)
白色---具有潔白,明快,純真,清潔的感受。
黑色---具有深沉,神秘,寂靜,悲哀,壓抑的感受。
灰色---具有中庸,平凡,溫和,謙讓,中立和高雅的感覺。
每種色彩在飽和度,透明度上略微變化就會(huì)產(chǎn)生不同的感覺。以綠色為例,
黃綠色有青春,旺盛的視覺意境,而藍(lán)綠色則顯得幽寧,陰深。
○網(wǎng)頁(yè)色彩搭配的原理
1.色彩的鮮明性。網(wǎng)頁(yè)的色彩要鮮艷,容易引人注目。
2.色彩的獨(dú)特性。要有與眾不同的色彩,使得大家對(duì)你的印象強(qiáng)烈。(參考設(shè)計(jì)思考第二篇網(wǎng)站CI的標(biāo)準(zhǔn)色彩一節(jié))
3.色彩的合適性。就是說色彩和你表達(dá)的內(nèi)容氣氛相適合。如用粉色體現(xiàn)女性站點(diǎn)的柔性。
4.色彩的聯(lián)想性。不同色彩會(huì)產(chǎn)生不同的聯(lián)想,藍(lán)色想到天空,黑色想到黑夜,紅色想到喜事等,選擇色彩要和你網(wǎng)頁(yè)的內(nèi)涵相關(guān)聯(lián)。
○網(wǎng)頁(yè)色彩掌握的過程
隨著網(wǎng)頁(yè)制作經(jīng)驗(yàn)的積累,我們用色有這樣的一個(gè)趨勢(shì):單色->五彩繽紛->標(biāo)準(zhǔn)色->單色。一開始因?yàn)榧夹g(shù)和知識(shí)缺乏,只能制作出簡(jiǎn)單的網(wǎng)頁(yè),色彩單一;在有一定基礎(chǔ)和材料后,希望制作一個(gè)漂亮的網(wǎng)頁(yè),將自己收集的最好的圖片,最滿意色彩堆砌在頁(yè)面上;但是時(shí)間一長(zhǎng),卻發(fā)現(xiàn)色彩雜亂,沒有個(gè)性和風(fēng)格;第三次重新定位自己的網(wǎng)站,選擇好切合自己的色彩,推出的站點(diǎn)往往比較成功;當(dāng)最后設(shè)計(jì)理念和技術(shù)達(dá)到頂峰時(shí),則又返樸歸真,用單一色彩甚至非彩色就可以設(shè)計(jì)出簡(jiǎn)潔精美的站點(diǎn)。
○網(wǎng)頁(yè)色彩搭配的技巧
文章寫到這里,有心急的網(wǎng)友要問了:“到底用什么色彩搭配好看呢?你能不能推薦幾種配色方案?”別急,這里有一點(diǎn)技巧,可以幫助你迅速成為調(diào)色大師:)
1.用一種色彩。這里是指先選定一種色彩,然后調(diào)整透明度或者飽和度,(說得通俗些就是將色彩變淡或則加深),產(chǎn)生新的色彩,用于網(wǎng)頁(yè)。這樣的頁(yè)面看起來色彩統(tǒng)一,有層次感。
2.用兩種色彩。先選定一種色彩,然后選擇它的對(duì)比色(在photoshop里按ctrl+shift+I)。我的主頁(yè)用藍(lán)色和黃色就是這樣確定的。整個(gè)頁(yè)面色彩豐富但不花稍。
3.用一個(gè)色系。簡(jiǎn)單的說就是用一個(gè)感覺的色彩,例如淡藍(lán),淡黃,淡綠;或者土黃,土灰,土藍(lán)。確定色彩的方法各人不同,我是在photoshop里按前景色方框,在跳出的拾色器窗中選擇"自定義",然后在"色庫(kù)"中選就可以了:)
4.用黑色和一種彩色。比如大紅的字體配黑色的邊框感覺很"跳"。
在網(wǎng)頁(yè)配色中,忌諱的是:
1.不要將所有顏色都用到,盡量控制在三種色彩以內(nèi)。
2.背景和前文的對(duì)比盡量要大,(絕對(duì)不要用花紋繁復(fù)的圖案作背景),以便突出主要文字內(nèi)容。
好了,今天阿捷就為大家講到這里了,另外The Open Road網(wǎng)站為大家提供了一張網(wǎng)頁(yè)基本配色表,是非常有價(jià)值的資料,趕快保存一頁(yè)吧!
(http://best.163.com/%7Esinclair/chinese/teach/color/color1.htm)
下次我們繼續(xù)討論“字體和表格”,有好的心得,請(qǐng)來信!
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁(yè)設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢(shì)?
延伸閱讀
- [2007-05-11 10:00:00] “交互”的三個(gè)條件
- [2006-01-06 21:50:00] 網(wǎng)頁(yè)設(shè)計(jì)應(yīng)防止的10個(gè)錯(cuò)誤
- [2010-03-28 21:39:00] 中國(guó)網(wǎng)頁(yè)設(shè)計(jì)沒有特點(diǎn)
- [2010-04-07 21:41:00] 如何精簡(jiǎn)用戶界面
- [2005-12-28 13:24:00] 無間斷MC正/倒播放
- [2006-06-22 13:28:00] 國(guó)內(nèi)外網(wǎng)站設(shè)計(jì)與瀏覽習(xí)慣的差異
- [2009-10-28 18:22:00] 設(shè)計(jì)師挖掘用戶需求淺談【前篇】
- [2010-06-24 08:15:00] 視覺設(shè)計(jì)師成長(zhǎng)的三個(gè)階段
- [2011-12-04 18:34:34] 力圖數(shù)字科技為中化(青島)農(nóng)產(chǎn)品提供網(wǎng)站設(shè)計(jì)
- [2010-11-11 08:26:00] 瞬間的快感之細(xì)節(jié)提升用戶滿意度
- [2005-12-28 14:00:00] 網(wǎng)頁(yè)編輯常用表現(xiàn)的實(shí)現(xiàn)方法
- [2006-07-27 13:40:00] 優(yōu)化策略:網(wǎng)頁(yè)設(shè)計(jì)的七大注意事項(xiàng)
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
企業(yè)網(wǎng)站為什么要備案 網(wǎng)站品牌 青島網(wǎng)站建設(shè)公司哪家好 網(wǎng)站設(shè)計(jì)趨勢(shì) GOOGLE 集團(tuán)性網(wǎng)站 網(wǎng)站制作 微官網(wǎng)帶來的好處 微信營(yíng)銷的優(yōu)勢(shì) 青島flash網(wǎng)站 程序開發(fā) 青島網(wǎng)絡(luò)公司 微信小程序 網(wǎng)站視覺 力圖數(shù)字科技 網(wǎng)站建設(shè),手機(jī)網(wǎng)站 網(wǎng)站推廣 青島IT資訊 網(wǎng)站建設(shè)的步驟有哪些 如何做網(wǎng)站優(yōu)化 網(wǎng)頁(yè)設(shè)計(jì) 青島網(wǎng)站設(shè)計(jì)哪家好 青島黃島、紅島網(wǎng)站建設(shè)公司 響應(yīng)式設(shè)計(jì) 手機(jī)網(wǎng)站建設(shè) 版面布局 網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè) 網(wǎng)站SEO 頁(yè)面設(shè)計(jì) 輪胎網(wǎng)站設(shè)計(jì)