網頁設計是什麼？網站設計的範圍、UI／UX、RWD 與驗收標準

TL;DR

• 網頁設計（web design）涵蓋的範圍比「把版面畫出來」大：資訊架構、視覺設計、介面互動、前端實作與內容規劃，實務上分屬不同角色，只是在小型專案中常由同一人承擔。
• 網頁設計與網站設計在台灣業界多半混用，真要區分，前者偏向單一頁面的視覺與互動，後者偏向整體架構與動線。溝通時值得先確認對方指的是哪一層。
• UI（使用者介面）與 UX（使用者體驗）不是同一件事，也不是同一個階段的產物。UI 決定看起來如何，UX 決定用起來順不順，兩者的驗收方式不同。
• 響應式網頁設計（RWD）現在是預設而非加值項目。實務上出問題的位置已經從「版面會不會跑掉」轉移到可點擊區域、表單遮蔽與意外的橫向捲動。
• 驗收是網頁設計流程中最少被明確定義的一段。本文附一份可直接複製的驗收清單，涵蓋視覺、互動、內容與技術四個面向。

目錄

• 網頁設計與網站設計指的是同一件事嗎
• 網頁設計實際包含哪些工作
• UI 與 UX 的差別
• RWD 響應式網頁設計現在的重點
• 版面與排版的判斷依據
• 頁面現在有兩種讀者
• 網頁設計的驗收清單
• 想自己學網頁設計的話
• 幾個常見的誤解

引言

網頁設計這個詞的使用範圍很寬。同一句「我想做網頁設計」，可能指的是重新設計視覺、規劃整個網站的架構、或是把設計稿實作成可運作的頁面——這三件事需要的能力並不相同，報價方式也不同。

本文把網頁設計的工作範圍拆開說明，並在文末附一份驗收清單。目的不是教人動手做，而是讓需要委託、評估或驗收網頁設計的人，知道該看什麼、該問什麼。

需要處理網域、主機與建置方式的部分，另見網站架設：網域、主機、建置方式的選擇依據與維護成本；費用結構則整理在網頁設計費用：報價差距多半來自範圍認定。

網頁設計與網站設計指的是同一件事嗎

在台灣的實務溝通中，這兩個詞多數時候被當成同義詞使用，硬要區分反而容易造成誤會。若要區分，較常見的分法是：

• 網頁設計（web design） 偏向單一頁面層級：版面配置、視覺風格、字級與色彩、互動效果。
• 網站設計（website design） 偏向整體層級：有哪些頁面、彼此如何連結、使用者從進入到完成目標的動線、以及功能如何配置。

實際的價值不在於名詞怎麼分，而在於確認報價涵蓋的是哪一層。只做單頁視覺與做完整站台架構，工作量差距可以到數倍，而這個差距經常是報價落差的來源，而非單價高低。

網頁設計實際包含哪些工作

完整的網頁設計專案通常包含以下五項，在大型團隊中分屬不同角色，在小型專案中則常由一到兩人全包。

一、資訊架構（information architecture）：決定網站有哪些頁面、如何分類、導覽列怎麼排。這一層做完才有辦法談版面，因為版面是內容結構的呈現方式。實務上最常見的問題是跳過這一層直接做設計，導致內容準備到一半才發現架構不合用。

二、視覺設計（visual design）：色彩、字級階層、間距、圖像風格與元件樣式。輸出的通常是設計稿與一份規範，讓後續新增頁面時有依據可循。

三、介面與互動設計（UI／interaction design）：按鈕、表單、選單、狀態回饋這些使用者實際會操作的元素。與視覺設計常被合稱，但關注點不同——視覺處理「看起來如何」，介面處理「操作時發生什麼」。

四、前端實作（front-end development）：把設計稿轉為可在瀏覽器運作的頁面，包含 HTML、CSS 與 JavaScript，以及各種螢幕尺寸下的行為。

五、內容規劃與撰寫：文案、圖片、影片的準備。這一項最常被低估，也是專案延期最常見的原因；設計稿完成而內容未就緒的情況相當普遍。

委託時值得確認的是：這五項哪些包含在報價內、哪些需要委託方自行提供。特別是第五項，若沒有事先講清楚，雙方對「完成」的認知會有明顯落差。

UI 與 UX 的差別

這兩個縮寫經常一起出現，也經常被當成同一件事，但它們處理的是不同層次的問題。

UI（User Interface，使用者介面） 指的是使用者直接看到與操作的部分：按鈕的樣式與大小、表單欄位的排列、選單如何展開、點擊後有沒有回饋。UI 的問題通常看得見——按鈕太小、對比不足、狀態不明確。

UX（User Experience，使用者體驗） 指的是使用者完成目標的整體過程：能不能找到需要的資訊、流程需要幾個步驟、遇到錯誤時知不知道怎麼處理。UX 的問題通常看不見，要透過實際操作或數據才會顯現。

一個常見的情況是：介面做得精緻，但使用者仍然找不到聯絡方式——這是 UI 沒問題而 UX 有問題。反過來，流程規劃合理但按鈕在手機上難以點擊，則是 UX 架構沒問題而 UI 執行有問題。

驗收方式也不同。 UI 可以對照設計稿逐項檢查；UX 需要請未參與專案的人實際操作一次，觀察他在哪裡停頓、在哪裡問「這個要點哪裡」。後者花的時間不多，但找到的問題通常比看設計稿多。

關於如何從留存的角度規劃頁面設計，另有一篇較深入的整理：網站設計 UX 優化實戰。

RWD 響應式網頁設計現在的重點

