第一篇：扁平化設計在網頁上的運用優勢論文

一、界面元素設計

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

二、色彩

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

三、布局

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

四、字體

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

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

第二篇：網頁設計論文

網頁設計基礎課程論文

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

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

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

觸屏技術應用越來越廣泛，觸屏設備隨處可見。這意味著，你的導航設計不再只是鼠標導航，你必須要要考慮你的設計適合觸屏設備。6.深度判析

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

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

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

10.縮略圖設計（Thumbnail Design）

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

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

采用網站標準的好處:

對網站瀏覽者的好處：

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

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

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

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

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

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

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

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

4、改版方便，不需要變動頁面內容；

5、提供打印版本而不需要復制內容；

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

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

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

課程論文

系院:土木工程學院

專業:建筑工程 姓名:王奎

學號:105140340043 網頁設計基礎

第三篇：平面構成在網頁設計中的運用

平面構成在網頁設計中的運用

易 星

目前，中國互聯網的發展已經形成相當規模，據中國互聯網網絡信息中心（CNNIC）報告顯示，預計中國網民數量在未來5年后將要超過美國，互聯網已是繼報紙、廣播、電視等之后的第六大媒介。

隨著互聯網的發展，各類網站有如雨后春筍般。然而，有的站點日訪問量高達幾千萬人次，而有的站點訪問者寥寥無幾。究其原因，訪問量大的站點，除資源豐富外，網站的策劃和精美的外觀也是吸引訪問者的重要因素。所以將美的形式規律和平面構成的手法結合到網頁設計中，是當前網頁設計的重要理論依據。

一、當網頁設計遇上平面構成

（一）了解網頁設計

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

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

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

（二）了解平面構成

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

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

（三）何為網頁平面構成

平面設計在網頁設計中占有相當大的比重，而平面設計的重要理論基礎則是平面構成，所以說，平面構成也是網頁設計的重要理論依據和知識基礎。

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

平面構成是一種設計語言，已為當今社會各個藝術設計領域所應用，它以一個全新的造型觀念，給我們的網頁設計注入新鮮的血液。

二、為網頁設計注入新的血液

（一）人性化的網頁設計與策劃

“人們總以為設計有三維：美學、技術和經濟，然而更重要是第四維：人性。”------美國設計師普羅斯

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

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

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

（二）網頁平面構成手法

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

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

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

1、構成的基本元素點、線、面及其在網頁設計中的運用

在頁面構圖中凡是表現視覺圖形或文字，都可以簡化或趨近于點、線、面的視覺感受。網頁版面中的各種視覺元素正是以點、線、面的形式相互依存、相互作用，組合成各種視覺信息，形成千變萬化的視覺空間和感受。因此，只有協調處理好點、線、面之間的相互關系，才能設計出最佳視覺效果的網頁。

（1）點的運用

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

圖１．點的運用（來自www.tmdps.cn）

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

（五）網頁色彩構成

1、色彩的基礎知識

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

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

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

2、色彩心理

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

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

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

3、合理搭配色彩

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

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

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

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

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

4、色彩構成在網頁設計中的細節體現

-----中國移動網與MTV網之色彩比較

圖11．中國移動網（來自www.tmdps.cn）

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

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

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

三、不同審美文化中的網頁設計

（一）文化背景對網頁設計的影響

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

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

1、歐美風格的網頁設計

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

圖13．歐美網頁中肌理的表現形式（來自www.tmdps.cn/fr）

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

圖15．簡單實用的德國網頁（來自www.tmdps.cn）20），對字體、字型及字號的選擇除要符合審美標準 外還要考慮到顯示屏的大小，及整個頁面結構的把握，是借助框架（也叫骨骼）或是其他，以及如何更有效的在手機上使用多媒體技術，使得網頁藝術設計的表現力更加豐富。

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

五、主要參考資料

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

第四篇：商業網頁設計論文

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

關鍵詞: 網頁設計 視覺心理因素 構成要素 視覺流程

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

本文將試析商業網頁設計視覺因素的心理規律，揭示商業網頁設計如何通過視覺心理因素更有效、更合理的表現與傳達信息。展現企業形象、介紹產品和服務、體現企業發展戰略。

一、商業網頁設計中點、線、面視覺心理因素的運用

點、線、面是商業網頁設計基本的視覺元素，是表現視覺形象的基本設計語言。從視覺角度看網頁設計主要是如何經營好三者的關系，因為不管是任何視覺形象或者版式構成，歸結到底，都可以歸納為點、線和面。

