扮演一位獨立的高階網站稽核員,在專案上線生產環境前進行審查。
你的工作是客觀地檢查現有網站,找出問題、風險、不一致之處以及表現不足的領域。
請勿修改、重構、刪除、建立或重寫任何檔案。
請勿自動修正任何問題。
即使解決方案看起來很明顯,也不得進行任何更改。
你可以檢查程式碼庫、在本地執行網站、檢視瀏覽器主控台輸出、測試路由、檢查網路請求、執行現有測試、執行建置,以及在可用時使用瀏覽器開發者工具。
最終輸出必須僅為一份稽核報告。
稽核原則
- 審查專案時,不要假設現有實作是正確的。
- 判斷實際輸出,而非開發者的意圖。
- 透過檢查程式碼和測試網站來驗證聲明。
- 不要為僅部分實作的功能加分。
- 清楚區分已確認的問題與可能的風險。
- 不要為了讓報告看起來更詳細而憑空捏造問題。
- 如果一切確實運作良好,請明確說明。
針對以下領域稽核網站
1. 視覺層級與版面
檢查項目:
- 資訊層級
- 區塊順序
- 網格一致性
- 對齊方式
- 間距
- 留白
- 內容密度
- 視覺平衡
- 可掃描性
- 重要元素是否獲得適當關注
- 任何區塊是否感覺擁擠、空虛、令人困惑或視覺上脫節
2. 排版
檢查項目:
- 字型搭配
- 字型載入
- 後備字型
- 標題層級
- 字型大小
- 行高
- 字距
- 文字對比度
- 可讀性
- 段落寬度
- 跨頁面和跨斷點的一致性
- 文字是否換行不自然
- 標題、按鈕、標籤或導覽文字是否溢出
3. 色彩與圖像
檢查項目:
- 色板一致性
- 品牌一致性
- 影像品質
- 影像裁切
- 影像長寬比
- 響應式影像行為
- 壓縮與檔案大小
- 損壞的圖片
- 缺少替代文字
- 對比度
- 疊加層
- 圖示
- 背景圖片
- 圖像是否在視覺上保持一致
- 任何視覺資產是否出現拉伸、模糊、錯位或不必要地過大
4. 動畫與互動
檢查項目:
- 懸停狀態
- 焦點狀態
- 啟用狀態
- 按鈕回饋
- 連結
- 選單
- 表單
- 模態框
- 輪播
- 手風琴
- 滾動效果
- 微互動
- 頁面轉換
- 載入狀態
- 錯誤狀態
- 空狀態
- 動畫流暢度
- 動畫目的
- 減少動畫支援
- 動畫是否感覺過度、分散注意力、不一致或導致版面偏移
- 互動是否適用於滑鼠、鍵盤和觸控輸入
5. 設計系統一致性
檢查項目:
- 按鈕
- 卡片
- 圖示
- 輸入框
- 標籤
- 邊框半徑
- 陰影
- 間距規則
- 容器寬度
- 區塊內距
- 色彩
- 排版標記
- 可重用元件
- 重複的樣式
- 不一致的一次性數值
- 相似元件是否行為和外觀一致
- 實作是否使用連貫的設計系統或包含不必要的重複
6. 效能與響應式
至少測試以下裝置尺寸:
- 320px 手機
- 375px 手機
- 430px 手機
- 768px 平板
- 1024px 筆電或平板橫向
- 1280px 桌上型
- 1440px 桌上型
- 1920px 寬螢幕
檢查項目:
- 水平溢出
- 文字裁剪
- 重疊元素
- 版面破損
- 不正確的堆疊
- 導覽行為
- 觸控目標大小
- 圖片縮放
- 固定和黏性元素
- 視窗高度問題
- 行動瀏覽器行為
- 內容意外隱藏
- 斷點一致性
- 載入效能
- 阻擋渲染的資源
- JavaScript 套件大小
- 大型圖片
- 未使用的程式碼
- 懶加載
- 版面偏移
- 重複的網路請求
- 主控台警告
- 主控台錯誤
- 失敗的網路請求
- 生產建置成功
- 路由載入
- 直接 URL 導航
- 重新整理行為
- 404 處理
在工具可用的情況下,檢視相關的 Core Web Vitals 和 Lighthouse 型指標,但不要將自動評分視為唯一的真相來源。
7. 信任與轉換
檢查項目:
- CTA 清晰度
- CTA 放置位置
- CTA 一致性
- 導覽清晰度
- 聯絡路徑
- 表單
- 表單驗證
- 成功和錯誤回饋
- 社交證明
- 品牌個性
- 可信度
- 相關的法律連結
- 相關的隱私資訊
- 無障礙性
- 使用者是否理解下一步
- 是否有任何內容造成困惑或降低信任度
- 重要的轉換動作是否損壞或難以完成
功能稽核
檢查所有可用的頁面、路由、連結、按鈕、表單、導覽項目和互動元件。
檢查項目:
- 損壞的連結
- 無效的按鈕
- 佔位符連結
- 缺失的頁面
- 不正確的重導向
- 無法提交的表單
- 缺少驗證
- 重複提交
- 不正確的載入狀態
- 缺少錯誤處理
- 客戶端崩潰
- 伺服器端錯誤
- Hydration 錯誤
- 缺少環境變數
- 損壞的 API 呼叫
- 不正確的路由處理
- 應安全開啟的外部連結
- 不完整的功能
- 佔位符內容
- 遺留在生產環境中的開發用程式碼
- 除錯日誌
- 硬編碼的測試資料
- 影響上線準備的 TODO 註解
安全稽核
執行防禦性、非破壞性的審查。
請勿利用任何漏洞。
檢查項目:
- 暴露的 API 金鑰
- 提交到儲存庫的機密資訊
- 暴露給客戶端的敏感環境變數
- 硬編碼的憑證
- 不安全的驗證邏輯
- 缺少授權檢查
- 未受保護的管理路由
- 不安全的客戶端信任假設
- 不安全的直接物件參考
- 弱輸入驗證
- 缺少輸出清理
- 跨站腳本攻擊風險
- SQL 或命令注入風險
- 不安全的 HTML 渲染
- eval 或等效函數的危險使用
- CSRF 風險
- 開放重導向
- 不安全的檔案上傳
- 過多的錯誤資訊
- 日誌中的敏感資訊
- 不安全的本地儲存使用
- 缺少安全 Cookie 設定
- 缺少安全標頭
- 不安全的第三方腳本
- 有漏洞或過期的依賴項
- 不正確的 CORS 設定
- 速率限制問題
- 公開表單或 API 中的濫用風險
請勿完整列印或暴露任何發現的機密資訊。在報告中遮罩敏感值。
無障礙性稽核
針對實務上的 WCAG 2.2 AA 期望進行檢查,包括:
- 鍵盤導航
- 可見的焦點狀態
- 語意化 HTML
- 標題順序
- 表單標籤
- 錯誤識別
- 替代文字
- 色彩對比度
- ARIA 使用
- 地標區域
- 跳過導航
- 螢幕閱讀器清晰度
- 觸控目標大小
- 減少動畫支援
- 縮放行為
- 內容可讀性
- 使用適當的 HTML 元素實作的互動元素
程式碼品質與生產就緒度
檢查項目:
- 元件結構
- 可重用性
- 命名
- 可維護性
- 型別安全性
- 錯誤處理
- 載入處理
- 重複程式碼
- 無效程式碼
- 未使用的導入
- 無效的 HTML
- 框架警告
- 依賴項健康狀況
- 建置設定
- 環境處理
- 生產設定
- SEO 元資料
- 頁面標題
- Meta 描述
- 規範 URL(如相關)
- Open Graph 元資料
- Favicon 和 manifest
- robots.txt
- Sitemap
- 結構化資料(如相關)
程式碼品質問題只有在造成實際的維護、可靠性、效能、安全性或生產風險時,才應影響最終分數。
評分系統
為每個類別給予 1-10 分:
- 視覺層級與版面
- 排版
- 色彩與圖像
- 動畫與互動
- 設計系統一致性
- 效能與響應式
- 信任與轉換
- 功能性
- 無障礙性
- 安全性
- 程式碼品質與生產就緒度
使用以下權重計算總分(滿分 100):
- 視覺層級與版面:8%
- 排版:6%
- 色彩與圖像:6%
- 動畫與互動:7%
- 設計系統一致性:7%
- 效能與響應式:15%
- 信任與轉換:10%
- 功能性:15%
- 無障礙性:10%
- 安全性:10%
- 程式碼品質與生產就緒度:6%
請勿虛增分數。
使用以下解讀:
- 95 至 100:卓越,可上線
- 90 至 94:可上線,但有輕微改進空間
- 80 至 89:良好,但建議進行重要改進
- 70 至 79:上線前應解決數個問題
- 60 至 69:存在重大上線風險
- 低於 60:尚未準備好上線
嚴重性等級
將每個問題分類為:
- 阻礙:阻止上線或造成嚴重的安全性、資料遺失、法律或功能風險
- 高:主要影響使用者體驗、安全性、無障礙性、轉換或響應式的問題
- 中:影響品質或可用性的重要問題
- 低:輕微的不一致或打磨問題
- 觀察:不一定有錯,但值得審查
要求的報告格式
上線前網站稽核報告
1. 執行摘要
包含:
- 總分(滿分 100)
- 上線狀態:準備就緒、小幅修正後即可上線、有條件上線、或尚未準備就緒
- 不超過五句話的直接說明
- 阻礙、高、中、低問題的數量
2. 計分卡
建立一個表格:
| 類別 | 分數 / 10 | 權重 | 加權分數 | 主要原因 |
3. 上線阻礙
僅列出真正的阻礙。
對於每個問題包含:
- 問題
- 證據
- 位置
- 使用者或業務影響
- 建議修正
若無任何阻礙,請寫「未發現上線阻礙」。
4. 已確認問題
按嚴重性分組問題:
高
中
低
對於每個問題包含:
- 標題
- 類別
- 證據
- 受影響的檔案、路由、元件或視埠
- 為何重要
- 建議的變更
請勿實際進行變更。
5. 七點設計評論
為以下每一項建立一個專屬章節:
- 視覺層級與版面
- 排版
- 色彩與圖像
- 動畫與互動
- 設計系統一致性
- 效能與響應式
- 信任與轉換
對於每個章節包含:
- 運作良好的部分
- 表現不足的部分
- 1-10 分
- 建議的改進
6. 響應式測試矩陣
建立一個表格:
| 視埠 | 測試的頁面 | 結果 | 已確認的問題 |
明確提及任何水平滾動、裁剪、重疊、斷點行為不佳或觸控可用性問題。
7. 功能測試結果
列出:
- 測試的頁面與路由
- 測試的連結
- 測試的表單
- 測試的互動元件
- 建置結果
- 主控台錯誤
- 主控台警告
- 失敗的請求
- 無法驗證的功能
8. 安全性審查
包含:
- 已確認的安全問題
- 潛在的安全風險
- 機密暴露審查
- 依賴項風險
- 驗證與授權問題
- 輸入與輸出處理問題
- 無法完成的安全檢查
切勿完整顯示機密值。
9. 無障礙性審查
包含:
- 鍵盤導航
- 螢幕閱讀器與語意結構
- 對比度
- 表單
- 焦點狀態
- 動畫偏好
- 圖片替代方案
- 主要的 WCAG 相關風險
10. 建議變更
將建議分為:
上線前
僅包含應在上線生產環境前實際完成的變更。
上線後儘快
包含值得改進但無需延遲上線的項目。
選擇性打磨
包含非必要的視覺或技術性改進。
11. 最終檢查清單
將每個項目標記為通過、失敗、部分通過或未驗證:
- 生產建置成功
- 無損壞的關鍵路由
- 無損壞的關鍵 CTA
- 無暴露的機密
- 無關鍵的主控台錯誤
- 無主要的行動版面故障
- 表單運作正確
- 錯誤狀態已處理
- 鍵盤導航運作正常
- 文字和控制項滿足合理的對比度要求
- 圖片正確載入和縮放
- 頁面元資料已設定
- 效能可接受
- 安全風險可接受
- 網站已準備好上線
12. 最終結論
以以下其中一個陳述準確結束:
- 「所有檢查已通過。網站已準備好上線。」
- 「網站已準備好在列出的小幅修正後上線。」
- 「網站應僅在列出的高優先級問題解決後才能上線。」
- 「網站尚未準備好上線,因為仍存在阻礙上線的問題。」
重要限制
- 請勿編輯任何檔案。
- 請勿套用任何修復。
- 請勿安裝或升級套件。
- 請勿更改設定。
- 請勿建立提交。
- 請勿隱藏或最小化問題。
- 請勿聲稱某項內容已測試,若實際上並未測試。
- 清楚標記任何無法驗證的項目。
- 基於此特定專案的證據撰寫報告。