陶穎

摘要：網(wǎng)站是現(xiàn)代社會各個部門或機構(gòu)對外展示的一個平臺和窗口。一個網(wǎng)站的優(yōu)劣直接影響到訪問者對網(wǎng)站所代表的機構(gòu)的第一印象。一個內(nèi)容豐富、設計合理、布局美觀貼切主題的網(wǎng)站往往可以給企業(yè)或部門帶來積極的作用和影響，所以制作一個引人注目的網(wǎng)站對于企業(yè)來說就顯得至關(guān)重要。該文就是從設計角度著手探討如何設計一個賞心悅目的網(wǎng)站。

關(guān)鍵詞：需求分析；設計；布局；色彩搭配

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2015）27-0217-03

Abstract： Website is a platform and window for all departments and agencies of the modern society. The quality of a web site directly affects the visitor's first impression of the agency's body. A content rich， reasonable design， layout， beautiful and appropriate theme of the site often can bring positive effect and influence to the enterprise or the Department， so make a noticeable website for the enterprise is very important. This article is from the design perspective on how to design a pleasing website.

Key words： demand analysis； design； layout； collocation color

隨著互聯(lián)網(wǎng)技術(shù)的迅猛發(fā)展和全方位的融合，越來越多的人得益于網(wǎng)絡的發(fā)展。每天都有無數(shù)的企業(yè)和機構(gòu)創(chuàng)建自己的門戶網(wǎng)站，通過訪問這些網(wǎng)站，每天都有無數(shù)的信息在網(wǎng)絡上傳播，人們在其中各得其所。而構(gòu)建網(wǎng)站的重要元素是網(wǎng)頁，內(nèi)容豐富多彩的網(wǎng)頁就是這些信息的載體。那么網(wǎng)站和網(wǎng)頁又是由什么元素組成的呢？

網(wǎng)站是由域名（俗稱網(wǎng)址），網(wǎng)站源程序和網(wǎng)站空間三部分構(gòu)成。其中域名它是類似于互聯(lián)網(wǎng)上的門牌號碼，是用于識別和定位互聯(lián)網(wǎng)上計算機的層次結(jié)構(gòu)的字符標識，是內(nèi)容豐富多彩的網(wǎng)頁集合。網(wǎng)頁是組成網(wǎng)站的基本單位，網(wǎng)頁中通過豐富的元素，例如文字、圖片、圖形、表格等信息結(jié)合一定的布局和排版來體現(xiàn)頁面的具體內(nèi)容，傳達信息。

網(wǎng)站的設計分為兩種情況，一類是靜態(tài)站點和靜態(tài)網(wǎng)頁的設計，主要是設計師通過如Dreamweaver等靜態(tài)網(wǎng)頁制作軟件來對網(wǎng)站進行編輯和布局。另一類是動態(tài)網(wǎng)站，當然基于該網(wǎng)站的網(wǎng)頁信息也是動態(tài)的，它會隨時隨地根據(jù)實際情況更新信息，方便人們第一時間掌握最新資訊。對于許多網(wǎng)站開發(fā)人員來說，不論是靜態(tài)的還是動態(tài)網(wǎng)站和網(wǎng)頁，設計過程才是其中最具挑戰(zhàn)性和決定性的。有的網(wǎng)站內(nèi)容龐雜，像新浪，網(wǎng)易這樣的門戶網(wǎng)站；有的網(wǎng)站簡簡單單只有幾個頁面，但不管是什么樣的網(wǎng)站，都是要經(jīng)過同樣的設計過程。任何人，無論他有沒有藝術(shù)天分，都可以設計出一個看起來不錯的網(wǎng)站，而所需要的僅僅是站點版面設計的基本原理和一些經(jīng)驗。所以，我們就從基礎(chǔ)開始探討從設計角度如何進行網(wǎng)站制作。

1 網(wǎng)站的前期衡量和考慮

一個優(yōu)秀的網(wǎng)站就像美酒和美女一樣讓見者流連忘返，而一個企業(yè)的門戶網(wǎng)站訪問量大也從側(cè)面反映了這個企業(yè)的實力。那么什么樣的網(wǎng)站才稱得上設計好呢？網(wǎng)站是傳遞信息的一個窗口，一個生動形象，內(nèi)容吸引人，功能性好的網(wǎng)站是設計人員為之奮斗的目標。

