網頁設計

**網頁設計**（英語：Web design）涵蓋了製作和維護網站的許多不同的技能和學科。它包含了網頁圖形設計、介面設計、編寫標準化的代碼和專有軟體、使用者經驗設計，以及搜尋引擎最佳化。通常許多人以團隊協作的方式來工作，各自參與設計過程的各個方面；但有些設計師會參與到任何方面。 網頁設計這個術語通常用來描述與網站前端（客戶端）設計相關的設計過程，包括編寫標記式語言。在更廣泛的 Web 開發領域，網頁設計與網路工程存在交集。網頁設計師應該對網路可用性有一定的認識。如果他們的工作涉及到編寫標記式語言，那麼他們也應該遵循網頁親和力的最新指引。

## 歷史

### 1988–2001 年

雖然網頁設計約在 30 年前才問世，但它與許多領域都有聯繫，例如平面設計。從技術角度上來看，網頁設計已經成為人們日常生活的重要組成部分，很難想像沒有動畫圖形、不同風格的排版、背景和音樂的網際網路會是什麼樣子。

#### 網路和網頁設計的開端

1989 年，提姆・柏內茲 - 李在歐洲核子研究組織工作期間提議建立一個全球超文字專案，後來被稱為全球資訊網。在 1991 年至 1993 年期間，全球資訊網誕生了。可以使用簡單的行模式瀏覽器檢視純文字頁面。 1993 年，馬克・安德森和埃里克・比納建立了 Mosaic 瀏覽器。當時有眾多的瀏覽器，但它們大多數都是基於 Unix 並且側重於純文字，對圖形或聲音等圖形設計元素沒有整合的方法。而 Mosaic 瀏覽器突破了藩籬。

全球資訊網協會成立於 1994 年 10 月，透過開發通用的協定促進網際網路發展並確保其互操作性，來使全球資訊網發揮它最大的潛力。這阻礙了任何一家公司壟斷一種瀏覽器或網頁程式語言，對網際網路後來的發展產生了深遠的影響。W3C 繼續制定標準，現在 JavaScript 和其他語言都可以看到這些標準。

1994 年，安德森成立了通信公司（Communications Corp.），後來被稱為網景（Netscape Communications），並推出了 Netscape 0.9 瀏覽器。Netscape 不採用傳統的標準，建立了自己的 HTML 標籤。例如，Netscape 1.1 包含了更改背景顏色和網頁上的表格格式化文字的標籤。1996 年至 1999 年期間，隨著微軟和網景爭奪瀏覽器的統治地位，瀏覽器戰爭開始了。在此期間，該領域有許多新技術產生，特別是階層式樣式表、JavaScript 和動態 HTML。整體來說，瀏覽器競爭確實帶來了許多積極的創意，並推動網頁設計快速發展。

#### 網頁設計的演變

1996 年，微軟發布了第一款具有競爭力的瀏覽器，該瀏覽器有自己的功能和標籤。它也是第一個支援樣式表的瀏覽器，這在當時被認為是一種晦澀難懂的創作技術。 table 的 HTML 標記最初是用來顯示表格資料的。然而，設計人員很快意識到使用 HTML table 建立複雜的多欄布置的潛力，否則這些布置是不可能的。在這個時候，好的設計和美學似乎優先於好的標記結構，很少注意語意和網頁親和力。HTML 網站的設計選項有限，對於早期版本的 HTML 更是如此。為了建立複雜的設計，許多網頁設計師不得不使用複雜的表格結構，甚至使用空白的 spacer .GIF 圖像來阻止空表格單元 collapse。 CSS 於 1996 年 12 月由 W3C 引入，以支援演示和布置。這使得 HTML 代碼具有語意性，而不是語意和表示性，並改進了網頁親和力，請參閱無表格網頁設計。

