「網頁」指的是網站中的單一頁面，例如首頁、產品頁、文章頁、活動頁或聯絡表單；「網站」則是許多頁面、導覽、資料與功能組成的完整系統。這篇文章專注於單一頁面的設計方法，說明如何讓一頁內容清楚、好讀、可操作，並能在不同裝置上穩定使用。
先決定這一頁只負責什麼
一張網頁可以包含很多資訊，但最好只有一個主要任務。產品頁負責讓人理解並考慮購買；活動頁負責交代時間、地點與報名；文章頁負責讓讀者順利理解主題；聯絡頁則要降低詢問門檻。
設計開始以前，先寫下：
- 主要讀者是誰？
- 他為什麼會來到這一頁？
- 看完後最重要的下一步是什麼？
- 哪些疑問若沒回答，使用者就會離開？
如果一頁同時要求訪客購買、訂閱、下載、追蹤社群、閱讀五篇文章和填寫問卷，所有行動都會互相競爭。可以保留次要連結，但主要行動必須有明確優先順序。
視覺層級決定使用者先看到什麼
使用者通常不會從左上角開始逐字閱讀，而是先掃描標題、圖片、重點和按鈕。設計師要利用尺寸、位置、間距、顏色與對比，引導視線移動。
一個清楚的頁面通常會有：
- 能直接說明主題的主標題。
- 補充對象、價值或限制的短段落。
- 依重要程度排列的內容區塊。
- 容易辨識的主要操作。
- 不搶走注意力的輔助資訊。
視覺層級不是把標題無限放大。標題大小應和容器、頁面角色及閱讀距離相配。卡片或側欄中的小標題若使用首頁主視覺等級的字體，反而會破壞比例。
留白不是浪費空間
留白能區分內容群組、降低閱讀壓力，也讓使用者知道哪些項目彼此相關。沒有留白的頁面即使資訊完整，也會顯得難以理解；留白過多則可能讓一個簡單任務被拉得太長。
實際設計時，可以建立固定的間距系統，例如小、中、大三至五個等級，讓標題與正文、表單欄位、圖片與段落保持一致。不要每個區塊都靠感覺設定不同數字，否則畫面容易出現細微但持續的凌亂。
內容寬度也很重要。桌面螢幕很寬，不代表文章文字應從最左排到最右。過長的單行文字會讓視線難以回到下一行；表格與圖表可能需要較寬空間，內文則應有適合閱讀的最大寬度。
字體與色彩首先要能閱讀
字體選擇不只是風格。中文筆畫較複雜，太細、太小或行距不足時，長文很容易疲勞。正文應使用穩定、清楚的字體，並在手機和一般筆電上實際測試。
文字系統至少要定義主標題、次標題、正文、說明文字、連結與按鈕。不要用十多種字級製造差異，也不要靠極淡灰色表現「高級感」，卻讓使用者看不清楚。
色彩應同時處理品牌識別、狀態與對比。成功、警告、錯誤和停用狀態不能只靠顏色表示，還應搭配文字或圖示。紅綠色差異對部分使用者並不明顯，表單錯誤若只把外框變紅，可能根本無法理解原因。
響應式設計不是把桌面版縮小
響應式網頁設計的目的，是讓內容適應不同裝置尺寸、解析度與操作方式。真正的手機版不只是把三欄壓成三個窄欄，而是重新安排優先順序。
手機設計需要考慮：
- 重要資訊是否在不斷縮放的情況下可讀。
- 導覽能否用拇指操作。
- 按鈕和連結是否有足夠點擊範圍。
- 表格、圖片、影片和程式碼是否溢出畫面。
- 表單鍵盤類型是否符合電話、信箱或數字欄位。
- 固定工具列是否遮住內容與錯誤訊息。
斷點不應只按照熱門手機型號設定，而要看內容在什麼寬度開始變形。設計完成後，除了幾個固定尺寸，也要連續拖動視窗，找出中間寬度的問題。
網頁內容應先於裝飾
沒有實際內容就先做高擬真畫面，常會得到一個只能容納假文字的版型。等真實標題、商品名稱、錯誤訊息與多語內容放入後，版面就開始破裂。
內容優先的做法，是先準備接近真實長度的文字、最短與最長名稱、圖片比例、空資料、載入中、錯誤和完成狀態，再決定元件尺寸。固定格式的卡片、價格、日期或按鈕，應使用穩定的版面限制，避免內容變動時整頁跳動。
圖片也應具有資訊目的。產品頁要讓人看清商品；旅遊頁要呈現真正地點；教學頁的截圖應對應步驟。只為填空加入模糊、過暗或與內容無關的圖片，通常會增加下載量，卻不增加理解。
按鈕、連結與表單要符合預期
按鈕適合執行動作，例如送出、儲存、下載；連結則用於前往另一頁。把一般文字做成按鈕外觀，或把重要操作藏在陌生圖示中，會增加判斷成本。
表單設計應讓使用者知道：
- 為什麼需要這項資料？
- 哪些欄位必填？
- 格式錯誤要怎麼修正？
- 送出後發生了什麼？
- 資料會如何使用？
欄位標籤不應在輸入後消失；錯誤訊息要靠近相關欄位並說明修正方法；送出按鈕需要載入與完成狀態，避免重複提交。只顯示「發生錯誤」卻不說哪裡錯，是常見但很不友善的設計。
無障礙是設計品質，不是額外版本
W3C的WCAG 2.2以可感知、可操作、可理解與穩健四項原則組織無障礙要求。對一般網頁設計而言，基礎工作包括：
- 使用正確標題層級與語意HTML。
- 圖片提供符合用途的替代文字。
- 表單欄位有可辨識的標籤。
- 所有功能能以鍵盤操作。
- 鍵盤焦點清楚可見，而且不被固定元件遮住。
- 文字與背景具有足夠對比。
- 影片提供字幕，重要音訊有替代內容。
- 不只以顏色、位置或聲音傳遞重要訊息。
實作時應優先使用正確HTML元素。例如播放控制應使用真正的`button`，而不是讓`div`看起來像按鈕。原生元素通常已具有鍵盤與輔助科技支援，比事後用大量JavaScript模仿可靠。
速度也是版面的一部分
畫面載入太慢、點擊後沒有反應，或文字閱讀到一半突然位移，都會直接破壞設計。Core Web Vitals用三項指標觀察真實使用體驗：
- LCP：主要內容載入速度，良好門檻為2.5秒以內。
- INP：點擊、觸控或鍵盤操作的回應速度，良好門檻為200毫秒以內。
- CLS：非預期版面位移，良好門檻為0.1以下。
評估時看第75百分位，也就是至少75%的造訪需要達到良好門檻。這些數字不是唯一的設計目標，但能協助找出大圖、過多腳本、遲到字型、沒有預留尺寸的廣告或互動阻塞。
不同頁型需要不同設計
首頁負責定位與導覽，不必塞入所有公司資料；登陸頁需要集中在單一活動或轉換；產品頁要回答規格、價格、適用情境與信任問題；文章頁要支持長時間閱讀；後台頁面則重視掃描、比較與重複操作效率。
若每一頁都使用大圖主視覺、三張特色卡片、見證與常見問題，網站很快會失去節奏。設計系統可以一致，但資訊結構應配合頁面任務。
一張網頁的實際製作流程
- 定義讀者、情境和主要行動。
- 整理真實內容與必要狀態。
- 畫低精度線框，先確認順序與流程。
- 建立字體、色彩、間距與元件規則。
- 製作桌面與手機關鍵畫面。
- 開發後使用真實內容測試。
- 以鍵盤、手機、不同瀏覽器和較慢網路驗證。
- 檢查載入速度、錯誤狀態與版面位移。
- 找實際使用者完成任務，觀察卡住的位置。
結語
好網頁讓使用者少想一步。成熟的網頁設計不會不斷提醒人注意設計本身，而是讓內容容易找到、操作符合預期、錯誤可以修正，並在手機、鍵盤與較慢裝置上維持可用。
漂亮可以吸引第一眼，但清楚、速度、無障礙與可靠互動，才決定使用者是否願意留下。從頁面任務開始，讓每個視覺決定都有理由，網頁才會從一張畫面變成真正能完成事情的介面。
資料來源
- W3C Web Accessibility Initiative，WCAG 2 Overview
- web.dev，How the Core Web Vitals metrics thresholds were defined
- MDN Web Docs，Responsive web design
- W3C Web Accessibility Initiative，Images Tutorial
