動態網站設計的色彩應用論文

摘要：由於多數網站設計師一般是工科背景，缺乏對藝術和色彩的研究，導致設計出來的網站僅能滿足客戶功能方面的需求，在版面和網頁整體視覺效果方面無法滿足客戶日益增長的需求，本案例從色彩學方面分析色彩及搭配特點，結合兒童攝影網站的瀏覽人羣對色彩的喜愛，提出解決色彩搭配和主頁版面設計的方案，爲工科背景設計師在設計網頁介面的時候解決版面色彩搭配提供啓發和借鑑。

關鍵詞：色彩；色彩搭配；兒童攝影網站

0引言

動態網站設計課程是計算機大專業的教學體系中的一門重要課程。計算機專業的授課老師通常出自工科而非藝術類專業，程序和技術是他們的強項，着重代碼或介面在DREWEAVER中技術部分的實現，也是教學中的重點。計算機專業的學生一般也是非藝術類考生，對美術和色彩的知識瞭解相對較少，這導致其設計出的介面不美觀，網頁中圖片素材的選擇、色彩的整體把握和搭配比較欠缺。然而從網站使用者的角度來講，開啟網站首先是視覺上的感知，對於功能部分感受沒那麼直接，漂亮精美的介面可以讓人耳目一新，視覺上的強烈印象可以激發瀏覽者更多的好奇心，從而增加瀏覽者停留在本網站的時間。網站的設計和推廣的目的是獲得瀏覽者的關注量，所以一個好的動態網站不僅功能代碼要設計完善，介面美工方面也需要精心設計，而設計精美的介面則需要整體圖片與色彩的搭配。

1色彩與網頁設計

1.1網頁介面佈局

在動態網站設計課程的教學實際中，網頁佈局是授課重點，常見的佈局技術手段是採用DIV+CSS。其技術核心是：DIV實現網頁用層進行區域劃分，在區域與區域的位置調整和細節效果的處理方面利用CSS盒子模型原理來實現，盒子模型如圖一所示。利用DIV+CSS技術來佈局網頁介面使得網頁整體效果看起來更爲精美，但學生僅僅只掌握DIV+CSS技術還不能做出耳目一新的網頁效果，DIV+CSS只是網頁介面設計的一個工具，熟練掌握和運用工具還不能達到境界高的網頁製作，想要隨心所欲的根據不同瀏覽人羣特點設計出相應的美工效果的介面則需要掌握和運用色彩學。

1.2色彩構成與搭配和網頁介面設計的關係

1.2.1色彩

色彩是光經過物體散射到達人眼睛中的顏色，由明度、純度、色相三要素組成，分爲無彩色系和有彩色系，國際上普及的色彩分類是孟氏色立體，色彩實際運用和搭配中通常參考它。不同的要素組合出不同的顏色效果。色彩的構成是將兩個或兩個以上的色彩，根據不同的目的，按照一定的.原則，重新組合、搭配、構成新的、美的色彩關係，在網頁設計中要運用這個原理來進行素材搭配。色彩是客觀存在的，但人對色彩的反應卻是隨着很多因素的變化而變化的，也就是說色彩具有生理特性。視覺的適應是由於外界變化引起視覺的改變過程，當人們看物體時，常常伴隨着心裏的調節。現實生活中，人們看到的顏色大部分是多種色彩的混合。即用兩種或多種顏色互相混合而產生新色彩的方法，分爲加色混合、減色混合和中性混合三種。網頁介面設計中，整體色彩搭配選擇圖片組合的時候要重點考慮，可運用色彩混合來控制網頁整體效果，從而達到設計效果耳目一新，具有強烈的色彩視覺衝擊感，給網頁瀏覽者留下深刻的印象。

1.2.2色彩與網頁設計

一般來講，網站美工設計要完成如下任務：表達一定的介面藝術效果、使頁面結構清晰可讀性強、實現不同的功能、豐富網頁的內容。其中介面藝術效果設計主要包括色彩運用。在網頁製作中，用戶視覺上看到的往往是圖片、線條、文字、動畫等，這些元素在色彩方面都有色彩的構成要素。把諸多的網頁要素放在同一個頁面上，需要考慮網頁元素之間的色彩搭配以及整體色彩的構成。根據不同的設計應用需求，選擇性地把網頁元素整合放在一起才能獲得色彩美觀的網頁效果。

