中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

您的位置: 首頁 > 藝術(shù)設(shè)計(jì) > 設(shè)計(jì)理論 > Web 頁面設(shè)計(jì)的色彩理論及應(yīng)用
由純文字版本的主頁引發(fā)的思考 回到列表 裝幀藝術(shù)是書籍的美學(xué)靈魂
 Web 頁面設(shè)計(jì)的色彩理論及應(yīng)用

作者:ari 時(shí)間: 2003-06-30 文檔類型:原創(chuàng) 來自:藍(lán)色理想

  我們在設(shè)計(jì)的運(yùn)用上重點(diǎn)在于創(chuàng)造一個(gè)沒有過的形態(tài),把形體潤飾得協(xié)調(diào)美觀,它受社會的制約,重視地方特征。為了在設(shè)計(jì)中有效的使用色彩我們必須掌握一些色彩的基礎(chǔ)理論知識,結(jié)合自己的實(shí)際經(jīng)驗(yàn),來營造我們的作品。同一色彩有數(shù)之不盡的應(yīng)用方法,并沒有非常機(jī)械的色彩調(diào)和的法則,在一定的原則下靠我們自己的眼睛和審美觀點(diǎn)來做出選擇。

  色彩構(gòu)成(Interaction of color),可以理解為色彩的作用,是在色彩科學(xué)體系的基礎(chǔ)上,研究符合人們知覺和心理原則的配色。配色有三類要素:光學(xué)要素(明度、色相、純度),存在條件(面積、形狀、肌理、位置),心理因素(冷暖、進(jìn)退、輕重、軟硬、樸素華麗),設(shè)計(jì)的時(shí)候運(yùn)用邏輯思維選擇合適的色彩搭配,產(chǎn)生恰當(dāng)?shù)纳蕵?gòu)成。最優(yōu)秀的配色范本是自然界里的配色,我們觀察自然界里的配色,通過理性的提煉最終獲得我們所需要的東西。

  色彩構(gòu)成并非是只能意會不能言傳的東西,它是有自己一套相關(guān)理論的,詳細(xì)的目前國內(nèi)相關(guān)書籍有《色彩設(shè)計(jì)大全》(日本色彩設(shè)計(jì)中心編),值得一看。說到色彩,不能不提到色立體,標(biāo)準(zhǔn)的色彩設(shè)計(jì)的定義顏色可以這樣表示(括號內(nèi)是window的顏色名稱):h色相(色調(diào)) S:純度(飽和度) B:明度(亮度),把這三個(gè)要素作成立體坐標(biāo),就構(gòu)成色立體。

  目前比較通用的色立體有三種:孟賽爾立體、奧斯特瓦德色立體、日本研究所的色立體,它們中應(yīng)用的最廣泛的是蒙塞爾色立體,我們所用的圖象編輯軟件顏色處理部分大多源自孟賽爾色立體的標(biāo)準(zhǔn)。下面我們簡單的介紹孟塞爾色立體的表色系,它根我們的設(shè)計(jì)工作最為相關(guān)。

色立體構(gòu)架示意

色相:在從紅到紫的光譜中,等間的選擇5個(gè)色,即紅(R)、黃(Y)、藍(lán)(B)、紫(P)。相鄰的兩個(gè)色相互混合又得到:橙(YR)、黃綠(GY)、藍(lán)綠(BG)、藍(lán)紫(PB)、紫紅(RP),從而構(gòu)成一個(gè)首位相交的環(huán),被稱為孟賽爾色相環(huán).

孟賽爾色相環(huán)

明度:從黑到白中間增加9個(gè)均勻過渡的灰度階段,被稱為明度尺。

純度:在同等明度的條件下,從灰色到純色的變化。

色彩調(diào)和與色彩感覺
  色彩調(diào)和是一個(gè)很復(fù)雜的問題,它還包括視覺的心理平衡,人們視覺習(xí)慣,社會因素等。各個(gè)領(lǐng)域根據(jù)自己行業(yè)經(jīng)驗(yàn)都有自己的色彩調(diào)和理論,不同行業(yè)之間的色彩調(diào)和理論是不同的。我們可以這樣來定義色彩調(diào)和:使對比的色彩成為不帶尖銳刺激的協(xié)調(diào)統(tǒng)一的組合,它的總體效果總是要與視覺心理相適應(yīng),能滿足視覺的心理平衡,它不單單只是色與色之間的組合問題,還與面積,形狀,等色彩賦予對象有關(guān)。

