網站設計的基礎

網站設計的基礎

1.了解客戶的需求

網頁設計是一個感性思考與理性分析相結合的復雜過程。它的方向取決于設

計的任務，它的實現依賴于網頁的制作。

網頁特點的設計是展現企業(yè)形象、介紹產品和服務、體現企業(yè)發(fā)展戰(zhàn)略的重

要途徑，因此必須明確設計站點的目的和用戶的需求，以消費者為中心，根據市

場的狀況、企業(yè)自身的情況等進行綜合分析，從而做出切實可行的設計計劃。

總體設計方案要主題明確。在目標明確的基礎上，完成網站的構思創(chuàng)意。對網站

的整體風格和特色做出定位，規(guī)劃網站的組織結構。

一件完美、完整的網站設計作品，是設計師與客戶不斷進行溝通而設計出來

的結果。

網站開始構思的時候需要充分的了解客戶的需求，要達到什么目的、效果。

因此前期的投入是很有必要的，以便準確、完善地滿足客戶預期的要求。

產品種類、特性以及所針對的人群的特點如年齡、性別等，這些都是設計師

們需要了解的方面。與此同時，經驗豐富的設計師們有必要再做一些適當的引導。

設計師們所面對的客戶群里，文化背景、性格類型等的差異體現了各種各樣的審

美情趣。有些客戶對于建立站點的目的并不是很明確，設計師就需要做一些推廣

建議。具體表現為：是建立信息門戶網站還是企業(yè)網站？或是前期作為企業(yè)網站

出現、后期逐漸發(fā)展演變?yōu)樾畔㈤T戶網站？以什么樣的內容服務形式出現？主要

針對的客戶群體是什么？在設計形式方面，有的客戶要求自己的企業(yè)網站具有信

息門戶網站形式的框架，有的客戶則希望自己的網站顏色單一，以上這些要求就

需要設計師們靜下心來，站在客戶的角度耐心解釋，共同探討，以達到網站最終

想要達到的目的和效果。

了解市場規(guī)律，具有豐富的營銷、策劃經驗，通曉互聯網，再加上高尚的職

業(yè)道德觀念，這些都是一個網頁設計師所應該必備的。

2.網站的項目規(guī)劃

一個成功的網頁設計作品是藝術與技術的結合和統(tǒng)一，以主題鮮明、形勢與

內容保持一致、把握整體風格為設計原則。藝術是設計手段，而不是最終目的。

規(guī)范的網站策劃大致具有如下幾個方面：

（1）網站的目標。

（2）網站的主題。

（3）網站的內容。

（4）:網站的風格。

（5）網站的標準。

網站的性質不同，設計要求也不同。例如：門戶網站，注意頁面的分割、信

息結構的合理、頁面與圖片的優(yōu)化、界面的親和等問題；企業(yè)網站重在突出企業(yè)

形象、產品熱點，要求設計樣式、圖片質量相對較高。

網站的主題要求小而精，有針對性，盡量向專業(yè)靠近；題材盡量要新穎，不

要隨處可見，這樣才能吸引用戶一看再看；網站名稱要有特色，方便記憶，要考

慮到為以后網站的形象和宣傳做推廣。

下面推出8條目前網站應該體現的內容，根據不同的需求和建站目的，內容

也會增加或減少。在建設網站之初，一定要進行細致的網站規(guī)劃，這樣才能達到

預期的效果。

1.建設網站前的市場分析

（1）相關行業(yè)的市場是怎樣的，市場有什么樣的特點，是否能夠在互聯網

上開展公司業(yè)務。

（2）市場主要競爭者分析，競爭對手上網情況及其網站規(guī)劃、功能作用。

（3）公司自身條件分析、公司概況、市場優(yōu)勢，可以利用網站提升那些競

爭力，建設網站的能力（費用、技術、人力等）。

2.建設網站的目的及功能定位

（1）要建立網站，是為了宣傳產品，進行電子商務，還是建立行業(yè)行網站。

（2）整合公司資源，確定網站功能，根據公司的需要和計劃，確定網站的

功能，是產品宣傳行、網上營銷型、客戶服務型或電子商務型。

（3）根據網站功能，確定網站應達到的目的作用，了解企業(yè)內部網的建設

情況和網站的可擴展性。

3.網站技術解決方案

根據網站的功能確定網站技術解決方案

（1）采用自建服務器還是租用虛擬主機

（2）選擇操作系統(tǒng)，用Unix、Linux還是Window2000/NT，分析投入成本、

功能、開發(fā)、穩(wěn)定性和安全性等。