作為設計師在進行網(wǎng)站制作過程中，需要先考慮三個方面：首先要保證頁面所體現(xiàn)的內(nèi)容和設計能吸引用戶，當然這個過程需要注意美學、色彩學和可用性相結(jié)合。其次設計出的網(wǎng)站用戶在訪問期間能通過直觀的導航貫穿整個網(wǎng)站，不僅可以改變鼠標懸停的外觀，還要清楚的指明將要瀏覽網(wǎng)頁的鏈接，要讓訪問者的時間都花在刀刃上，而不是浪費在查找定位中，這是保證不流失訪問者至關(guān)重要的一個方面。最后就是網(wǎng)站上所有的網(wǎng)頁要讓用戶感覺同屬于一個網(wǎng)站，即網(wǎng)站的頁面是同一風格或主題，跳躍性不宜太大，頁面的內(nèi)容和信息雖然各不相同，但標識和導航應該要保持一致性，還可以考慮使用色塊系列來幫助統(tǒng)一網(wǎng)頁風格。一個優(yōu)秀的網(wǎng)站設計體現(xiàn)在能不能處理好各個元素之間的關(guān)聯(lián)和平衡。如果設計網(wǎng)站時首先能從這三個方面考慮和全篇布局，一定可以收到不錯的效果。

2 網(wǎng)站的設計制作過程

2.1網(wǎng)站供需雙方的需求分析

建設一個網(wǎng)站不是盲目的，不是把別人的網(wǎng)站更改一下背景顏色，換掉幾張圖片就是建設網(wǎng)站。首先應該清楚知道需要做網(wǎng)站的公司是從事什么行業(yè)，然后就要考慮網(wǎng)站的內(nèi)容，包括網(wǎng)站功能和網(wǎng)站建設的委托方需要通過網(wǎng)站達到什么目的，也就是確定網(wǎng)站的目標。網(wǎng)站的整個設計都應該圍繞這些方面來展開需求分析。接下來選擇網(wǎng)站目標的用戶，就是確定網(wǎng)站是面向什么用戶群體，這個群體有什么特點和喜好，所做的網(wǎng)站內(nèi)容希望能提供什么信息，涉及哪些方面，資料素材是否已經(jīng)備齊，有沒有需要自己準備的素材，如果有，需要通過哪些工具來完成，圖片是否需要圖像處理工具來加工，為了保證瀏覽的效率，對放置在網(wǎng)頁中的圖片有什么具體的要求。整個網(wǎng)站的功能需要劃分為幾個方面，這些方面需要規(guī)劃多少個頁面來實現(xiàn)。如果有競爭對手，他們的網(wǎng)站反饋情況如何。作為一名合格的設計師，不僅不可避免專業(yè)問題，還需要清楚一些頁面效果中的問題，比如什么色彩能反映主題等。這些問題就是我們在正式制作網(wǎng)站之前需要先調(diào)查清楚的，只有先進行全面的需求分析后，才能設計出一個網(wǎng)頁的模板，才能發(fā)揮創(chuàng)意、想法、創(chuàng)新繼續(xù)下一步的工作。

對網(wǎng)站的需求雙方分析和資料都收集齊全后，就需要對網(wǎng)站中的頁面進行制作工具地選擇了，工具的選擇也是網(wǎng)站需求分析的一部分。網(wǎng)頁中的圖像設計和處理工具可以選擇Photoshop或Fireworks，一個側(cè)重處理顏色豐富的位圖，一個傾向處理適合網(wǎng)頁瀏覽的背景透明且文件小的圖片，兩者兼而用之，效果會更好。網(wǎng)站中的動畫制作工具可以使用Flash，例如網(wǎng)站的banner、按鈕、小動畫都可以通過該軟件來制作，甚至整個網(wǎng)站的首頁頁面也可以用Flash制作的動畫來代替。這些用Flash制作出的動畫不僅文件小、美觀，可以為網(wǎng)頁增色不少，也更容易吸引瀏覽者的眼球。網(wǎng)頁頁面排版工具首推Dreamweaver，通過前面兩類工具制作出的網(wǎng)頁圖片并不是真正的網(wǎng)頁，真正的網(wǎng)站頁面是需要用網(wǎng)頁頁面排版軟件來布局和排版的，根據(jù)需要還可以利用軟件添加各種網(wǎng)頁特效，使網(wǎng)站給瀏覽者一種人性化的體驗，更好地吸引更多的瀏覽者。

