第一篇：扁平化設(shè)計在網(wǎng)頁上的運用優(yōu)勢論文

一、界面元素設(shè)計

扁平化設(shè)計使用的是正方形、長方形或者多邊形等這樣的基本形狀，這些二維圖形弱化了視覺上的復(fù)雜性，讓瀏覽者不會過多的關(guān)注圖形，而是強化了要表達的內(nèi)容和信息，更加容易識別。當(dāng)然，設(shè)計師也要了解每個元素所代表的含義與作用，并且應(yīng)使用不同的形式來加以區(qū)別。扁平化設(shè)計強調(diào)的是信息本身，而不是繁復(fù)多余的界面元素。瀏覽者在瀏覽網(wǎng)頁時，主要是獲取信息，界面元素的主要功能是提示瀏覽者迅速找到他們所需要的信息。扁平化設(shè)計由于界面元素的簡單且易于查找，所以更適合那些近視者和弱視者，能幫助到這些有特殊需求的人群。

二、色彩

扁平化設(shè)計頁面中，因為追求極簡主義，所以沒有其他多余的裝飾。因此，設(shè)計者在設(shè)計時需要更加注意色彩的搭配，這樣將會收到更好的視覺效果。從色塊、圖形、導(dǎo)航到版面，色彩是一個關(guān)鍵的組成元素，好的色彩搭配會給人帶來愉悅的心情和完美的視覺享受?？偨Y(jié)扁平設(shè)計的色彩搭配大致分為兩種：同類色搭配：同類色搭配，最常用的是把同一種顏色的黑、白、灰三種色調(diào)結(jié)合在一起，形成層次上的對比。在扁平化設(shè)計中，單色的使用不僅能分清層次感，同時也能把握住整體感。如圖１，網(wǎng)頁的背景使用了一張深灰的圖片，界面元素則使用了紅色系的同類色搭配。在導(dǎo)航部分運用了扁平化設(shè)計的樣式，使用了與標(biāo)志相同顏色的色塊來展示。設(shè)計者通過調(diào)整色彩的飽和度以及透明度使單色產(chǎn)生一定的變化，使頁面不單調(diào)，反看起來整體感十足，同時增加了信息的辨識度，讓人一目了然。對比色：對比色搭配的使用可以使頁面看起來極富活力又有豐富的色彩變幻，視覺效果醒目。在使用對比色進行搭配時，設(shè)計師要注意到在設(shè)計時應(yīng)當(dāng)先了解網(wǎng)頁的主題，選用合適的顏色進行搭配。如圖２，是一家房地產(chǎn)中心的首頁，導(dǎo)航部分的扁平化設(shè)計運用了多種顏色來進行搭配。導(dǎo)航中的藍色，綠色有藍天，草地的寓意，間接烘托出小區(qū)優(yōu)美的環(huán)境。黃色與藍紫色是對比色，對比色會帶給人一種色彩撞擊的感覺，增強了畫面的對比感，增添活力，使人眼前一亮。整體來看，網(wǎng)頁的背景色又與導(dǎo)航的顏色相呼應(yīng)，這樣不僅不會覺得顏色雜亂，反而有很好的集中視線的感覺。

三、布局

扁平化設(shè)計基本使用的是網(wǎng)格布局，網(wǎng)格布局能使網(wǎng)頁更便于使用，減少使用過程中的反復(fù)性，提升識別性。扁平化設(shè)計中刪除了網(wǎng)格布局中多余的線條和邊框，使用單純的二維色塊對頁面進行大膽的分割，色塊上使用大小不一的文字來標(biāo)示內(nèi)容中心或是使用多標(biāo)題圖片，都可容納更多的內(nèi)容，使每個圖標(biāo)都有屬于自己的獨特風(fēng)格，同時內(nèi)容從一個邊緣流向另一個邊緣，在一個軸上進行活動，增加了穩(wěn)定感。在頁面上，扁平化設(shè)計還會有大部分的留白，很多交互式設(shè)計都會在網(wǎng)頁中盡可能的添加內(nèi)容，這樣反而讓使用者不能準(zhǔn)確的分辨出網(wǎng)頁要傳達的主題是什么，更多的留白空間才能使瀏覽者關(guān)注到主要信息。

四、字體

設(shè)計師通過文字來向瀏覽者傳遞信息，提供導(dǎo)航服務(wù)。而字體的選擇不僅要符合扁平化設(shè)計的簡約風(fēng)格，同時還要符合整個頁面主題的設(shè)計風(fēng)格。一般扁平化風(fēng)格的頁面會使用無襯線的簡單字體，并且大多只使用一種字體，再通過對字體的放大、縮小進行排版，文字的不同排版同樣也可以帶來不同的視覺體驗，例如字號較大，或是粗體，都能幫助瀏覽者輕易地識別元素的指定功能，這樣在內(nèi)容上創(chuàng)造了一定的層次感。同時使用對比色的字體，可以提升內(nèi)容的易讀性和可讀性。

網(wǎng)站界面風(fēng)格似乎都在遵循著同一種設(shè)計審美，即：用擬物化的設(shè)計效果來突出界面元素的質(zhì)感。隨手打開一個網(wǎng)頁，我們就可以看到這樣的設(shè)計，不免會產(chǎn)生視覺疲勞。而扁平化設(shè)計既簡單又明了，設(shè)計起來也非常方便。扁平化設(shè)計風(fēng)格的逐漸興起可以看作是對網(wǎng)頁界面多年以來對過度設(shè)計的一次沖擊。設(shè)計的本質(zhì)是形式服務(wù)于功能，作為設(shè)計師，我們不僅要考慮視覺呈現(xiàn)方面的問題，而最重要的是應(yīng)當(dāng)關(guān)注到產(chǎn)品的功能上。

第二篇：網(wǎng)頁設(shè)計論文

網(wǎng)頁設(shè)計基礎(chǔ)課程論文

摘要:隨著互聯(lián)網(wǎng)的不斷發(fā)展和中國網(wǎng)絡(luò)人口的日益增長，建立個人網(wǎng)站，不但可以更好的展示自己，而且可以提高自己在計算機應(yīng)用方面的能力,網(wǎng)站越發(fā)普及，網(wǎng)站建設(shè)也有新的要求,網(wǎng)站已發(fā)展為一種工具，一個企業(yè)對外信息展示的工具.以前網(wǎng)站上常見的大幅圖片，長達幾十鐘的flash動畫，已悄然而逝，瀏覽者再也不用為了查找一些信息而必須等待動畫的時間，可以簡單方便的找到自己想要的東西，是瀏覽者主要的目的，也是網(wǎng)站設(shè)計時應(yīng)該考慮的問題。以前只是一味的追求網(wǎng)站的外觀，其實網(wǎng)站是一個公司的對外信息窗口，因此在考慮美觀的同時也得考慮瀏覽者的感受，如有些色調(diào)是很亮麗，但是這些過于亮的色彩看的時間長了會讓你的眼睛不舒服，這樣瀏覽的人就不會長時間在網(wǎng)站上逗留，網(wǎng)站沒把公司的信息完全的傳達給客戶． 關(guān)鍵詞：網(wǎng)站網(wǎng)頁設(shè)計發(fā)展趨勢網(wǎng)站標(biāo)準(zhǔn) 正文：一:網(wǎng)頁設(shè)計發(fā)展趨勢: 1.更多的CSS3 + HTML5 這是期待已久的事情。在過去的幾年設(shè)計師已經(jīng)開始關(guān)注和使用CSS3+HTML5，但在以后CSS3+HTML5將會得到更廣泛的應(yīng)用。網(wǎng)頁設(shè)計師最終會拋棄Flash。Flash不再是昔日的王者，新技術(shù)（指CSS3+HTML5）將會取而代之 2簡單的配色方案

