網頁設計中的色彩運用

網頁是現代人上網接受信息最主要的載體， 它以數字技術為依托，用文字、圖片、聲音或視頻等形式承載信息，通過頁面排列展示給瀏覽者。 一個制作精美的網頁可以吸引人們多次光顧，可見，網頁的設計很重要。網頁的色彩設計是網頁設計的重要方面， 一張優秀的網頁，它的色彩搭配必定和諧、得體，令人賞心悅目。 網頁的色彩設計也是產品色彩設計的一個門類分支。在網頁中要運用好色彩,主要從以下幾個方面入手：

1、主題色和輔助色的合理運用

1.1 主題色的運用

主題色是代表站點形象的最主要的色彩。它可以是一種或一組色彩。不同的主題色定位不同的色彩格調。選擇何種顏色作為主題色, 需要視網站的具體情況而定。

1.1.1 要確定一個網頁用什么色彩合適, 必須要先弄明白該網站的主題和它的服務對象, 以及通過色彩希望達到的目的。如 http://www.barbie.com網站的服務對象主要是兒童, 其網頁設計不僅采用卡通和聲音等眾多形式, 還選擇了非常鮮艷活潑的色彩。如餐飲業網站的設計也是很特殊的一類,餐飲網站多以橘紅、橙黃系色彩為主色調,這種色調很容易讓人產生食欲, 并且食物通常讓人感受到的是實實在在的體貼,所以用些讓人溫暖的顏色。

1.1.2 根據企業形象決定主題色

對于很多企業、機構及團體來說,他們的網站形象實際上是自身整體形象的一部分,這類站點的主題色一般可用公司的標準色,這符合公司的形象戰略,可以提升公司形象。如http:/ /www.mcdonalds.com網站的色彩就是其公司的標準色紅和黃。再如可口可樂公司的網站選用的是大紅色, 因為可口可樂給人的一貫形象就是大紅色,紅色產生的激情也正如其公司推出的產品可樂,讓人興奮, 與消費者產生共鳴。

1.2 輔助色的運用

在建設網站、組建頁面的過程中, 經常要使用主題色以外的其他色彩,用來增加頁面的色彩層次或幫助實現某項功能, 這就需要定義輔助色。輔助色的面積雖小, 卻起著緩沖和強調的作用。輔助色能讓頁面有生氣、有趣味,使主色調流暢, 輔助色與主色調搭配合理,可使整個頁面特色鮮明,引人入目。

1.2.1 輔助色的取用要與主題色和諧

輔助色的取用應當建立在與主題色有內在規律的關聯上, 既要保持相互之間和諧,又要輔助主題色的統帥地位。輔助色與主題色共同構成站點的標準色彩, 其基調則決定網頁的整體色彩風格。

1.2.2 根據主題色選擇輔助色彩

主調色確定后, 可選一至兩種輔助色配合使用, 整個網頁的色彩最好控制在三色之內。網頁的輔助色可用主調色的鄰近色,也可用對比色。如http://www.allrecipes.com是一個烹飪網站,網站的主色調采用黃色調, 輔助色用其鄰近的紅色, 給人香甜的感覺,符合烹飪網站的特色。

2、靜態色和動態色的合理運用

在一個完整展現的 web頁面內, 大多包含靜態和動態兩類元素。以其呈現方式是否包含變化為依據, 可以將網頁中的色彩分為動態色和靜態色兩類。動態色彩又可分為以時間為條件變化的色彩和以交互因素為條件變化的色彩共兩類。

2.1 動態色的運用

2.1.1 以時間為條件變化的動態色閃爍

