1.3 網站設計概述

互聯網的各種應用，都是基于網站進行的。而網站又是由各種網頁組成，必須通過網頁傳遞其信息。因此，用戶在設計和創建網頁之前，還需要先來了解以下網站的設計概述，包括網站的整體策劃、網頁的設計任務等內容。

1.3.1 網站整體策劃

網站的整體策劃是一個系統工程，是在建設網站之前進行的必要工作。

1. 市場調查

市場調查提供了網站策劃的依據。在市場分析過程中，需要先進行3個方面的調查，即用戶需求調查、競爭對手情況調查，以及企業自身情況的調查。

2. 市場分析

市場分析是將市場調查的結果轉換為數據，并根據數據對網站的功能進行定位的過程。

3. 制訂網站技術方案

在建設網站時，會有多種技術供用戶選擇，包括服務器的相關技術（NT Server/Linux）、數據庫技術（ACCESS/My Sql/SQL Server）、前臺技術（XHTML+CSS/Flash/AIR），以及后臺技術（ASP/ASP.Net/PHP/JSP）等。

4. 規劃網站內容

在制訂網站技術方案之后，即可整理收集的網站資源，并對資源進行分類整理、劃分欄目等。

網站的欄目劃分，標準應盡量符合大多數人理解的習慣。例如，一個典型的企業網站欄目，通常包括企業的簡介、新聞、產品，用戶的反饋，以及聯系方式等。產品欄目還可以再劃分子欄目。

5. 前臺設計

前臺設計包括所有面向用戶的平面設計工作，例如，網站的整體布局設計、風格設計、色彩搭配，以及UI設計等。

6. 后臺開發

后臺開發包括設計數據庫和數據表，以及規劃后臺程序所需要的功能范圍等。

7. 網站測試

在發布網站之前需要對網站進行的各種嚴密測試，包括前臺頁面的有效性、后臺程序的穩定性、數據庫的可靠性，以及整體網站各鏈接的有效性等。

8. 網站發布

在制訂網站的測試計劃后，即可制訂網站發布的計劃，包括選擇域名、網站數據存儲的方式等。

9. 網站推廣

除了網站的規劃和制作外，推廣網站也是一項重要的工作，例如，登記各種搜索引擎、發布各種廣告、公關活動等。

10. 網站維護

維護是一項長期的工作，包括對服務器的軟件、硬件維護，數據庫的維護，網站內容的更新等。多數網站還會定期地改版，保持用戶的新鮮感。

1.3.2 網頁設計任務

在設計網頁時，需要首先了解網頁設計的任務，以及網頁設計的最終目的。

網頁設計是藝術創造與技術開發的結合體。其任務是吸引用戶，為用戶創造良好的體驗，在此基礎上為網頁的所有者提供收益。任何網頁設計的行為，都是圍繞這一最終目的進行的。

在設計網頁時，可將網頁根據網頁的內容，即網頁為用戶提供的服務類型分為3類。并根據網頁的類型設計網頁的風格。

1. 資訊類網站

資訊類站點通常是比較大型的門戶網站。這類網站需要為用戶提供海量的信息，在用戶閱讀這些信息時尋找商機。

在設計這類站點時，需要在信息顯示與版面簡潔等方面找到平衡點，做到既以用戶閱讀信息的便捷性為核心，又要保持頁面的整齊和美觀，防止大量的信息造成用戶視覺疲勞。

在設計文本時，可著力對文本進行分色處理，將各種標題、導航、內容按照不同的顏色區分。同時要對信息合理地分類，幫助用戶以最快的速度找到需要的信息。

以美國最大的在線購物網站亞馬遜的首頁為例。其在設計中，使用了較為傳統的國字型布局。

其網站的3類導航使用了3種字體顏色，在同一板塊內的導航標題使用橙色粗體，而導航內容則使用普通的藍色字體。在刺激用戶感官的同時避免視覺疲勞。

