網頁設計是什麼？網站設計的範圍、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，以及各種螢幕尺寸下的行為。

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

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

網頁設計的六種做法比較

同樣一個「做網站」的需求，可行的路徑差距很大，費用與後續彈性也不同。以下依自由度由低到高排列。

一、免費建站平台。 Wix、Weebly 這類服務提供拖拉式編輯，不需技術背景即可上線。適合驗證想法或臨時性用途。限制在於網址通常帶平台名稱、可放置的功能有限，且內容不易完整帶走。相關限制另有整理：免費網頁製作：適用情境、可用選項與四個結構性限制。

二、佈景主題套版。 購買現成版型後替換文字與圖片，多見於 WordPress 生態。成本低、上線快，但版型的架構已經固定，需求若與原設計的假設不同，改動成本會迅速上升。另一項常被忽略的是外掛相依：版型依賴的外掛日後停止更新時，處理成本由網站所有人承擔。

三、SaaS 架站平台。 以年費使用的整合式服務，通常內建內容管理、表單、以及基本的搜尋設定。與套版的差別在於系統本身持續維護，不需要自行處理更新與資安。適合需求落在標準功能範圍內、且希望自行更新內容的情況。

四、一頁式網站。 把核心資訊集中在單一頁面，適合活動、單一服務或個人品牌。製作快、成本低，但內容量成長後會遇到瓶頸——單頁能承載的主題數量有限，對搜尋而言也難以針對不同關鍵字分別佈局。適用情境另有整理：一頁式網站製作：適用情境、內容順序與費用組成。

五、半客製。 以既有系統或框架為基礎，客製視覺與部分功能。多數商業網站落在這一類——它在成本與彈性之間取得平衡，且不需要從零開發共通功能。

六、全客製開發。 視覺與功能完全依需求設計，適用於有特殊業務流程、需串接既有系統、或視覺需完全獨立於任何模板的情況。費用與時程最高，但長期的擴充彈性也最大。

選擇的判斷依據不是預算高低，而是需求是否超出標準模組。若需要的是形象展示、聯絡表單、內容更新這類常見功能，往上選不會帶來對應的價值；反之若有特定流程要數位化，往下選會在中途受限，屆時的改動成本高於一開始就選對。

網頁設計的流程與時程

多數專案的流程大致如下。各階段的名稱依廠商而異，但工作內容差別不大。

1. 需求訪談與目標確認——釐清網站要解決什麼問題、目標對象是誰、成功的判斷依據是什麼。這一步的結論會決定後面所有決策。
2. 資訊架構規劃——頁面清單、分類方式、導覽結構。架構確認後才進視覺，可避免設計完成才發現結構不合用。
3. 視覺設計與原型——設計稿與可點擊原型。這是修改成本最低的階段，值得在此多花時間確認。
4. 前端與後端實作——把設計稿轉為可運作的頁面，並建置內容管理與必要功能。
5. 內容匯入——實際文案與圖片就位。此階段的進度多半取決於委託方的準備速度。
6. 上線前檢查——跨裝置、跨瀏覽器、效能、無障礙與搜尋設定的逐項確認。
7. 上線與交付——網域切換、憑證設定、搜尋工具驗證，以及後台操作說明。

一般商業網站的時程約在四到八週之間，視功能複雜度而定。實務上最常拖延的不是開發，而是內容準備與設計稿確認——這兩項都需要委託方投入時間，若沒有事先安排，時程很難照計畫走。

需求訪談時要求對方提供一份「需要您準備的項目清單」，是壓縮時程最有效的做法。

費用怎麼估

費用的差距多半來自範圍認定，而非單價高低。同樣是「做一個網站」，含不含文案撰寫、含不含攝影、含不含後台、維護到什麼程度，都會讓數字落在不同量級。

以做法區分的大致區間如下，實際金額依需求而定：