沒有比純色的背景更直觀更簡潔。純色可以有很多種表達方式。不要老是黑白灰神馬的，太不給力了。多點考慮綠、黃或者紅作為你的網(wǎng)頁主色調(diào)。當(dāng)然，顏色最好保持使用2到3種。調(diào)整顏色的透明度，或許會給你意想不到的效果 3.移動互聯(lián)網(wǎng)時代的到來

智能手機，ipad和上網(wǎng)本隨處可見，將來這個將會更加明顯。這意味著你的設(shè)計需要考慮更多的設(shè)備。4.Parallax Scrolling 先來解釋下Parallax Scrolling，Parallax scrolling 是讓多層背景以不同的速度移動，形成運動視差 3D 效果，雖然純屬視覺效果，但在內(nèi)容滾動時形成的視覺體驗仍然非常出色。2011年的網(wǎng)頁設(shè)計趨勢熱點就是要創(chuàng)造這樣的深度視覺效果。5.設(shè)計需考慮更多的觸屏設(shè)備

觸屏技術(shù)應(yīng)用越來越廣泛，觸屏設(shè)備隨處可見。這意味著，你的導(dǎo)航設(shè)計不再只是鼠標(biāo)導(dǎo)航，你必須要要考慮你的設(shè)計適合觸屏設(shè)備。6.深度判析

深度判析是關(guān)于在網(wǎng)頁設(shè)計使用維數(shù)，這樣可以使你的網(wǎng)頁變得更加真實。如果運用得恰當(dāng)，那將會是一個虛擬的3D效果，就像3D電影阿凡達那樣。盡管3D技術(shù)還沒有去到網(wǎng)站設(shè)計，你仍然嘗試使用維數(shù)進行設(shè)計。7.大背景圖

大背景圖的網(wǎng)頁設(shè)計應(yīng)用在2011年將會更加明顯。這些背景圖像一般是高分辨率，覆蓋這個網(wǎng)站。高清照片是一個迅速抓住你的讀者的好方式，可以產(chǎn)生極具沖擊力的視覺效果-游客的視線會不自覺地落在寬大的背景上。8.不拘謹于頂級域名

嚴格意義上這一點與網(wǎng)頁設(shè)計無關(guān)，但這一點也是發(fā)展的趨勢，將出現(xiàn)更多創(chuàng)造性的域名。.com域名的吸引力越來越少，主要是你很難再找到一個比較短的.com域名。2011年人們開始將視線慢慢轉(zhuǎn)移到.me、.co和.cc等身上。想想域名的發(fā)展，搶先一步，不然你很可能再次錯失先機。9.QR: Quick Response 如果你注意現(xiàn)在越來越多的名片、雜志或者其他地方出現(xiàn)方形條形碼，證明你已經(jīng)看到2011年的這個趨勢熱門

10.縮略圖設(shè)計（Thumbnail Design）

Google已經(jīng)向瀏覽用戶推出它們的瀏覽預(yù)覽技術(shù)。過去我們只能通過點擊鏈接才能看到網(wǎng)頁的內(nèi)容，現(xiàn)在你只需點擊放大鏡然后將鼠標(biāo)懸停在鏈接上就可以預(yù)覽該鏈接的網(wǎng)頁內(nèi)容。11.持續(xù)聯(lián)系/ Life Stream Lifestreaming, 一種在線記錄個人日常活動的網(wǎng)絡(luò)應(yīng)用，包括直接通過視頻feed或通過聚焦一個人的網(wǎng)絡(luò)在線內(nèi)容，比如博客日志，在社會性網(wǎng)絡(luò)上面的更新，在線相冊，聊天內(nèi)容甚至只是一些喜歡的網(wǎng)站的鏈接等等.二:網(wǎng)站標(biāo)準(zhǔn)是在W3C（W3C.org）的組織下，商業(yè)公司（Netscape、Microsoft等）也認識到統(tǒng)一標(biāo)準(zhǔn)的好處。網(wǎng)站標(biāo)準(zhǔn)開始被建立（1998年2月10日發(fā)布XML1.0為標(biāo)志），并在網(wǎng)站標(biāo)準(zhǔn)組織（webstandards.org）的督促下推廣執(zhí)行。

為什么要建立網(wǎng)站標(biāo)準(zhǔn): 我們大部分人都有深刻體驗，每當(dāng)主流瀏覽器版本的升級，我們剛建立的網(wǎng)站就可能變得過時，我們就需要升級或者重新建造一遍網(wǎng)站。例如1996-1999年典型的“瀏覽器大戰(zhàn)”，為了兼容Netscape和IE，網(wǎng)站不得不為這兩種瀏覽器寫不同的代碼。同樣的，每當(dāng)新的網(wǎng)絡(luò)技術(shù)和交互設(shè)備的出現(xiàn)，我們也需要制作一個新版本來支持這種新技術(shù)或新設(shè)備，例如支持手機上網(wǎng)的WAP技術(shù)。類似的問題舉不勝舉：網(wǎng)站代碼臃腫、繁雜浪費了我們大量的帶寬；針對某種瀏覽器的DHTML特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士無法瀏覽網(wǎng)站等等。這是一種惡性循環(huán)，是一種巨大的浪費。如何解決這些問題呢？有識之士早已開始思考，需要建立一種普遍認同的標(biāo)準(zhǔn)來結(jié)束這種無序和混亂。商業(yè)公司（Netscape、Microsoft等）也終于認識到統(tǒng)一標(biāo)準(zhǔn)的好處，因此在W3C（W3C.org）的組織下，網(wǎng)站標(biāo)準(zhǔn)開始被建立（1998年2月10日發(fā)布XML1.0為標(biāo)志），并在網(wǎng)站標(biāo)準(zhǔn)組織（webstandards.org）的督促下推廣執(zhí)行。

采用網(wǎng)站標(biāo)準(zhǔn)的好處:

對網(wǎng)站瀏覽者的好處：

1、文件下載與頁面顯示速度更快

2、內(nèi)容能被更多的用戶所訪問（包括失明、視弱、色盲等殘障人士）；

3、內(nèi)容能被更廣泛的設(shè)備所訪問（包括屏幕閱讀機、手持設(shè)備、搜索機器人、打印機、電冰箱等）；

4、用戶能夠通過樣式選擇定制自己的表現(xiàn)界面；

5、所有頁面都能提供適于打印的版本。對網(wǎng)站所有者的好處:

1、更少的代碼和組件，容易維護；

2、帶寬要求降低（代碼更簡潔），成本降低。舉個例子：當(dāng)ESPN.com使用CSS改版后，每天節(jié)約超過兩兆字節(jié)（terabytes）的帶寬；

3、更容易被搜尋引擎搜索到；

4、改版方便，不需要變動頁面內(nèi)容；

5、提供打印版本而不需要復(fù)制內(nèi)容；

6、提高網(wǎng)站易用性。在美國，有嚴格的法律條款（Section 508）來約束政府網(wǎng)站必須達到一定的易用性，其他國家也有類似的要求。

參考文獻： 一：溫謙.HTML+CSS網(wǎng)頁設(shè)計與布局從入門到精通[M].北京:人民郵電出版社,2010.3 二：http://004km.cn

三：http://btgyjlbjx.nease.net(北極星網(wǎng)站域名）

課程論文

系院:土木工程學(xué)院

專業(yè):建筑工程 姓名:王奎

學(xué)號:105140340043 網(wǎng)頁設(shè)計基礎(chǔ)

第三篇：平面構(gòu)成在網(wǎng)頁設(shè)計中的運用

平面構(gòu)成在網(wǎng)頁設(shè)計中的運用

易 星

目前，中國互聯(lián)網(wǎng)的發(fā)展已經(jīng)形成相當(dāng)規(guī)模，據(jù)中國互聯(lián)網(wǎng)網(wǎng)絡(luò)信息中心（CNNIC）報告顯示，預(yù)計中國網(wǎng)民數(shù)量在未來5年后將要超過美國，互聯(lián)網(wǎng)已是繼報紙、廣播、電視等之后的第六大媒介。