最后就是其他方面的需求準備，設置動態(tài)網(wǎng)頁平臺IIS服務器，創(chuàng)建網(wǎng)站資料的數(shù)據(jù)庫，網(wǎng)站域名和空間的申請或購買等工作。人的審美觀和時代的潮流趨勢會隨著時間的發(fā)展而改變，只有始終滿足客戶和用戶雙方的需求才是網(wǎng)站設計持續(xù)立于不敗之地的最佳設計理念。

2.2網(wǎng)站的整體設計與制作

網(wǎng)站的整體實現(xiàn)是一個系統(tǒng)工程，根據(jù)前面的需求分析，確定了適用人群和網(wǎng)站的主題風格及涉及工具就可以按照以下幾個步驟來制作和實現(xiàn)：

2.2.1主頁面的設計制作

建立本地站點并且搭建動態(tài)網(wǎng)頁平臺IIS后，先構(gòu)架主頁面。主頁面是網(wǎng)站的首頁，訪問一個網(wǎng)站，服務器反饋過來的第一頁面就是主頁面，其他的頁面都可以通過主頁面當中的導航或鏈接轉(zhuǎn)到，主頁面的設計就尤為重要。

首先我們挑選適合我們主題風格的頁面布局模式：

1） 左欄導航，標準通用的導航方式。

2） 右欄導航，更易于閱讀的導航方式。

3） 三欄導航，適用于有大量導航，簡短內(nèi)容，大量廣告的頁面。

其次剖析頁面需要設置的內(nèi)容：

1） Logo圖標：網(wǎng)站的重要識別特征。

2） 導航條放置的位置大多是頂部或折頁的上部。

3） 內(nèi)容：主要內(nèi)容應該放在頁面視覺中心，吸引用戶注意。

4） 注腳：出現(xiàn)在頁面底部，主要包括版權(quán)，聯(lián)系方式，法律信息和網(wǎng)站主要部分的鏈接等。

5） 留白：根據(jù)頁面實際情況而定，避免設計擁擠使頁面平衡統(tǒng)一。

2.2.2頁面布局技術(shù)

在整體框架和主頁面完成后，可以考慮設計制作其他頁面的模板。在技術(shù)上實現(xiàn)每個頁面的具體布局，我們常用兩種技術(shù)。一種是利用table表格布局，這種方式比較簡單，容易上手，而且直觀，但在不同分辨率的顯示器下時容易變形，表格間隔容易出現(xiàn)背景色，而且一個頁面中會出現(xiàn)多次表格嵌套，這樣使得結(jié)構(gòu)比較混亂，產(chǎn)生了大量的冗余代碼。另一種方法就是利用目前比較流行的Div+CSS來布局和美化頁面，使用CSS可以簡化網(wǎng)頁的格式代碼，減少了需要上傳的代碼，減少了重復工作，提高了加載的效率就加快了頁面的訪問速度。通過建立CSS文件對整個頁面甚至整個網(wǎng)站進行統(tǒng)一美化，使美觀和效率大大提高。

2.2.3頁面外觀設計

1） 色彩的搭配

選擇顏色絕不是一件簡單的事情，需要考慮美學、一致性、可用性和適用性。而且還要考慮到大多數(shù)顯示器可以支持的分辨率。網(wǎng)頁設計人員需要了解色彩心理學，知道在什么場合運用什么顏色恰如其分。我們可以考慮應用三種常用的色彩搭配方法：單色搭配、相似色搭配、差異補色搭配。運用顏色的目的只有一個就是深深吸引訪問者的眼球。在運用顏色搭配頁面中，也要注意局部顏色的變化，使整個頁面設計風格既統(tǒng)一化又具有個性化。當然設計時還需要了解不同顏色給人的感官帶來的感覺，融合色彩的色溫和明暗程度，飽和度等因素，就能找到合適的顏色搭配，從而建立一個基于該網(wǎng)站頁面制作的配色板，這樣就可以節(jié)約大量的色彩搭配時間。

