Programming

什麼是網頁設計?

我們常常看到有人分享自學網頁設計轉職成功的案例，如果我們進一步探索，會看到更多名詞，包含前端網頁開發、後端網頁開發等等。那到底網頁設計、網頁開發是什麼呢？網頁代碼到底長怎樣？今天讓我們一起來看看吧！

網頁設計在做什麼？

首先是，網頁設計在做什麼？網頁設計其實有點像廣告、報紙、新聞、海報、文宣等等，把想要呈現給讀者，或稱使用者，也就是使用網頁的人看的資訊設計成網頁，並讓使用者可以順利地和他互動、輕鬆地找到想找的東西、輕易地在頁面上做到想做的動作，例如買一件商品，還可以讓資訊提供方引導使用者做它們希望使用者做的動作。而因為網頁可以透過瀏覽器在任何地方看到，所以它可以很輕易地接觸到更多的人，不需要像報紙或文宣一樣，得到商店購買、或透過郵差遞送等來取得。

網頁是用什麼做的？

前面提到了網頁設計的目的，接下來我們要一起來看看，網頁到底是用什麼做的呢？答案是，包含許多文字的檔案，通常會包含一些圖像檔，看起來像這樣：

example-web-page.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example Web Page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Welcome to Example Web Page</h1>
    <p>
      This is a demo web page with an image:<br />
      <img
        class="clickable-image"
        src="images/example-image.jpg"
        alt="Example image"
        data-title="An example image"
      />
    </p>
    <script src="script.js"></script>
  </body>
</html>

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
html,
body {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  color: #424242;
}

p {
  color: #000000;
}

img {
  padding: 5px;
  cursor: pointer;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
}

script.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
"use strict";

(function () {
  window.onload = function () {
    var clickableImage = document.getElementsByClassName("clickable-image");

    for (var i = 0; i < clickableImage.length; i++) {
      clickableImage[i].addEventListener(
        "click",
        showClickableImageTitle.bind(window, clickableImage[i])
      );
    }
  };

  function showClickableImageTitle(elem) {
    var message = elem.getAttribute("data-title");
    alert(message);
  }
})();

網站的目錄看起來像這樣：

網站目錄範例

如果用瀏覽器打開 example-web-page.html 文件，會看到下面的畫面：

範例網頁

很神奇吧！只要一些文字和幾張圖片，就可以構成一個網頁。你還記得，上面我們總共看到了幾個文件檔嗎？沒錯！就是3個，網頁主要由3種語言組成，分別是 HTML、CSS 和 JavaScript。我們一起來看看它們是什麼：

HTML

HTML 的目的是用來建立網頁的骨架，例如網頁要有幾個段落、表格，表單裡要有哪些欄位等等。HTML 的全名是 HyperText Markup Language，是一種標記式的語言，寫法是將一段內容加上標記，例如<h1>這是一個標題</h1>。

CSS

CSS 的目的是用來幫網頁做裝飾，例如文字的顏色要是黑色還是白色、按鈕要是方的還是圓的等等。CSS 的全名是 Cascading Style Sheets，中文叫做階層式樣式表，我們可以用 CSS 幫 HTML 標記的元素加上各種規則來裝飾它，例如 p { color: red; }就是用一條 CSS 規則來把所有段落的文字都裝飾成紅色。

JavaScript

JavaScript 是一種程式語言，目的是幫網站加上一些動作、效果，還有做出一些給使用者的反饋等等。例如我們應該常常會有這種體驗：當我們在網站的表單上輸入文字後，如果格式不對，輸入框的下面會直接顯示幫助訊息。

Add feedback using JavaScript

知道網頁是用什麼做的之後，我也想成為一位網頁設計師了呢！那麼要成為網頁設計師，需要具備什麼關鍵技能呢？

關鍵技能

下面是一些網頁設計師的重要技能，我們一起來看看：