1996 年，Flash（最初被稱為 FutureSplash）問世。當時，Flash 內容開發工具相對於現在來說相對簡單，它使用了基本的布置和繪圖工具、ActionScript 的一個有限的前身和時間線，但它使網頁設計師能夠超越 HTML、GIF 動畫和 JavaScript。然而，由於 Flash 需要外掛程式，許多 Web 開發人員因為擔心缺乏相容性會限制他們的市場佔有率而避免使用它。取而代之的是，設計師們轉而使用 GIF 動畫（如果他們沒有完全放棄使用動態圖形的話）和 JavaScript 來處理 widget。但是 Flash 的優點使它在特定的目標市場中足夠流行，最後大多數瀏覽器都能使用它，並且強大到可以用來開發整個網站。

#### 第一次瀏覽器大戰的結束

1998 年，Netscape 在開源授權下發布了 Netscape Communicator 代碼，使數千名開發人員能夠參與改進軟體。然而，他們決定從頭開始，這引導了開源瀏覽器的發展，並很快擴充到一個完整的應用程式平台。 網頁標準計劃成立，並透過建立 Acid1、Acid2 和 Acid3 測試，促進了瀏覽器對 HTML 和 CSS 標準的遵循。2000 年對微軟來說是重要的一年。Internet Explorer 發布了 Mac 版本；這是第一個完全支援 HTML 4.01 和 CSS 1 的瀏覽器，提高了瀏覽器標準的門檻。它也是第一個完全支援 PNG 圖像格式的瀏覽器。 在此期間，網景被出售給了 AOL，這被視為網景在瀏覽器大戰中輸給了微軟的一個標誌。

### 2001–2012 年

21 世紀初以來，網路越來越融入人們的生活。因此網際網路技術也在不斷發展。人們使用和存取網站的方式也發生了重大變化，這也改變了網站的設計方式。

瀏覽器大戰結束以來，湧現了許多新的瀏覽器。其中許多都是開源的，這意味著它們往往具有更快的開發速度，並且更支援新標準。許多人認為新的選擇比微軟的 Internet Explorer 更好。

W3C 已經發布了 HTML（HTML5）和 CSS（CSS3）的新標準，以及新的 JavaScript API，每一個都是新的但又各自獨立的標準。雖然 HTML5 這個術語只是用來指代 HTML 的新版本和一些 JavaScript API 的新版本，但是用來指代整套新標準（HTML5、CSS3 和 JavaScript）的做法已經變得很常見了。

## 工具和技術

網頁設計者根據他們參與工序的不同，選擇各種各樣不同的工具。雖然這些工具往往會隨著新標準、新軟體的出現而不斷更新，但它們背後的原則是不變的。網頁設計者使用向量圖形編輯器和點陣圖形編輯器來繪製「網頁格式圖」，也叫做「設計原型」。
建立網站的技術包含了一些 W3C 標準，比如 HTML 和 CSS。HTML 和 CSS 既可以手動編寫，也可以使用視覺化編輯器來編輯。譬如，在使用 WordPress 內容管理系統搭建網站、製作網頁時，可以運用頁面編輯器外掛程式來快速製作頁面，從而實現無編碼製作網頁；知名的 WordPress 網頁編輯器有 Elementor、Beaver Builder 等。
網頁設計者還可能使用其他工具來保證他們的網站符合親和力指引，這些工具包括標記驗證器以及其他用於測試可用性和親和力的工具。建立網站的技術包含了一些 W3C 標準，比如 HTML 和 CSS。HTML 和 CSS 既可以手動編寫，也可以使用視覺化編輯器來編輯。譬如，在使用 WordPress 內容管理系統搭建網站、製作網頁時，可以運用頁面編輯器外掛程式來快速製作頁面，從而實現無編碼製作網頁；知名的 WordPress 網頁編輯器有 Elementor、Beaver Builder 等；可以運用 CSS 產生器外掛來協助視覺化的產出 CSS 程式碼，知名的 CSS 產生器外掛有 CSS Hero 與 YellowPencil 等。

## 技能和方法

£