隨著互聯(lián)網(wǎng)的發(fā)展，各類網(wǎng)站有如雨后春筍般。然而，有的站點日訪問量高達幾千萬人次，而有的站點訪問者寥寥無幾。究其原因，訪問量大的站點，除資源豐富外，網(wǎng)站的策劃和精美的外觀也是吸引訪問者的重要因素。所以將美的形式規(guī)律和平面構(gòu)成的手法結(jié)合到網(wǎng)頁設(shè)計中，是當(dāng)前網(wǎng)頁設(shè)計的重要理論依據(jù)。

一、當(dāng)網(wǎng)頁設(shè)計遇上平面構(gòu)成

（一）了解網(wǎng)頁設(shè)計

網(wǎng)頁有如門面，小到個人主頁，大到政府及國際組織等，是構(gòu)成一個網(wǎng)站的最基本單位。而網(wǎng)頁實際上只是一個純文本文件，它通過各種標(biāo)記對頁面上的元素進行描述（如顏色、大?。?，網(wǎng)頁上傳到互聯(lián)網(wǎng)之后再由用戶的瀏覽器對這些標(biāo)記進行解釋并生成頁面，于是便有了現(xiàn)在千姿百態(tài)、百花齊放的互聯(lián)網(wǎng)絡(luò)。

打開一個網(wǎng)站，首先映入眼簾的是該網(wǎng)頁的界面，如按鈕的擺放、文字的組合、色彩的應(yīng)用等等，這些都是網(wǎng)頁設(shè)計的范疇。其實在網(wǎng)絡(luò)剛興起時，沒有太多視覺設(shè)計的概念，很多網(wǎng)站都是程序員用HTML語言設(shè)計出只有功能取向的網(wǎng)頁，那時候網(wǎng)頁無法一邊寫一邊觀看，只能寫好后到瀏覽器上執(zhí)行，所以程式設(shè)計常常無法和基本的美觀結(jié)合在一起。然而，在一個個可視化的網(wǎng)頁編輯器相繼問世，特別是許多平面設(shè)計師投入網(wǎng)頁設(shè)計的行列后，整個網(wǎng)頁視覺設(shè)計的行業(yè)起了重大的變化！

隨著這幾年網(wǎng)絡(luò)的飛速發(fā)展及人們對美的不斷追求，網(wǎng)頁設(shè)計逐漸受到人們的重視，形式了一門新興的學(xué)科。簡單的講，網(wǎng)頁設(shè)計就是從審美入手，結(jié)合平面設(shè)計的特點，運用平面構(gòu)成中的基本形式到網(wǎng)頁中，讓網(wǎng)頁更加富有美感。例如將平面構(gòu)成中的節(jié)奏與韻律、骨格與肌理溶入到網(wǎng)頁中，會使內(nèi)容繁多的頁面更加有條理、主次分明，因此對平面構(gòu)成的掌握與了解是關(guān)系到網(wǎng)頁成功與否的重要基礎(chǔ)。

（二）了解平面構(gòu)成

藝術(shù)設(shè)計是人類文明的重要部分，涵蓋了當(dāng)代人類生活的各個領(lǐng)域。構(gòu)成是一個近代造型概念，含義是指將不同或相同形態(tài)的幾個單元重新組合成為一個新的單元，是以研究視覺語言的特性、構(gòu)成原理以及審美規(guī)律為目的，重在研究和分析視覺的形態(tài)、空間、運動、比例等因素的變化和形式。

平面構(gòu)成的認識源于自然科學(xué)和哲學(xué)認識論的發(fā)展，是建立在量子力學(xué)基礎(chǔ)之上的微觀認識論，這種由宏觀到微觀認識的深化，逐漸影響了造型藝術(shù)的發(fā)展。構(gòu)成觀念早在西方繪畫中就可見其影子，如立體主義繪畫、俄國的構(gòu)成主義、荷蘭的新造型主義，到后來的德國包毫斯設(shè)計學(xué)院的不斷完善發(fā)展，形成一個完整的現(xiàn)代設(shè)計基礎(chǔ)的教學(xué)體系，奠定了構(gòu)成設(shè)計觀念在現(xiàn)代設(shè)計應(yīng)用中的地位和作用。二十世紀七十年代以來，平面構(gòu)成作為一門設(shè)計基礎(chǔ)課程，已廣泛應(yīng)用于工業(yè)設(shè)計、建筑設(shè)計、平面設(shè)計等領(lǐng)域。

（三）何為網(wǎng)頁平面構(gòu)成

平面設(shè)計在網(wǎng)頁設(shè)計中占有相當(dāng)大的比重，而平面設(shè)計的重要理論基礎(chǔ)則是平面構(gòu)成，所以說，平面構(gòu)成也是網(wǎng)頁設(shè)計的重要理論依據(jù)和知識基礎(chǔ)。

在一堆雜志中，人們往往會拿起色彩豐富、圖片艷麗、結(jié)構(gòu)清晰的那本。同樣，一個布局合理、重點突出、富有美感的網(wǎng)頁，它不但能吸引用戶點擊，更能夠完美表達網(wǎng)頁的創(chuàng)意思維。所以，平面構(gòu)成的出現(xiàn)，不得不讓我們對單調(diào)、乏味、缺乏美感的HTML頁面進行反思，為了拓展網(wǎng)頁設(shè)計的藝術(shù)視覺，豐富網(wǎng)頁設(shè)計的思維及表現(xiàn)手段，我們引進了網(wǎng)頁平面構(gòu)成的理論，這有點類似于傳統(tǒng)平面設(shè)計中的構(gòu)成理論，一般包含風(fēng)格策劃、頁面構(gòu)圖、布局與色彩等方面，我們不妨將平面構(gòu)成理論作為網(wǎng)頁設(shè)計的理論指導(dǎo)，即“網(wǎng)頁平面構(gòu)成”。把網(wǎng)頁設(shè)計看成是平面設(shè)計的一種審美方式的延伸，而點線面作為平面構(gòu)成中的基本元素，在網(wǎng)頁中巧妙地互相穿插、互相襯托、互相補充構(gòu)成最佳的頁面效果，完美表達設(shè)計意境。因此，網(wǎng)頁設(shè)計作為一種視覺設(shè)計，特別講究編排和布局，雖然主頁設(shè)計不同于平面設(shè)計，但它們有著許多相近之處，如：對比、漸變和節(jié)奏美、韻律美，圖/底關(guān)系或通過文字與圖形的組合形成空間上的立體感。所以，靈活運用平面構(gòu)成中的各種手法，通過頁面各元素之間的有序排列使瀏覽者達到某種共鳴產(chǎn)生一種和諧的美感。

平面構(gòu)成是一種設(shè)計語言，已為當(dāng)今社會各個藝術(shù)設(shè)計領(lǐng)域所應(yīng)用，它以一個全新的造型觀念，給我們的網(wǎng)頁設(shè)計注入新鮮的血液。

二、為網(wǎng)頁設(shè)計注入新的血液

（一）人性化的網(wǎng)頁設(shè)計與策劃

“人們總以為設(shè)計有三維：美學(xué)、技術(shù)和經(jīng)濟，然而更重要是第四維：人性?！?-----美國設(shè)計師普羅斯

人類的藝術(shù)設(shè)計是一種審美活動，設(shè)計的任務(wù)是要實現(xiàn)設(shè)計者或用戶的意圖。網(wǎng)頁設(shè)計是指設(shè)計師將客戶要表現(xiàn)的主題和達到的效果，組合頁面元素，通過藝術(shù)手法創(chuàng)造出符合大眾審美觀的界面。開始進行網(wǎng)頁設(shè)計前，需要做很多調(diào)查，如客戶的需求、站點的性質(zhì)等，這些要求的不同設(shè)計出的網(wǎng)頁也會不同，用現(xiàn)在最時髦的話來講就是更具有人性化。

