
合理的網頁色彩設計能體現網站風格,突出主題 , 吸引瀏覽者視線,加深印象 。進行網頁色彩設計時應注意使其色調與網站主題相協調,滿足瀏覽者的不同需求 , 便于閱讀,同時還應個性鮮明并保持一定的延續性 。在具體操作中,應首先確定網站的主色調及輔助色,然后確定文字、配圖的色彩效果與色彩配置,并正確使用圖形、圖像及其色彩 。
色彩是藝術設計中不可或缺的元素 。好的色彩設計可給人以強烈的視覺沖擊力和藝術感染力,能引發人們從美學意義上了解和鑒賞其表達的形象和內容 。網頁色彩設計的意義亦是如此 。
網頁作為視覺傳達的一種新興載體 , 有著比報刊、雜志、廣播、電視等傳統媒體更復雜的構成要素,如文字、聲音、圖像等并存于一體 。打開一個網站,給用戶的第一印象就是網頁的色彩 。色彩是網頁設計的關鍵因素之一 。色彩既是網頁作品的表述語言,又是視覺傳達的方式和手段 。研究表明,在網頁設計中 , 色彩能提高信息瀏覽與分類的速度和準確度 。好的色彩設計是網頁設計成功的保證 。
一、網頁色彩的作用
1.體現風格,突出主題
每一種色彩都有其情感效果與象征,設計師可利用色彩自身的表現力及情感效應,使網頁的內容與形式有機地結合起來,借助色彩來體現網站的特色與風格,突出其主題 。
2.劃分區域,統一風格
網頁內容豐富 , 信息含量大,設計師可利用不同的色彩進行網頁界面的視覺區域劃分、網頁信息的分類布局;利用不同色彩給人的不同心理效果,進行主次順序的區分、視覺流程的規整 , 使網頁具有良好的易讀性和方便的導向性 。對網頁色彩進行系統地規劃和設計,可以使網站的整體風格統一,給瀏覽者完整、有序的視覺印象 。
3.吸引視線,加深印象
設計者要充分利用色彩的力量美化頁面,或含蓄優雅,或動感強烈,或時尚新穎 , 或單純醒目,以引起瀏覽者的關注,同時大大增強網頁的藝術性和吸引力,從而提高訪問率,提高網站的知名度 。
二、網頁色彩的設計原則
1.與網站主題相協調
不同的色彩有不同的象征意義,給人的心理感受也不同 。網頁的色彩設計要有針對性,應體現出自身的特色 。如政府部門的網頁風格應有莊重感,呈現寧靜、嚴肅、高雅的氛圍,以冷色調為宜;電子商務類網頁可以通過紅色、橙色、黃色等暖色調的搭配 , 呈現溫馨、和煦、熱情的氛圍;藍色給人的心理印象是崇高、深遠、廣大而睿智,為高科技企業網站所鐘愛;保健類的網站不宜大面積地采用刺激性強的大紅、黃和橙等色彩,因為它們易造成人們心理上的緊張感和恐慌感,而綠色象征生命與希望,給人健康、安全的感覺 , 適宜作為保健類網頁的主調色 。
2.個性鮮明
在網站云集的互聯網上,網頁的色彩只有與眾不同、有自己獨特的風格,才能顯得個性鮮明,給瀏覽者留下深刻的印象 。尤其在同類網站中,網頁的色彩不但要符合此類網站的用色特點,還要有其獨到之處 。網頁設計是一種藝術活動,只有按照內容決定形式的原則,大膽進行藝術創新,才能設計出既符合網站主題,又有一定藝術特色,風格獨特、個性鮮明的網頁 。
3.與瀏覽者的審美情趣相統一
由于地域、民族、宗教信仰、生活環境、年齡、性別、文化修養等存在差異,人們的審美角度、審美能力也有很大差別 。不同的瀏覽者對色彩的聯想和理解不會相同,對色彩的喜好也不一樣 。網頁設計師要盡可能地采用符合瀏覽者審美傾向的色彩,以使其產生共鳴 。如針對兒童喜歡對比強烈、個性鮮明的純色,兒童網站應采用紅、黃、藍、綠等對比鮮明的色彩,以營造活潑、愉快而富有童趣的視覺效果等 。
設計師要適當關注流行色的發展 。流行色是特定時期內社會風行的時髦色彩,是一種時尚色、鮮活色 , 具有很強的誘惑力和沖擊力 。若能抓住瀏覽者緊跟潮流、追趕時尚的心理,適時地選用流行色作為網頁的主色調,必定能產生良好的傳播效果 。
4.便于閱讀識別
人們從物理、生理、心理、化學等多角度對色彩進行研究后發現,色彩的美存在于各色彩的相互關系中,這種相互關系就是色彩的對比與和諧 。色彩的對比包括明度對比、純度對比和色相對比 。最能引人注意也是運用得最為普遍的色彩對比,是色相對比中的互補色或冷暖色的對比 。色彩的和諧是指色彩在對比關系中能給人造成既鮮明又協調的視覺感受 。
網頁色彩設計還要注意文字與背景色彩的明暗對比,文本要易讀,圖像要易于識別,以使人們在瀏覽大量網頁信息的時候,減少屏幕刺激,減輕視覺疲勞 。
5有一定的延續性
網頁色彩要保持用色的延續性 。雖然網頁的信息會不斷更新,網頁的版式也會定期修改,但網頁色彩的基調和風格一旦形成后,不宜大幅或頻繁地改換,而應保持一定的延續性,這樣才能使瀏覽者迅速識別且印象深刻 。但為了保持新鮮感、提高吸引力,也應小范圍地對網頁色彩的明度、純度進行適當的調整和變換 。
三、網頁色彩的設計方法
網頁色彩設計得好 , 可以為網站錦上添花 , 收到事半功倍的傳播效果 。在網頁色彩設計中,要充分利用色彩的色相、明度、純度、遠近、冷暖、輕重等對比關系,強化網頁的視覺效果 。
1.確定網站的主角調及輔助色
網頁中可以采用多種色彩,但一個網頁中只能有一個主色調 。主色調就好比樂曲中的主旋律 , 對網頁起著主導作用 。
選擇主色調時,應首先確定網站的主題、服務對象和所要表達的氣氛,以及利用色彩所希望達到的目的,如樹立形象、推廣產品、娛樂大眾、傳播信息等 。不同的網站定位,會延伸出不同的色彩取向,該色彩取向決定了這個網站的風格 , 或嚴肅、或活潑、或前衛等 。
主色調主導著整個網頁的風格和意境,而輔助色的面積雖?。雌鹱嘔撼搴頹康韉淖饔?。輔助色能讓頁面有生氣、有趣味,使主色調流暢 。輔助色與主色調搭配合理,可使整個頁面特色鮮明,引人注目 。網頁的輔助色可用主調色的鄰近色,也可用對比色 。一般情況下,可選擇一兩種輔助色配合使用,整個網頁的色彩最好控制在三種顏色之內 。網頁也可以采用單色調,以形成一種醒目的風格,需要注意的是,應在網頁的局部采用少量小面積的對比色,以達到豐富頁面的效果 。
在色調的使用方面,采用高飽和度的色彩,如黃色、紅色作為網頁的主色調,能展現活潑、樂觀、希望、充滿生命力的氣氛,具有強烈的視覺吸引力;采用具有中、低明度和飽和度的復合色或消色如淺灰、藍灰、暗綠、棗紅等,作為網頁的主色調,既不炫目,也不黯淡,對眼睛的刺激適中,可傳達嚴肅、優雅、穩重、富有內涵的氛圍;以粉彩等柔和色調為主色調的網頁,則可傳達明朗、輕松、歡快的氣氛,如粉紅、檸檬黃、天藍、新綠等 。
2.確定文字、配圖的色彩效果
作品內容的表現是通過造型、色彩、構圖、文字等多種形式共同完成的,內容與形式的統一是色彩協調成功的條件 。不同的內容需要不同的色彩來表現 。
網頁以文字信息為主,網頁文字要有良好的可讀性與清晰度,除了考慮文字的字體、大小、字距、行距等以外,還必須重視文字色彩與背景色彩的配合 。背景與文本的色彩對比要盡量大(一般明度對比為3∶1~5∶1),以便突出文字內容 , 但文字色彩不要過于亮麗 , 以免造成過強的視覺刺激 。
對于圖形感較強烈的頁面 , 首先要將底色與圖形色的反差拉開 。如使用一些在色相、明度、飽和度上具有強對比關系的色彩 , 這樣既能起到烘托主題圖形的作用 , 也可使得頁面色彩主次分明 。其次,要結合圖形的面積情況處理底色和圖形色:如果圖形大,則圖形色可以使用主色調;如果圖形?。蟯夾紊膳渲孟恃薜納?。
此外,還要注意超鏈接翻轉效果 。當前超鏈接及已訪問過的超鏈接的文本色彩與其他文本的色彩要有差別,以利于瀏覽者進一步鏈接 。翻轉頁的色彩也應與超鏈接頁面色彩有所不同,這樣可以突出已選到的超鏈接;但已訪問的超鏈接頁面色彩與超鏈接頁面色彩,可以相同,也可以不同 。
3.網頁色彩的配置
主調色、輔助色、文字色、底色、圖形色都是網頁設計中不可缺少的色彩,但網頁的色彩品種不宜過多,否則會過于花哨 , 喧賓奪主 。主調色、輔助色、文字色等不一定要采用不同的色相,有時網頁色彩簡單明了更能突出主題,產生舒適的視覺效果 。合理選配網頁色彩 , 形成主色調為主小色塊為輔、既對比又調和的色彩畫面,會賦予網頁以活力和個性,最大限度地吸引網民的視線 。
?。?)同種色的配置 。同種色指色相相同而明度、純度不同的顏色 。網頁設計忌用單一色彩以免產生單調的感覺,但通過調整色彩的飽和度與透明度也可以使單一色彩產生豐富的變化 。
?。?)類似色的配置 。類似色指在色輪上鄰近的色組 。采用類似色來設計網頁,可以使網頁避免色彩雜亂,易于達到頁面的和諧統一 。
?。?)對比色的配置 。一是補色配置,最強的對比色配置 。如紅與綠、黃與紫等 。二是次對比色配置 。合理使用對比色會產生強烈的視覺效果 , 能夠使網站特色鮮明、重點突出 。在設計網頁色彩時 , 一般以一種顏色為主色調;對比色作為點綴,可以起到畫龍點睛的作用 。
?。?)黑、白色的配置 。黑、白色雖然不如彩色那樣張揚、奔放,但它含蓄、沉穩、淡雅的色彩特征更符合都市人的氣質,更能展現濃郁的人文氣息與高雅的審美情趣 。黑色是一種特殊的顏色 , 如果使用恰當、設計合理,往往產生很強烈的藝術效果 。
?。?)綜合配置 。綜合配置指以上諸方法的組合 。
4.正確使用圖像及其色彩
圖像在網頁中起著畫龍點睛的作用,不但能裝飾頁面,還能表達風格與情感 。但網頁如果圖片過多或色彩使用不當,會導致瀏覽、下載的速度變慢,從而使網頁的點擊率下降 。所以要正確使用圖像及其色彩 。
?。?)位圖與矢量圖 。以文件數據的組織特征進行分類,可將眾多的圖像分為兩類:位圖格式;矢量圖格式 。位圖又稱為光柵圖文格式,是以像素點的形式來描述圖像 。常見的圖像格式有:JPEG格式、BMP格式、PNG格式、TIFF格式等 。位圖的色彩豐富逼真,但縮放時會產生失真現象而且所占空間較大 。若要向網頁中添加照片或者色彩逼真的圖片,則可以選用位圖 。矢量圖是用數學方式描述的一種由線段和幾何元素組成的圖形圖像 。常用的格式有:AI格式、CDR格式、EPS格式等 。矢量格式的圖形在縮放時不失真而且所占空間較小 。若要為網頁增加動態效果,可使用矢量圖,通常采用Flash動畫形式 。此外,在進行網頁圖片設計時,應該對用戶的帶寬有充分的估計 。在帶寬較小的情況下,應該權衡網頁對圖片色彩以及傳輸速度的要求,以決定其主次位置 。
?。?)保存合適的圖像文件格式 。Web瀏覽器內部支持多種圖片格式 , 現在通常使用GIF、JPEG和PNG三種圖片格式 。GIF格式是最流行的格式,其特點是所占空間小、下載速度快,較適用于具有簡單色塊的標志、圖案,一般不用于保存真彩色的圖像文件,在圖片動畫方面只采用GIF格式,因為JPEG、PNG格式不允許一個文件中有多幅圖像 。JPEG格式是一種24位色、高壓縮比的圖像文件格式 , 通過有損壓縮方式可將圖像文件壓縮到原圖的10%,不適合放大觀看,也不適合印刷 , 適用于新聞圖片、照片或美術作品的傳輸 。PNG格式使用無損壓縮方式,可以通過不同的儲存方式、以不同的色彩數目來存儲文件,具有很大彈性 。
?。?)Web安全色 。計算機提供了一些色彩模式:RGB模式、CMYK模式、Index Color模式、LAB模式等 。在網頁色彩設計中常用RGB模式 。RGB模式是計算機顯示器默認的顯示模式,用RGB模式制作出圖像后,經處理成為Web圖像就可在網上使用了 。當超過顯示能力時,計算機的色彩管理系統會盡力使用最接近的顏色來代替 , 但效果往往不如人意 。為避免色彩被扭曲可使用Web安全調色板,它支持216種顏色 。如果在設計網頁時使用這些顏色 , 則無論在何種瀏覽器或平臺上都可達到相同的色彩效果 。所以,設計師通常選擇Web安全色來設定網頁背景、文字、表格的顏色,以及色彩簡單的標題、動畫、圖形等 。當然Web安全色也有自身的局限性,如會出現顏色偏暗的問題等 。因此,在設計網頁的色彩時,一方面要考慮色彩的安全問題,另一方面也要考慮色彩的需求問題 。
綜上所述 , 色彩作為網頁設計中一個重要而獨特的設計元素,應該受到網頁設計師的足夠重視 。色彩設計是網頁設計的靈魂,網頁設計師要以科學的色彩理論為指導,把美學規律同現代網頁設計技術結合起來,以敏銳的色彩感覺去發現,以高超的配色技巧去完成,在創造出更時尚、更鮮活、更具吸引力的網頁色彩作品的同時,也不斷引導和提高大眾的色彩審美情趣和能力 。
【網頁色彩設計方法是什么】
