網頁設計驗收怎麼做？上線前 18 項檢查與網站交接清單

網頁設計公司傳來預覽網址，首頁看起來很漂亮，按鈕與動畫也都有。你說了一句「可以上線了」，幾天後才發現：手機版表單送不出去、商品付款後沒有通知，或網站管理員帳號根本還在廠商手裡。

這些問題往往不是設計師故意漏做，而是雙方對「完成」的理解不同。有人只檢查畫面，有人只測試功能，網站真正要服務的顧客卻可能在使用途中卡住。

因此，網站上線前應安排一次網頁設計驗收。這篇提供 18 個具體檢查項目、測試方法、驗收紀錄表與交接清單，適合企業官網、個人品牌、WordPress 網站及線上課程網站使用。

網頁設計驗收是什麼？為什麼不能只看首頁漂亮嗎？

網頁設計驗收不是重新討論喜歡哪種顏色，而是確認已約定的頁面和功能是否確實完成。應先拿出需求清單、報價單與合約，對照每一項交付內容，再用實際使用情境測試。

例如一個企業官網的主要目標是讓訪客了解服務並提交詢問。驗收時就需要確認服務內容看得懂、手機操作正常、聯絡表單能成功送出，而且負責人真的收到通知。

如果是販售線上課程的網站，除了畫面，還要測試購買、付款、學員登入、教材權限和售後通知。這些功能涉及不同的使用者狀態，應分別確認。

開始前最好先定義驗收條件：需要哪些頁面、支援哪些裝置、哪些交易要能完成，以及哪些問題必須在上線前修正。網站能展示，不代表已經能正常營運。

網頁設計驗收的第一步：先整理測試環境與角色

如果只有網站負責人用自己的電腦看了一次，測試範圍很有限。建議安排不同角色實際操作：第一次來訪的陌生訪客、填寫表單的潛在客戶、已購買產品的會員，以及網站內容管理員。

至少要準備桌機與手機，使用常見瀏覽器測試主要頁面。若有會員或電商功能，再準備未登入、已登入、不同購買權限的測試帳號，確認每種人看到的內容符合預期。

此外，請在測試紀錄註明網址、日期、裝置、瀏覽器、測試身分與操作步驟。同樣的問題若能被重現，設計或技術人員就能更快找出原因。

網頁設計驗收清單：18 個上線前必查項目

以下將 18 項檢查分成六組，每組都能直接轉成網站的驗收表。對沒有會員或購物車的形象網站，可以標記「不適用」，避免為了填滿清單而增加多餘功能。

第一組：網站內容與視覺（項目 1～3）

1. 頁面與文字內容正確：核對首頁、關於我們、服務頁、常見問題、聯絡頁，以及價格、電話、公司資訊是否為正式版本。
2. 圖片與品牌風格一致：確認 Logo、色彩、字級、按鈕、圖片裁切及圖像使用權，避免正式上線後仍留下測試圖或範本文案。
3. 導覽與連結正常：逐一點選選單、頁尾、內部連結及主要按鈕，確認會到正確的目的地，沒有空白頁或失效網址。

這組常被忽略的細節是「文字和頁面是否對應」。例如首頁寫有免費教學，點進去卻是已結束的活動頁，訪客就會失去方向。驗收可以把使用者的下一步當作測試重點。

第二組：手機版與無障礙（項目 4～6）

4. 手機版可閱讀與操作：檢查文字大小、區塊順序、圖片顯示及橫向捲動問題，不只是把桌機畫面縮小。
5. 表單與按鈕容易點選：確認欄位標籤清楚、鍵盤輸入正常、送出結果明確，避免重要按鈕被浮動視窗擋住。
6. 基本無障礙體驗：檢查文字與背景辨識度、圖片替代文字、鍵盤操作及欄位錯誤提示；需求較高時依 WCAG 2.2 規範進行專業檢測。

Google 的行動版優先索引說明，搜尋系統主要使用網站的手機版內容理解頁面，並建議使用響應式設計。桌機和手機的重要文字、標題與內容應保持一致，而不是把重要說明直接從手機版刪除。

W3C 的網頁無障礙指南則強調內容應可被感知、操作、理解並維持技術相容。自動檢測工具很有幫助，但鍵盤操作、錯誤訊息是否清楚，仍需要人工測試。

第三組：表單、結帳與會員功能（項目 7～9）