在網(wǎng)絡(luò)的虛擬世界，互聯(lián)網(wǎng)提供了天下大同的機會，充斥著無數(shù)站點，然而大多數(shù)網(wǎng)站的設(shè)計都缺乏靈魂和主旨，頁面結(jié)構(gòu)都比較松散、混亂，其原因就在于缺乏有效的策劃。因此要想使你的網(wǎng)站從那些數(shù)不清的站點中脫穎而出，就必須對整個站點作好統(tǒng)籌規(guī)劃，對所有的內(nèi)容進行斟酌，再合理組織頁面結(jié)構(gòu)與色彩。

首先，了解一下同類站點的風(fēng)格、特色，吸取他們的長處，找出自己的優(yōu)勢，做好市場調(diào)查，明確自己網(wǎng)站的主題、規(guī)模、主要特色及主要受眾目標(biāo)，再確定整個網(wǎng)站的整體風(fēng)格。其次，網(wǎng)頁的制作，設(shè)計者先要在紙上用筆畫出大概的設(shè)計草圖，等待客戶確認后，才用計算機繪圖軟件畫出平面效果圖（色彩與頁面結(jié)構(gòu)），之后才能投入實際的制作。

（二）網(wǎng)頁平面構(gòu)成手法

平面構(gòu)成是一種視覺形象的構(gòu)成，其形態(tài)的抽象性特征和產(chǎn)生不同視覺引導(dǎo)作用的構(gòu)成形式，組成嚴謹而富有節(jié)奏和動感的畫面，營造一種秩序之美、理性之美和抽象之美。其構(gòu)成形式主要有重復(fù)、近似、浙變、變異、對比、集結(jié)、發(fā)射、特異、空間、分割、肌理及錯視等等。它的研究對象主要是在平面設(shè)計中，如何構(gòu)造形象，怎樣處理形象與形象之間的關(guān)系，如何掌握美的形式規(guī)律，并按照美的形式法則，構(gòu)成設(shè)計所需要的圖形。

平面構(gòu)成中最基本的形態(tài)要素是點、線、面，其構(gòu)成要素有大小、方向、明暗、色彩等，以這些基本要素為條件，加以組合構(gòu)成，便會創(chuàng)造出無數(shù)理想的抽象造型。

網(wǎng)頁上的所有元素都可以看作構(gòu)成的基本要素。在一幅成功的作品里，需要點、線、面的共同組合來構(gòu)造整個頁面。通過三者的組合，可以突出頁面上的重要元素，突出設(shè)計的主題，增強美感，讓訪問者在感受美的過程中領(lǐng)會設(shè)計的主旨。

1、構(gòu)成的基本元素點、線、面及其在網(wǎng)頁設(shè)計中的運用

在頁面構(gòu)圖中凡是表現(xiàn)視覺圖形或文字，都可以簡化或趨近于點、線、面的視覺感受。網(wǎng)頁版面中的各種視覺元素正是以點、線、面的形式相互依存、相互作用，組合成各種視覺信息，形成千變?nèi)f化的視覺空間和感受。因此，只有協(xié)調(diào)處理好點、線、面之間的相互關(guān)系，才能設(shè)計出最佳視覺效果的網(wǎng)頁。

（1）點的運用

點是可見的最小的形式單元。在網(wǎng)頁中，點是相互比較而言的，任何一個單獨的細小的形象都可稱之為點：按鈕、字符、小色塊等等。在網(wǎng)頁中合理的安排點的布局，或者在頁面設(shè)計中將某些視覺形象進行點化處理，并運用恰當(dāng)?shù)臉?gòu)成手法進行版面布局，不但可以協(xié)調(diào)畫面，甚至可以起以畫龍點 睛的作用。圖1為個人主頁，所以在形式上比較輕松活潑。網(wǎng)頁中大面積的空白與中間的四個點形成強烈的對比，而且在點的處理上采用傳統(tǒng)的中國水墨畫的手法，更富有意境。在點的位置安排上也體現(xiàn)了一種節(jié)奏與韻律，形成視覺上的跳躍。

圖１．點的運用（來自004km.cn）

由這兩個典型的例子可以看出，無論是什么樣的法則都源自設(shè)計者本能的審美觀的驅(qū)使，再應(yīng)用到實際當(dāng)中，當(dāng)然在設(shè)計時不必十分刻意追求什么法則。應(yīng)該從日常生活中，從自然界的事物中觀察美的規(guī)律，培養(yǎng)構(gòu)圖的藝術(shù)美感。

（五）網(wǎng)頁色彩構(gòu)成

1、色彩的基礎(chǔ)知識

“接天連葉無窮碧，映日荷花別樣紅。”-------楊萬里

每次讀這首詩，閉上眼睛仿佛就能看到：碧波萬頃，微風(fēng)吹拂，滿塘荷葉輕輕搖曳，艷陽下的荷花鮮紅欲滴。這句詩里的“碧”、“紅”其實就是色彩。所以色彩對我們來講是不陌生的，因為我們生活的世界中無處不存在著色彩。色彩以一種特別的方式傳達信息，這些信息會影響觀看者的心理和感受，左右他們的判斷和選擇，色彩對于設(shè)計而言實在太重要。

首先熟悉一下色彩的基本概念，三原色——紅、黃、藍，三間色——橙、綠、紫，三種間色互為“補色”。將圖10中圓環(huán)中的任意一種顏色和黑色、白色、灰色按照不同比例混合就可以得到更多的顏色。例如，當(dāng)色彩RGB值為（0，0，255）時為純藍色，飽和度100%。隨著飽和度的逐漸降低，顏色會越來越接近灰色。

2、色彩心理

色彩，在不知不覺中作用于人的心理，據(jù)說倫敦泰姆士河附近有一座黑色的橋，它因每年在橋上自殺的人數(shù)驚人而著名，后來人們將 它改成了綠色，自殺人數(shù)劇減。有專家分析，如果將它改成粉紅色、天藍色等更明亮的色彩就可能使自殺人數(shù)將趨于零。圖10．色環(huán)

當(dāng)你看到色彩時，首先會勾引起對生活的聯(lián)想與情感作用。藍色來自天空和大海，它給人一種心胸開闊，文靜大方的情操。綠色是大自然的顏色，它能令人充滿青春活力。黃色飽含智慧與生命力，讓人顯得年輕有朝氣?？吹桨咨谷擞X得純潔可愛，而紫色卻有著神秘高雅的感覺，這些對于網(wǎng)頁設(shè)計而言特別重要。我們經(jīng)常說“第一印象最重要”，用戶在訪問網(wǎng)站時的第一印象實際上是來自整個網(wǎng)頁的色彩！

所以色彩具有一定的含義和感情上的象征作用，人類確實存在色彩聯(lián)想的共通性。在炎熱的夏天人們更容易接收藍色的“百事可樂”，而在較為冷的天氣喝紅色的“可口可樂”人是不是更多一點。在我們談到這種象征印象時，不能過于主觀、片面地看問題，人們對色彩的聯(lián)想是相對，不同的色彩組合在一起也會起到不同的效果。

3、合理搭配色彩

色彩是藝術(shù)表現(xiàn)的要素之一。在網(wǎng)頁設(shè)計中，設(shè)計師根據(jù)和諧、均衡和重點突出的原則，及色彩對人們心理的影響，合理地加以運用。將不同的色彩進行組合、搭配來構(gòu)成豐富的頁面。單純的顏色 并沒有實際的意義，和不同的顏色搭配，它所表現(xiàn)出來的效果也不同。比如綠色和金黃、淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛。藍色和白色混合，能體現(xiàn)柔順、淡雅、浪漫的氣氛。紅色和黃色、金色的搭配能渲染喜慶的氣氛。但也要考慮到網(wǎng)頁的適應(yīng)性，應(yīng)盡量使用網(wǎng)頁安全色。不同網(wǎng)站應(yīng)當(dāng)使用不同的色彩方案，與站點的主題相吻合的色彩方案決不僅僅可以讓網(wǎng)站 “更加好看”，更重要的是在訪問者心目中建立對這個網(wǎng)站的感性認識。所以，色彩方案的選擇決不能草率，是網(wǎng)站建設(shè)的第一步。

