動(dòng)態(tài)網(wǎng)站設(shè)計(jì)的色彩應(yīng)用

前言：想要寫(xiě)出一篇引人入勝的文章？我們特意為您整理了動(dòng)態(tài)網(wǎng)站設(shè)計(jì)的色彩應(yīng)用范文，希望能給你帶來(lái)靈感和參考，敬請(qǐng)閱讀。

摘要：由于多數(shù)網(wǎng)站設(shè)計(jì)師一般是工科背景，缺乏對(duì)藝術(shù)和色彩的研究，導(dǎo)致設(shè)計(jì)出來(lái)的網(wǎng)站僅能滿足客戶功能方面的需求，在版面和網(wǎng)頁(yè)整體視覺(jué)效果方面無(wú)法滿足客戶日益增長(zhǎng)的需求，本案例從色彩學(xué)方面分析色彩及搭配特點(diǎn)，結(jié)合兒童攝影網(wǎng)站的瀏覽人群對(duì)色彩的喜愛(ài)，提出解決色彩搭配和主頁(yè)版面設(shè)計(jì)的方案，為工科背景設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁(yè)界面的時(shí)候解決版面色彩搭配提供啟發(fā)和借鑒。

關(guān)鍵詞：色彩；色彩搭配；兒童攝影網(wǎng)站

0引言

動(dòng)態(tài)網(wǎng)站設(shè)計(jì)課程是計(jì)算機(jī)大專(zhuān)業(yè)的教學(xué)體系中的一門(mén)重要課程。計(jì)算機(jī)專(zhuān)業(yè)的授課老師通常出自工科而非藝術(shù)類(lèi)專(zhuān)業(yè)，程序和技術(shù)是他們的強(qiáng)項(xiàng)，著重代碼或界面在DREWEAVER中技術(shù)部分的實(shí)現(xiàn)，也是教學(xué)中的重點(diǎn)。計(jì)算機(jī)專(zhuān)業(yè)的學(xué)生一般也是非藝術(shù)類(lèi)考生，對(duì)美術(shù)和色彩的知識(shí)了解相對(duì)較少，這導(dǎo)致其設(shè)計(jì)出的界面不美觀，網(wǎng)頁(yè)中圖片素材的選擇、色彩的整體把握和搭配比較欠缺。然而從網(wǎng)站使用者的角度來(lái)講，打開(kāi)網(wǎng)站首先是視覺(jué)上的感知，對(duì)于功能部分感受沒(méi)那么直接，漂亮精美的界面可以讓人耳目一新，視覺(jué)上的強(qiáng)烈印象可以激發(fā)瀏覽者更多的好奇心，從而增加瀏覽者停留在本網(wǎng)站的時(shí)間。網(wǎng)站的設(shè)計(jì)和推廣的目的是獲得瀏覽者的關(guān)注量，所以一個(gè)好的動(dòng)態(tài)網(wǎng)站不僅功能代碼要設(shè)計(jì)完善，界面美工方面也需要精心設(shè)計(jì)，而設(shè)計(jì)精美的界面則需要整體圖片與色彩的搭配。

1色彩與網(wǎng)頁(yè)設(shè)計(jì)

1.1網(wǎng)頁(yè)界面布局

在動(dòng)態(tài)網(wǎng)站設(shè)計(jì)課程的教學(xué)實(shí)際中，網(wǎng)頁(yè)布局是授課重點(diǎn)，常見(jiàn)的布局技術(shù)手段是采用DIV+CSS。其技術(shù)核心是：DIV實(shí)現(xiàn)網(wǎng)頁(yè)用層進(jìn)行區(qū)域劃分，在區(qū)域與區(qū)域的位置調(diào)整和細(xì)節(jié)效果的處理方面利用CSS盒子模型原理來(lái)實(shí)現(xiàn)，盒子模型如圖一所示。利用DIV+CSS技術(shù)來(lái)布局網(wǎng)頁(yè)界面使得網(wǎng)頁(yè)整體效果看起來(lái)更為精美，但學(xué)生僅僅只掌握DIV+CSS技術(shù)還不能做出耳目一新的網(wǎng)頁(yè)效果，DIV+CSS只是網(wǎng)頁(yè)界面設(shè)計(jì)的一個(gè)工具，熟練掌握和運(yùn)用工具還不能達(dá)到境界高的網(wǎng)頁(yè)制作，想要隨心所欲的根據(jù)不同瀏覽人群特點(diǎn)設(shè)計(jì)出相應(yīng)的美工效果的界面則需要掌握和運(yùn)用色彩學(xué)。

