網頁設計是一種需要多方面專業相互配合的領域，在設計、製作上，都需要有多方的考量。以下以常見的幾個面向來討論網頁設計原則。本篇的設計主要著眼於規劃，規畫就是理想的實踐，因此內文難免有許多看似刁難的地方，就請多多包涵。

規劃

規劃是網站整體設計前期的作業，在規劃中，最重要的工作就是確認網站的方向與架構。以下是各個步驟與重要的注意事項。

1. 認真思考

   所有網站在構思前，請認真思考是否真的有必要製作網頁。網站需要持續的金錢來維持，其中包含了軟體方面的人力更新更新、維護，以及硬體條件的機器、網路正常運作的維持。這些費用少則4000（使用虛擬主機，加上網址的年租費），多則上萬。

2. 確立方向

   確定要建立網站後，要開始規劃網站的方向，如此一來才能讓接下來的工作有個依據。首先必須明確條列網站會提供哪方面的服務，常見的如

   • 資訊服務 : 也就是一般最常見的網頁瀏覽。
   • 資料服務 : 提供一個存取資料的方式，如搜尋。
   • 線上下單 : 提供線上訂購的服務，也就是線上購物。
   • 交流服務 : 提供一個互動的平台，通常是留言板或討論區。

   這些項目都不是固定的，要看看網站的主題是什麼。以YouTube為例，他的方向就是「影片交換分享」。

3. 分析客群

   所有的服務都會有目標的客群，這些目標確立了之後，後續的配置才會有更好的依據。客群的分類有許多種，常見的如基本的「性別」、「年齡／年代」，進階的如「習慣」、「喜好」等。客群將會大大影響之後的規劃方向，舉例來說

   • 兒童 : 網站必須鮮豔活潑，用詞淺顯易懂。
   • 廠商 : 所有的資訊必須清楚，產品編號更需醒目。
   • 阿宅 : 最好備齊各種先進功能，如RSS、digg、好吃書籤等等。
   • 有點年紀 : 最好能夠閃來閃去，動畫越俗氣越好 (這項很弔詭，不管什麼背景的都吃這套)

4. 決定伺服器配置

   伺服器配置將會影響到後續的花費。常見的狀況如下 :

   • 簡單ADSL : 伺服器接上一般ADSL，每月 = 網路1000上下 + 電費 250上下
   • 進階ADSL : 伺服器接上企業用ADSL，每月 = 網路2500上下 + 電費 250上下
   • 虛擬主機 : 每月 250 – 數千不等，要看等級
   • 託管 : 要與電信公司洽談

   一般網站會使用虛擬主機，除了便宜之外，許多過程也由虛擬主機廠商代辦。對於大多數需要架設網站的狀況，虛擬主機是最經濟實惠的方式。

5. 構思目錄項目

   這裡所說的是內容的結構，而非檔案的結構。此時必須先列舉出所有將會出現的內容，並將所有的內容分入數個適當的目錄項目之中。一般而言，若是你的網站目錄項目少於3個，那麼你可以重新思考你建立網站的必要性。目錄項目的配置並沒有聖經供參考，但必須注意幾個原則 :

   • 語意清晰且適當 : 請勿使用「飛鴿傳書」來代表「聯絡我們」
   • 請勿超過3階層 : 若真有3階層，則考慮內容重寫
   • 盡可能使用清晰的列表 : 尤其是產品類頁面

6. 構思內容樣板

   網站的內容一定都會是有固定結構的。為了在系統規劃時能夠妥善規劃資料庫系統，以及後續維護進行時可以更輕鬆，必須在規劃時就明訂出結構。以商品為例，我們可以這樣看 :

   • 商品圖 : 比例為 4:3；3種尺寸，(全圖)800×600、(頁面)320×240、(目錄)120×90
   • 商品規格 : 名稱(中英)、尺寸(公分、長寬高)、重量、顏色等
   • 商品介紹 : HTML圖文

7. 設計版面

   根據上述條件開始設計版面。請接續閱讀設計篇。

8. 規劃系統

   根據上述條件開始規劃系統，此過程可與「設計版面」同時進行。此部分將另有文章說明。

經驗

