歡迎來到單元 2：網頁設計！
各位未來的網頁設計師好！這個章節非常令人興奮，因為我們將超越單純認識 HTML 標籤的階段，轉而探討如何有效地利用這些標籤來構建絕佳的用戶體驗。我們將學習那些區分「令人困惑的網站」與「精彩網站」的關鍵原則。
不用擔心如果你不是藝術家！網頁設計更多是關於邏輯和規劃，而非繪畫。完成本單元後，你將明白如何規劃一個專業、易於導航且符合用戶需求的網站。
讓我們開始吧！
單元 2.1：定義目的與目標受眾
至關重要的第一步：我們為什麼要建立這個網站？
在寫下任何一行程式碼之前，你必須清楚兩件事：網站的目的與目標受眾。
1. 網站的目的
目的決定了你所做的每一個設計選擇。問問自己：
- 目標是為了提供資訊（例如新聞網站）嗎？
- 目標是為了銷售產品（電子商務）嗎？
- 目標是為了娛樂（遊戲或串流媒體）嗎？
- 目標是為了收集資訊（問卷或註冊）嗎？
例子：如果目的是銷售，那麼「立即購買」按鈕必須顯眼且容易找到。如果目的是提供資訊，那麼文字必須清晰易讀。
2. 識別目標受眾
目標受眾是指將會使用你網站的特定人群。了解他們是做出設計決策（如字體大小、語言正式程度和配色方案）的關鍵。
我們根據以下特徵分析受眾：
- 年齡層：年輕受眾通常喜歡動態、視覺豐富的網站；年長受眾可能需要較大的字體和高對比度。
- 技術能力：他們是新手還是專家？這會影響導航的複雜程度。
- 存取方式：他們主要使用桌面電腦、平板還是手機？（這會影響響應式設計的要求。）
快速回顧：受眾檢查
如果你的受眾是 6–8 歲的兒童，你會使用鮮豔的色彩、簡單的語言，或許還有卡通圖形。如果你的受眾是財務主管，你會使用企業風格、柔和的色彩、詳細的圖表和專業的語言。
關鍵要點：在處理「如何做」之前，先定義「誰」要用以及「為什麼」要做。
單元 2.2：規劃網站結構與導航
內容架構：網站地圖 (Site Map)
網站需要結構，就像建築物需要藍圖一樣。這種結構通常由網站地圖 (Site Map) 來呈現。
網站地圖是一個視覺化或層級式的圖表，展示了網站內的所有頁面以及它們是如何連結在一起的。它能確保你沒有遺漏任何頁面，並有助於規劃導航路徑。
階層類比：檔案櫃
將你的網站想像成一個檔案櫃：
- 櫃子（首頁）
- 主抽屜（主要分類，例如：產品、關於我們、聯絡我們）
- 抽屜內的資料夾（子頁面，例如：在「產品」之下，有襯衫、褲子、鞋子）
大多數網站採用淺層階層（2–3 次點擊深度），以確保用戶能快速找到資訊。
設計有效的導航
好的導航代表用戶不需要思考下一步該去哪裡。
導航的核心原則：
- 一致性：導航列/選單應出現在每個頁面的完全相同的位置。
- 清晰度：連結名稱應該顯而易見（例如用「常見問題 (FAQs)」而不是「你可能想知道的事情」）。
- 簡潔性：過多的選項會讓用戶不知所措。堅持使用 5–7 個主要連結。
- 返回首頁：公司標誌（通常位於左上角）應始終連結回首頁。
你知道嗎？一種稱為麵包屑導航 (Breadcrumbs) 的導航功能，能幫助用戶了解他們在網站階層中的當前位置（例如：首頁 > 產品 > 鞋子 > 跑步鞋）。它們就像標記，顯示你所走過的路徑。
關鍵要點：使用網站地圖來規劃清晰、淺層的結構，並確保導航在整個網站中保持一致且直觀。
單元 2.3：核心視覺設計原則
佈局與視覺層級
你如何在螢幕上安排元素，會極大地影響可讀性和焦點。
1. 使用網格系統 (Grid System)
網頁通常使用隱形的網格系統（欄與列）進行設計。這提供了結構與平衡感。與網格對齊的內容看起來專業且整潔。
2. F-模式（閱讀習慣）
西方文化的用戶傾向於以「F」形狀掃視網站：
- 他們先閱讀頂部（F 的頂部橫線）。
- 他們向下掃視左側（F 的垂直線）。
- 他們會再次稍微向右閱讀（F 的中間橫線）。
設計提示：將最重要的資訊、導航和行動呼籲 (Calls-to-action) 放置在這個 F-模式的路徑上。
色彩與對比
色彩會影響心情、可讀性和品牌識別。
- 配色方案：根據你的目標受眾和企業識別，使用有限的色盤（通常為 2–3 個主色）。（例如：藍色暗示信任/金融；綠色暗示自然/健康。）
- 對比度：前景顏色（文字）與背景顏色之間的差異。高對比度對於可讀性至關重要（例如：白色背景上的黑色文字）。避免低對比度的組合（例如：白色背景上的淺藍色文字）。
常見的錯誤：使用過多鮮豔且衝突的色彩。這在視覺上會造成混亂，且顯得不專業。
排版（字體）
排版是指選擇並安排字體，使文字易讀且美觀。
- 襯線體 (Serif Fonts)：有小的裝飾筆觸（如 Times New Roman）。它們通常用於印刷材料或大段正式文字，因為襯線有助於引導視線。
- 無襯線體 (Sans-Serif Fonts)：沒有裝飾筆觸（如 Arial 或 Verdana）。由於它們在小字號下更乾淨、更清晰，通常是螢幕閱讀的首選。
設計提示：整個網站最多只使用 2–3 種不同的字體。主體文字請使用清晰的無襯線體。
關鍵要點：策略性地使用色彩和佈局來引導用戶視線，並確保高對比度以達到最佳的可讀性。
單元 2.4：一致性與企業識別
一致性的力量
一致性意味著看起來相同的元素應該具備相同的功能，整體外觀與感覺必須統一。
一致性之所以重要，是因為：
- 它使網站看起來專業且值得信賴。
- 它降低了用戶的學習成本（一旦他們知道某個部分如何運作，他們就明白其餘部分如何運作）。
- 它強化了品牌形象。
「3C」記憶法：
為了良好的設計，請務必確保：
Colour（顏色，配色方案必須統一）
Components（組件，按鈕和選單必須看起來和運作方式相同）
Content（內容，語氣和正式程度必須統一）
企業識別 (Branding)
你的網站往往是組織的公眾形象。它必須與公司的企業識別 (Corporate Identity)（品牌）完全一致。
企業識別元素包括：
- 特定的標誌 (Logo)（在所有頁面上保持一致使用）。
- 預定義的色盤（通常由特定的數位色碼定義）。
- 核准的語氣 (Tone of Voice)（正式、親切、技術性等）。
如果銀行擁有嚴肅、值得信賴的企業識別，他們的網站就應該使用柔和的色彩以及清晰、正式的語言，而不是鮮豔的卡通圖形。
關鍵要點：一致性建立信任。每個設計元素都必須強化組織的企業識別。
單元 2.5：無障礙設計考量
為所有人設計
好的網頁設計應具備包容性。無障礙 (Accessibility) 意味著確保身心障礙人士（視覺、聽覺、認知或動作障礙）能夠有效地使用網站。
這通常是法律要求，更是倫理義務。
設計選擇如何影響無障礙：
- 圖片的文字替代（Alt Text）：所有具備功能性和資訊性的圖片都必須具備 Alt Text。當視覺障礙用戶使用螢幕閱讀器時，這些文字會被大聲讀出。
- 高對比度：如前所述，高對比度的文字/背景顏色組合對於視力不佳或色盲的用戶至關重要。
- 鍵盤導航：無法使用滑鼠（因動作障礙）的用戶，必須能夠僅使用 Tab 鍵來瀏覽並與網站互動。請確保所有連結和按鈕都是可選取的。
- 清晰的語言：使用簡單的語言並儘量避免技術術語，這有助於認知困難的用戶。
你知道嗎？許多國家都有法律（如英國的《平等法》）規定對公眾開放的網站必須達到一定的無障礙標準。為無障礙而設計並非選項，而是必須！
關鍵要點：規劃設計選擇（如顏色和圖片）時務必考慮無障礙性，特別是關注對比度並為圖片提供替代文字描述。
章節總結：快速回顧
你現在已經涵蓋了設計有效網頁的核心原則。請記住，偉大的設計是「無感」的——用戶能在不感到困惑或費力的情況下達成他們的目標。
- 規劃：從定義目的與分析目標受眾開始。
- 結構：使用網站地圖來組織頁面，建立淺層且邏輯清晰的階層。
- 可用性：確保導航一致且清晰（使用簡短且具描述性的標籤）。
- 視覺：使用有限的高對比度顏色，並為內文使用易讀的無襯線體。
- 品牌識別：保持佈局、顏色和語氣的一致性，以強化企業識別。
- 無障礙：為高對比度設計，並為圖片加入 Alt Text。
在你開始構建自己的專案時，請將這些原則銘記在心！