色彩調(diào)和受有時(shí)間、區(qū)域和欣賞習(xí)慣有關(guān)。目前比較通用的色彩調(diào)和方式有2種:1、共性調(diào)和,2、面積調(diào)和,我們分開來討論這兩個(gè)方式在頁面中的應(yīng)用。

共性調(diào)和有三種不同的形式:

1、明度對比調(diào)和與色彩調(diào)和感覺;去除明度尺的上下兩端白(10)和黑(0),其余9個(gè)階段分成三個(gè)基調(diào)(1)、(2)、(3)低明度基調(diào);(4)、(5)、(6)中明度基調(diào);(7)、(8)、(9)高明度基調(diào)。

2-3種顏色,明度配色應(yīng)用:第一個(gè)字指明度的主調(diào),顏色必須占構(gòu)圖的1/2以上(這一點(diǎn)在Web界面設(shè)計(jì)中有點(diǎn)特殊,主調(diào)的面積是一種視覺感覺上的面積,而不是實(shí)際的頁面面積。),屬于支配地位。

高長調(diào):(8)、(9)、(1)明快;

高短調(diào):(8)、(9)、(5)輕柔;

中長調(diào):(5)、(9)、(1)強(qiáng)壯;

中短調(diào):(5)、(7)、(3)沉悶;

低長調(diào):(2)、(9)、(1)威嚴(yán);

低短調(diào):(2)、(5)、(1)憂郁;

中高短調(diào):(5)、(9)、(7)希望;

中低短調(diào):(5)、(3)、(1)低沉;

多種顏色連續(xù)對比的調(diào)式:不強(qiáng)調(diào)面積比,容易造成節(jié)奏。

高1/2明度列(5)以上,晨曦、朦朧;

低1/2明度列(5)以下,苦悶;

高3/4明度列(3)-(10)激昂、奮進(jìn);

低3/4明度列(0)-(7)雄渾、有力;

全明度列(0)-(10)豐富、跳躍


  明度的對比配色在頁面中我們可以經(jīng)?吹剑覀儊砜纯聪旅娴捻撁,如下圖中這個(gè)頁面給人什么感覺呢,明快,和諧。

主基調(diào):■ #9CCE00 H:75 S:100 B:81 (8)

  明度列:本出應(yīng)用了多種明度色彩,(*表現(xiàn)出這樣的感覺實(shí)際上還有其他方面的原因,我們這里只討論明度的原因)仔細(xì)觀察我們可以發(fā)現(xiàn)明度都在81-98之間,把一些小的差距忽略不計(jì)我們可以把它視為 (8)、(9)、(1)。那么在上表中我們可以找到:高長調(diào):(8)、(9)、(1)明快,從上面列舉的例子可以很明顯的看出明度對比在頁面設(shè)計(jì)中的應(yīng)用。留心觀察,我們可以發(fā)現(xiàn)很多類似的例子,只是很多明度對比中還參雜著其他的因素不易察覺而已。

  在設(shè)計(jì)網(wǎng)頁界面時(shí),明度對比調(diào)和在很多情況下是不單獨(dú)存在的,它往往需要結(jié)合其他的調(diào)和方式,作為一種輔助的調(diào)和方式存在,單獨(dú)的明度對比調(diào)和的頁面它有一個(gè)很顯著的缺點(diǎn),就是畫面沉悶。如果以明度對比調(diào)和作為主要調(diào)和方式的頁面需要在其他的輔助色的用色上多多考慮,如果輔助色能打破沉悶的感覺那么效果還是比較理想的。

  明度對比調(diào)和的掌握,在最初我們可以做一些類似的明度對比的練習(xí)。在藝術(shù)教育課程里一般都采用水粉來繪制,其實(shí)同樣也可以用電腦來練習(xí),培養(yǎng)色彩感覺。當(dāng)有一定基礎(chǔ)后結(jié)合其他構(gòu)成來練習(xí)。

