網(wǎng)頁(yè)是現(xiàn)代人上網(wǎng)接受信息最主要的載體, 它以數(shù)字技術(shù)為依托,用文字、圖片、聲音或視頻等形式承載信息,通過(guò)頁(yè)面排列展示給瀏覽者。 一個(gè)制作精美的網(wǎng)頁(yè)可以吸引人們多次光顧,可見(jiàn),網(wǎng)頁(yè)的設(shè)計(jì)很重要。網(wǎng)頁(yè)的色彩設(shè)計(jì)是網(wǎng)頁(yè)設(shè)計(jì)的重要方面, 一張優(yōu)秀的網(wǎng)頁(yè),它的色彩搭配必定和諧、得體,令人賞心悅目。 網(wǎng)頁(yè)的色彩設(shè)計(jì)也是產(chǎn)品色彩設(shè)計(jì)的一個(gè)門(mén)類分支。在網(wǎng)頁(yè)中要運(yùn)用好色彩,主要從以下幾個(gè)方面入手:
主題色是代表站點(diǎn)形象的最主要的色彩。它可以是一種或一組色彩。不同的主題色定位不同的色彩格調(diào)。選擇何種顏色作為主題色, 需要視網(wǎng)站的具體情況而定。
1.1.1 要確定一個(gè)網(wǎng)頁(yè)用什么色彩合適, 必須要先弄明白該網(wǎng)站的主題和它的服務(wù)對(duì)象, 以及通過(guò)色彩希望達(dá)到的目的。如 http://www.barbie.com網(wǎng)站的服務(wù)對(duì)象主要是兒童, 其網(wǎng)頁(yè)設(shè)計(jì)不僅采用卡通和聲音等眾多形式, 還選擇了非常鮮艷活潑的色彩。如餐飲業(yè)網(wǎng)站的設(shè)計(jì)也是很特殊的一類,餐飲網(wǎng)站多以橘紅、橙黃系色彩為主色調(diào),這種色調(diào)很容易讓人產(chǎn)生食欲, 并且食物通常讓人感受到的是實(shí)實(shí)在在的體貼,所以用些讓人溫暖的顏色。
1.1.2 根據(jù)企業(yè)形象決定主題色
對(duì)于很多企業(yè)、機(jī)構(gòu)及團(tuán)體來(lái)說(shuō),他們的網(wǎng)站形象實(shí)際上是自身整體形象的一部分,這類站點(diǎn)的主題色一般可用公司的標(biāo)準(zhǔn)色,這符合公司的形象戰(zhàn)略,可以提升公司形象。如http:/ /www.mcdonalds.com網(wǎng)站的色彩就是其公司的標(biāo)準(zhǔn)色紅和黃。再如可口可樂(lè)公司的網(wǎng)站選用的是大紅色, 因?yàn)榭煽诳蓸?lè)給人的一貫形象就是大紅色,紅色產(chǎn)生的激情也正如其公司推出的產(chǎn)品可樂(lè),讓人興奮, 與消費(fèi)者產(chǎn)生共鳴。
在建設(shè)網(wǎng)站、組建頁(yè)面的過(guò)程中, 經(jīng)常要使用主題色以外的其他色彩,用來(lái)增加頁(yè)面的色彩層次或幫助實(shí)現(xiàn)某項(xiàng)功能, 這就需要定義輔助色。輔助色的面積雖小, 卻起著緩沖和強(qiáng)調(diào)的作用。輔助色能讓頁(yè)面有生氣、有趣味,使主色調(diào)流暢, 輔助色與主色調(diào)搭配合理,可使整個(gè)頁(yè)面特色鮮明,引人入目。
1.2.1 輔助色的取用要與主題色和諧
輔助色的取用應(yīng)當(dāng)建立在與主題色有內(nèi)在規(guī)律的關(guān)聯(lián)上, 既要保持相互之間和諧,又要輔助主題色的統(tǒng)帥地位。輔助色與主題色共同構(gòu)成站點(diǎn)的標(biāo)準(zhǔn)色彩, 其基調(diào)則決定網(wǎng)頁(yè)的整體色彩風(fēng)格。
1.2.2 根據(jù)主題色選擇輔助色彩
主調(diào)色確定后, 可選一至兩種輔助色配合使用, 整個(gè)網(wǎng)頁(yè)的色彩最好控制在三色之內(nèi)。網(wǎng)頁(yè)的輔助色可用主調(diào)色的鄰近色,也可用對(duì)比色。如http://www.allrecipes.com是一個(gè)烹飪網(wǎng)站,網(wǎng)站的主色調(diào)采用黃色調(diào), 輔助色用其鄰近的紅色, 給人香甜的感覺(jué),符合烹飪網(wǎng)站的特色。
在一個(gè)完整展現(xiàn)的 web頁(yè)面內(nèi), 大多包含靜態(tài)和動(dòng)態(tài)兩類元素。以其呈現(xiàn)方式是否包含變化為依據(jù), 可以將網(wǎng)頁(yè)中的色彩分為動(dòng)態(tài)色和靜態(tài)色兩類。動(dòng)態(tài)色彩又可分為以時(shí)間為條件變化的色彩和以交互因素為條件變化的色彩共兩類。
2.1.1 以時(shí)間為條件變化的動(dòng)態(tài)色閃爍
排除動(dòng)畫(huà)因素外,網(wǎng)頁(yè)中以時(shí)間為條件變化的色彩主要指閃爍。閃爍是一種色彩的動(dòng)態(tài)效果, 能夠有效引起注意與烘托氣氛。閃爍分為單色閃爍和顏色閃爍, 前者指單一色彩的亮度變化。后者指不同顏色形成的動(dòng)態(tài)變化。閃爍主要用來(lái)吸引注意,低頻率、小色彩范圍的閃爍也被用來(lái)活躍畫(huà)面。決定閃爍效果的因素首先是閃爍的頻率。越快速的閃爍吸引視線的能力越強(qiáng),急促和不安的感覺(jué)也相應(yīng)增強(qiáng), 緩慢的閃爍則具有柔美和抒情的意味。其次是閃爍色彩變化的幅度。閃爍色彩明度越大越引人注目, 在頁(yè)面中的跳躍度也高, 明度變化越小的閃爍相對(duì)含蓄柔和。在顏色閃爍中, 兩極色彩在色環(huán)上的夾角越大,閃爍越引人注目。臨近色的閃爍優(yōu)美、內(nèi)斂, 原色和補(bǔ)色閃爍則最為強(qiáng)烈。閃爍的色彩為紅、黃系的暖色時(shí), 其熱門(mén)、突出的感覺(jué)強(qiáng),為冷色時(shí)則可能有神秘感。在網(wǎng)頁(yè)中使用閃爍效果時(shí), 需注意閃爍頻率、色彩的明度和色相變化范圍與整個(gè)頁(yè)面內(nèi)容、風(fēng)格的協(xié)調(diào)性。閃爍無(wú)論出現(xiàn)在何種位置都會(huì)不斷吸引視線, 因而在使用時(shí)要格外注意閃爍范圍與周圍其它元素的平衡關(guān)系。
2.1.2 包含交互因素的動(dòng)態(tài)色
網(wǎng)頁(yè)中包含交互因素的動(dòng)態(tài)色常見(jiàn)于按鈕、熱區(qū)、超文本等具有交互功能的屏幕對(duì)話構(gòu)件中, 常用的色彩變化包括亮度、反色和特殊顏色。例如當(dāng)光標(biāo)移至感應(yīng)區(qū)域時(shí), 按鈕或文本變?yōu)檩^之前明亮、高飽和度的色彩或?qū)Ρ壬晕⒁?。?duì)于已點(diǎn)擊過(guò)的內(nèi)容, 則以區(qū)別于未點(diǎn)擊色彩, 但亮度、飽和度較低的顏色顯示, 既可有所區(qū)別,又不至于造成過(guò)度的視覺(jué)干擾。
靜態(tài)色主要指靜止不動(dòng)的顏色, 靜態(tài)色又以靜態(tài)文本的顏色為主。靜態(tài)文本是功能相對(duì)單純的閱讀型文本, 在網(wǎng)頁(yè)中常以大段文字的形式出現(xiàn)。對(duì)于感興趣的文字內(nèi)容, 瀏覽者需要集中注意力和花費(fèi)時(shí)間, 因此這類文本與背景的顏色搭配應(yīng)以易于提取信息、利于減小視覺(jué)疲勞為原則。若眼睛同時(shí)聚焦于兩種對(duì)比明顯的鮮艷彩色上, 眼睛周圍的肌肉會(huì)特別緊張。一些鮮艷補(bǔ)色、準(zhǔn)補(bǔ)色的組合方式是不利于用戶閱讀的,例如紫色為背景的黃色顯示, 綠色為背景的紫紅色顯示, 以及純紅與純藍(lán)色的組合。相對(duì)于注視無(wú)彩色, 人們持續(xù)注視鮮艷的彩色更容易疲勞和厭煩。一般而言, 底色與文字色的色彩跳躍度越低, 即越接近無(wú)彩色,越有利于長(zhǎng)時(shí)間閱讀。越高明度差的色彩搭配, 越具有高認(rèn)識(shí)度, 用戶也就越易于從中獲取信息。低純度、高明度對(duì)比的文本與背景搭配, 是適用于靜態(tài)文本的顯示色彩。在無(wú)彩色的搭配中, 白底黑字的顯示方式可讀性更強(qiáng)。
總之,網(wǎng)頁(yè)色彩設(shè)計(jì)方法多種多樣,需要考量各方各面的東西。它不是簡(jiǎn)單的色彩排布, 而是以人的尺度去設(shè)計(jì),以滿足人的不同需求為任務(wù),同其他的產(chǎn)品色彩設(shè)計(jì)一樣, 最終是以人的滿意為目的的。作為新媒體中的信息載體的一種,網(wǎng)頁(yè)色彩設(shè)計(jì)通過(guò)發(fā)揮數(shù)字化制作的優(yōu)勢(shì),并結(jié)合傳統(tǒng)的色彩設(shè)計(jì)的理論方法,可以制作出任何想要的美麗頁(yè)面。
[1]郭潔恩.網(wǎng)頁(yè)色彩表現(xiàn)研究 [D].西安美術(shù)學(xué)院, 2007.3 ,P28- P30.
[2]王慶斌, 張福昌.現(xiàn)代網(wǎng)頁(yè)色彩設(shè)計(jì) [J].無(wú)錫輕工大學(xué)學(xué)報(bào), 2001.6 , 2( 2): P26.
[3]張秀杰.個(gè)性化網(wǎng)頁(yè)設(shè)計(jì)技巧 [J].黑龍江畜牧獸醫(yī)職業(yè)學(xué)院學(xué)報(bào), 2006.12., P59-P60.
[4]董海斌, 王家民.網(wǎng)頁(yè)界面中的色彩設(shè)計(jì) [J].藝術(shù)理論,2007.11 , P78- P79.
[5]李立偉.淺談網(wǎng)頁(yè)色彩設(shè)計(jì) [J].鄭州輕工業(yè)學(xué)院學(xué)報(bào).