按照色彩方案中色彩使用方式的不同，可以將色彩方案劃分為幾種常用類型，單色方案、相似色方案、對比色方案等。

（1）單色方案，是指在網(wǎng)頁設(shè)計中使用一種基本顏色，通過調(diào)整這種基本顏色的灰度和亮度來得到更多的顏色。單色方案是一種比較穩(wěn)重的方案，或者說比較保守的方案。給人整潔、經(jīng)典的感覺，商業(yè)網(wǎng)站也比較適合使用此種顏色方案，使訪問者容易建立對網(wǎng)站的信任感。

（2）相似色方案，在色彩圓環(huán)上彼此相鄰的幾種顏色構(gòu)成的配色方案就是相似色方案。例如橙色、橙紅色以及橙黃色就可以組成一個相似色方案。通常，相似色配色方案可以給人非常協(xié)調(diào)的感覺，因此在網(wǎng)站設(shè)計中非常實用。典型的運用方法就是，用一種顏色作為頁面背景，而另外一種在顏色環(huán)中與其相鄰的顏色作為前景色。

（3）對比色方案，把一個顏色和它補色的左右邊的色彩配合起來，可以得到強烈的視覺效果。運用這種方式容易塑造活潑、運動的網(wǎng)頁效果，在設(shè)計時要注意主體色彩的運用，即以一種或兩種色彩為主，其他色彩為輔。

4、色彩構(gòu)成在網(wǎng)頁設(shè)計中的細節(jié)體現(xiàn)

-----中國移動網(wǎng)與MTV網(wǎng)之色彩比較

圖11．中國移動網(wǎng)（來自004km.cn）

圖12．MTV網(wǎng)（來自004km.cn）由兩幅圖比較可以看出，企業(yè)的不同性質(zhì)決定了網(wǎng)頁的用色，首先，中國移動是一家面向全國用戶的大型企業(yè)，他所服務(wù)的對象決定了網(wǎng)頁用色必須考慮到所有用戶的接受能力，必須穩(wěn)重大方，可以看出整個界面采用冷靜開闊的藍色調(diào)，但是頁面色彩卻不單調(diào)，當(dāng)用戶將鼠標(biāo)移動到導(dǎo)航欄上，藍色的橫線變成了明快的翠綠色，就這一點小小的細微動作卻增強了用戶的交互性。但整體而言，色彩還是比較單一，穩(wěn)重有余而活力不足，作為一家年輕的企業(yè)，應(yīng)該要有年輕人的活力。所以在大片的藍色中夾雜了鮮艷的橘紅色作為點綴，立刻整個頁面就會顯得比較活潑，再用漸變色豐富了色彩的層次。整體來看是一個比較成功的功能與美感并存的企業(yè)網(wǎng)站。

另外再來看看第二幅圖，感覺立即不一樣了，全黑的底與白色的文字形成視覺上的沖擊力，而頁面中間被等分成四塊，分別用了淡、淺、深三種灰色引起視覺上的分割。并且在色彩上明顯比第一幅圖豐富，有桔色、黃色、綠色、青綠色、紫色等等。這是一家以娛樂服務(wù)為主的網(wǎng)站，他所面向的用戶是以年輕人為主，符合潮流，走在時尚前沿。在用色上也大膽出位，全黑色的底，象征年輕人的叛逆與不羈，以及時尚感較強的紫色和青綠色的搭配更能吸引人的視線。

在細節(jié)上的設(shè)計與處理最能體現(xiàn)一個網(wǎng)站是否成功，可以看出來兩個網(wǎng)頁都是比較注重在這方面 的用色，總的主色調(diào)不變，以豐富多彩的小色塊點綴，起到畫龍點睛的作用。所以一幅比較成功的網(wǎng)頁在色彩的設(shè)計上也要獨具匠心，充分合理的利用細節(jié)，結(jié)合色彩的感情，才可以使作品具有更加深刻的藝術(shù)文化內(nèi)涵，才能夠讓網(wǎng)頁設(shè)計的個性創(chuàng)造和審美意識得到淋漓盡致的展現(xiàn)，設(shè)計出的網(wǎng)頁會更加富有生命力。

三、不同審美文化中的網(wǎng)頁設(shè)計

（一）文化背景對網(wǎng)頁設(shè)計的影響

美學(xué)(Aesthetics)，德文原義為“感性學(xué)”，是一門研究人類審美活動的學(xué)科?！皩彙闭撸匆?。通俗地說，就是人們對現(xiàn)實生活中各種美好現(xiàn)象的感受和欣賞，是人類最基本的精神文化活動，因而也最通俗、最具大眾化，在東西方都有著極為悠久的歷史。

21世紀是一個經(jīng)濟飛速發(fā)展的時代，是一個時時事事講求審美格調(diào)的時代，其實審美就是一個民族精神世界的流露。中國的審美觀是中國人的人格、修養(yǎng)、品行、文化、藝術(shù)的高度統(tǒng)一的綜合表現(xiàn)。具有時代的、民族的和階級的烙印。也就是說不同時代、不同民族和不同階級在文化藝術(shù)審美格調(diào)的追求上有著不盡相同的傾向和標(biāo)準(zhǔn)。且不說漢代人如何會在盧浮宮不屑一顧；古希臘人如何會在故宮拂袖而去，就是同為中國的唐漢兩代對美的欣賞都不一致。所以說，各國的地域環(huán)境、氣候條件、經(jīng)濟情況、人文思想不同所形成的審美觀也會不同，從網(wǎng)頁設(shè)計方面來看，各國都有自己的特色。

1、歐美風(fēng)格的網(wǎng)頁設(shè)計

歐美國家進行工業(yè)化比較早，經(jīng)濟相對比亞洲發(fā)達。美國早在二十年代就已經(jīng)是世界上工業(yè)化程度化最高的國家，特別是二戰(zhàn)后，更成為世界上的經(jīng)濟大國。隨后進入90年代，計算機業(yè)迅速發(fā)展，高度的工業(yè)機械化對其網(wǎng)頁設(shè)計也有一定影響，除注重實用性之外特別在細節(jié)元素上的處理更顯精致，網(wǎng)頁的藝術(shù)表現(xiàn)更是別具一格，其中肌理的表現(xiàn)形式獨具特色。另外，美國是一個移民國家，有著一個多元化的社會，其短暫的歷史，自由的人性，在網(wǎng)頁設(shè)計中表現(xiàn)出豐富的幽默感與創(chuàng)造性。圖13中所示：整個網(wǎng)頁由機械化式的線條相互組合構(gòu)成，剛強有力，將金屬的質(zhì)感充分的表現(xiàn)出來。

圖13．歐美網(wǎng)頁中肌理的表現(xiàn)形式（來自004km.cn/fr）

德國則不同，氣候干燥而寒冷，地形復(fù)雜多山的自然環(huán)境造就了嚴肅的德國人，因而，德國設(shè)計更加體現(xiàn)其科學(xué)性和邏輯性，德國網(wǎng)站設(shè)計也充分體現(xiàn)了 “實用”和“簡潔就是美”的觀點，如圖15所示。

圖15．簡單實用的德國網(wǎng)頁（來自004km.cn）20），對字體、字型及字號的選擇除要符合審美標(biāo)準(zhǔn) 外還要考慮到顯示屏的大小，及整個頁面結(jié)構(gòu)的把握，是借助框架（也叫骨骼）或是其他，以及如何更有效的在手機上使用多媒體技術(shù)，使得網(wǎng)頁藝術(shù)設(shè)計的表現(xiàn)力更加豐富。