2兒童攝影動態網站美工設計中的色彩學應用

2.1案例概述

主題爲兒童攝影的動態網站，一個優秀的網站通常比較注重主頁的設計，本案例重點工作爲區域劃分和運用色彩學對整體效果的控制，根據主頁要達到的整體效果準備網頁圖片等素材。網站主頁介面區域佈局爲：公司店面和拍攝場地的展示區域、展示最新兒童攝影作品區域、頁腳區域.

2.2兒童攝影網站中的色彩設計

2.2.1色彩與審美需求

配色實踐證實，凡是能與接受者產生共鳴的色彩搭配，接受者才認爲是美的，是調和的，因此色彩調和就有一個與接受者審美需求的統一問題。色彩設計能夠獲得成功，使接受者與之產生共鳴，設計就必須有針對性。兒童攝影作品的對象主要是兒童，兒童攝影中使用的工具是色彩對比強烈、個性鮮明的服裝、玩具、道具及場景。兒童攝影網站瀏覽的對象主要以年輕媽媽居多，所以本案例的主頁整體色彩要符合多數女性對色彩的接受和喜好需求。多數年輕女性一般喜歡粉、紅色、白色以及其他偏清新亮麗的色系。

2.2.2色彩與營銷

研究和了解消費者心理，給商品恰當定位，然後給商品、包裝等恰當的色彩，將商品的理念傳達給消費者，使營銷實現高效化，取得最佳效果，可以說，色彩是一把開啟消費者心靈的無形鑰匙。

2.2.3兒童攝影主頁的色彩設計

本案例中，主頁整體風格爲色彩清新亮麗的顏色。因爲兒童攝影被拍攝者是小朋友，網站的瀏覽者以女性爲主，所以網站色調以粉色系、白色系爲主色調。色彩需要對比，色調需要過度，這樣搭配出來的顏色更能使得多數人接受。本案例中，採用的網頁整體背景以非常淡的粉色加少許白色爲背景顏色。這個背景色將充滿整個網頁的邊角和非主體區域。色彩的明度、純度需要一個對比和過渡，所以在選擇圖片素材上，本案例中的照片素材部分選擇純度和明度比背景略高的粉色、紅色。本案例採用大面積的暖色調粉色爲主色調，冷暖色調搭配是工業設計應用中較爲經典和諧的色彩搭配，所以筆者在大面積爲暖色調的主頁版面上加入藍色、綠色等冷色調的小面積色區。這是因爲在色彩視覺方面，當呈現在眼前的大面積是一種色調，容易引起視覺上的疲勞感，所以筆者在設計主頁過程中加入了小部分藍色的線條、小圖片的冷色調色區，從而達到冷暖色調對比和諧的色彩呈現。由於黑色、白色和灰色這三種顏色一般可以與任何顏色相搭而不失協調，所以主頁版面筆者加入了局部的黑、白、灰小色區的素材。這樣兒童攝影主頁的色彩構成爲：淡粉色爲主色調，圖片區域既考慮了和粉色一個色系的暖色調，又加入了小面積的冷色調做點綴，同時破除掉色彩上的視覺疲勞問題，最後主頁呈現出來的是色彩結構清新亮麗又不覺眼花繚亂和疲勞的效果。

3結束語

本案例從色彩學的原理及特性分析，以兒童攝影主頁的美工設計爲案例，解決了網站整體效果控制方面的色彩搭配問題，爲工科背景的網站程設計人員在網頁介面美工設計方面提供重要參考。

參考文獻

[1]黑馬程序員.網頁設計與製作項目教程[M].北京：人民郵電出版社出版社，2017.

[2]趙國志.色彩設計基礎[M].北京：高等教育出版社，2007.

[3]周至禹.藝術的色彩[M].重慶：重慶大學出版社，2013.

[4]張帆.網站美工進階培訓教程[M].北京：清華大學出版社，2002.