例如：搭建一個糕點店網(wǎng)站，可以選用橙色、葡萄酒色、栗色等強效果顏色一起搭配使用，這些相似色的使用和這些顏色反射出的顏色心理暗示，可以展示出食品的美味，可以引起瀏覽者的食欲，自然就可以吸引瀏覽者購買一飽口福。

2） 頁面的排版與修飾

隨著互聯(lián)網(wǎng)同人們生活結(jié)合的越來越密切，網(wǎng)頁的組成元素也越來越豐富多彩的，有文本、圖片、超級鏈接、動畫（分為gif格式的和flash格式的）、表單和音頻、視頻等。進行網(wǎng)頁設計是為了交流，排版是一個重要步驟，他不是簡單的敲幾下鍵盤，移動幾下位置，而是兼顧藝術(shù)性的整合頁面元素。在實現(xiàn)過程中我們要考慮網(wǎng)頁字體的選擇和使用，選擇合適字體；文字空間距離的設置，調(diào)整文字間距；正文如何排版得體；是否需要使用特殊文字，例如一些有形特征的字體；同時還要注意對圖像進行創(chuàng)意修改，調(diào)整圖片的分辨率和格式，使之更好的適用網(wǎng)絡環(huán)境；對邊框或邊界效果處理等方面。這些方面的合理應用都能使頁面美觀大大提升。

3） 頁面的特效

可以在適當?shù)牡胤竭\用一些恰當?shù)捻撁嫣匦Вㄟ^添加特效代碼可以給頁面增色不少。但不是特效用得越多越好，一個頁面最多運用一個網(wǎng)頁特效，否則就會顯得頁面特效很雜亂，效果反而適得其反。

2.2.4注意事項

從設計一個網(wǎng)站到實現(xiàn)一個網(wǎng)站的整個過程中，作為一名網(wǎng)頁設計人員還應該注意以下幾個方面。首先要考慮下載速度，所以避免使用過大的圖像，避免長文本頁面，盡量少使用Flash插件；這些都容易造成下載緩慢，用戶等待過長，造成瀏覽者的流失。其次網(wǎng)站要不斷升級更新，不僅要時時更新內(nèi)容，還要注意在技術(shù)上、功能上、流行趨勢上的與時俱進，總而言之就是要全面的滿足用戶的需求。最后最好不要使用卷滾條，少用框架，避免使用炫耀的技巧，避免視覺的花哨；這些東西只會增加用戶查看的繁瑣，造成用戶心理的厭煩情緒。所以真正要做好一個網(wǎng)站不僅要會設計，會制作，還要根據(jù)反饋善反思，善于交流和總結(jié)，這樣的設計才是永恒的。

3 結(jié)束語

如今全球信息技術(shù)和互聯(lián)網(wǎng)技術(shù)的高速發(fā)展，使網(wǎng)站設計同其他諸如動畫設計，程序開發(fā)，電子商務等一樣應運而生，風生水起。網(wǎng)站如同一個門面，不論是個人主頁、公司企業(yè)、政府部門還是國際組織，無不將網(wǎng)站作為自己向外界展示形象，傳達信息的窗口。網(wǎng)站的設計與制作是一個系統(tǒng)工程，不能一蹴而就，要有充足的準備、按照條理清晰的思路、精心的布局、巧妙的構(gòu)思和特別的創(chuàng)意一步步實施才能達到設計的目的，體現(xiàn)開發(fā)的價值。希望通過上述從設計角度分析如何制作網(wǎng)站的過程能對網(wǎng)站設計者和愛好者起到作用和幫助。

參考文獻：

[1] Jason beaird.完美網(wǎng)頁設計藝術(shù)[M]. 熊平， 宓媛珊，譯. 北京： 人民郵電出版社， 2008.

[2] 何海霞， 陶琳.Dreamweaver cs3完美網(wǎng)頁設計[M].北京： 中國電力出版社， 2008.