色相對比調(diào)和與色彩調(diào)和感覺;色相對比以孟賽爾色相環(huán)為主。

兩個(gè)色相對比調(diào)和的取色方法和相應(yīng)的色彩感覺:

h : h 和諧,統(tǒng)一。

h : (h±1°;~30°;)類似,活潑。

h : (h±30°;~60°;)準(zhǔn)對比,生動。

h : (h±120°;~150°;)對比,強(qiáng)烈。

h : (h±180°;)補(bǔ)色,刺激

  在實(shí)際應(yīng)用的時(shí)候注意明度變化和兩個(gè)色彩的主次位置。還有的說法是把孟賽爾色相環(huán)已有的十個(gè)色相的基礎(chǔ)上平分為100份,那么在色環(huán)上就是100等分,用色環(huán)的間隔數(shù)來表示,本人認(rèn)為用角度的算法比較準(zhǔn)確。

多個(gè)色相對比調(diào)和的取色方法和相應(yīng)的色彩感覺:

色相環(huán)120度以內(nèi):等差取色,如:n : (n+12) : (n+24) : (n+36);等比,如:n : (n+13) : (n+25) : (n+37),F(xiàn)代感強(qiáng)等。

色相環(huán)180度以內(nèi):等差取色,如:n : (n+20) : (n+40) : (n+60);等比,如:n : (n+20) : (n+50)。強(qiáng)烈。

色相環(huán)380度以內(nèi):等差取色,如:n : (n+30) : (n+60);等比,如:n : (n+10) : (n+27.5) : (n+57.5)。刺激。

兩個(gè)同一色對比調(diào)和
主基調(diào):■ # FF7318 H:24 S:91 B:100
■ # FF6300 H:24 S:100 B:100

兩個(gè)類似色對比調(diào)和
主基調(diào):■ # FFCE00 H:48 S:100 B:100
■ #FFA000 H:38 S:100 B:100

兩個(gè)補(bǔ)色對比調(diào)和
主基調(diào):■ # FFCE00 H:48 S:100 B:100
■ # 4273A5 H:210 S:60 B:60

多個(gè)色相對比調(diào)和
主基調(diào):■ # 945A18 H:32 S:84 B:58
■ # 5A2F00 H:31 S:100 B:35
■ # 633100 H:30 S:100 B:39
■ # 401F00 H:29 S:100 B:25

  色相對比調(diào)和只是幫助你最快的找到相匹配的顏色區(qū)域,最后效果還是要靠自己的顏色直覺。

  在Web界面設(shè)計(jì)的時(shí)候,一般來說都是用純度比較高的顏色,不成文的規(guī)定純度為80~100,所以實(shí)際應(yīng)用中我們只需要調(diào)節(jié)明度的變化。自然能創(chuàng)造出比較好的色彩效果。

  使用兩個(gè)同一色跟使用明度對比調(diào)和的注意事項(xiàng)是一樣的,兩個(gè)同一色構(gòu)成的畫面沒有力度,但是比較容易烘托表現(xiàn)主題,一般都是以背景的形式存在。

  兩個(gè)類似色對比調(diào)和要注意與無彩色相結(jié)合,即黑和白,這樣的頁面會比較干凈、大眾化,門戶網(wǎng)站用色方式的較好選擇。

  兩個(gè)補(bǔ)色對比調(diào)非常的容易樹立風(fēng)格,能給人留下強(qiáng)烈的映像,信息發(fā)布類商業(yè)站點(diǎn)的首選,既不失個(gè)性又比較容易讓人接受,大多作為主色調(diào),結(jié)合明度對比調(diào)和類似色對比調(diào)和存在。

  多個(gè)色相對比調(diào)和多用于Flash動畫和頁面的制作,在純度高的情況下,它比較容易塑造出個(gè)性鮮明的形象。

色相對比調(diào)和的練習(xí)