在亞馬遜首頁中，每一條詳細信息都保證有一張預覽圖片，防止大段乏味的文字使用戶厭煩。

2. 藝術資訊類網站

藝術資訊類站點通常是中小型的網站，例如一些大型公司、高校、企業的網站等。互聯網中的大多數網站都屬于這一類型。

這類網站在設計上要求較高，既需要展示大量的信息，又需要突出公司、高校和企業的形象，還需要注重用戶的體驗。

設計這類網站時，尤其需要注意圖像與文字的平衡，背景圖像的選用，以及整體網站色調的搭配等。

在這類網站的首頁不應放置過多的信息。清晰有效的分類遠比鋪滿屏幕的產品資料更容易吸引客戶的注意力。

以著名的軟件和硬件生產商蘋果為例，其首頁設計上以追求簡潔為主，以簡明的導航條和大片的留白，給用戶較大的想象空間。

蘋果公司在網站設計上非常有心得，其擅長使用簡單的圓角矩形欄目和漸變的背景色使網站顯得非常大氣，對一些細節的把握非常到位。

3. 藝術資訊類網站

藝術類站點通常體現在一些小型的企業或工作室設計中。這類網站向用戶提供的信息內容較少，因此設計者可以將較多的精力放在網站的界面設計中。

上圖為俄羅斯設計師foxie的個人主頁，通過大幅的留白以及簡明的色彩，模擬了一個書架。并以書架上的書本和相框作為導航條。

其在設計中發布的信息并不多，因此整站以Flash制作而成，大量使用動畫技術，通過絢麗的色彩展示個性。

1.3.3 網頁設計實現

在了解了設計的目的后，即可著手進行設計。網頁設計是平面設計的一個分支，因此在設計網頁時，有一定的平面設計基礎可以幫助設計者更好更快地把握設計的精髓。

1. 設計結構圖

首先，應規劃網站中欄目的數量及內容，策劃網站需要發布哪些東西。

然后，應根據規劃的內容繪制網頁的結構草圖，這一部分既可以在紙上進行，也可以在計算機上通過畫圖板、inDesign，或者其他更專業的軟件進行。

結構草圖不需要太精美，只需要表現出網站的布局即可。（關于布局，請參考本章之前的內容。）

2. 設計界面

在紙上或電腦上繪制好網頁的結構圖之后，即可根據網站的基本風格，在計算機上使用Illistrator或CorelDraw等矢量圖形軟件，或Photoshop、Fireworks等位圖處理軟件，繪制網頁的Logo、按鈕和圖標。

Logo、按鈕、圖標等都是網頁界面設計的重要組成部分。設計這些內容時需要注意整體界面的風格一致性。包括從色調到圖形的應用、圓角矩形與普通矩形的分布等。

其中，設計Logo時，可使用一些抽象的幾何圖形進行旋轉、拼接，或將各種字母和文字進行抽象變化（見下圖）。例如，傾斜、切去直角、用線條切割、連接筆畫、反色等。

按鈕的設計較為復雜。常見的按鈕主要可分為圓角矩形、普通矩形、梯形、圓形，以及不規則圖形等。

在網頁中，水平方向導航菜單的按鈕設計比較隨意，可以使用各種形狀（見下圖）。而垂直方向的導航菜單則多使用矩形或圓角矩形，以使各按鈕貼得更加緊密，給用戶以協調的感覺。

圖標是界面中非常重要的組成部分，可以起到畫龍點睛的作用。在繪制圖標時，需要注意圖標必須和其代表的內容有明顯的聯系。

例如，多數網站的首頁圖標，都會繪制一棟房子，而多數網站的聯系方式圖標，都是電話、信紙等通信的方式，這樣的圖標會使用戶一眼看出其作用（見下圖）。

而如果使用過于抽象的圖標，則容易被用戶誤解，或影響用戶使用網站的功能。

3. 設計字體

字體是組成網頁的最主要元素之一。合理分配的字體可以使網站更加美觀，也更便于用戶閱讀。