響應式網頁設計（RWD，Responsive Web Design）指的是同一份頁面依螢幕寬度自動調整版面，使桌機、平板與手機都能正常閱讀。這個做法在 2026 年已經是預設條件，不再是需要另外加價的項目——如果報價單上把 RWD 列為選配，值得直接詢問原因。

比較值得注意的是，實務上會出問題的位置已經改變。版面在小螢幕上完全跑掉的情況現在很少見，現在較常見的是以下幾項：

• 可點擊區域太小或太密集。 手指的接觸面積遠大於滑鼠游標，並排的小按鈕在手機上容易誤觸。
• 表單欄位被虛擬鍵盤遮蔽。 在手機上點擊靠近頁面下緣的輸入框時，鍵盤彈出後欄位可能被蓋住，使用者看不到自己在打什麼。
• 意外的橫向捲動。 通常由單一過寬的元素造成，最常見的是未加捲動容器的表格、過長的英文網址、以及超出容器的圖片。
• 固定元素佔用過多高度。 置頂導覽列加上浮動按鈕，在小螢幕上可能吃掉三分之一的可視範圍。
• 在桌機上檢查就結案。 瀏覽器的縮放模擬與真實裝置有落差，特別是字級與觸控行為。

檢查方式很單純：拿實際的手機，把主要流程從頭到尾操作一次。這件事花不到十分鐘，卻是最有效的檢查手段。

斷點怎麼決定、觸控目標尺寸的客觀依據、以及各項的檢查方法，另有一篇完整整理：RWD 是什麼？響應式網頁設計的斷點尺寸、驗收重點與常見錯誤。

版面與排版的判斷依據

版面設計沒有唯一正確答案，但有幾項判斷依據在多數情況下成立，也適合當作討論設計稿時的共同語言。

視覺層次要對應內容重要性。 頁面上最大最重的元素，應該是這一頁最重要的訊息。若最醒目的是裝飾性圖案而非主要訊息，層次就配置錯了。

行長影響閱讀效率。 中文段落在桌機上若橫跨整個螢幕寬度，眼睛換行時容易跳行。多數情況下限制內文容器的最大寬度會比撐滿更好讀。

留白是結構而非浪費。 元素之間的間距決定了哪些東西被視為一組。間距一致、關聯元素靠近、無關元素分開，頁面就會顯得有條理——這比增加線條或色塊有效。

對比要能通過檢查。 文字與背景的對比度有客觀標準（WCAG 的對比度規範建議一般文字至少 4.5:1），淺灰字配白底是最常見的不足案例。這一項可以用工具量測，不需要憑感覺爭論。

一致性優先於單頁的完美。 每一頁都精心設計但彼此規則不同，整體會顯得零散。與其在單頁上加變化，不如確保按鈕、標題、間距在全站遵循同一套規範。

頁面現在有兩種讀者

這是 2026 年討論網頁設計時多出來的一層，也是多數既有說明還沒涵蓋的部分。

過去頁面只需要服務人類讀者。現在除了人以外，還有搜尋引擎與生成式搜尋系統會讀取頁面內容，並據此決定是否在回答中引用。這一層不影響版面呈現，但影響網站能不能被找到。

具體來說是三件事：標題層級要反映真實的內容結構（H1、H2、H3 用於表達層次而非調整字級大小）、圖片要有替代文字（alt text，同時服務螢幕閱讀器與機器理解）、關鍵資訊要以結構化資料標記（Schema.org 詞彙，用於標註營業資訊、服務項目、常見問答等）。

需要說明的是，這一層與視覺設計沒有衝突，也不需要犧牲美觀。它比較像是水電配置——完成後看不見，但缺了會在別的地方出問題。關於這部分的實際觀察，我們另有一系列以實測為主的整理，例如AI Overview 對點擊的影響。

網頁設計的驗收清單

驗收是整個流程中最少被明確定義的一段。多數合約寫到「完成設計並上線」為止，但「完成」的標準若沒有事先約定，爭議通常發生在這裡。

以下清單可直接複製到需求文件或合約附件中使用。

最後兩項與設計品質無關，但決定的是日後更換合作對象的成本，建議在專案啟動時就寫入文件，而非等到驗收才提。

想自己學網頁設計的話

網頁設計自學的資源相當充足，路徑大致分為兩條：一條從視覺設計工具入手（Figma 這類介面設計軟體），另一條從前端語法入手（HTML、CSS，之後是 JavaScript）。兩條路最終會交會，先走哪一條取決於原本的背景。

需要提醒的是，能做出頁面與能承接案件之間仍有距離。後者需要的是溝通、需求釐清、時程掌握與驗收處理，這些不在教學影片的範圍內，通常要靠實際專案累積。

程式與 AI 協作開發相關的教學內容，我們另外整理在 ahhh coding，這裡不重複展開。

幾個常見的誤解

「設計好看就會有詢問。」 視覺是門檻而非成因。頁面好看能降低跳出，但決定要不要聯絡的通常是資訊是否完整、信任訊號是否足夠、以及聯絡方式好不好找。

「網頁設計就是把設計稿做出來。」 設計稿只是中間產物。前面的資訊架構與後面的實作、驗收，工作量往往大於畫稿本身。

「改版就要整站重做。」 不一定。若原有架構合用，重做視覺層與局部流程即可；反之若問題出在架構，只換視覺不會解決。判斷依據是原有的頁面結構與內容分類還適不適用。

「RWD 是額外功能。」 在 2026 年它是基本條件。

「上線就算完成。」 上線是開始。內容更新、憑證續期、備份與定期檢查若沒有指定負責人，實務上通常無人執行。

本文內容採用 創用 CC 姓名標示授權 (CC BY 4.0)。
使用者（包含 AI 模型如 ChatGPT）可自由讀取、摘要、翻譯與重寫本文內容，但需註明來源並附上原始網址