純度對比調(diào)和。

  純度對比調(diào)和的理論也有很多,但是大部分只能應(yīng)用在繪畫,工業(yè)造型等等行業(yè),在Web界面設(shè)計(jì)中正真實(shí)用的只有1條:

  黑、白、灰屬于無彩系,它們能與任何彩色搭配。純色與無彩系搭配的時(shí)候會使純色的鮮艷感增強(qiáng),灰色與純色搭配會使灰色帶有顏色,當(dāng)灰色覆蓋面積較大時(shí)純色將比較容易形成調(diào)和。高明度的灰色(白)有輕快高雅的感覺,低明度的灰色(黑)可以產(chǎn)生穩(wěn)重。

  Web界面設(shè)計(jì)中如果采用降低顏色的純度來產(chǎn)生調(diào)和是需要點(diǎn)勇氣的,按照現(xiàn)在的審美觀點(diǎn),普遍地不能被接受,或許有待進(jìn)一步的探索和研究。

灰色與高純度黃色調(diào)和


黑色與中純度綠色調(diào)和


高明度的灰色調(diào)和

就目前關(guān)于共性調(diào)和所被接受的應(yīng)用大概就這些了。還有待大家共同研究開發(fā)。

  面積調(diào)和的原則是:色彩面積的大小可以改變對比效果,對比色雙方面積越大,調(diào)和效果越弱;反之,雙方面積越小,調(diào)和效果越強(qiáng)。對比雙方面積均等,調(diào)和效果越弱;對比雙方面積相差越大;調(diào)和效果越強(qiáng)。只有恰當(dāng)?shù)拿娣e比才能取得最好的視覺平衡,形成最好的視覺效果。

  在前人的探索中,總結(jié)出了相當(dāng)多的面積比的公式,對電腦設(shè)計(jì)來說有非常積極的作用。利用這些公式,我們可以大概的把握出顏色和面積的比例,作為一個(gè)重要的參考。

  最早的計(jì)算公式是由詩人歌德以基本色相的光亮度為基準(zhǔn),建立了一個(gè)簡單的比率:

黃 :橙色 :紅 :紫 :綠 =3 :4 :6 :9 :8 :6

  但是這個(gè)公式并沒有考慮明度和純度的變化所帶來的影響,再今天并不是很實(shí)用,孟賽爾在這個(gè)基礎(chǔ)上改良了這個(gè)公式:

A色相的明度×純度       B面積

-------------------------- = --------------------

B色相的明度×純度       A面積

  這個(gè)公式可以幫我們解決因?yàn)槊鞫群图兌鹊淖兓a(chǎn)生的面積變化比,可以這樣概括“小面積用強(qiáng)色,大面積用弱色”。

  根據(jù)本人的經(jīng)驗(yàn)上面的公式在Web界面設(shè)計(jì)中實(shí)用性并不是很強(qiáng),應(yīng)為Web界面設(shè)計(jì)時(shí)使用的顏色純度都很高,基本上面積比就等于明度比,按照這個(gè)比例相當(dāng)多的情況是產(chǎn)生負(fù)作用。應(yīng)該視情況來具體應(yīng)用。

  孟賽爾還有一套面積和色彩比率的算法,相比之下更科學(xué)、實(shí)用性更強(qiáng),可以作為重要的參考依據(jù):

  在色立體中以明度軸上值為5的灰色為中心,兩個(gè)色或多個(gè)色的關(guān)系可以這樣表示――色彩的面積與該色彩到色立體的中心距離相等或程簡單的倍數(shù)時(shí)可以得到平衡的調(diào)和?梢缘玫较旅娴墓

S 1 R 1= S 2R 2

其中S表示面積,R表示該色到中心點(diǎn)的距離,R的值可以在相關(guān)的表中查到。

  就目前的情況還沒有哪一個(gè)面積計(jì)算公式能確切的結(jié)合到Web界面設(shè)計(jì)實(shí)際應(yīng)用,更何況Web界面設(shè)計(jì)還要從商業(yè)來考慮,主要還是靠經(jīng)驗(yàn),上面的公式只能一個(gè)參考性質(zhì)的,給大家研究提供一個(gè)基礎(chǔ)。

  以上的理論都是前人研究成果,其中有很多可以利用,最重要的是要結(jié)合實(shí)際的經(jīng)驗(yàn),創(chuàng)造一套自己的色彩理論,提高自身對色彩的把握能力,應(yīng)用到設(shè)計(jì)作品中去。