比較報價時，以下幾項最容易造成落差：文案與圖片由誰準備、是否含後台與教學、維護的範圍與年限、網域與原始檔的歸屬。這幾項寫在報價階段的成本，遠低於結案後才討論。

完整的費用結構與各項目的計價方式，另有一篇整理：網頁設計費用：報價差距多半來自範圍認定，不是單價高低。

UI 與 UX 的差別

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

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

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

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

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

UI 與 UX 各自的工作範圍、產出物清單與驗收方式，另有一篇專門的整理：UI UX 是什麼？UI 設計與 UX 設計的差別、產出與驗收。若想從留存的角度看頁面規劃，可再參考網站設計 UX 優化實戰。

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

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

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

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

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

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

版面與排版的判斷依據

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

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

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

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

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

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

頁面現在有兩種讀者

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

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

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

需要說明的是，這一層與視覺設計沒有衝突，也不需要犧牲美觀。它比較像是水電配置——完成後看不見，但缺了會在別的地方出問題。

這一層的影響程度，我們以自有網站持續實測。兩項與網頁設計決策直接相關的觀察：

• 被摘要引用不等於取得點擊。 我們比對了 181 個頁面在 AI Overview 出現前後的曝光與點擊變化，結果整理在AI Overview 會吃掉網站流量嗎。實務上的意義是：頁面若只把資訊完整呈現而缺乏點進去的理由，摘要會直接替代掉造訪。
• AI 的推薦名單並不穩定。 同一組問題隔 28 天重測，約七成店家已不在名單上，過程記錄在AI 推薦的店家名單會變嗎。這代表能見度需要持續經營，不是做完一次就固定下來。

這些是我們自己站上量到的數字，樣本與方法都寫在各篇文章裡，並非引用二手來源。

網頁設計的驗收清單

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

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

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

委託前值得確認的幾件事

挑選合作對象時，以下幾項的資訊落差最容易在後期造成爭議，建議在報價階段就逐項確認：

• 網域與主機登記在誰名下。 建議由委託方自行申請並登記在自己名下，廠商協助設定。
• 內容能否完整匯出。 包含文字、圖片與結構，格式是否通用。
• 維護的範圍、年限與續約費用。 只寫「含維護」而未定義範圍的，日後容易產生認知落差。
• 需求討論的對象是不是實際執行的人。 傳遞層級越多，規格失真的機率越高。
• 對方是否會說明「不需要花的錢」。 願意指出某項需求可用更低成本達成的，通常對範圍的掌握也較清楚。

各地區的廠商類型差異、以及實際的比較方式，另有一篇完整整理：網頁設計公司推薦：全台精選五家新型態網頁設計公司。

常用的設計與建置工具

了解工具的分工，有助於在討論時知道對方在說什麼。

介面設計：Figma 目前是業界主流，支援多人協作與可點擊原型，瀏覽器即可使用。設計稿的檢視與標註通常也在此完成。

內容管理：WordPress 是使用最廣的開源系統，生態成熟但需要自行處理更新與資安；SaaS 型的架站平台則由服務方維護系統本身。

前端技術：HTML、CSS 與 JavaScript 是基礎；較大型的專案會使用 React、Vue 這類框架，或 Next.js、Astro 這類整合式框架。

檢測工具：PageSpeed Insights 檢查載入效能與 Core Web Vitals；Google Search Console 檢查收錄狀況與實際帶來曝光的查詢字詞。這兩項建議在上線後就設定，資料需要時間累積。

工具本身不決定成果。同一套 Figma 可以做出優秀或平庸的設計，關鍵仍在資訊架構與內容規劃。

想自己學網頁設計的話

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

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

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

幾個常見的誤解

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

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

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

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

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

「改版一定會掉排名。」 不必然，但確實有風險，而風險來自遷移過程而非改版本身。網址結構若改變而未設定轉址，既有的排名與外部連結會失效。處理方式另有清單：網站改版 SEO 遷移清單。

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