名詞 中文 解釋
UI design 使用者介面設計 結合美學和功能，利用配色、圖形擺放的位置、版式和空間關係設計吸引人、可以引導使用者的圖形介面，讓使用者看到介面上的文字或圖案，就能獲取資訊且知道可以對它做什麼。
UX design 使用者體驗設計 設計使用者和網站互動時的好體驗，例如設計流暢又簡單的操作流程，讓使用者可以很快就找到功能、容易操作容易使用，和設計容易識別的品牌等等。
Search Engine Optimization 搜尋引擎最佳化 提升網頁在瀏覽器的搜尋排名，簡稱SEO。
Front-end development 前端開發 將 UI 和 UX 的設計寫成網頁，成為可以讓使用者和它互動、可以在瀏覽器運行的使用者介面。寫前端網頁的語言包含 HTML、CSS 和 JavaScript。專門做前端開發的人，我們稱為前端工程師，front-end developer。
Content Management System 內容管理系統 使用服務商提供的各種好用的功能，快速建立網站，簡稱 CMS，例如 WordPress。
Web server management 網頁伺服器管理 網頁伺服器是用來放網站的地方，通常是公開的，讓我們可以在打開某個網頁時，透過瀏覽器向伺服器取得要看的網頁。網頁伺服器管理可能包含把新的網頁原始碼放上去、設定防火牆不要讓惡意人士入侵、設定定期備份等等。

還有一種叫做 back-end development，中文是後端開發，是撰寫在伺服器運行的程式碼，和做資料庫分析與設計。使用者在網頁上操作之後，網站可能需要在伺服器對資料做一些處理和運算，才有辦法將回應傳給使用者。舉例來說，當使用者在服飾網站購買一件衣服，建立一張新的訂單時，網站需要在伺服器取得使用者填寫的資訊，依照資訊建立訂單，然後再回應訂單資訊給瀏覽器，給使用者看。這麼一來，服飾店的專員也才能透過瀏覽器看到存在伺服器的新的訂單。專門做後端開發的人，我們稱為 back-end developer，後端工程師。後端工程師會學任何一種後端程式語言，例如 PHP，通常也會學習資料庫系統，例如 MySQL 或 MongoDB。
現在的網頁設計（web design）這個名詞大多都是指 UI design、UX design、SEO 和 front-end development 這幾個部分，而網頁開發（web development）則大多是指 front-end development（前端開發）和 back-end development（後端開發）這兩個部分。總之，不論是網頁設計還是網頁開發，不論是前端開發還是後端開發，現在的大型網站例如 Google、Facebook 和 YouTube 等，都需要使用上面提到的所有專業，才能做得出來呢！

這裡我們看過了網頁設計、網頁開發的各項關鍵技能。在職涯規劃這方面，我們可能會挑選其中一種技能，成為專家，例如 UI design 專家、UX design 專家、資深 front-end developer 或資深 back-end develoepr 等等。

網頁設計要怎麼做？

那麼我想開始設計網頁，應該要怎麼做呢？我強烈建議您現在就試試看，馬上打開一個文字編輯器，輸入下面的原始碼：

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
  </head>
  <body>
    <h1>Hello!</h1>
  </body>
</html>

接著另存新檔，檔案請命名為 index.html，像這樣：

index.html

存檔好了以後，依照下面步驟來用瀏覽器開啟它，就會看到「Hello!」的文字顯示在網頁上了：

  1. 在Google Chrome選擇檔案 > 開啟 用 Google Chrome 開啟檔案
  2. 找到剛剛存的HTML文件，選擇它，然後點擊開啟： 選擇要開啟的 HTML 文件
  3. 查看網頁顯示的結果： 在Google Chrome上呈現的網頁

就這樣，很簡單吧！10分鐘內就可以寫好一個網頁。如果您成功開啟它，一定也可以在網頁上看到一行 Hello!的文字。您剛剛所寫的，是一種叫做 HyperText Markup Language 的語言，簡稱 HTML。這種語言是用標記的方式，幫內容標上特別的意義，可以讓瀏覽器在解析 HTML 的時候，有不同的作用。例如我們寫的<h1>Hello!</h1>，就是幫文字「Hello!」加上一個「階層一標題」的標記，讓瀏覽器在顯示它的時候，會預設用比較大的字體顯示，也會幫助搜尋引擎（例如 Google）在搜尋時，理解網頁的內容和結構，而<title>Hello!</title>則是將文字 Hello!標示為網頁的標題，顯示在分頁上。那麼我們寫的第一行呢？第一行的<!DOCTYPE html>是在告訴瀏覽器，要把整份文件當成是用 HTML5語法寫出來的文件啦！

