網頁設計怎麼開始：需求、內容與驗收的完整順序

社區修繕工作室想做網站，希望鄰近住戶能找到服務、判斷是否適合，並送出完整詢問。若第一場討論只決定首頁要多漂亮，等到版面畫完才發現沒有施工範圍、照片授權或詢問流程，設計就得反覆重做。

網頁設計可以從一個清楚的任務開始：讓使用者在需要時找到資訊並完成下一步。以下流程、工作室案例與驗收題目均為原創，參考 2026 年 9 月 14 日查閱的 MDN、W3C 與 GOV.UK 一手資源；沒有將示例說成已完成的客戶專案或實際研究結果。

把想做的功能，改寫成要解決的問題

先找實際或可能使用網站的人了解情境，例如住戶是在手機上搜尋漏水處理，還是在電腦整理整修需求。詢問他最近一次怎麼找服務、需要確認什麼、哪裡不放心，比直接問要不要線上預約更能看出需求。自己和業主的意見先標成假設，等待證據支持。

把主要任務寫成完整句子：住戶希望知道工作室是否服務自己的區域，才能決定要不要詢問。接著列出成功條件，例如能找到服務地區、了解不承接的項目，並知道詢問後如何處理。這些內容可以引導頁面設計，也能在交付時拿回來驗收。

再界定第一版範圍及限制。原創工作室可先提供服務說明和詢問表單，預約排程或線上付款若尚未確定，就記錄為後續需求。每個新增功能都要說明解決的問題、維護人及驗收方式，讓預算和時程有可以討論的依據。

先收集能用的內容，不讓假字決定版面

列出每頁需要的標題、正文、圖片、聯絡資訊和更新人。修繕網站至少要有實際服務範圍、詢問所需資料、回覆方式及可合法使用的案例照片；尚未確認的工期與價格要標示待補，不能由設計師為了排版自行填成承諾。

用一份內容清單記錄資料提供者、目前版本、是否審閱及授權來源。照片看起來清楚，不代表可以公開顧客住家或門牌；應確認使用範圍，必要時改用自繪說明。字型、圖示與第三方素材也要留存允許用途，不能把搜尋結果當成使用許可。

把真實而且較長的內容放進早期草圖，包含完整繁體中文地址、較長服務名稱及注意事項。這樣能提早發現卡片太窄、手機需要捲動太多或表單說明不足。MDN 的入門設計流程也把內容及素材準備放在寫程式之前，適合拿來練習小型頁面。

用草圖與原型確認資訊和操作順序

草圖先表達哪些資訊在同一頁、哪個動作最重要，以及使用者下一步會到哪裡。原創工作室可畫服務總覽、單項服務及詢問完成畫面，不必每個小區塊都先追求精確顏色。討論焦點是住戶看不看得懂、找不找得到，而非圖案是不是足夠精緻。

需要檢查流程時，再把畫面連成可點擊原型，例如從選擇服務進入詢問、補齊資料後看到確認訊息。邀請目標使用者按任務操作，觀察他停下來的地方及選擇理由，不在旁邊一路教他怎麼點。原型能幫助發現問題，但能點過去不等於資料真的送到工作室。

GOV.UK 對早期原型的指引強調驗證重要假設，不要求先做完所有畫面。將這個方法用在小型網站時，可以先處理最不確定的詢問資訊或服務分類。若設計無法支持使用者完成任務，就回頭修正內容和流程，再進入視覺細節。

視覺與開發規格一起交代使用狀態

確認資訊後，再建立字級、間距、色彩及常用元件的規則。按鈕不只有平常的外觀，還要交代鍵盤焦點、無法使用及處理中的狀態；表單也有必填提示、錯誤和完成結果。只交一張理想首頁，開發者仍須猜測其他情況要怎麼呈現。

安排桌面與手機時，不只是把所有東西等比例縮小。較窄畫面可能需要改變欄位排列、導覽展開方式及圖片裁切，但主要資訊與操作仍要找得到。先和製作者確認內容管理、表單寄送、資料保存及外部服務需求，再選擇合適的架站方式。

W3C 的規劃資源把無障礙工作分配到設計、內容和開發等角色。實務上可以在草圖檢查閱讀順序，視覺階段確認對比及焦點，開發階段檢查標籤與鍵盤操作。提早分工比等交付時才要求全部修正，更容易納入原本的工作安排。

驗收要走完真實任務，並記錄失敗情況

依需求清單設計具體驗收題目：用手機找出服務地區、送出資料完整的詢問、漏填必填欄位後完成修正。每題寫下預期結果和實際結果；表單還應確認工作室端是否收到正確資料，不能只看前台顯示成功。正式金流或對外通知需使用已安排的測試方式。

再檢查不同寬度、放大文字、鍵盤操作、連結、圖片替代文字及錯誤訊息。W3C Easy Checks 適合協助初步發現問題，但明確不是完整或決定性的無障礙評估。自動檢測分數、設計稿符合及實際任務完成，可以一起參考，不能互相取代。

缺陷紀錄要能重現，例如裝置、頁面、操作、看到的結果與預期結果。把阻礙送出詢問的錯誤先修正，再處理較小的視覺差異。若有暫緩項目，就列出影響、負責人和處理安排，不用一句大致正常蓋過已知問題。

1. 訪談並整理主要任務，寫出第一版範圍與成功條件。
2. 收齊正文、素材及授權資料，用草圖和原型確認內容與流程。
3. 補齊各種操作狀態、手機規則及內容管理方式，再實作頁面。
4. 依任務驗收並修正問題，完成帳號、文件、維護責任與更新交接。

交接能維護的網站，也建立自己的學習路線

交付除了可瀏覽的網站，還應整理網域、主機、管理帳號、程式或設計原始檔、素材授權及續約事項。由誰更新服務內容、誰接收表單、故障時找誰，都應清楚記錄。密碼用合適的安全管道交接，避免長期共用同一個管理員帳號。

自行學習可先用 MDN Curriculum 的 HTML、CSS、版面及 JavaScript 基礎模組，完成一個小型服務頁，再加入無障礙和版本管理。若用視覺架站工具，也能沿用需求、內容、原型及驗收這條路線；工具降低部分製作門檻，仍需要自己確認資訊和使用體驗。

每次練習保存最初需求、設計決定、測試發現及修改原因。比起累積很多未完成的首頁，完整做過一條從閱讀到詢問的流程，更能理解網站如何服務使用者。下次新增頁面時，也能沿用已驗證的規則，並針對新的需求重新檢查。

整理委託範圍與驗收條件

從讀者任務理解網站流程

安排網站內容的產製與更新

• 教學
• 軟體與 App
• 架站與電商
• 網域、主機與前端