1.2色彩構(gòu)成與搭配和網(wǎng)頁(yè)界面設(shè)計(jì)的關(guān)系

1.2.1色彩

色彩是光經(jīng)過(guò)物體散射到達(dá)人眼睛中的顏色，由明度、純度、色相三要素組成，分為無(wú)彩色系和有彩色系，國(guó)際上普及的色彩分類(lèi)是孟氏色立體，色彩實(shí)際運(yùn)用和搭配中通常參考它。不同的要素組合出不同的顏色效果。色彩的構(gòu)成是將兩個(gè)或兩個(gè)以上的色彩，根據(jù)不同的目的，按照一定的原則，重新組合、搭配、構(gòu)成新的、美的色彩關(guān)系，在網(wǎng)頁(yè)設(shè)計(jì)中要運(yùn)用這個(gè)原理來(lái)進(jìn)行素材搭配。色彩是客觀存在的，但人對(duì)色彩的反應(yīng)卻是隨著很多因素的變化而變化的，也就是說(shuō)色彩具有生理特性。視覺(jué)的適應(yīng)是由于外界變化引起視覺(jué)的改變過(guò)程，當(dāng)人們看物體時(shí)，常常伴隨著心里的調(diào)節(jié)。現(xiàn)實(shí)生活中，人們看到的顏色大部分是多種色彩的混合。即用兩種或多種顏色互相混合而產(chǎn)生新色彩的方法，分為加色混合、減色混合和中性混合三種。網(wǎng)頁(yè)界面設(shè)計(jì)中，整體色彩搭配選擇圖片組合的時(shí)候要重點(diǎn)考慮，可運(yùn)用色彩混合來(lái)控制網(wǎng)頁(yè)整體效果，從而達(dá)到設(shè)計(jì)效果耳目一新，具有強(qiáng)烈的色彩視覺(jué)沖擊感，給網(wǎng)頁(yè)瀏覽者留下深刻的印象。

1.2.2色彩與網(wǎng)頁(yè)設(shè)計(jì)

一般來(lái)講，網(wǎng)站美工設(shè)計(jì)要完成如下任務(wù)：表達(dá)一定的界面藝術(shù)效果、使頁(yè)面結(jié)構(gòu)清晰可讀性強(qiáng)、實(shí)現(xiàn)不同的功能、豐富網(wǎng)頁(yè)的內(nèi)容。其中界面藝術(shù)效果設(shè)計(jì)主要包括色彩運(yùn)用。在網(wǎng)頁(yè)制作中，用戶視覺(jué)上看到的往往是圖片、線條、文字、動(dòng)畫(huà)等，這些元素在色彩方面都有色彩的構(gòu)成要素。把諸多的網(wǎng)頁(yè)要素放在同一個(gè)頁(yè)面上，需要考慮網(wǎng)頁(yè)元素之間的色彩搭配以及整體色彩的構(gòu)成。根據(jù)不同的設(shè)計(jì)應(yīng)用需求，選擇性地把網(wǎng)頁(yè)元素整合放在一起才能獲得色彩美觀的網(wǎng)頁(yè)效果。

2兒童攝影動(dòng)態(tài)網(wǎng)站美工設(shè)計(jì)中的色彩學(xué)應(yīng)用

2.1案例概述

主題為兒童攝影的動(dòng)態(tài)網(wǎng)站，一個(gè)優(yōu)秀的網(wǎng)站通常比較注重主頁(yè)的設(shè)計(jì)，本案例重點(diǎn)工作為區(qū)域劃分和運(yùn)用色彩學(xué)對(duì)整體效果的控制，根據(jù)主頁(yè)要達(dá)到的整體效果準(zhǔn)備網(wǎng)頁(yè)圖片等素材。網(wǎng)站主頁(yè)界面區(qū)域布局為：公司店面和拍攝場(chǎng)地的展示區(qū)域、展示最新兒童攝影作品區(qū)域、頁(yè)腳區(qū)域.