##### イ標題文字〨ヒ⊄∫へ√\ln {ヨ}

### 行銷和溝通設計

一個網站的市場行銷和溝通設計可以確定什麼樣的產品適合目標市場。目標市場可能是某一年齡段的人群或特定的文化鏈；因此設計師要理解其受眾的趨勢。設計者也要理解他們正在設計的網站的類型，這意味著，例如，B2B 網站的設計考慮因素可能與針對消費者的網站（如零售或娛樂網站）有很大的不同。可能需要仔細考慮，以確保網站的美觀或整體設計不會與內容的解析度和準確性或網站導航的便捷性相衝突， 特別是在 B2B 網站上。設計師也可能會考慮網站所有者或商業代表的聲譽，以確保他們被描繪得有利。

### 使用者經驗設計與互動設計

使用者對網站內容的理解往往取決於使用者對網站工作原理的理解。這是使用者經驗設計的一部分。使用者體驗與網站的布置、明確的說明和標籤有關。使用者對如何在網站上進行互動的理解程度也取決於網站的互動設計。如果使用者意識到網站的有用性，他們更有可能繼續使用它。儘管熟練且精通網站使用的使用者可能會覺得，一個與眾不同但不太直觀或使用者友好的網站介面比較有用。但是，經驗較少的使用者不太可能看到一個不太直觀的網站介面的優勢或有用性。這推動了更加普遍的使用者體驗和易於存取的趨勢，無論使用者技能如何，都能夠容納儘可能多的使用者。 許多使用者經驗設計和互動式設計在使用者介面設計中得到了考慮。

如果沒有高階程式語言技能，進階互動功能可能需要外掛程式。選擇是否使用需要外掛程式的互動性是使用者經驗設計中的一個關鍵決策。如果外掛程式沒有在大多數瀏覽器中預先安裝，使用者可能既不知道如何安裝，也沒有耐心安裝外掛程式來存取內容。如果該功能需要高階程式語言技能，那麼與功能將提升使用者體驗的增強量相比，寫代碼在時間或金錢上可能成本太高。發布不可靠的功能對於使用者體驗而言可能比不嘗試更糟糕。這取決於目標受眾是否需要或值得冒險。

### 頁面布置

部分使用者介面設計受到頁面布置品質的影響。例如，設計師在設計頁面布置時可能要考慮網站的頁面布置是否應該在不同的頁面上保持一致。在布置設計中，頁面像素寬度對於對齊物件也是至關重要的。最流行的固定寬度網站通常具有相同的設定寬度，以匹配目前最流行的瀏覽器視窗，在目前最流行的螢幕解析度，目前最流行的顯示器尺寸。在大螢幕上，大多數頁面也是中心對齊的，以確保美觀。

**流體布置**（fluid layout）在 2000 年左右開始流行起來，作為 HTML 表格布置和網格布置的替代品，在頁面布置設計原則和編碼技術方面都是如此，但是採用起來非常緩慢。 這是由於設計師無法控制螢幕閱讀裝置和不同的視窗大小。因此，一個設計可能會被分解成單元（側邊欄、內容塊、嵌入式廣告區域、導航區域），然後傳送到瀏覽器，最好的方式是透過瀏覽器適配到顯示視窗中。由於瀏覽器能夠辨識讀取器螢幕的詳細資訊（視窗大小，相對於視窗的字型大小等），因此瀏覽器可以對流體布置進行使用者特定的布置調整，但固定寬度布置就不行。雖然這樣的顯示可能經常改變主要內容單元的相對位置，但是側欄可以在主體文字下方而不是在其側面上移位。這種顯示方式比起不能適配裝置視窗的寫死的基於網格的布置要更加靈活。特別是，內容塊的相對位置可能會發生變化，同時不影響塊內的內容。這也減少了使用者水平捲動頁面的需要。