在未來，網(wǎng)頁的顯示模式將會發(fā)生翻天覆地的變化，不論是在電腦、手機、手表抑或是電視上，我們看到的網(wǎng)頁對美的追求會更加徹底，平面構(gòu)成中的重復(fù)、變異、韻律、連續(xù)以及圖/底關(guān)系處理等，是任何一種設(shè)計的基本原理，盡管處于不同文化背景中的設(shè)計師在運用這些視覺構(gòu)成元素時都不經(jīng)相同，但是，所有的文化都涉及到這些視覺基本要素，都離不開形式美的法則。美與技術(shù)并存將會在未來完美體現(xiàn)，所以，在未來網(wǎng)頁設(shè)計將真正走進每個人的生活，設(shè)計將會不再不拘于形式，更加的靈活，看重的是網(wǎng)頁設(shè)計的靈魂。因而，平面構(gòu)成也就必然成為網(wǎng)頁設(shè)計的重要基礎(chǔ)。

五、主要參考資料

①．毛溪，2003．平面構(gòu)成(第一版)．上海：上海人民美術(shù)出版社，122． ②．李凇，2000．中外美術(shù)對談錄（第一版）．中國工人出版社，2 ③．姜偉，2004．網(wǎng)頁美工傳奇（第一版）．機械工業(yè)出版社，2 ④．徐希景、陳筍，2003．網(wǎng)頁平面構(gòu)成的創(chuàng)意手法分析．福建商業(yè)高等?？茖W(xué)校學(xué)報，47 ⑤．劉永翔、唐良瑞，2004．網(wǎng)頁設(shè)計中的視覺構(gòu)成分析．北京工商大學(xué)學(xué)報，58 ⑥．楊萍，2005．抽象形、空間、肌理——平面構(gòu)成在教學(xué)實踐中的思考．黔南民族師范學(xué)院學(xué)報，78 15

第四篇：商業(yè)網(wǎng)頁設(shè)計論文

摘要:商業(yè)網(wǎng)頁設(shè)計中具體的字體、圖形、圖象、標(biāo)志等等，常常表現(xiàn)為點線面、色彩、動靜、主次等視覺因素，這些因素的不同使用都會影響讀者的視覺習(xí)慣和心理變化。本文將分析商業(yè)網(wǎng)頁設(shè)計視覺因素的心理規(guī)律，揭示網(wǎng)頁設(shè)計如何通過視覺因素更有效、更合理的表現(xiàn)與傳達信息。

關(guān)鍵詞: 網(wǎng)頁設(shè)計 視覺心理因素 構(gòu)成要素 視覺流程

商業(yè)網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供產(chǎn)品和服務(wù)的一種方式,是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺，其網(wǎng)頁頁面由具體的文字（標(biāo)題、廣告語、單位名稱、Email地址等）、企業(yè)標(biāo)志、商標(biāo)、產(chǎn)品圖形、和信息菜單等內(nèi)容組成，這些內(nèi)容又常常表現(xiàn)為點線面、色彩、動靜、主次等視覺因素，這些因素的不同使用都會影響讀者的視覺習(xí)慣和心理變化。

本文將試析商業(yè)網(wǎng)頁設(shè)計視覺因素的心理規(guī)律，揭示商業(yè)網(wǎng)頁設(shè)計如何通過視覺心理因素更有效、更合理的表現(xiàn)與傳達信息。展現(xiàn)企業(yè)形象、介紹產(chǎn)品和服務(wù)、體現(xiàn)企業(yè)發(fā)展戰(zhàn)略。

一、商業(yè)網(wǎng)頁設(shè)計中點、線、面視覺心理因素的運用

點、線、面是商業(yè)網(wǎng)頁設(shè)計基本的視覺元素，是表現(xiàn)視覺形象的基本設(shè)計語言。從視覺角度看網(wǎng)頁設(shè)計主要是如何經(jīng)營好三者的關(guān)系，因為不管是任何視覺形象或者版式構(gòu)成，歸結(jié)到底，都可以歸納為點、線和面。

1.網(wǎng)頁設(shè)計造型要素中的點

商業(yè)網(wǎng)頁設(shè)計中的點是構(gòu)成網(wǎng)頁的最基本單位，是指頁面中具備點的視覺特點、體積較小的物象。相對于整體背景而言一個單獨的點是相比較而言的；是有大小、形狀和體積的。點的大小、形態(tài)、位置不同，所產(chǎn)生的視覺效果、心理作用也不同。一個網(wǎng)頁往往需要有數(shù)量不等，形狀各異的點來構(gòu)成，可以是具體產(chǎn)品、商品標(biāo)志等，也可以是感覺上的點。例如，天空中的飛鳥、沙灘上的腳印、花瓣上的蜜蜂等，在其周圍背景襯托下，都給人以“點”的視覺心理感受。

點在設(shè)計中即可以起一種穩(wěn)定造型的作用，亦可起到活潑生動、吸引視覺中心的作用，使用得當(dāng)，甚至可以畫龍點睛；點的形狀、方向、大小、位置、聚集與發(fā)散，還能夠給人帶來不同的心理感受。

(1)單點的應(yīng)用：點在人們的視覺中具有很強的吸引作用，如：點（商品）設(shè)計在網(wǎng)頁的上方或左右位置，則給人不穩(wěn)定感和相對的動感。

(2)多點的應(yīng)用：兩點（二商品）之間會產(chǎn)生心理連線的感覺，多點時則會出現(xiàn)不同排列，順序的虛擬的面或形體。

2.網(wǎng)頁設(shè)計造型要素中的線

點的延伸形成線。線在頁面中的作用在于表示方向、位置、長短、寬度、形狀、質(zhì)量和情緒。線是分割頁面的主要元素之一，是決定頁面現(xiàn)象的基本要素。商業(yè)網(wǎng)頁設(shè)計視覺因素中的線主要指文字的行線，商品圖形、圖象的輪廊線，各種裝飾線。線的形態(tài)主要有直線和曲線兩大類：

(1)直線給人一種緊張、銳利、簡潔、剛直感，從心理或生理感覺來看具有男性特點。直線又有：細直線，給人纖細、敏銳的心理感覺；粗直線，給人豪爽、拙樸、厚重的感覺；垂直線，給人一種挺拔、莊嚴感；水平直線則給人方向感和強烈的動感。

(2)曲線表現(xiàn)出一種動態(tài)，活潑，輕快的意味，顯示了女性美的特征，商業(yè)網(wǎng)頁設(shè)計中運用文字行、圖象輪廊線或裝飾線的造型，創(chuàng)造一種女性化的審美感。自由曲線是最好的情感抒發(fā)手段。打破了水平線組成的莊嚴和單調(diào)，給商業(yè)網(wǎng)頁增加了豐富、流暢、活潑的氣氛。水平線和自由曲線的組合運用，形成新穎的形式和不同情感的對比。

3.網(wǎng)頁設(shè)計造型要素中的面

線的推移形成面。面是無數(shù)點和線的組合。面具有一定的面積和質(zhì)量，占據(jù)空間的位置更多，因而相比點和線來說視覺沖擊力更大更強烈。面在網(wǎng)頁設(shè)計中通常指各種圖形、色塊的形狀設(shè)計，不同形狀的面具有自己鮮明的個性和情感特征，能給人不同的心理感受，如方形的面具有沉著，穩(wěn)重，厚實，堅強的男性特征；三角形、梯形面常給人一種穩(wěn)定、端正之感；但如果將它們倒過來設(shè)計，則給人一種輕、不穩(wěn)定的感覺。圓形充實、圓滿、活潑的感覺，比較適合表現(xiàn)兒童產(chǎn)品或者女性用品。菱形或不規(guī)則形體則給人一種活潑、輕快之感。

在商業(yè)網(wǎng)頁的視覺構(gòu)成中，點、線、面既是最基本的造型元素，又是最重要的表現(xiàn)手段。在確定商業(yè)網(wǎng)頁主體形象的位置、動態(tài)時，點線面將是需要最先考慮的因素。必須熟練掌握設(shè)計語言。要善于根據(jù)商業(yè)特性采用不同的組合去體現(xiàn)不同的情感訴求，達到推銷、銷售商品和服務(wù)的作用。只有合理的安排好點線面的互相關(guān)系，才能設(shè)計出具有最佳視覺效果的頁面，充分的表達出商業(yè)網(wǎng)頁最終的訴求！