7. 表單確實完成提交：測試必填欄位、錯誤訊息、成功頁與通知信，確認資料有存入預定系統，管理員也收到正確資訊。
8. 付款及訂單流程正常：如果網站有收款，使用金流商提供的測試機制檢查成功與失敗交易、商品金額、訂單狀態及通知。
9. 會員與內容權限正確：模擬新會員、已購買學員與未購買訪客，確認登入、密碼重設及課程內容權限符合約定。

以線上課程網站為例，付款完成後的確認畫面，應讓學員清楚知道如何找到已購課程。若學員收到訂單通知，卻沒有課程存取權限，對方還是無法開始學習。

涉及金流時，要依服務商提供的正式測試方式操作，避免用真實個資或不必要的正式交易反覆測試。需要測退款與定期扣款的網站，也應在需求規格中先約定測試範圍。

第四組：SEO、速度與搜尋設定（項目 10～12）

10. 主要 SEO 欄位正確：確認各頁標題、摘要、H1、網址結構與必要的圖片說明，避免複製頁面後留下相同標題。
11. 搜尋索引與轉址已核對：正式網站應確認 robots 設定、noindex、網站地圖與重要舊網址的轉址需求，避免搬遷後讓原有連結失效。
12. 網站效能可接受：檢查重要頁面載入、圖片及影片大小、按鈕反應與畫面穩定度，必要時使用 PageSpeed Insights 與實際裝置測試。

Google 的 SEO 入門指南強調，網站結構與內容要有助於使用者和搜尋引擎理解；SEO 設定是網站基礎，並沒有保證排名的神奇按鈕。

網站體驗核心指標 Core Web Vitals 可輔助檢查三個面向：LCP 衡量載入、INP 衡量互動回應、CLS 衡量版面穩定。Google 建議的良好門檻分別為 2.5 秒內、200 毫秒以內及 0.1 以下，應以實際使用者資料的相應統計方式判讀，不能只依單次測試決定網站是否合格。

第五組：安全、備份與隱私（項目 13～15）

13. HTTPS 與管理權限正常：確認網站加密連線、必要的管理員帳號、權限分工與登入保護，移除無需繼續使用的測試帳號。
14. 備份和更新流程明確：確認備份位置、頻率、保留期限與還原負責人；必要時安排一次受控的還原驗證。
15. 隱私與資料處理說明完整：依網站實際蒐集的聯絡資料、分析工具及第三方服務，確認適用的隱私告知、同意與資料管理方式。

如果網站由外部廠商代管，還要確認誰負責處理故障與安全更新、發生問題如何聯絡、多久回覆，以及是否提供備份。這些交代清楚，網站營運才有可持續的安排。

第六組：後台操作、交接與上線（項目 16～18）

16. 內容能自行管理：實際登入後台，試著修改一段文字、新增文章或更新圖片，確認權限與操作教學足夠。
17. 帳號及資料交接完成：核對網域、主機、網站管理員、外掛或平台授權、備份與網站資料的控制權，確認合約約定的移轉條件。
18. 上線檢查與保固有紀錄：確認正式網域、SSL、通知、網站分析與主要流程，留下尚待修正項目及保固聯絡方式。

有些服務採雲端平台代管，並沒有提供全部程式原始碼的交付方式；有些則可以移交完整網站檔案。實際驗收以事前合約和平台能力為準，但至少應清楚知道哪些資料能匯出、哪個帳號歸誰管理。

網頁設計驗收紀錄表怎麼寫？用具體結果代替「看起來正常」

驗收表不需要複雜，但每一項都要能讓雙方確認：測過哪個頁面、操作步驟是什麼、結果如何，以及誰負責修正。下面提供一份可直接套用的範例。

表格中的「待測」只是範例狀態，不能視為已通過。如果發現錯誤，請記錄實際重現步驟、畫面或必要的錯誤資訊，修正後再重新測試同一流程。

網站驗收發現問題，哪些應該先修？

不是每個問題的影響都一樣。假如只是某段文字的行距稍有差異，通常可以排入版面微調；但付款錯誤、會員權限異常、聯絡資料無法送達，則可能直接妨礙網站提供服務。

可以把問題分成三種：阻止上線，例如付款或登入失敗；上線前建議完成，例如手機版部分操作不順；可安排後續優化，例如次要視覺細節。分類應由實際業務風險和合約標準決定，並由雙方確認。