回應式網頁設計是一種基於 CSS3 的新方法，透過增強使用 CSS `@media` 規則，在頁面樣式表中提供更深層次的針對每種裝置的規範。2018 年 3 月，Google 宣布將推出行動優先索引。 使用回應性設計的網站能夠很好地確保它們滿足這種新方法。

### 字型設計

網頁設計師可以選擇將網站字型的種類限制為僅有少數具有相似風格的網站字型，而不是使用各種字型或字型樣式。大多數瀏覽器都辨識特定數量的安全字型，設計者主要使用這些字型來避免複雜性。

字型下載後來包含在 CSS3 字型模組中，並已在 Safari 3.1，Opera 10 和 Mozilla Firefox 3.5 中實現。這之後人們增加了對 Web 字型排印以及使用字型下載的興趣。

大多數網站布置都包含負空間以將文字分解為段落，並且還避免使用居中對齊的文字。

### 動態圖形

使用動態圖形也可能影響到頁面布置和使用者介面。是否選擇使用動態圖形可能取決於網站的目標市場。娛樂導向的網站預期或至少更容易接受動態圖形。然而，一個更嚴肅或正式的網站（如商業、社群、政府網站），可能就會覺得出於娛樂或裝飾目的的動畫沒有必要，還會分散人們的注意力。這不是說比較嚴肅的內容不能用與內容相關的動畫或影片演示來提升。無論哪種情況，動態圖形設計都可以使更有效的視覺效果或分散注意力的視覺效果有所不同。

不由網站存取者發起的動態圖形可能產生可存取性問題。全球資訊網協會的無障礙標準要求網站存取者能夠禁用動畫。

### 代碼品質

網站設計者可能認為符合標準是良好做法。這通常透過描述說明元素在做什麼來完成。不符合標準可能不會使網站無法使用或容易出錯，但標準可能與頁面的正確布置有關，以便於閱讀，並確保編碼元素適當關閉。這包括代碼中的錯誤，更有條理的代碼布置，以及確保正確辨識 ID 和類。編碼不佳的頁面有時俗稱 tag soup。只有在做出正確的 DOCTYPE 聲明時才能透過 W3C 進行驗證，該聲明用於突出顯示代碼中的錯誤。該系統能辨識錯誤和不符合網頁設計標準的地方。這些資訊可以幫助使用者改正錯誤。

### 產生內容

網站的產生方式有兩種：靜態或動態。

#### 靜態網頁

靜態網頁多數為單一的超文件標示語言檔案，每次請求該頁面時，都會返回相同的內容。在網站設計期間內容只需建立一次。它通常是手動編寫的，儘管有些網站使用類似於動態網站的自動建立工具，其結果將長期儲存為完成的頁面。這些自動建立的靜態網站在 2015 年左右變得更受歡迎，其中包括 Jekyll 和 Adobe Muse 等產生工具。

靜態網站的好處在於它們更容易代管，因為它們的伺服器只需要提供靜態內容，無需執行伺服器端指令碼。這可以降低網站維護的工作量，並且由於靜態網站不需要資料庫，所以可以極大的避免暴露系統安全漏洞。他們還可以在低成本的伺服器硬體上更快地載入頁面。隨著便宜的網路代管擴充到提供動態功能，這些優勢變得不那麼重要了，虛擬伺服器可以以低成本提供短時間的高效能的服務。

幾乎所有網站都有一些靜態內容，因為主要的輔助性資源（如圖像和樣式表）通常是靜態的，即使在頁面 HTML 代碼幾乎全是動態產生的網站上，也不例外。現今不少網站也皆傾向把動態網頁靜態化，從而進行 SEO 最佳化。

#### 動態網頁

動態網頁是伺服器透過應用程式伺服器處理伺服器端指令碼產生的網頁。它們通常從一個或多個後端資料庫中提取內容：一些透過跨關聯式資料庫的資料庫查詢，用於查詢目錄或匯總數字資訊；另一些使用 MongoDB 或 NoSQL 等文件導向的資料庫來儲存更大的內容單元，例如部落格文章或維基文章。