二、商業(yè)網(wǎng)頁設(shè)計中色彩視覺心理因素的運用

商業(yè)網(wǎng)頁設(shè)計中色彩是確立網(wǎng)站風(fēng)格的靈魂。色彩能產(chǎn)生強烈的視覺效果，使頁面更加生動。色彩設(shè)計的好壞直接影響閱讀者的觀賞興趣與心理變化。因此，地位十分重要。商業(yè)網(wǎng)頁的色彩設(shè)計應(yīng)從以下幾個方面把握和利用其心理特征：

首先，整個頁面要確定一個主色調(diào)，其有利于體現(xiàn)網(wǎng)站主題。每一種色彩都具有它自身的性格，如：彩度高，明度高的色彩常給人一種華麗感，相反彩度低，低明度的色彩則給人一種樸實感。暖色系、高明度的色彩能給人一種面積大的前進感。冷色系、低明度的色彩則能給人一種面積小的后退感。每個人群對色彩的喜好也有所不同，如男性較喜歡冷色，女性則偏好暖色或高明度、高彩度的色彩，兒童喜好純色，討厭濁色，老人則偏好濁色，中年人或文化層次較高的人偏好冷灰色等。因此在設(shè)計中要考慮主要讀者群的背景和構(gòu)成以及如何與商品的屬性相呼應(yīng)。

其次，在主色調(diào)下的色調(diào)搭配。若頁面空間整體、色彩和諧統(tǒng)一，則給人一種幽雅、寧靜感；若以對比手法處理，圖形文字色彩明快突出于背景色，則頁面空間氛圍會顯得活躍而有生氣。但是，要注意不能有強烈的色彩對比，因為過于豐富的背景色彩會影響前景商品圖片和文字的取色，使文字溶于背景中，不易辨識。所以背景一般應(yīng)以單純?yōu)橐恕?/p>

最后，作為設(shè)計師在考慮網(wǎng)頁設(shè)計時，還應(yīng)考慮到時代流行性色和企業(yè)標(biāo)準(zhǔn)色的問題。所謂流行色，是指在一定范圍內(nèi)和時間內(nèi)，非常盛行并易為人們接受的某些式樣或顏色。而標(biāo)準(zhǔn)色的運用在網(wǎng)上擴大了品牌效應(yīng)，也是對公司整體形象的統(tǒng)一應(yīng)用，從而構(gòu)成了企業(yè)識別系統(tǒng)（CIS）的重要部分。

三、商業(yè)網(wǎng)頁設(shè)計中動、靜的視覺心理因素的運用

商業(yè)網(wǎng)頁設(shè)計構(gòu)成要素可分為兩種狀態(tài)：靜態(tài)與動態(tài)。靜態(tài)要素設(shè)計具體指靜止的商品圖形、文字、按紐等；動態(tài)要素，具體指動態(tài)按紐、按紐連接、網(wǎng)頁動畫和視頻等，它們是豐富、生動網(wǎng)頁、張顯個性、突出主題重要手段。

動靜以及不同的動靜組合都可以反映不同的心理與性格，如，動大體上給人活潑、生動的印象，但極慢的動常給人憂慮感；迅速或突然的動常給人焦慮、驚慌感。另外，靜也常給人寧靜、沉悶兩種感覺。

商業(yè)網(wǎng)頁設(shè)計中要注意處理好動靜的關(guān)系，要整體和諧統(tǒng)一，給人生動而不躁動或厭惡感。同時還要遵循動態(tài)性原則與交互性原則。

1.動態(tài)性原則，即要有四維空間或五維空間的運作觀念。一件網(wǎng)頁商品、圖片不僅是二維的平面或三維的視覺，也要有時間與空間的變換，情感與思維認識的演變等多維因素。

2.交互性原則，即界面設(shè)計強調(diào)交互過程。一方面是物的信息傳達，另一方面是人的接受與反饋，對任何物的信息都能動地認識與把握。

四、商業(yè)網(wǎng)頁設(shè)計中視覺流程心理因素的運用

商業(yè)網(wǎng)頁設(shè)計是通過視覺元素引起人注目而實現(xiàn)商品信息內(nèi)容的傳達，為了使網(wǎng)頁獲得最大的視覺傳達功能，使網(wǎng)頁真正成為可讀強性而且新穎的媒體，必須適應(yīng)人們視覺流程的心理和生理的特點。

視覺流程的形成是由人類的視覺特性所決定的。心理學(xué)家葛斯達認為：人們閱讀時，版面的上部比下部的注目價值高，左側(cè)比右側(cè)的注目價值高。因此，版面的左上側(cè)位置最為引人注目，因此，在網(wǎng)頁設(shè)計中一些突出的商品信息，如主標(biāo)題、每天更新的內(nèi)容等通常都放在這個位置。以便于一開始就吸引受眾的視線，誘導(dǎo)其由上到下，由左到右地移動。此位置也被稱作視覺的最佳視域。也就是最優(yōu)選的地方。當(dāng)然視覺流程是一種感覺而非確切的數(shù)學(xué)公式，只要符合人們認識過程的心理順序和思維發(fā)展的邏輯順序，就可以更為靈活地運用。設(shè)計者可以利用視線移動規(guī)律，誘導(dǎo)讀者的視線作左右流動、上下流動以及斜線的不穩(wěn)定流動，通過編排設(shè)計，人為地產(chǎn)生最佳視域，突出主要商品，以達到一定的視覺效果，傳遞商品信息。

商業(yè)網(wǎng)頁作為一種新的企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺，它的發(fā)展雖然沒有多長時間，卻兼容了傳統(tǒng)平面設(shè)計的特征，又具備其所沒有的優(yōu)勢，成為今后商品信息交流的一個非常有影響的途徑。其設(shè)計是一種綜合性的設(shè)計，它所涉及的范圍非常的廣泛，包括消費者心理學(xué)、視覺設(shè)計美學(xué)、人機工程、哲學(xué)等諸多方面，而本文中只從視覺心理因素的角度進行了一些闡述與分析，僅作拋磚引玉之用。

參考文獻:

[1]李彬彬:設(shè)計效果心理評價[M].北京:中國輕工出版社,2005.1

[2]趙殿澤:構(gòu)成藝術(shù)[M].沈陽:遼寧美術(shù)出版社，1994

[3]趙國志:色彩構(gòu)成[M].沈陽:遼寧美術(shù)出版社，1994

[4]張國良:傳播學(xué)原理[M].上海:復(fù)旦大學(xué)出版社，2000.1

第五篇：個人網(wǎng)頁設(shè)計(論文)

炎黃職業(yè)技術(shù)學(xué)院信息工程系

畢業(yè)設(shè)計（論文）

個人網(wǎng)頁設(shè)計

年 級: _ 2009級___ _ 學(xué) 號: _ 0******17 _ 姓 名: __ _****_____ 專 業(yè): 網(wǎng)絡(luò)數(shù)字媒體 _ 指導(dǎo)老師: __ ****__ __

二零一一年十二月 炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

摘 要

本論文將對個人網(wǎng)頁設(shè)計與制作的方法、工具等展開研究和探討。在介紹網(wǎng)頁設(shè)計與制作語言的基礎(chǔ)上，著重使用CSS樣式表作為工具語言進行網(wǎng)頁設(shè)計與制作的實際操作，分別對基于對象的JavaScript語言、用于編輯HTML語言的軟件進行了詳細的介紹。

本論文主要章節(jié)如下，炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

1、是一種腳本編寫語言

JavaScript是一種腳本語言，它采用小程序段的方式實現(xiàn)編程。像其它腳本語言一樣,JavaScript同樣已是一種解釋性語言,它提供了一個易的開發(fā)過程。

它的基本結(jié)構(gòu)形式與C、C++、VB、Delphi十分類似。但它不像這些語言一樣，需要先編譯，而是在程序運行過程中被逐行地解釋。它與HTML標(biāo)識結(jié)合在一起，從而方便用戶的使用操作。