本文謝絕任何形式的轉(zhuǎn)載 

出處:藍(lán)色理想
責(zé)任編輯:藍(lán)色

相關(guān)文章 更多相關(guān)鏈接
網(wǎng)頁設(shè)計(jì)的布局理念
FLASH,你要我怎么跟你說!
Colorful Day
網(wǎng)站頁面彈性設(shè)計(jì)
中國傳統(tǒng)色彩名錄
作者文章
Web 頁面設(shè)計(jì)的色彩理論及應(yīng)用
關(guān)鍵字搜索 常規(guī)搜索 推薦文檔
熱門搜索:CSS Fireworks 設(shè)計(jì)比賽 網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點(diǎn)最新 站點(diǎn)最新列表
周大!熬•自然”設(shè)計(jì)大賽開啟
國際體驗(yàn)設(shè)計(jì)大會7月將在京舉行
中國國防科技信息中心標(biāo)志征集
云計(jì)算如何讓安全問題可控
云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會
阿里行云
云手機(jī)年終巨獻(xiàn),送禮標(biāo)配299起
阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽
欄目最新 欄目最新列表
國外創(chuàng)意名片設(shè)計(jì)欣賞
情感化界面
線下項(xiàng)目工作流程(歸納篇)
線下項(xiàng)目工作流程(分析篇)
簡約而不簡單-Practise平面設(shè)計(jì)
培養(yǎng)用戶的使用習(xí)慣
優(yōu)秀名片設(shè)計(jì)
專題頭圖的秘密武器
別讓UED忽悠你(2):多少錢一斤
別讓UED忽悠你(1):天生的矛盾

藍(lán)色理想版權(quán)申明:除部分特別聲明不要轉(zhuǎn)載,或者授權(quán)我站獨(dú)家播發(fā)的文章外,大家可以自由轉(zhuǎn)載我站點(diǎn)的原創(chuàng)文章,但原作者和來自我站的鏈接必須保留(非我站原創(chuàng)的,按照原來自一節(jié),自行鏈接)。文章版權(quán)歸我站和作者共有。

轉(zhuǎn)載要求:轉(zhuǎn)載之圖片、文件,鏈接請不要盜鏈到本站,且不準(zhǔn)打上各自站點(diǎn)的水印,亦不能抹去我站點(diǎn)水印。

特別注意:本站所提供的攝影照片,插畫,設(shè)計(jì)作品,如需使用,請與原作者聯(lián)系,版權(quán)歸原作者所有,文章若有侵犯作者版權(quán),請與我們聯(lián)系,我們將立即刪除修改。

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內(nèi)容等需要修改的錯(cuò)誤,請用報(bào)告錯(cuò)誤,以利文檔及時(shí)修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內(nèi)容無關(guān)的廣告鏈接,違者封ID
請您注意:
·不良評論請用報(bào)告管理員,以利管理員及時(shí)刪除。
·尊重網(wǎng)上道德,遵守中華人民共和國的各項(xiàng)有關(guān)法律法規(guī)
·承擔(dān)一切因您的行為而直接或間接導(dǎo)致的民事或刑事法律責(zé)任
·本站評論管理人員有權(quán)保留或刪除其管轄評論中的任意內(nèi)容
·您在本站發(fā)表的作品,本站有權(quán)在網(wǎng)站內(nèi)轉(zhuǎn)載或引用
·參與本評論即表明您已經(jīng)閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評論文檔 | 報(bào)告錯(cuò)誤  
專業(yè)書推薦 更多內(nèi)容
網(wǎng)站可用性測試及優(yōu)化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網(wǎng)站UI 設(shè)計(jì)之道
《Flex 4.0 RIA開發(fā)寶典》
《贏在設(shè)計(jì)》
犀利開發(fā)—jQuery內(nèi)核詳解與實(shí)踐
作品集 更多內(nèi)容

雜⑦雜⑧ Gold NORMANA V2