在設計網頁的字體時，應先對網頁進行分類處理。

對于多數瀏覽器和操作系統而言，漢字是非常復雜的文字，多數中文字體都是無法在所有字號下正常清晰顯示的。

以宋體字為例，10px以下的宋體通常會被顯示為一個黑點（在手持設備上這點尤為突出）。而20px大小的宋體，則會出現明顯的鋸齒，筆畫粗細不勻。

即使是微軟設計的號稱最清晰的中文字體微軟雅黑，也無法在所有的分辨率及字號下清晰地顯示。

經過詳細的測試，中文字體在12px、14px、16px（最多不超過18px）的字號下，顯示得最為清晰美觀。

因此，多數網站都應使用12px大小的字體作為標準字體，而將14px的字體作為標題字體。在設計網頁時，盡量少用18px以上的字體（輸出為圖像的文本除外）。

在字體的選擇上，網站的文本是給用戶閱讀的。越是大量的文本，越不應該使用過于花哨的字體。

如針對的用戶主要以使用Windows XP系統和純平顯示器為主，則應使用宋體或新宋體等作為主要字體。如果用戶是以使用Vista系統和液晶顯示器為主，則應使用微軟雅黑字體，以獲得更佳的體驗。

4. 制作網頁概念圖

在設計完成網頁的各種界面元素后，即可根據這些界面元素，使用Photoshop或Fireworks等圖像處理軟件制作網頁的概念圖。

網頁概念圖的分辨率應照顧到用戶的顯示器分辨率。針對國內用戶的顯示器設置，大多數用戶使用的都是17in甚至更大的顯示器，分辨率大多為1024×768以上。去除瀏覽器的垂直滾動條后，頁面的寬度應為1003px。高度則盡量不應超過屏幕高度的5倍到10倍（即620×5=3100px到6200px之間）。

概念圖的作用主要包括兩個方面。一方面，設計者可以為用戶或網站的投資者在網頁制作之前先提供一份網頁的預覽，然后根據用戶或投資者的意見，對網頁的結構進行調整和改良。

另一方面，設計者可以根據概念圖制作切片網頁，然后再根據切片快速為網站布局，提高網頁制作的效率（參見下圖）。

5. 切片的優化

切片的優化是十分必要的。優化后的切片，可以減小用戶在訪問網頁時消耗的時間，同時提高網頁制作時的效率。

對于早期以調制解調器用戶為主的國內網絡而言，需要盡量避免大面積的圖像，防止這些圖像在未下載完成時網頁出現空白。通常的做法是通過切片工具將圖像切為多塊，實現分塊下載。

然而隨著網絡傳輸速度的發展，用戶用于下載各種網頁圖像的時間已經大為縮短，請求下載圖像的時間已超過了下載圖像本身的時間。下載1張100kB的圖像，消耗的時間要比下載10張10kB的圖像更少。

因此，多數網站都開始著手將各種小圖像合并為大的圖像，以減少用戶請求下載的時間，提高網頁的訪問速度。

6. 編寫網頁代碼

在Photoshop或Fireworks中設計完成網頁的概念圖，并制作切片網頁后，最終還是需要輸出為XHTML+CSS的代碼。

網頁技術的發展，使網頁的制作越來越像一個系統的軟件工程。從基礎的XHTML結構到CSS樣式表的編寫，再到JavaScript交互腳本的開發，是網頁制作的收尾工程。

7. 優化頁面

在設計完成網頁后，還需要對網頁進行優化，提高頁面訪問速度，以及頁面的適應性。

設計者應按照Web標準編寫各種網頁的代碼，并對代碼進行規范化測試。通過W3C的官方網站驗證代碼的準確性。

同時，還應根據當前主流的各種瀏覽器（IE9、IE10、IE11，以及FireFox、Safari、Opera、Chrome等）和各種分辨率的顯示設備測試兼容性，編寫CSS Hack和JavaScript檢測腳本，以保證網頁在各種瀏覽器中都可正常顯示。