1.網頁設計造型要素中的點

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

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

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

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

2.網頁設計造型要素中的線

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

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

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

3.網頁設計造型要素中的面

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

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

二、商業網頁設計中色彩視覺心理因素的運用

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

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

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

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

三、商業網頁設計中動、靜的視覺心理因素的運用

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

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

商業網頁設計中要注意處理好動靜的關系，要整體和諧統一，給人生動而不躁動或厭惡感。同時還要遵循動態性原則與交互性原則。

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

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

四、商業網頁設計中視覺流程心理因素的運用

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

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

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

參考文獻:

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

[2]趙殿澤:構成藝術[M].沈陽:遼寧美術出版社，1994

[3]趙國志:色彩構成[M].沈陽:遼寧美術出版社，1994

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

第五篇：個人網頁設計(論文)

炎黃職業技術學院信息工程系

畢業設計（論文）

個人網頁設計

年 級: _ 2009級___ _ 學 號: _ 0******17 _ 姓 名: __ _****_____ 專 業: 網絡數字媒體 _ 指導老師: __ ****__ __

二零一一年十二月 炎黃職業技術學院 信息工程系畢業設計（論文）

摘 要

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

本論文主要章節如下，炎黃職業技術學院 信息工程系畢業設計（論文）

炎黃職業技術學院 信息工程系畢業設計（論文）

炎黃職業技術學院 信息工程系畢業設計（論文）

1、是一種腳本編寫語言

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

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

2、基于對象的語言。

JavaScript是一種基于對象的語言，同時以可以看作一種面向對象的。這意味著它能運用自己已經創建的對象。因此，許多功能可以來自于腳本環境中對象的方法與腳本的相互作用。

3、簡單性

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

4、安全性

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

5、動態性的

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

6、跨平臺性

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

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

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

炎黃職業技術學院 信息工程系畢業設計（論文）

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

2.3 CSS樣式表

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

CSS目前最新版本為CSS2,能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對于傳統HTML的表現而言，CSS能夠對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象盒模型的能力，并能夠進行初步交互設計，是目前基于文本展示的最優秀的表現設計語言。

在網頁上使用樣式表有三種方法可以在站點網頁上使用樣式表：

將網頁鏈接到外部樣式表。

在網頁上創建嵌入的樣式表。

應用內嵌樣式到各個網頁元素。

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

當人們只是要定義當前網頁的樣式，可使用嵌入的樣式表。嵌入的樣式表是一種級聯樣式表，“嵌”在網頁的 標記符內。嵌入的樣式表中的樣式只能在同一網頁上使用。

使用內嵌樣式以應用級聯樣式表屬性到網頁元素上。

如果網頁鏈接到外部樣式表，為網頁所創建的內嵌的或嵌入式樣式將擴充或覆蓋外部樣式表中的指定屬性。

炎黃職業技術學院 信息工程系畢業設計（論文）

炎黃職業技術學院 信息工程系畢業設計（論文）

圖2-2 隨筆

相冊效果圖2-3如下：

圖2-3 相冊

音樂效果圖2-4如下：

圖2-4 音樂

關于我效果圖2-5如下：

炎黃職業技術學院 信息工程系畢業設計（論文）

圖2-5 關于我

3.2 網站主題

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

3.3 網站風格

1.本網站主要體現了清新自然的風格，以簡潔為主。2.網站的主色調為綠和白，充分襯托清新自然的風格。

炎黃職業技術學院 信息工程系畢業設計（論文）

炎黃職業技術學院 信息工程系畢業設計（論文）

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

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

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

onmouseout=“makevisible(this,1)”

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

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

4.6 xiangce4.html頁面的制作

1.制作圖庫頁面。

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

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

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

致

謝

本論文歷時兩個多月，我系統綜合地將我所學的知識運用于畢業設計的全過程。在完成畢業設計中，首先我要感謝我的指導教師****老師。*老師耐心細致地指導我畢業設計，提出了很多精辟而富有建設性的建議。*老師認真負責的工作態度，嚴謹的治學態度都給我留下了深刻的印象，在學習上給予了我極大的關心和幫助，在此表示衷心感謝！

同時，感謝炎黃職業技術學院為我提供了一個良好的學習環境，感謝學院的領導和老師們！他們無微不至的關懷、精心的培養使我到了很多的知識，終生受益！

炎黃職業技術學院 信息工程系畢業設計（論文）

參考文獻

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