淺談網頁的設計

趙紅杰

摘要：筆者結合實踐經驗，從色彩運用、造型組合及優化三個方面對網頁的設計要點進行了總結分析，以供參考。

關鍵詞：網頁設計色彩造型優化

1、前言

網頁設計的認識上，許多人似乎仍停留在網頁制作的高度上。認為只要用好了網頁制作軟件，就能搞好網頁設計了。其實網頁設計是一個感性思考與理性分析相結合的復雜的過程，它的方向取決于設計的任務，它的實現依賴于網頁的制作。正所謂“功夫在詩外”，網頁設計中最重要的東西，并非在軟件的應用上，而是在我們對網頁設計的理解以及設計制作的水平上，在于我們自身的美感以及對頁面的把握上。

2、色彩的運用

色彩是一種奇怪的東西，它是美麗而豐富的，它能喚起人類的心靈感知。一般來說，紅色是火的顏色，熱情、奔放；也是血的顏色，可以象征生命。黃色是明度最高的顏色，顯得華麗、高貴、明快。綠色是大自然草木的顏色，意味著純自然和生長，象征安寧和平與安全，如綠色食品。紫色是高貴的象征，有莊重感。白色能給人以純潔與清白的感覺，表示和平與圣潔。

我們知道，顏色是光的折射產生的，紅、黃、藍是三原色，其它的色彩都可以用這三種色彩調和而成。換一種思路，我們可以用顏色的變化來表現光影效果，這無疑將使我們的作品更貼近現實。

色彩代表了不同的情感，有著不同的象征含義。這些象征含義是人們思想交流當中的一個復雜問題，它因人的年齡、地域、時代、民族、階層、經濟地區、工作能力、教育水平、風俗習慣、宗教信仰、生活環境、性別差異而有所不同。

單純的顏色并沒有實際的意義，和不同的顏色搭配，它所表現出來的效果也不同。比如綠色和金黃、淡白搭配，可以產生優雅，舒適的氣氛。藍色和白色混合，能體現柔順、淡雅、浪漫的氣氛。紅色和黃色、金色的搭配能渲染喜慶的氣氛。而金色和粟色的搭配則會給人帶來暖意。設計的任務不同，配色方案也隨之不同。考慮到網頁的適應性，應盡量使用網頁安全色。

3、造型的組合

在網頁設計中，我們主要通過視覺傳達來表現主題。在視覺傳達中，造型是很重要的一個元素。拋去是圖還是文字的問題，畫面上的所有元素可以統一作為畫面的基本構成要素點、線、面來進行處理。在一幅成功的作品里，是需要點、線、面的共同組合與搭配來構造整個頁面的。

通常我們可以使用的組合手法有秩序、比例、均衡、對稱、連續、間隔、重疊、反復、節奏、韻律、歸納、變異、特寫、反射等等，它們都有各自的特點。在設計中應根據具體情況，選擇最適合的表現手法，這樣有利于主題的表現。

通過點、線、面的組合，可以突出頁面上的重要元素，突出設計的主題，增強美感，讓觀者在感受美的過程中領會設計的主題，從而實現設計的任務。 造型的巧妙運用不僅能帶來極大的美感，而且能較好地突出企業形象，而且能將網頁上的各種元素有機的組織起來，它甚至還可以引導觀者的視線。

4、網頁的優化

在網頁設計中，網頁的優化是較為重要的一個環節。它的成功與否會影響頁面的瀏覽速度和頁面的適應性，影響觀者對網站的印象。

在資訊類網站中，文字是頁面中最大的構成元素，因此字體的優化顯得尤為重要。使用css樣式表指定文字的樣式是必要的，通常我們將字體指定為宋體，大小指定為12px，顏色要視背景色而定，原則上以能看清且與整個頁面搭配和諧為準。在白色的背景上，我們一般使用黑色，這樣不易產生視覺疲勞，能保證瀏覽者較長時間地瀏覽網頁。

圖片是網頁中的重要元素。圖片的優化可以在保證瀏覽質量的前提下將其size降至最低，這樣可以成倍地提高網頁的下載速度。利用Photoshop6或Fireworks4可以將圖片切成小塊，分別進行優化。輸出的格式可以為gif或jpeg，要視具體情況而定。一般我們把有較為復雜顏色變化的小塊優化為jpeg，而把那種只有單純色塊的卡通畫式的小塊優化為gif，這是由這兩種格式的特點決定的。

表格(table)是頁面中的重要元素,是頁面排版的主要手段。我們可以設定表格的寬度、高度、邊框、背景色、對齊方式等參數。很多時候，我們將表格的邊框設為0，以此來定位頁面中的元素，或者籍此確定頁面中各元素的相對位置。我們知道：瀏覽器在讀取網頁html原代碼時，是讀完整個table才將它顯示出來的。如果一個大表格中含有多個子表格，必須等大表格讀完，才能將子表格一起顯示出來。我們在訪問一些站點時，等待多時無結果，按"停止"按鈕卻一下顯示出頁面就是這個原因。因此，我們在設計頁面表格的時候，應該盡量避免將所有元素嵌套在一個表格里，而且表格嵌套層次盡量要少。在使用Dreamweaver制作網頁時，會自動在每一個td內添加一個空字符“”。如果單元格內沒有填充其它元素，這個空字符會保留，在指定td的寬度或高度后，可以在源代碼內將其刪去。

網頁的適應性是很重要的，在不同的系統上，不同的分辨率下，不同的瀏覽器上，我們將會看到不同的結果，因此設計時要統籌考慮。一般我們在800*600下制作網頁，最佳瀏覽效果也是在800*600分辨率下，在其它情況下只要保證基本一致，不出現較大問題即可。

參考文獻

[1]羅瑤.《淺析網頁界面設計中的色彩運用》.科學大眾（科學教育）,2011.

[2]梁毓玲.《淺談網頁界面設計的優化》.中國電子商務,2011.

[3]梁斌,柯華坤.《網頁布局技術比較與應用優化》.中國教育技術裝備,2009.

[4]曾漢霞.《網頁設計中的色彩運用藝術》.大家,2010.

[5]徐亞先.《試論網頁制作》.情報科學,2001.

[6]周琦.《關于網頁設計與制作技術的探討》.電腦知識與技術,2009.

[7]嚴晨楊,智坤.《網頁設計中的功能性與藝術性關系研究》.科技與出版,2011.