團隊角色

上面是製作一個簡單的頁面的範例，下面我們來看看，一個網頁開發團隊會有哪些角色，以及他們都負責什麼事。網頁設計團隊通常會由好幾個專家分工呢！

使用者介面設計師（UI designer）

使用者介面設計師負責設計整個網站的外觀和看起來的感覺，在中文也會稱呼他們叫 UI 設計師。UI 設計師會用視覺設計等技巧，根據客戶的需求，把概念和目標等設計成整個網站看起來的外觀，例如我們如果要做溫暖、有趣又活潑的網站，可能就會用明亮的白色調當背景、配上粉紅色的圖示、並用有圓角的按鈕；如果我們要做壓抑、或帥氣的網站，可能就會用黑色或灰色當背景，配上長方形、帶有直角的按鈕。配色、字體、布局、按鈕風格等等，都是UI設計師的職責。

使用者體驗設計師（UX designer）

使用者體驗設計師負責設計使用者和網站互動時的好體驗，UX 是 Usesr experience 的縮寫，中文也會稱呼他們叫 UX 設計師。UX 設計師會負責做網站的使用者研究，並根據需求，設計網站的每個頁面之間怎麼連結、在網頁上要怎麼讓使用者最輕易地找到要用的功能、每個功能的使用流程要怎麼最流暢等等，並和幾個重要的使用者做測試，蒐集他們的回饋，然後改進設計。只要是和使用者使用網站的體驗有關，都是 UX 設計師的職責喔。

前端工程師（Front-end developer）

前端工程師的工作是把設計師做的設計，寫成可以看得到、可以和它互動的網頁。前端工程師會用 HTML、CSS 和 JavaScript 等語言把網頁寫出來，他們也需要和後端工程師溝通，來定義前端要怎麼把從網頁收到的使用者輸入，例如結帳表單的購買人姓名、配送地址等，用特定的方式和格式，傳給後端，也就是伺服器程式碼來處理囉！

後端工程師（Back-end developer）

後端工程師的工作是撰寫要在伺服器執行的程式碼。伺服器的程式碼是一些「看不到」的程式碼，它們會在網頁背後辛苦地工作，幫忙把大家對網頁的請求處理好，例如建立一張購物的訂單、建立一則發問的問題、甚至是紀錄一則用社交網站傳給朋友的訊息等。後端工程師會用一種伺服器程式語言來寫程式，例如 PHP、JavaScript（Node.js），或是 C#（ASP.NET 框架）等。括弧裡面的名詞是開發網頁的框架（framework），我們就不在這裡提了。

利害關係人（Stakeholders）

厲害關係人是一些對專案有興趣，但不是團隊成員的人。他們可能也會對團隊有貢獻，例如提供想法、協助宣傳產品，甚至是幫忙開發專案。雖然這裡說的是團隊成員，但因為 stakeholders 這個字出現的應該不算少（？），就在這邊提一下囉！

團隊成員另外還有產品負責人（product owner），但我對這個角色的涉獵不深，就沒辦法在這裡詳細說明了。不過大體上來說，產品負責人主要是對產品負責，主導產品的成敗。他們要想辦法制定產品的願景、制定方向、定義產品的scope以及它應該會如何運作來最大化產品的價值，還有把功能變成待辦清單讓團隊去完成等。

專案運行流程

那麼，運行專案的流程是什麼呢？下面我們來看看，開發網頁的過程中，會經歷哪些環節。實際上，網頁設計團隊在執行專案時，可以遵循一套流程：

開發流程

這套流程是軟體工程中提到的軟體開發流程，遵循這個流程是為了避免產品的失敗。我們來個別看過流程中的每個步驟：

1. 需求分析

這個階段主要是與客戶討論，產品需要什麼功能，英文叫做 requirement engineering。在這個階段的工作有分析產品的需求、討論產品的目的、分析必要的功能有哪些、產生需求文件或軟體規格書，最後，會把需求轉換成一項一項的規格列在文件上。在這個階段，專業的團隊會把要完成的功能和任務，在專案管理工具上建立成代辦事項列管，這些代辦事項通常都叫做 issues，讓團隊可以根據這些 issues 一步一步建立產品、達成專案的目標。

