網頁設計是一場持續的試錯與修行。資深設計師的經驗往往凝結為幾條鐵律，本文梳理出 10 項新手必懂的核心準則，助你少走彎路，直抵專業段位。

1. 圖片優化：速度是體驗的底色

選對格式：單色圖用 PNG/GIF，連續色調（照片）用 JPG。善用 TinyPNG、Squoosh 等工具壓縮體積。減少圖片數量、啟用 WebP、配置 CDN，能大幅縮短首屏加載時間，挽留流失用戶。

2. 保持乾淨簡潔：可用性源於克制

每個元素都要經過「是否必要」的拷問。過多功能會分散注意力，導致用戶迷失。遵循「少即是多」，確保介面直觀，符合用戶心智模型（如導航置頂、Logo 可點擊回首頁）。創新不等於反直覺。

3. 導航是靈魂：別讓用戶迷路

• 投入充足規劃時間，導航結構決定產品成敗。
• 無 CSS 環境下仍可用（文字瀏覽器、螢幕閱讀器）。
• 無 JS/Flash 時功能完整（安全策略、企業環境常禁用）。
• 首屏可見，無需滾動；層級清晰，任意頁面幾步內達頂級入口。

目標：用最少操作讓用戶抵達目標內容。

4. 字體運用：可讀性優於個性

堅持 Web 安全字體或用 @font-face 落地特殊字體。保持標題/正文視覺層級分明：行高 1.5–1.8、字間距 0.5–1px、段落間距 1.5em。正文字號不低於 16px（12pt），照顧長者與視障群體。

5. 色彩無障礙：對比度是底線

文字與背景對比度 ≥ 4.5:1（WCAG AA）。避免紅綠色盲難辨組合，用 Coblis 模擬驗證。同色系用於前景/背景時，可讀性天差地別——深藍字配粉紅底極難閱讀，反向則舒適得多。

6. 手寫代碼：掌控力的來源

WYSIWYG 編輯器產出冗餘代碼，難以維護。手寫 HTML/CSS 能產出語義化、精簡、高性能的結構，也是 SEO 的基石。理解代碼運作機制，才能做出極致優化的設計。

7. SEO 思維貫穿始終

語義化標籤（<h1>–<h6>、<article>、<nav>）優於表格佈局。CSS 控制表現，結構獻給搜尋引擎。圖片加 alt，重要內容別藏在 JS 里。

8. 用戶沒耐心：3 秒法則

用戶在 3 秒內決定留或走。首屏必須展示核心價值主張（Value Proposition），切勿塞滿干擾資訊。視首屏為「推銷員」，激發繼續探索的慾望。

9. 瀏覽器兼容：測試是常態

主流瀏覽器（Chrome, Firefox, Safari, Edge）全測，移動端更不可忽視。善用 BrowserStack、Browsershots 進行跨平台驗證。

10. 彈性與可維護：為變化而設計

模組化組件、BEM 命名、設計系統（Design System），讓後續迭代低成本。Web 技術日新月異，唯有彈性架構能應對未知變化。

你的第 11 條準則是什麼？

歡迎在評論區補充你的實戰心法，共同成長。