在設計過程中，動態頁面通常使用靜態頁面進行類比或線框化。開發動態網頁所需的技能比設計靜態網頁來得更多，因為其同時涉及伺服器端設計、資料庫設計和客戶端設計。即使是中等規模的動態網站專案，也因此通常需要團隊協同運作才能完成。

首次開發動態網頁時通常直接用 Perl、PHP 或 ASP 等語言。其中一些，特別是 PHP 和 ASP，使用「模板」方法，其中伺服器端頁面類似於完成的客戶端頁面的結構，資料被插入到由「標籤」定義的位置。這是一種相比 Perl 這樣的純過程語言更快捷的開發方式。

對於很多網站來說，「標籤」方法、「模板」方法這兩種實現大多數已經被例如內容管理系統等高階的、面向應用的工具所替代。這些工具建構在一些通用的代碼之上，並假設網站提供的內容遵循幾種既有的模型，例如按時間順序排序的部落格、一個專題雜誌或新聞網站、一個共筆網站或是一個使用者論壇。這些工具讓網站的搭建變得更加容易，僅僅需要純粹的設計和內容組織，不再需要任何編程。

編輯網頁內容本身（包括模版頁面）既可以透過網站本身，也可以使用第三方軟體完成。編輯所有頁面的功能僅提供給特定類別的使用者（例如，管理員或註冊使用者）。在某些情況下，允許匿名使用者編輯某些 Web 內容，這種情況較少（例如，在論壇上增加訊息）。維基百科是一個可以匿名修改網頁內容的網站的例子。

## 首頁設計

包括 Jakob Nielsen 和 Kyle Soucy 在內的可用性專家經常強調首頁設計以確保網站成功，並聲稱首頁是網站上最重要的頁面。 不過，2000 年代的從業者開始發現，越來越多的網站流量繞過首頁，透過搜尋引擎、電子新聞稿和 RSS 訂閱直接進入內部內容頁面。 使得許多從業者認為首頁沒有大多數人認為的那麼重要。 Jared Spool 在 2007 年提出，網站的首頁實際上是網站最不重要的頁面。

在 2012 年和 2013 年，輪播（Carousel）已經成為極受歡迎的設計元素，經常用於在有限的空間展示特色或最近的內容。 許多從業人員認為輪播是一種無效的設計元素，會損害網站的搜尋引擎最佳化和可用性。

## 工作

建設網站涉及兩個主要工作：網頁設計師和網頁開發者，他們經常在建站時緊密合作。 網頁設計師負責視覺方面，包括網頁的布置、著色和排版。儘管所需的具體知識因具體的網頁和不同設計師的要求而異，網頁設計人員都需要具備 HTML 和 CSS 等標記式語言的應用知識。特別是在較小的組織中，一個人需要同時掌握開發網站和必要的設計網頁技能，而較大的組織則可能會專門指派一個負責視覺方面的網頁設計師。

可能參與建站的其他工作包括：

* 圖形設計師為網站建立視覺效果，例如 Logo，布置和按鈕。
* 網際網路行銷專家透過在網際網路上使用行銷和促銷技術、針對網站的受眾定位的戰略解決方案來幫助維護網站。
* 搜尋引擎最佳化專家研究和推薦一定的關鍵詞，納入特定的網站，使網站更容易存取，並在眾多搜尋引擎上找到。
* 網際網路文案人員撰寫網站中的文章，以吸引網站的目標受眾。
* 使用者經驗設計（UX 設計）以使用者為中心考慮多種設計因素，包括資訊架構、使用者測試、互動設計等以使用者為中心的設計，有時也會參與視覺設計。

## 另見

### 另見

### 有關行業

## 注釋

## 參考文獻與延伸閱讀

## 外部連結

* W3C consortium for web standards（頁面存檔備份，存於網際網路檔案館）
* 開放式目錄計劃中和 Web design and development 相關的內容

 維基學院中的相關學習文章：Web 前端