（3）采用系統(tǒng)性的解決方案（如IBM、HP）等公司提供的企業(yè)上網方案、

電子商務解決方案，還是自己開發(fā)。

（4）相關程序開發(fā)，如網頁程序ASP、JSP、CGI、數據庫程序等。

4.網站內容規(guī)劃

（1）根據網站的目的和功能規(guī)劃網站內容，一般企業(yè)網站應包括：公司簡

介、產品介紹、服務內容、價格信息、聯系方式、網上訂單等基本內容。

（2）電子商務類網站要提供會員注冊、詳細的商品服務信息、信息搜索查

詢、訂單確認、付款、個人信息保密措施、相關幫助等。

（3）如果網站欄目比較多，網站內容是網站吸引瀏覽者最重要的因素，所

以網站內容的設計很重要。

5．網頁設計

（1）網頁美術設計一般要與企業(yè)整體形象保持一致，要符合CI規(guī)范。要注

意網頁色彩、圖片的應用及版面規(guī)劃，保持網頁的整體一致性。

（2）在新技術的采用上要考慮主要目標訪問群體的分布地域、年齡階層、

網絡速度、閱讀習慣等。

（3）制定網頁改版計劃，以便以后作調整。

6.網站維護

（1）服務器及相關軟硬件維護，對可能出現的問題進行評估，制定響應時

間。

（2）數據庫維護，有效的利用數據是網站維護的重要內容，因此數據庫的

維護要受到重視。

（3）內容的更新、調整等。

（4）制定相關網站維護的規(guī)定，將網站維護制度化、規(guī)范化。

7.網站測試

網站發(fā)布前要進行細致周密的測試，以保證正常瀏覽和使用。主要測試內容

有：

（1）服務器穩(wěn)定性、安全性。

（2）程序及數據庫測試。

（3）網頁兼容性測試，如瀏覽器、顯示器等。

（4）根據需要的其他測試。

8.網站發(fā)布與推廣

（1）網站測試后進行發(fā)布的公關、廣告活動。

（2）搜索引擎登記等。

3．網頁設計的框架

網頁設計發(fā)展的初期，設計師們發(fā)現無法完全保證自己設計內容能完全不變

的展現在網頁中。許多著名網站的制作重點都傾向于對可操作性、功能性的把握。

現在，網頁設計制作的技術已不斷地發(fā)展成熟，這種顧慮幾乎沒有了。為了把自

己的創(chuàng)作思維更好的還原展現出來，可以設想“網頁”為一張“白紙”，這樣在

創(chuàng)作構思的時候，就更容易釋放自己的靈感，任意揮灑自己的設計才思。

如果說網頁是網站構成的基本元素，那么網頁的框架結構無疑就是網頁的骨

骼。

框架的版面結構是為了能夠讓瀏覽者更清楚、便捷地理解網站所要傳達的信

息內容，由此所進行的巧妙、規(guī)律的排列方式。

網頁版面布局以導航欄位置為界，大致可分為：上下結構式、左右結構式、

上左右結構式、上左中右結構式、綜合結構式、無規(guī)則結構式。

上下結構式

上下結構式是一種上下框架結構式，通常上方為導航條，或者動態(tài)的企業(yè)形象、廣告區(qū)

域。下方為正文、內容部分。此類結構在內容較少的企業(yè)網站或者個人網站較常出現。有時

只在首頁使用，二級頁面另換相應結構。

左右結構式

左右結構式又稱二分欄式。清晰的分列兩旁的框架結構。一般左側為導航條，

右側是正文。

由于網站內容較少，因此多數網站都采用上下結構式和左右結構式為框架，

展示區(qū)域添加大的圖片作為公司形象、新產品的展示，以提升公司的整體形象。

上左右結構式

上左右結構式是大中型企業(yè)較喜歡的框架式。通常上方為主要的菜單導航

條，左側為點擊出現的細分欄目導航條，下方為較主要欄目及小廣告等，右側為

內容區(qū)域。

隨著網站內容的逐漸增多、框架結構的逐漸細分，上左右結構式也更多地

應用于跨類別的各類網站。

上左中右結構式

上左中右結構式又稱三分欄式，是大型企業(yè)、電子商務、政府網站、教育機

構較喜歡的框架式。同上左右框架式稍有區(qū)別的是中間部分為內容區(qū)域，右側為

網站較重要的內容導航區(qū)域，或是登陸、搜索區(qū)域、小廣告等。

綜合結構式

綜合結構式網站較復雜，特點是功能模塊多，信息分類詳細，因此根據需要