規劃時，無可避免地會牽涉到其他領域的專業。這時候請一定要仔細了解該專業的內容，才能擬出適當地呈現方式。

在討論的過程中，一定會有些不太會的人喜歡裝會，像是公司裡的高階主管或是老闆，這時候必須要以專業向他解釋。解釋之後，可能會出現兩種狀況 :

• 上級很有誠意地跟你討論這個問題
  那麼這個老闆可能很有心想要做好這個網站。
• 上級 :「根據我們的經驗，這樣做比較好」
  若你無法判斷這句的真偽，請立刻去研究此議題。通常會這麼說的上級，有大部分都是根本不懂，或是他對於網站根本就是可有可無，可以想見將來此網站將會越來越差。從這點慢慢觀察，基本上這位上級有很高的機率對所有的事情都是這種態度。

網頁設計是一種需要多方面專業相互配合的領域，在設計、製作上，都需要有多方的考量。以下以常見的幾個面向來討論網頁設計原則。本篇的設計主要著眼於視覺面，因此並不會提及太多規畫方面的訊息。

視覺

網頁最重要的就是在視覺方面的設計，所有的網頁最終都是必須要被看到的。視覺方面，除了要有內容外，整體的編排更是內容呈現的成敗點。因此我們可以歸納出以下幾個重點 :

1. 層次

   網站名稱、主標題、副標題、內文、引文等等，必須要有「該有的樣子」。而「該有的樣子」則是由你來定義，通常網站名稱會跟Logo合在一起，主標題會比副標題大，引文可能會有框並且以斜體表示之類的。

2. 區塊

   頁首、頁尾、目錄、內文、廣告，必須要分明。但分明並非全部都以尖銳的線條分割，在許多地方若能以暗示性的方式（如明暗差別較小的色塊當背景、兩個區塊字體顏色大小不同），在視覺上將會大大加分。像是這個網站雖然很亂，但是各區塊並不會因此混在一起。

3. 識別

   認真經營的網站，通常會具備一個識別系統。上面通常會放上一個識別符號，可能是一個圖案（Logo），也可能是一組經過認真設計過不同於平常的文字組。像這個網站就是一個非常糟糕的例子，你在看完他後幾乎不會留下任何印象。除了識別符號外，其他內部的元件也必須要依循著類似的風格，標題可能帶有底線，區塊可能帶有圓角，圖片可能會有留白加上框線，像是這個網站。

4. 風格

   這項與「識別」相當類似，但主要著眼於細部項目的配置。網站若是走學術風，則顏色方面就必須以較沉穩的灰冷色系為主，且避免使用太活潑的字體，編排方面也要注意所有項目的對其；若是走公務員風，則要避免黑白或是彩度太低的顏色，且字體最好能用毛筆字體就用毛筆字體，內容能放首頁就放首頁，鏈結越多越好；若是走科技風，則最好標題全部換成英文，設計時要加上許多像是科技的線條或是 pixel，且字體最好用越看不懂的越好。以上當然是有點誇張，但說明了各種領域都有些既定的形象，若沒有把握做到更好，就乖乖遵守吧！

5. 編排

   如同文字編排，網頁的文字編排也是相同的方法。編排的內容最重要的就是字體大小跟行距。字體方面，以清晰為前提之下，最小的中文字在11 pixel，最適合閱讀的是12、13、15、18、20 pixel 這幾個大小^註1。行距則是一般製作者最容易忽略的地方，因為必須透過CSS控制。一般較適合閱讀的行距大約是字體的125%到200%，但也有特殊的「設計者」喜歡用低於這個尺寸的行距^註2。

註解

註1

以OSX系統而言，所有尺寸的字體因為柔邊的關係，都一樣不清楚。XWindow系統則會有柔邊，所以也是一樣都不清楚。而目前佔有率最高的Windows系統，在11、12、13、15、15、18、20下，大部分會啟用鋸齒字，而筆畫配置在這幾個尺寸也恰好最協調。

網頁是在電腦上，基於 pixel 的媒體，因此用 pixel 才能確保精確定義的大小不至於被修改。

註2

原因有二，一是這些設計者不會專心看內文。二是他們覺得這樣看起來很酷。