與設計公司討論修正時，描述「在哪個頁面、做了什麼操作、出現什麼結果」，比單純說「網站怪怪的」更容易得到有效回覆。

網站設計公司驗收時，應該提供哪些交接資料？

委外建站的最後一步，是讓經營者知道如何管理與維護網站。常見交接資料包含網站管理員帳號、網域和主機資訊、備份方式、付費授權清單、後台使用指引，以及問題聯絡窗口。

若雙方約定網站由業主自行管理，也可以要求示範如何新增文章、修改頁面、查看表單資料與確認備份。若採代管方式，則應明確知道哪些事由服務商處理，哪些變更要另外報價。

對準備換網站服務商的經營者，資料可否移轉也很重要。網站檔案、資料庫、媒體檔、會員和訂單資料的匯出方式各有不同，搬遷前要先確認權利與技術限制。

線上課程網站驗收，還要多測哪些情境？

課程網站除了品牌介紹與報名，還有購買後的服務交付。建議至少用一組測試帳號走完「選課、結帳、登入、開課、下載教材或完成作業」的路線。

例如學員買了一門錄播課，系統應依商品權限顯示課程；學員忘記密碼，應能依網站設定恢復登入；手機觀看影片時，也要確認字幕、播放器和下一堂課的入口容易找到。

如果網站還有訂閱、分期或不同課程組合，要根據已約定的付款條件測試權限變化。需要更多課程站細節，可以延伸閱讀線上課程網站設計要注意的九個重點。

網頁設計完成後，要如何持續維護？

通過驗收代表已經達到約定的上線條件，網站仍需要後續管理。建議定期檢查網址與網域續約、主機使用情況、系統更新、備份、表單通知，以及內容是否需要調整。

若有 SEO 與內容行銷，還可以追蹤搜尋曝光和進站後的互動，再決定哪個頁面需要改進。網站分析資料與真實訂單、客服問題互相搭配，通常比只看瀏覽量更接近營運現況。

網站規劃本身也會影響驗收項目。若正在建第一個官網，可先參考網站規劃的五個重點與頁面架構，在簽約前就整理必要功能與交付標準。

網頁設計驗收常見問題

網頁設計驗收一定要由工程師完成嗎？

使用者最在意的內容、操作及主要流程，可以由網站負責人實際測試；程式、主機、安全與效能問題則適合交由技術人員檢查。雙方合作能讓驗收更完整。

網站驗收應該在正式上線前，還是上線後？

大部分關鍵功能適合先在預覽或測試環境驗證。正式上線後，仍須在實際網域再次檢查 HTTPS、通知、轉址、分析工具和主要流程。

網站驗收可以只看手機版嗎？

手機版很重要，仍應依客群需要檢查桌機、常用瀏覽器與輔助操作方式。重要內容應在不同畫面維持完整、可閱讀且可操作。

網站有 SEO 外掛，就算完成 SEO 驗收嗎？

SEO 外掛只是管理部分設定的工具。仍要確認標題、網址、索引、內部連結、頁面內容與重要轉址，並了解 SEO 無法保證特定排名。

委外網站設計完成後，帳號應該由誰持有？

由合約和平台服務條款決定。經營者應確認網域、主機、管理員帳號及資料存取權限如何安排，並清楚知道換廠商時能移轉哪些資料。

網站驗收發現問題，是否一定要重新付費？

要看問題是否屬於原本約定的規格、保固或新增需求。建議依合約和驗收紀錄逐項確認，必要時將追加工作與費用另行書面說明。

結論：網頁設計驗收，要讓網站真正能被使用與管理

網頁設計完成後，請用真實訪客的角度檢查內容、手機操作、表單、付款及會員流程，再確認 SEO、速度、安全、備份與網站交接。

驗收清單的價值，在於把「我覺得做好了」改成雙方可以查核的結果。每次發現問題就記下重現步驟，修正後重新測試，最後確認管理帳號和維護責任。這樣才能讓網站從漂亮的預覽畫面，成為可以安心經營的工具。

參考資料

Google 搜尋中心｜搜尋引擎最佳化（SEO）入門指南｜2026年查閱
Google 搜尋中心｜行動版優先索引最佳做法｜2026年查閱
W3C Web Accessibility Initiative｜WCAG 2 Overview｜2026年查閱
web.dev｜Web Vitals｜2026年查閱