采用區(qū)域版面結構較合適。如有些著名網站，第一頁很可能采用的是上下結構式，

而 第二頁根據內容的需要改為上左右結構式，有可能根據區(qū)域的需要劃分為多

種框架結構。又有的在同一頁面或縱深頁面里，可以拆分出幾個不同的框架結構

類型，都是為合理配合信息內容的需要，有針對性地進行排版設計。較常見的是

信息儲量大的門戶網站，框架中的結構變化，使該網站風格有別于其他網站。

不規(guī)則結構式

不規(guī)則結構式有別于上面的框架結構式。相對來說，頁面的信息量少，通常一張形象、

廣告圖片下來，重在渲染這個網站的氣氛。類似封面類型，有點擊進入下頁的入口。無規(guī)則

框架式風格較隨意自由，凸出網站個性意圖，能給瀏覽者帶來強烈的視覺沖擊，以致于以產

品宣傳為目的的企業(yè)和個人網站的愛好者，都熱衷于此種框架式。

少見的結構式

通常使用這類結構式的網站有兩種情況，一是放置更多的信息欄目和內容的網站；二是

追求個性的企業(yè)、組織或者個人的網站

4.網頁設計的布局概念

網頁布局在多數情況下是在頂部放置重要的信息，如公司名稱、廣告條、標志及導航條，

或將導航條放置于左側右側是正文等，這樣的布局結構清晰、易于使用。當然也可根據網站

性質的需要，嘗試這些網頁布局的變化方式，如左右兩欄式布局，一半是正文，另一半是形

象的圖片、導航；或正文不等式兩欄布局，通過背景色區(qū)分，分別放置圖片和文字等。當然

在網站設計中要多多吸取一些優(yōu)秀網站的精髓。

頁面尺寸

網頁頁面尺寸與顯示器的大小及分辨率有關，目前有兩種常用的尺寸：一是

分辨率在800*600的情況下，頁面的顯示尺寸為778像素*435像素；二是分辨

率在1024*768的情況下，頁面的顯示尺寸為1003像素*600像素。以上的尺寸

主要是考慮到了滾動條及瀏覽器的工具欄，可以看出分辨率越高，頁面的顯示尺

寸就越大。

瀏覽器的工具欄影響著頁面的顯示尺寸。最好恢復默認的瀏覽器工具欄，這

樣與網頁最終設計的作品差別不會太大。

第一屏

所謂的第一屏，是指一個網站頁面在不拖動滾動條的情況下，在屏幕上能夠

看到的部分。一般來說，800*600的屏幕顯示模式下，在IE安裝后默認的狀態(tài)

內能看到的部分為778*435，通常考慮多數人的習慣，以這個大小為基準。在網

頁設計過程中，向下拖動頁面是惟一給給網頁增加內容的方法。頁面長度原則上

不超過三屏。這并不意味將整個頁面分割開，而孤立的進行每一屏的設計。圖像

和文字的延續(xù)性可以使瀏覽者看到完整統(tǒng)一的視覺感受，保持頁面風格的整體

感。除了著名經典的信息門戶網站外，通常企業(yè)網站都是用一屏左右。除非站點

內容的特殊能夠吸引人拖動到下一屏，否則除影響速度外還真是有點畫蛇添足

了。

但是有時第一屏可能會小于上面所說的435像素，基于這點，那種橫放的導航條要優(yōu)先

于縱向的導航欄考慮。原因很簡單：如果瀏覽者的第一屏很矮，橫向的仍能全部看到，而縱

向的就難說了，因為窗口一般是不會受瀏覽器設置影響的，而縱向的不確定性要大得多。

整體造型

造型就是創(chuàng)造出來的物體給人的整體形象。網頁的整體形象，應該是圖形與

文本的結合。通常網頁形狀的組合造型有：圓形、矩形、三角形、菱形，S形等

圓形代表圓滿柔和、團結安全等，時尚站點喜歡以圓形為頁面整體造型；矩形代表中

規(guī)中矩、平衡和諧的視覺感受，許多政府網頁及部分企業(yè)網頁采用以矩形為整體造型；三角

形代表力量、權威、牢固均衡等，較大型的商業(yè)站點常采用三角形為頁面的整體造型；菱形

代表平衡和諧、個性公平，企業(yè)站點常采用以菱形為頁面的整體造型；也有不少網站采用多

種形狀結合，以某個形狀的構圖為主，輔以其他形狀結合而成。

頁頭

在習慣術語中，頁頭又可稱之為頁眉，頁頭的作用是定義頁面的主題。一般站點的名