2、基于對象的語言。

JavaScript是一種基于對象的語言，同時以可以看作一種面向?qū)ο蟮?。這意味著它能運用自己已經(jīng)創(chuàng)建的對象。因此，許多功能可以來自于腳本環(huán)境中對象的方法與腳本的相互作用。

3、簡單性

JavaScript的簡單性主要體現(xiàn)在：首先它是一種基于Java基本語句和控制流之上的簡單而緊湊的設(shè)計, 從而對于學(xué)習(xí)Java是一種非常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴格的數(shù)據(jù)類型。

4、安全性

JavaScript是一種安全性語言，它不允許訪問本地的硬盤，并不能將數(shù)據(jù)存入到服務(wù)器上，不允許對網(wǎng)絡(luò)文檔進行修改和刪除，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。

5、動態(tài)性的

JavaScript是動態(tài)的，它可以直接對用戶或客戶輸入做出響應(yīng)，無須經(jīng)過Web服務(wù)程序。它對用戶的反映響應(yīng)，是采用以事件驅(qū)動的方式進行的。所謂事件驅(qū)動，就是指在主頁(Home Page)中執(zhí)行了某種操作所產(chǎn)生的動作，就稱為“事件”(Event)。比如按下鼠標(biāo)、移動窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會引起相應(yīng)的事件響應(yīng)。

6、跨平臺性

JavaScript是依賴于瀏覽器本身，與操作環(huán)境無關(guān)，只要能運行瀏覽器的計算機，并支持JavaScript的瀏覽器就可正確執(zhí)行。從而實現(xiàn)了“編寫一次,走遍天下”的夢想。

實際上JavaScript最杰出之處在于可以用很小的程序做大量的事。無須有高性能的電腦，軟件僅需一個字處理軟件及一瀏覽器，無須WEB服務(wù)器通道，通過自己的電腦即可完成所有的事情。

總之，JavaScript 是一種新的描述語言，它可以被箝入到 HTML 的文件之中。JavaScript語言可以做到回應(yīng)使用者的需求事件(如：form的輸入)，而不用任何的網(wǎng)路來回傳輸資料，所以當(dāng)一位使用者輸入一項資料時，它不用經(jīng)過傳給伺服端(server)處理，再傳回來的過程，而直接可以被客戶端(client)的應(yīng)用程式所處理。

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

JavaScript 和 Java 很類似，但到底并不一樣！Java 是一種比 JavaScript 更復(fù)雜許多的程式語言，而 JavaScript 則是相當(dāng)容易了解的語言。JavaScript 創(chuàng)作者可以不那麼注重程式技巧，所以許多 Java 的特性在 Java Script 中并不支援。

2.3 CSS樣式表

級聯(lián)樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱為“風(fēng)格樣式表（Style Sheet）”，它是用來進行網(wǎng)頁風(fēng)格設(shè)計的。比如，如果想讓鏈接字未點擊時是藍色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線，這就是一種風(fēng)格。通過設(shè)立樣式表，可以統(tǒng)一地控制HMTL中各標(biāo)志的顯示屬性。級聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀。使用級聯(lián)樣式表，可以擴充精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果的能力。

CSS目前最新版本為CSS2,能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計語言。相對于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象盒模型的能力，并能夠進行初步交互設(shè)計，是目前基于文本展示的最優(yōu)秀的表現(xiàn)設(shè)計語言。

在網(wǎng)頁上使用樣式表有三種方法可以在站點網(wǎng)頁上使用樣式表：

將網(wǎng)頁鏈接到外部樣式表。

在網(wǎng)頁上創(chuàng)建嵌入的樣式表。

應(yīng)用內(nèi)嵌樣式到各個網(wǎng)頁元素。

當(dāng)要在站點上所有或部份的網(wǎng)頁上一致地應(yīng)用相同樣式時，可使用外部樣式表。在一個或多個外部樣式表中定義樣式，并將它們鏈接到所有網(wǎng)頁，便能確保所有網(wǎng)頁外觀的一致性。如果人們決定更改樣式，只需在外部樣式表 — 中作一次更改 — 而該更改會反映到所有與該樣式表相鏈接的網(wǎng)頁上。通常外部樣式表以.css 做為文件擴展名，例如 Mystyles.css。

當(dāng)人們只是要定義當(dāng)前網(wǎng)頁的樣式，可使用嵌入的樣式表。嵌入的樣式表是一種級聯(lián)樣式表，“嵌”在網(wǎng)頁的 標(biāo)記符內(nèi)。嵌入的樣式表中的樣式只能在同一網(wǎng)頁上使用。

使用內(nèi)嵌樣式以應(yīng)用級聯(lián)樣式表屬性到網(wǎng)頁元素上。

如果網(wǎng)頁鏈接到外部樣式表，為網(wǎng)頁所創(chuàng)建的內(nèi)嵌的或嵌入式樣式將擴充或覆蓋外部樣式表中的指定屬性。

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

圖2-2 隨筆

相冊效果圖2-3如下：

圖2-3 相冊

音樂效果圖2-4如下：

圖2-4 音樂

關(guān)于我效果圖2-5如下：

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

圖2-5 關(guān)于我

3.2 網(wǎng)站主題

本網(wǎng)站是一個簡單的個人網(wǎng)站設(shè)計，以動漫為主題，主要包括了本人的自我介紹、比較喜愛的動漫作品以及平時的娛樂等。

3.3 網(wǎng)站風(fēng)格

1.本網(wǎng)站主要體現(xiàn)了清新自然的風(fēng)格，以簡潔為主。2.網(wǎng)站的主色調(diào)為綠和白，充分襯托清新自然的風(fēng)格。

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

(1)執(zhí)行“插入”—“新建元件”命令，創(chuàng)建一個名稱為“拉伸的葉片”的影片剪輯元件。

(2)選擇矩形工具，設(shè)置填充顏色，在舞臺上繪制一個無描邊舉行，在屬性面板中設(shè)置寬和高。

(3)選擇矩形，將其轉(zhuǎn)換成“名稱”為“葉片”的圖形元件。(4)選擇

onmouseout=“makevisible(this,1)”

onmouseout=“makevisible(this,1)” 炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

2.輸入文字，制作超鏈接。

4.6 xiangce4.html頁面的制作

1.制作圖庫頁面。

(1)新建一個網(wǎng)頁文檔，建立圖庫頁面的基本布局。

(2)將光標(biāo)定位在頁面左側(cè)的 炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）“1”，單擊[確定]按鈕回到行為面板，將此行為事件改為“onclick”。

(2)用同樣的方法，給另外3張圖像添加同樣的行為，將 炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

致

謝

本論文歷時兩個多月，我系統(tǒng)綜合地將我所學(xué)的知識運用于畢業(yè)設(shè)計的全過程。在完成畢業(yè)設(shè)計中，首先我要感謝我的指導(dǎo)教師****老師。*老師耐心細致地指導(dǎo)我畢業(yè)設(shè)計，提出了很多精辟而富有建設(shè)性的建議。*老師認真負責(zé)的工作態(tài)度，嚴謹?shù)闹螌W(xué)態(tài)度都給我留下了深刻的印象，在學(xué)習(xí)上給予了我極大的關(guān)心和幫助，在此表示衷心感謝！

同時，感謝炎黃職業(yè)技術(shù)學(xué)院為我提供了一個良好的學(xué)習(xí)環(huán)境，感謝學(xué)院的領(lǐng)導(dǎo)和老師們！他們無微不至的關(guān)懷、精心的培養(yǎng)使我到了很多的知識，終生受益！

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

參考文獻

[1] 繆亮.Dreamweaver CS3 基礎(chǔ)與實訓(xùn)教程.電子工業(yè)出版社，2008年.[2] 李冬蕓.Flash動畫實例教程.電子工業(yè)出版社，2010年.[3] 繆亮，郭剛.Photoshop平面設(shè)計實用教程.清華大學(xué)出版者，2008年.