排除動畫因素外,網頁中以時間為條件變化的色彩主要指閃爍。閃爍是一種色彩的動態效果, 能夠有效引起注意與烘托氣氛。閃爍分為單色閃爍和顏色閃爍, 前者指單一色彩的亮度變化。后者指不同顏色形成的動態變化。閃爍主要用來吸引注意,低頻率、小色彩范圍的閃爍也被用來活躍畫面。決定閃爍效果的因素首先是閃爍的頻率。越快速的閃爍吸引視線的能力越強,急促和不安的感覺也相應增強, 緩慢的閃爍則具有柔美和抒情的意味。其次是閃爍色彩變化的幅度。閃爍色彩明度越大越引人注目, 在頁面中的跳躍度也高, 明度變化越小的閃爍相對含蓄柔和。在顏色閃爍中, 兩極色彩在色環上的夾角越大,閃爍越引人注目。臨近色的閃爍優美、內斂, 原色和補色閃爍則最為強烈。閃爍的色彩為紅、黃系的暖色時, 其熱門、突出的感覺強,為冷色時則可能有神秘感。在網頁中使用閃爍效果時, 需注意閃爍頻率、色彩的明度和色相變化范圍與整個頁面內容、風格的協調性。閃爍無論出現在何種位置都會不斷吸引視線, 因而在使用時要格外注意閃爍范圍與周圍其它元素的平衡關系。

2.1.2 包含交互因素的動態色

網頁中包含交互因素的動態色常見于按鈕、熱區、超文本等具有交互功能的屏幕對話構件中, 常用的色彩變化包括亮度、反色和特殊顏色。例如當光標移至感應區域時, 按鈕或文本變為較之前明亮、高飽和度的色彩或對比色以吸引注意。對于已點擊過的內容, 則以區別于未點擊色彩, 但亮度、飽和度較低的顏色顯示, 既可有所區別,又不至于造成過度的視覺干擾。

2.2 靜態色的運用

靜態色主要指靜止不動的顏色, 靜態色又以靜態文本的顏色為主。靜態文本是功能相對單純的閱讀型文本, 在網頁中常以大段文字的形式出現。對于感興趣的文字內容, 瀏覽者需要集中注意力和花費時間, 因此這類文本與背景的顏色搭配應以易于提取信息、利于減小視覺疲勞為原則。若眼睛同時聚焦于兩種對比明顯的鮮艷彩色上, 眼睛周圍的肌肉會特別緊張。一些鮮艷補色、準補色的組合方式是不利于用戶閱讀的,例如紫色為背景的黃色顯示, 綠色為背景的紫紅色顯示, 以及純紅與純藍色的組合。相對于注視無彩色, 人們持續注視鮮艷的彩色更容易疲勞和厭煩。一般而言, 底色與文字色的色彩跳躍度越低, 即越接近無彩色,越有利于長時間閱讀。越高明度差的色彩搭配, 越具有高認識度, 用戶也就越易于從中獲取信息。低純度、高明度對比的文本與背景搭配, 是適用于靜態文本的顯示色彩。在無彩色的搭配中, 白底黑字的顯示方式可讀性更強。

3、結語

總之，網頁色彩設計方法多種多樣，需要考量各方各面的東西。它不是簡單的色彩排布， 而是以人的尺度去設計，以滿足人的不同需求為任務，同其他的產品色彩設計一樣， 最終是以人的滿意為目的的。作為新媒體中的信息載體的一種，網頁色彩設計通過發揮數字化制作的優勢，并結合傳統的色彩設計的理論方法，可以制作出任何想要的美麗頁面。

［1］郭潔恩.網頁色彩表現研究 ［D］.西安美術學院, 2007.3 ,P28- P30.

［2］王慶斌, 張福昌.現代網頁色彩設計 ［J］.無錫輕工大學學報, 2001.6 , 2( 2): P26.

［3］張秀杰.個性化網頁設計技巧 ［J］.黑龍江畜牧獸醫職業學院學報, 2006.12., P59-P60.

［4］董海斌, 王家民.網頁界面中的色彩設計 ［J］.藝術理論,2007.11 , P78- P79.

［5］李立偉.淺談網頁色彩設計 ［J］.鄭州輕工業學院學報.