稱多數都是顯示在頁頭里，通常展示標志及其網站的標題、旗幟廣告。頁頭也是整個頁面設

計的重要部分。

文本

文本是整個網站信息內容的重要展示部分。在頁面中多是以行或塊出現，通常相對于

導航條區(qū)域，有自己的文字區(qū)域位置。在整個頁面視覺節(jié)奏上，形成疏密反差的對比美感。

頁腳

頁頭和頁腳能使整個網頁更完整。頁頭是在頁面頂部位置，放置站點主題，而頁腳放

置副導航菜單標題、制作者或者公司信息、版權信息。

圖片

所謂圖文并茂，相得益彰。文字和圖片具有一種相互補充的視覺關系，最理想的效果

是文字與圖片的密切配合，互為襯托，既能活躍頁面，又使主頁有豐富的內容。圖片和文本

是豐富網頁的兩大構成元素。圖片為點綴增加文本的可讀性、趣味性，文本為闡述信息內容。

多媒體

網站要吸引瀏覽者注意，頁面的內容可以用三維動畫、Flash等技術來表現，讓聲音、

動畫、視頻等其他媒體更多的出現在人們的視野里，豐富網頁多層次的視聽效果，更貼近生

活。由于網絡帶寬的客觀限制，在使用多媒體的形式表現網頁的內容時，應考慮客戶端的傳

輸速度。

5． 網頁設計的主要視覺元素

導航樣式

導航欄其實就是一組超鏈接。典型的導航欄有一些指向站點的主頁和主要網

頁的超鏈接，幫助訪問者快速的返回主頁和調用網站的工具。在每一網頁上設置

導航欄是十分必要的。導航欄是網頁站點超鏈接的主線。這種超鏈接使站點的結

構清晰、連接簡單、查找方便，導航欄可以是按鈕或者文本超鏈接，使訪問者可

以既快速又容易地轉向站點的主要網頁。導航欄對整個網站內容有提綱的作用。

站點的瀏覽導航必須要設計得簡潔、易用。常見的方法是整個網站網頁的頂

部或者左側放置一個菜單條。由于導航對于可用性和內容查找來說非常關鍵，因

此要盡可能標準化主導航。

導航的位置結構細分為左文右導航欄、左導航欄右文。此外，導航欄中可以自定義代

碼，有時載入會很慢，放在右邊會在文章載入之后載入，不會影響文章的閱讀。

網站標志

網站標志（logo）是一個站點的特色和內涵，其圖形的設計創(chuàng)意來自網站的

名稱和內容。一般會出現在站點的每一網頁上，是網站給人的第一印象。Logo

的作用很多，最重要的就是表達網站的理念、便于人們識別，被廣泛用于站點的

鏈接、宣傳等，類似企業(yè)的商標。

logo一般通過圖案、文字的組合，達到對被標識體的展示說明、溝通交流，

從而提升訪問者的瀏覽興趣，增強網站印象的目的。

網站logo的設計與其他標志圖案的設計原則是一樣的，根據站點的定位和發(fā)展方向突

出主題。視覺效果要強，容易識別，辨認和記憶，引人注目。

文字的排版

文字和圖片是網頁的兩大構成元素，文字排列的好壞直接影響網頁的視覺傳達效果。

網頁上的文字一般體現在以下幾個方面：網站或網頁標題、網頁正文、文字導航欄、

版權說明等相關信息、圖像中的文字、裝飾用的文字等。

通常一套網頁結構中最多出現3種文字。一種用作標題，一種用于導航按鈕和小圖標

和小圖標，另外一種則用作正文。

圖像

網頁中圖像的造型是網頁設計中最重要的視覺要素。從視覺規(guī)律上看，人們對圖像的

興趣遠遠大于對文字的興趣。在頁面的構圖中，應該加強對主題圖像的表現及其形式的表達，

注重圖像與背景、形體空間與視覺空間的處理。網頁主要內容形象應該成為畫面的主要圖像，

其他圖形設計元素作輔助作用。

圖像、圖表和插圖在頁面上起著重要的形象裝飾作用，豐富了版面的趣味性。

圖形也是傳達信息手段的重要手段之一。

背景

背景也很重要，好的頁面背景可以給予瀏覽者以心情的放松和吸引。所以網頁設計師

們要注意頁面背景的設計，背景設計的好壞，也可影響你的作品。

導航

導航是網頁必不可少的一部分。它有動態(tài)導航條和靜態(tài)導航條。動態(tài)導航條可以渲染頁

面的氣氛。

廣告banner

廣告在頁面中是商家都注重的方面。好的廣告可以增加商家的收益。