2.2兒童攝影網(wǎng)站中的色彩設(shè)計(jì)

2.2.1色彩與審美需求

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

2.2.2色彩與營(yíng)銷(xiāo)

研究和了解消費(fèi)者心理，給商品恰當(dāng)定位，然后給商品、包裝等恰當(dāng)?shù)纳剩瑢⑸唐返睦砟顐鬟_(dá)給消費(fèi)者，使?fàn)I銷(xiāo)實(shí)現(xiàn)高效化，取得最佳效果，可以說(shuō)，色彩是一把打開(kāi)消費(fèi)者心靈的無(wú)形鑰匙。

2.2.3兒童攝影主頁(yè)的色彩設(shè)計(jì)

本案例中，主頁(yè)整體風(fēng)格為色彩清新亮麗的顏色。因?yàn)閮和瘮z影被拍攝者是小朋友，網(wǎng)站的瀏覽者以女性為主，所以網(wǎng)站色調(diào)以粉色系、白色系為主色調(diào)。色彩需要對(duì)比，色調(diào)需要過(guò)度，這樣搭配出來(lái)的顏色更能使得多數(shù)人接受。本案例中，采用的網(wǎng)頁(yè)整體背景以非常淡的粉色加少許白色為背景顏色。這個(gè)背景色將充滿整個(gè)網(wǎng)頁(yè)的邊角和非主體區(qū)域。色彩的明度、純度需要一個(gè)對(duì)比和過(guò)渡，所以在選擇圖片素材上，本案例中的照片素材部分選擇純度和明度比背景略高的粉色、紅色。本案例采用大面積的暖色調(diào)粉色為主色調(diào)，冷暖色調(diào)搭配是工業(yè)設(shè)計(jì)應(yīng)用中較為經(jīng)典和諧的色彩搭配，所以筆者在大面積為暖色調(diào)的主頁(yè)版面上加入藍(lán)色、綠色等冷色調(diào)的小面積色區(qū)。這是因?yàn)樵谏室曈X(jué)方面，當(dāng)呈現(xiàn)在眼前的大面積是一種色調(diào)，容易引起視覺(jué)上的疲勞感，所以筆者在設(shè)計(jì)主頁(yè)過(guò)程中加入了小部分藍(lán)色的線條、小圖片的冷色調(diào)色區(qū)，從而達(dá)到冷暖色調(diào)對(duì)比和諧的色彩呈現(xiàn)。由于黑色、白色和灰色這三種顏色一般可以與任何顏色相搭而不失協(xié)調(diào)，所以主頁(yè)版面筆者加入了局部的黑、白、灰小色區(qū)的素材。這樣兒童攝影主頁(yè)的色彩構(gòu)成為：淡粉色為主色調(diào)，圖片區(qū)域既考慮了和粉色一個(gè)色系的暖色調(diào)，又加入了小面積的冷色調(diào)做點(diǎn)綴，同時(shí)破除掉色彩上的視覺(jué)疲勞問(wèn)題，最后主頁(yè)呈現(xiàn)出來(lái)的是色彩結(jié)構(gòu)清新亮麗又不覺(jué)眼花繚亂和疲勞的效果。

3結(jié)束語(yǔ)

本案例從色彩學(xué)的原理及特性分析，以兒童攝影主頁(yè)的美工設(shè)計(jì)為案例，解決了網(wǎng)站整體效果控制方面的色彩搭配問(wèn)題，為工科背景的網(wǎng)站程設(shè)計(jì)人員在網(wǎng)頁(yè)界面美工設(shè)計(jì)方面提供重要參考。

參考文獻(xiàn)

[1]黑馬程序員.網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目教程[M].北京：人民郵電出版社出版社，2017.

[2]趙國(guó)志.色彩設(shè)計(jì)基礎(chǔ)[M].北京：高等教育出版社，2007.

[3]周至禹.藝術(shù)的色彩[M].重慶：重慶大學(xué)出版社，2013.

[4]張帆.網(wǎng)站美工高級(jí)培訓(xùn)教程[M].北京：清華大學(xué)出版社，2002.

作者:楊昭兵 單位:蘇州經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院