歡迎來到第 10 章：網頁設計！
在單元 2 的前半部分，你已經學會了如何編寫讓網站運作的程式碼（HTML、CSS 和 JavaScript）。但在寫下第一行程式碼之前，專業的開發人員必須先進行設計。試想這就像蓋房子一樣：你總不會連藍圖都沒有就開始砌磚吧！在本章中，我們將探討如何規劃一個網站，使其外觀精美、易於使用，並且讓所有人都能無障礙存取。
10.1 設計原則
網站設計是一個分階段進行的過程。我們會從粗略的草圖開始，逐步演進到精緻的互動版本。
10.1.1 設計工作流程
在設計過程中，你需要掌握四個關鍵工具：
1. 線框圖 (Wireframes)： 這是頁面佈局的簡單草圖。它們不使用顏色或圖片，只展示標誌 (Logo)、導覽列和文字等元素的位置。
比喻：線框圖就像身體的骨架。
2. 設計稿 (Mock-ups)： 這是最終頁面外觀的「靜態」（不可點擊）圖像。在這階段，你會加入顏色、字型和實際圖片。
比喻：設計稿就像完工房屋的照片。
3. 網頁設計風格指南 (Style Guide)： 一份列出網站「規則」的文件，包括確切的色彩代碼、字型大小和按鈕樣式，以確保整個網站的外觀風格一致。
4. 原型製作 (Prototyping)： 設計的互動版本。它背後可能沒有完整的資料庫，但按鈕是可以「運作」的，讓你能夠測試網站的操作流程。
比喻：原型就像你可以實際走進去參觀的示範屋。
10.1.2 網頁排版 (Typography)
選擇正確的字型對於閱讀體驗至關重要。
- 網頁安全字型 (Web-safe fonts)： 這些是幾乎每台電腦都預先安裝的字型（例如 Arial 或 Times New Roman）。因為每個人都有這些字型，所以它們總能正確載入。
- 嵌入式網頁字型 (Embedding web fonts)： 這是將特定的字型檔案（例如 Google Fonts）「附加」到你的網站程式碼中。這讓你即使在使用者電腦沒有這些字型的情況下，也能使用獨特且有創意的字型。
10.1.3 佈局與設計原則
為了讓網頁看起來專業，請遵循以下四個原則：
視覺層級 (Visual Hierarchy)： 編排元素，讓最重要的資訊優先突顯。你可以透過將標題字體加大、加粗，或使用與內文不同的顏色來達成。
視覺動線 (Flow)： 視線在頁面上移動的路徑。在許多文化中，我們習慣以「F」或「Z」型模式閱讀。設計師會將最重要的項目放在這些動線上。
色彩理論 (Colour Theory)： 使用搭配得宜的顏色。例如，在「立即購買」按鈕使用「暖色調」（紅/橙）來營造興奮感，或為銀行網站使用「冷色調」（藍/綠）來建立信任感。
平衡與對比 (Balance and Contrast)： 平衡確保頁面不會看起來「頭重腳輕」（例如把所有圖片都塞在左邊）。對比讓元素更醒目——例如白底黑字比白底淺灰字更容易閱讀！
快速複習：
- 線框圖 (Wireframe) = 骨架（結構）
- 設計稿 (Mock-up) = 皮膚（視覺）
- 原型 (Prototype) = 動作（互動性）
重點總結： 好的設計始於規劃（線框圖），並遵循一致的規範（風格指南），以使網站易於閱讀且視覺架構清晰。
10.2 無障礙設計原則
無障礙 (Accessibility) 意味著確保所有人都能使用你的網站，包括視力、聽力或肢體有障礙的人士。
10.2.1 WCAG（網頁內容無障礙指引）
WCAG 是一套設計師必須遵循的國際標準。常見例子包括：
- 為圖片提供替代文字 (Alt Text)，以便螢幕閱讀器能向失明使用者描述圖片內容。
- 確保足夠的色彩對比度，方便視力不佳的使用者。
- 確保網站可以完全使用鍵盤操作（針對無法使用滑鼠的使用者）。
你知道嗎？ 為無障礙而設計通常對每個人都有幫助！例如，影片的字幕能幫助處於嘈雜環境的人，而不僅僅是聽力受損者。
重點總結： 遵循 WCAG 能確保你的網站具有包容性，並供不同能力的使用者順暢操作。
10.3 可用性原則
可用性 (Usability) 指的是網站使用起來有多簡單、多「直覺」。如果使用者在幾秒鐘內找不到「搜尋」列，那麼該網站的可用性就很差。
10.3.1 直覺式導覽系統
導覽列是網站的「地圖」。常見類型包括：
- 水平捲動選單： 常見於手機應用程式，用於滑動瀏覽類別。
- 垂直選單： 大型電子商務網站常見的側邊欄選單。
- 下拉式選單： 當滑鼠懸停在主連結上時顯示的子選單。
- 麵包屑導覽 (Breadcrumb navigation)： 頁面頂端的一串連結路徑（例如：首頁 > 電子產品 > 手提電腦）。它能告訴使用者目前所處的準確位置。
- 按鈕群組： 將一組按鈕放在一起，提供清晰的選擇（例如：「是」、「否」、「再想想」）。
10.3.2 針對不同裝置與瀏覽器
無論使用者是在 24 吋螢幕還是 5 吋智慧型手機上瀏覽，你的網站都必須完美運作。這稱為跨瀏覽器相容性 (Cross-browser compatibility)。
我們如何確保網站正常運作？
1. 功能與可用性測試： 邀請真實使用者試用網站，觀察他們在哪裡遇到困難。
2. 程式碼驗證 (Code Validation)： 使用工具檢查你的 HTML/CSS 程式碼是否符合官方規則。如果程式碼「寫壞了」，不同的瀏覽器可能會呈現出不同的顯示結果。
3. 瀏覽器開發者工具 (DevTools)： 大多數瀏覽器（如 Chrome 或 Firefox）都內建「開發者工具」（通常按 F12 開啟）。這些工具讓你能夠立即查看網站在不同螢幕尺寸下的呈現效果。
要避免的常見錯誤： 千萬不要只在一個瀏覽器上測試你的網站！如果你沒有檢查相容性，一個在 Chrome 看起來完美的網站，在 Safari 或 Firefox 上可能會出現「崩潰」的情況。
重點總結： 高可用性的網站擁有清晰的導覽（如麵包屑），並經過多種裝置和瀏覽器的測試，確保它在任何情況下都不會「故障」。
第 10 章最終總結
網頁設計是形式（外觀）與功能（運作方式）之間的平衡。透過使用線框圖和設計稿，遵循階層感和對比度等設計原則，並遵守無障礙 (WCAG) 和可用性標準，你就能建立一個專業、具包容性且易於導覽的數位產品。