前言:想要寫出一篇引人入勝的文章?我們特意為您整理了動態(tài)網(wǎng)站設(shè)計的色彩應(yīng)用范文,希望能給你帶來靈感和參考,敬請閱讀。
摘要:由于多數(shù)網(wǎng)站設(shè)計師一般是工科背景,缺乏對藝術(shù)和色彩的研究,導(dǎo)致設(shè)計出來的網(wǎng)站僅能滿足客戶功能方面的需求,在版面和網(wǎng)頁整體視覺效果方面無法滿足客戶日益增長的需求,本案例從色彩學(xué)方面分析色彩及搭配特點,結(jié)合兒童攝影網(wǎng)站的瀏覽人群對色彩的喜愛,提出解決色彩搭配和主頁版面設(shè)計的方案,為工科背景設(shè)計師在設(shè)計網(wǎng)頁界面的時候解決版面色彩搭配提供啟發(fā)和借鑒。
關(guān)鍵詞:色彩;色彩搭配;兒童攝影網(wǎng)站
0引言
動態(tài)網(wǎng)站設(shè)計課程是計算機大專業(yè)的教學(xué)體系中的一門重要課程。計算機專業(yè)的授課老師通常出自工科而非藝術(shù)類專業(yè),程序和技術(shù)是他們的強項,著重代碼或界面在DREWEAVER中技術(shù)部分的實現(xiàn),也是教學(xué)中的重點。計算機專業(yè)的學(xué)生一般也是非藝術(shù)類考生,對美術(shù)和色彩的知識了解相對較少,這導(dǎo)致其設(shè)計出的界面不美觀,網(wǎng)頁中圖片素材的選擇、色彩的整體把握和搭配比較欠缺。然而從網(wǎng)站使用者的角度來講,打開網(wǎng)站首先是視覺上的感知,對于功能部分感受沒那么直接,漂亮精美的界面可以讓人耳目一新,視覺上的強烈印象可以激發(fā)瀏覽者更多的好奇心,從而增加瀏覽者停留在本網(wǎng)站的時間。網(wǎng)站的設(shè)計和推廣的目的是獲得瀏覽者的關(guān)注量,所以一個好的動態(tài)網(wǎng)站不僅功能代碼要設(shè)計完善,界面美工方面也需要精心設(shè)計,而設(shè)計精美的界面則需要整體圖片與色彩的搭配。
1色彩與網(wǎng)頁設(shè)計
1.1網(wǎng)頁界面布局
在動態(tài)網(wǎng)站設(shè)計課程的教學(xué)實際中,網(wǎng)頁布局是授課重點,常見的布局技術(shù)手段是采用DIV+CSS。其技術(shù)核心是:DIV實現(xiàn)網(wǎng)頁用層進行區(qū)域劃分,在區(qū)域與區(qū)域的位置調(diào)整和細節(jié)效果的處理方面利用CSS盒子模型原理來實現(xiàn),盒子模型如圖一所示。利用DIV+CSS技術(shù)來布局網(wǎng)頁界面使得網(wǎng)頁整體效果看起來更為精美,但學(xué)生僅僅只掌握DIV+CSS技術(shù)還不能做出耳目一新的網(wǎng)頁效果,DIV+CSS只是網(wǎng)頁界面設(shè)計的一個工具,熟練掌握和運用工具還不能達到境界高的網(wǎng)頁制作,想要隨心所欲的根據(jù)不同瀏覽人群特點設(shè)計出相應(yīng)的美工效果的界面則需要掌握和運用色彩學(xué)。
1.2色彩構(gòu)成與搭配和網(wǎng)頁界面設(shè)計的關(guān)系
1.2.1色彩
色彩是光經(jīng)過物體散射到達人眼睛中的顏色,由明度、純度、色相三要素組成,分為無彩色系和有彩色系,國際上普及的色彩分類是孟氏色立體,色彩實際運用和搭配中通常參考它。不同的要素組合出不同的顏色效果。色彩的構(gòu)成是將兩個或兩個以上的色彩,根據(jù)不同的目的,按照一定的原則,重新組合、搭配、構(gòu)成新的、美的色彩關(guān)系,在網(wǎng)頁設(shè)計中要運用這個原理來進行素材搭配。色彩是客觀存在的,但人對色彩的反應(yīng)卻是隨著很多因素的變化而變化的,也就是說色彩具有生理特性。視覺的適應(yīng)是由于外界變化引起視覺的改變過程,當(dāng)人們看物體時,常常伴隨著心里的調(diào)節(jié)?,F(xiàn)實生活中,人們看到的顏色大部分是多種色彩的混合。即用兩種或多種顏色互相混合而產(chǎn)生新色彩的方法,分為加色混合、減色混合和中性混合三種。網(wǎng)頁界面設(shè)計中,整體色彩搭配選擇圖片組合的時候要重點考慮,可運用色彩混合來控制網(wǎng)頁整體效果,從而達到設(shè)計效果耳目一新,具有強烈的色彩視覺沖擊感,給網(wǎng)頁瀏覽者留下深刻的印象。
1.2.2色彩與網(wǎng)頁設(shè)計
一般來講,網(wǎng)站美工設(shè)計要完成如下任務(wù):表達一定的界面藝術(shù)效果、使頁面結(jié)構(gòu)清晰可讀性強、實現(xiàn)不同的功能、豐富網(wǎng)頁的內(nèi)容。其中界面藝術(shù)效果設(shè)計主要包括色彩運用。在網(wǎng)頁制作中,用戶視覺上看到的往往是圖片、線條、文字、動畫等,這些元素在色彩方面都有色彩的構(gòu)成要素。把諸多的網(wǎng)頁要素放在同一個頁面上,需要考慮網(wǎng)頁元素之間的色彩搭配以及整體色彩的構(gòu)成。根據(jù)不同的設(shè)計應(yīng)用需求,選擇性地把網(wǎng)頁元素整合放在一起才能獲得色彩美觀的網(wǎng)頁效果。
2兒童攝影動態(tài)網(wǎng)站美工設(shè)計中的色彩學(xué)應(yīng)用
2.1案例概述
主題為兒童攝影的動態(tài)網(wǎng)站,一個優(yōu)秀的網(wǎng)站通常比較注重主頁的設(shè)計,本案例重點工作為區(qū)域劃分和運用色彩學(xué)對整體效果的控制,根據(jù)主頁要達到的整體效果準備網(wǎng)頁圖片等素材。網(wǎng)站主頁界面區(qū)域布局為:公司店面和拍攝場地的展示區(qū)域、展示最新兒童攝影作品區(qū)域、頁腳區(qū)域.
2.2兒童攝影網(wǎng)站中的色彩設(shè)計
2.2.1色彩與審美需求
配色實踐證實,凡是能與接受者產(chǎn)生共鳴的色彩搭配,接受者才認為是美的,是調(diào)和的,因此色彩調(diào)和就有一個與接受者審美需求的統(tǒng)一問題。色彩設(shè)計能夠獲得成功,使接受者與之產(chǎn)生共鳴,設(shè)計就必須有針對性。兒童攝影作品的對象主要是兒童,兒童攝影中使用的工具是色彩對比強烈、個性鮮明的服裝、玩具、道具及場景。兒童攝影網(wǎng)站瀏覽的對象主要以年輕媽媽居多,所以本案例的主頁整體色彩要符合多數(shù)女性對色彩的接受和喜好需求。多數(shù)年輕女性一般喜歡粉、紅色、白色以及其他偏清新亮麗的色系。
2.2.2色彩與營銷
研究和了解消費者心理,給商品恰當(dāng)定位,然后給商品、包裝等恰當(dāng)?shù)纳?,將商品的理念傳達給消費者,使營銷實現(xiàn)高效化,取得最佳效果,可以說,色彩是一把打開消費者心靈的無形鑰匙。
2.2.3兒童攝影主頁的色彩設(shè)計
本案例中,主頁整體風(fēng)格為色彩清新亮麗的顏色。因為兒童攝影被拍攝者是小朋友,網(wǎng)站的瀏覽者以女性為主,所以網(wǎng)站色調(diào)以粉色系、白色系為主色調(diào)。色彩需要對比,色調(diào)需要過度,這樣搭配出來的顏色更能使得多數(shù)人接受。本案例中,采用的網(wǎng)頁整體背景以非常淡的粉色加少許白色為背景顏色。這個背景色將充滿整個網(wǎng)頁的邊角和非主體區(qū)域。色彩的明度、純度需要一個對比和過渡,所以在選擇圖片素材上,本案例中的照片素材部分選擇純度和明度比背景略高的粉色、紅色。本案例采用大面積的暖色調(diào)粉色為主色調(diào),冷暖色調(diào)搭配是工業(yè)設(shè)計應(yīng)用中較為經(jīng)典和諧的色彩搭配,所以筆者在大面積為暖色調(diào)的主頁版面上加入藍色、綠色等冷色調(diào)的小面積色區(qū)。這是因為在色彩視覺方面,當(dāng)呈現(xiàn)在眼前的大面積是一種色調(diào),容易引起視覺上的疲勞感,所以筆者在設(shè)計主頁過程中加入了小部分藍色的線條、小圖片的冷色調(diào)色區(qū),從而達到冷暖色調(diào)對比和諧的色彩呈現(xiàn)。由于黑色、白色和灰色這三種顏色一般可以與任何顏色相搭而不失協(xié)調(diào),所以主頁版面筆者加入了局部的黑、白、灰小色區(qū)的素材。這樣兒童攝影主頁的色彩構(gòu)成為:淡粉色為主色調(diào),圖片區(qū)域既考慮了和粉色一個色系的暖色調(diào),又加入了小面積的冷色調(diào)做點綴,同時破除掉色彩上的視覺疲勞問題,最后主頁呈現(xiàn)出來的是色彩結(jié)構(gòu)清新亮麗又不覺眼花繚亂和疲勞的效果。
3結(jié)束語
本案例從色彩學(xué)的原理及特性分析,以兒童攝影主頁的美工設(shè)計為案例,解決了網(wǎng)站整體效果控制方面的色彩搭配問題,為工科背景的網(wǎng)站程設(shè)計人員在網(wǎng)頁界面美工設(shè)計方面提供重要參考。
參考文獻
[1]黑馬程序員.網(wǎng)頁設(shè)計與制作項目教程[M].北京:人民郵電出版社出版社,2017.
[2]趙國志.色彩設(shè)計基礎(chǔ)[M].北京:高等教育出版社,2007.
[3]周至禹.藝術(shù)的色彩[M].重慶:重慶大學(xué)出版社,2013.
[4]張帆.網(wǎng)站美工高級培訓(xùn)教程[M].北京:清華大學(xué)出版社,2002.
作者:楊昭兵 單位:蘇州經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院