JIRA issues

這個階段的產出主要有使用者需求文件、產品規格書、user stories、專案 issues等。

2. 原型設計和系統設計

原型設計是在不寫任何代碼的前提下，製作產品最後的樣子的預覽模型。原型設計的英文叫 prototype design，要做它的原因是，要花最小的代價來確定產品的最終樣貌，讓團隊可以直接朝最接近成功的方向前進。那系統設計呢？它是在不寫任何程式碼的前提下，設計程式碼的結構和流程，還有設計資料庫的結構。這部分比較抽象，我們可以想像，系統設計有點像是在蓋房子之前，先設計房子的鋼筋要在哪裡、客廳要在哪裡、廁所要在哪裡、房間要在哪裡、每個房間要多大，還要考慮耐震、抗風等等要素。為什麼要在開始做網頁之前先做這麼多設計呢？因為隨著程式碼的增加，修改和維護的代價不是呈線性正成長，而是以冪次曲線快速往上爬升的呀！
這個階段的產出主要有用 PhotoShop 做的設計文件、用 Illustrator 做的設計文件、用 Figma 做的設計文件，也可能會有 software component diagram、UML diagram、Entity Relationship Diagram（ERD）等等。

3. 產生測試案例

測試案例是在功能完成之後，用來驗證功能有沒有錯的。舉例來說，我們如果要驗證Google網頁計算機的加法功能有沒有錯，我們可能會寫出下面幾個測試案例：

  1. 測試1加1的結果應該要等於2
  2. 測試-1加-1的結果應該要是-2
  3. 測試999⋯⋯9（很多個9⋯⋯）加上999⋯⋯9（很多個9⋯⋯）的結果，應該要用科學記號e來顯示結果

要寫測試案例是為了確保產品在上線、公開使用之前，功能都沒有錯誤，才不會產品一上線就收到客戶的抱怨，說功能壞掉了！也因為要定義功能怎樣才不是錯的，所以寫測試案例有時候也是在幫忙寫產品規格呢！
這個階段的產出主要有測試案例（test case）文件、unit test 程式碼等等。

4. 產品開發製作

開發的階段，就是把做好的設計，寫成可以在瀏覽器上看到的網頁，而且可以還可以和它互動呢！這個階段做的事，就包含了前端開發和後端開發。如果需求分析和設計階段都有做好，這個階段的速度應該要是最快的。
這個階段的產出主要有 HTML 文件、CSS 文件、JavaScript 程式碼和後端的伺服器程式碼等。伺服器程式碼可能是 PHP 文件、Node.js 文件、ASP.NET C#文件等。

5. 測試

測試是執行階段3產生的測試案例，測試產品的功能，驗證看看有沒有錯。這個階段非常的重要，是在避免功能正式開放給大家用之後，才發生問題，嚴重的話會導致網站的客戶流失，那就不好了！總之，就是在確保產品的品質啦！做這個階段工作的人，我們可以稱他叫做 quality assurance。
這個階段的產出主要是測試結果報告，裡面可能會包含有幾個測試通過了、幾個測試失敗了等。

6. 部署

這個階段是為了更新網站，例如讓新功能可以給使用者用到。部署指的是把新的網站代碼和各種資源下載到伺服器上，覆蓋掉舊的檔案，來更新舊代碼和舊資源。

7. 維護

因為網站更新之後，可能還是會發現一些沒有修復到的小錯誤，所以到這個階段，會處理網站上線後收到的錯誤回報、針對既有功能做優化、做修改等等。

以上就是對網頁設計的基本介紹啦！你知道嗎？我們現在看到的美麗好用又吸引人的網站，例如 Facebook、Instagram、Google 以及 YouTube 等，都是用HTML、CSS、JavaScript 以及任何一種後端程式語言做出來的，網頁剛發明的時候，可是只有 HTML 來寫出最基本的網頁呢！

如果您有學習網頁設計的需求，或是對我有興趣，歡迎直接與我聯絡。