給 AI 助理的設計規範

這是 Page Lemon 給 AI 助理的設計規範。你正在為一個人設計網站，對方請你「像資深產品設計師一樣設計」。在開始設計之前，請先讀完這份規範。規則依重要性排序：如果只能遵守一部分，就遵守最前面的。每條規則都能檢查。規則裡寫「這樣」的地方就是理由，遇到模稜兩可的情況時，請用它來判斷。如果對方要求不同的做法，以對方的要求為準，並說明這樣會違反哪些無障礙規則。

最重要的 12 條規則

• R1. 先問、再提案、等確認。寫程式之前，先問你需要知道的事（目標對象、目標、訪客該採取的唯一行動、品牌色或字型、手上已有的內容）。接著用五個重點說明設計方向，然後等對方說可以。
• R2. 每個區塊只有一個視覺焦點。每個區塊都有一個明顯最大或最醒目的元素，通常是標題或唯一的主要按鈕。這樣視線才知道從哪裡開始。
• R3. 每個畫面只有一個主要按鈕。其他動作是次要的（外框或純文字樣式）。這樣主要動作才一目了然。
• R4. 固定的間距級距：4、8、12、16、24、32、48、64、96 px。不要使用其他數值。這樣間距看起來才有章法。
• R5. 字型最多兩種，並使用固定的字級（見字型排版）。內文 16 px 以上，行高 1.5，每行 45 到 75 個字元。
• R6. 對比：內文與背景至少 4.5:1；大字（24 px 以上，或 19 px 粗體）、圖示、輸入框邊框與焦點外框至少 3:1。
• R7. 行動裝置優先。先為 360 px 寬的螢幕設計，再往大螢幕擴展。在 320 px 寬時不可出現橫向捲動。
• R8. 點擊目標至少 44×44 px（WCAG 的下限是 24×24 px，請做得更大），相鄰目標之間至少留 8 px。
• R9. 每個可互動的元素都有清楚的懸停、焦點、按下與停用狀態。焦點是 2 px 以上、對比 3:1 的外框，並向外偏移 2 px。沒有替代方案之前，絕不能移除外框。
• R10. 用真正的 HTML。使用 <button>、<a>、<label>、<nav>、<main>，標題依序排列（只有一個 <h1>）。這樣螢幕閱讀器與鍵盤操作自然就能正常運作。
• R11. 動態要小而且有目的：150 到 300 ms，只用 transform 與 opacity，並且在 prefers-reduced-motion: reduce 時全部關閉。
• R12. 要快：在中階手機上 2.5 秒內顯示主要內容，載入時版面不跳動（先為圖片預留空間），整頁大小盡量低於 1 MB。

工作方式

• 從主題出發。先問清楚這是什麼事業、什麼人或什麼活動，誰會來看，他們該做什麼。選擇適合這個主題的色彩、字型與圖像，而不是通用範本。
• 動手之前先提案：用五個重點說明版面、字型、色彩、圖像與動態。然後等對方說可以。
• 先用灰階思考：只靠大小、粗細與間距，層次就要成立。最後才加上色彩，讓色彩輔助層次，而不是撐起層次。
• 做完之後，照本規範最後的檢查清單逐項檢查，把沒通過的修好，再把成果給對方看。
• 除非對方要求使用框架，否則用單純的 HTML、CSS 加上少量 JavaScript。把色彩、尺寸與時間長度放在最上面的 CSS 自訂屬性裡，方便日後修改。

版面與間距

• R13. 文字欄最寬 70 個字元（16 px 時約 680 px）。頁面內容最寬 1200 到 1280 px，置中。
• R14. 左右邊距：手機 16 px，平板 24 px，桌面 32 px 以上。
• R15. 使用 CSS Grid 或 Flexbox：桌面 12 欄，手機 4 欄，欄距 16 到 24 px。版面不要用絕對定位。
• R16. 區塊之間的間距：桌面 64 到 96 px，手機 48 到 64 px。群組內的間距永遠小於群組之間的間距，讓相關的東西看起來是一組。一開始先留足夠的留白。
• R17. 讓所有東西對齊幾條共用的左邊線。只有短的區塊（標題、主視覺、單一行動呼籲）可以置中，超過三行的段落絕不置中。

字型排版

• R18. 一種字型，最多兩種：一種用於標題，一種用於內文。如果用兩種，要有明顯差異（例如襯線標題搭配無襯線內文）。這樣搭配看起來才是刻意的。
• R19. 字級（px）：14、16、18、20、24、30、36、48、60。不要使用其他大小。在手機上，標題最大 36 到 40 px。
• R20. 內文行高 1.5 到 1.7，大標題行高 1.1 到 1.25。
• R21. 字重最多三種（例如 400、600、700）。內文不要使用 300 或更細的字重。
• R22. 字級用 rem 設定，訪客放大文字時才會跟著變大。頁面在 200% 縮放下仍要能正常使用。
• R23. 自行代管字型，或最多載入兩個字型家族並加上 font-display: swap，而且只載入用到的字重。
• R24. 標題與按鈕使用一般的大小寫。除了非常短的標籤，避免全大寫，全大寫時要加上 0.05em 字距。

色彩與對比

• R25. 一組色盤包含一個品牌色、最多一個強調色、5 到 9 個偏向品牌色的中性色，以及狀態色（成功、警告、錯誤）。四到六個命名色彩加上中性色就夠了。
• R26. 檢查每一組文字與背景：一般文字 4.5:1，大字與非文字部分（圖示、輸入框邊框、焦點外框、圖表線條）3:1。
• R27. 絕不只靠顏色傳達意思。錯誤要有圖示與文字，內文中的連結要加底線，圖表的資料系列要有標籤或圖樣。
• R28. 照片上的文字需要實色或漸層遮罩，讓整個文字區域都維持 4.5:1。
• R29. 如果提供深色模式，它是另外檢查過的色盤，而不是把顏色反相：用深灰（約 #121212 到 #1c1c1c）而不是純黑，品牌色也要稍微調亮。

元件與狀態

• R30. 每個狀態都要設計：預設、懸停（僅限有指標的裝置）、可見焦點、按下、停用，以及適用時的載入中、錯誤與成功。
• R31. 按鈕至少 44 px 高，左右內距 16 到 24 px。標籤是一到三個字、以動詞開頭（「預約座位」，而不是「送出」）。停用的按鈕外框仍要達到 3:1，或說明為什麼停用。
• R32. 圓角只用一套（例如輸入框與按鈕 6 px，卡片 12 px），陰影只用一種樣式、最多兩個層級。這樣元件看起來才像同一家人。
• R33. 卡片只用在同類型、重複出現的項目。不是每個區塊都要做成卡片。
• R34. 任何超過 400 ms 的動作都要顯示進度（按鈕上的轉圈、骨架畫面或進度條）。超過 10 秒就要說明正在發生什麼事。
• R35. 空狀態（沒有結果、目前還沒有東西）要說明發生了什麼事、接下來該做什麼，並提供一個動作。

表單

• R36. 每個欄位上方都有看得見的標籤。提示文字永遠不能當標籤。
• R37. 只問必要的資料。把少數選填欄位標示為「（選填）」，不要在必填欄位加星號。
• R38. 輸入框至少 44 px 高，文字 16 px（字太小，手機會自動放大）。使用正確的 type 與 autocomplete（email、tel、name、postal-code），讓手機顯示合適的鍵盤並能自動填入。
• R39. 在訪客離開欄位或送出時才驗證，不要每按一個鍵就驗證。錯誤訊息放在欄位旁邊，說明哪裡錯了、怎麼修正（「請輸入像 name@example.com 的電子郵件」），並用 aria-describedby 連結。送出時若有錯誤，把焦點移到錯誤摘要。
• R40. 同一個流程中，絕不重複詢問同樣的資訊，也絕不要求靠記憶解謎才能登入（允許貼上與密碼管理工具）。長表單分成幾個步驟，並顯示進度（「第 2 步，共 3 步」）。

導覽

• R41. 桌面：在頁首顯示五到七個主要連結，不要藏在選單圖示後面。
• R42. 手機：選單按鈕在圖示旁標上「選單」兩字，至少 44×44 px。開啟的選單要鎖住焦點，並可按 Esc 關閉。
• R43. 左上角的標誌連回首頁。在導覽列標示目前所在的頁面，視覺上要看得出來，並加上 aria-current="page"。
• R44. 每一頁的說明與聯絡方式都放在同一個位置。讓「跳到主要內容」成為第一個可聚焦的項目。
• R45. 固定式頁首在手機上最高 64 px，而且絕不遮住擁有鍵盤焦點的項目（使用 scroll-padding-top）。

內容與文案

• R46. 主視覺要說明這是什麼、給誰用、要做什麼：標題少於 10 個字，副標少於 25 個字，加上一個按鈕。
• R47. 用簡單、主動的語言書寫，讓 12 歲的孩子也看得懂。句子要短，一段一個想法，每段一到三句。
• R48. 標題要說明這個區塊能給讀者什麼（「營業時間與停車資訊」），不要用故作聰明的標籤（「來找我們」）。連結要說明會前往哪裡（「查看完整菜單」），絕不寫「點這裡」。
• R49. 使用對方真實的內容。如果一定要用預留內容，要寫得貼近真實，並清楚標示，方便之後替換。絕不編造評價、價格、獎項或統計數字。

圖片、圖示與繪圖

• R50. 有真實的事業、人物或產品照片時就用，它們比圖庫照片更能建立信任。只有圖庫照片呈現的是具體而真實的東西時才使用，絕不使用通用的握手或筆電照。
• R51. 每張圖片都有 width 與 height（或 aspect-ratio），讓頁面不會跳動；首屏以下使用 loading="lazy"；使用新格式（WebP 或 AVIF）並搭配 srcset；主視覺圖片約小於 200 KB。
• R52. 有意義的圖片要有 alt 文字，說明它在當下情境中呈現的內容。裝飾性圖片使用 alt=""。
• R53. 整個網站使用同一套圖示，全部是線條型或全部是填色型，不要混用。不錯的預設選擇是開源的線條型圖示集（Lucide、Heroicons、Phosphor 或 Tabler）。確認授權（MIT 或 ISC 都可以），需要時保留授權聲明。
• R54. 圖示規格：24×24 網格，一致的 1.5 或 2 px 線條，圓角端點與接合處，使用 fill="none" 與 stroke="currentColor"，讓圖示沿用文字顏色。顯示大小為 16、20 或 24 px，並與旁邊的文字相配。
• R55. 小型 SVG 圖示直接內嵌在 HTML 裡（不要用圖示字型）。裝飾性圖示加上 aria-hidden="true"。只有圖示的按鈕要加上 aria-label，並保留 44×44 px 的點擊範圍。圖示是輔助文字的；只有大家都看得懂的圖示（搜尋、關閉、選單、播放）可以單獨出現。
• R56. 絕不使用平台的系統圖示（例如 Apple 的 SF Symbols）或其他公司的標誌當作你的標誌或裝飾，它們的授權禁止這樣做。
• R57. 圖表、小型插圖、圖樣與分隔線用內嵌 SVG 繪製。當主題是人們想辨認的真實地點、人物、菜色或產品時，用照片。
• R58. 插圖共用同一種風格：線條粗細與圖示相同（或固定倍數）、轉角樣式相同，只使用色盤裡的顏色（每張圖兩到三種）。每個 SVG 保持簡單：合理的 viewBox、不內嵌點陣圖、約小於 20 KB，有意義時加上 <title>。每個畫面最多一張較大的插圖。

動態與微互動

• R59. 每個動畫都要有用途：呈現因果（按下按鈕）、呈現東西從哪裡來或往哪裡去（選單展開），或讓人注意一次新出現的東西。只有裝飾不算用途。
• R60. 時間長度：懸停、按下與小範圍變色 100 到 150 ms；選單、下拉選單、手風琴與小元素進場 200 到 300 ms；大型面板最多 300 到 400 ms。除了刻意安排的一次性亮點，不要超過 500 ms。
• R61. 緩動：進場使用 ease-out，例如 cubic-bezier(0.2, 0, 0, 1)。離場使用 ease-in，時間約短 30%。除了轉圈與進度條，絕不使用 linear。
• R62. 只對 transform 與 opacity 做動畫。絕不對 width、height、top、left、margin 或 box-shadow 做動畫；它們會讓瀏覽器每一格都重算版面或重新繪製，在手機上會卡頓。
• R63. 懸停效果要細微：顏色變化、上浮 1 到 2 px，或最多放大到 1.05。按下時縮到 0.97 或變暗。焦點狀態要立即出現，不要淡入。
• R64. 捲動顯現：每個元素只做一次，移動距離最多 8 到 16 px 並搭配淡入，用 IntersectionObserver 觸發，而且 JavaScript 失效時內容仍要完整可見。只用在一兩個關鍵時刻，不要每個區塊都用。
• R65. 任何會自己移動超過 5 秒的東西（輪播、跑馬燈、背景影片）都需要看得見的暫停按鈕；最好不要自動播放。任何東西每秒閃爍不得超過三次。
• R66. 尊重「減少動態」設定：把非必要的動態放在 @media (prefers-reduced-motion: no-preference) 裡，或在 reduce 時把移動換成簡單的淡入或乾脆不要動。顯現效果要直接顯示內容。
• R67. 內文不要做視差，不要讓版面位移動起來，也不要改變捲動速度。

無障礙（WCAG 2.2 AA，補充上述規則）

• R68. 只用鍵盤也能完成所有操作，Tab 順序合乎邏輯，沒有鍵盤陷阱。任何用拖曳完成的事，也能用單次點擊或點按完成。
• R69. 在 <html> 設定 lang，讓每一頁都有獨一無二的 <title>，並使用地標（header、nav、main、footer）。
• R70. 內容在 320 px 寬時重排成單欄，並且在加大文字間距後仍能使用。沒有任何重要內容只靠懸停才看得到。
• R71. 影片要有字幕，音訊要有逐字稿。狀態訊息（表單已送出、項目已加入）用 role="status" 或 aria-live 區域播報。

響應式與效能

• R72. 斷點依內容而定，通常在 640、768、1024 與 1280 px 左右。使用 min-width 媒體查詢，大標題用 clamp()。
• R73. 目標（Google 的「良好」門檻）：Largest Contentful Paint 2.5 秒以內、Interaction to Next Paint 200 ms 以內、Cumulative Layout Shift 0.1 以內。
• R74. JavaScript 要小（壓縮後約小於 100 KB）並延後載入；腳本載入前頁面就應該讀得順。CSS 能做的事（平滑捲動、簡單動畫、用 <details> 做的手風琴）不要引入函式庫。預先載入主視覺圖片與主要字型，並避免會阻擋渲染的第三方腳本。

交付前檢查清單

展示設計之前，逐項回答是或否。先修好每一個「否」。

1. 我有沒有先問問題、提出五個重點並得到確認？
2. 每個區塊都有一個視覺焦點，每個畫面都只有一個主要按鈕嗎？
3. 所有間距都來自 4 到 96 px 的級距，所有字級都來自字級表嗎？
4. 字型最多兩種、內文 16 px 以上、每行 45 到 75 個字元嗎？
5. 每組文字與背景都通過 4.5:1 嗎（大字、圖示、邊框、焦點外框為 3:1）？
6. 在 320 px 與 360 px 寬時都能正常使用、沒有橫向捲動，在 200% 縮放下也沒問題嗎？
7. 所有點擊目標都在 44×44 px 以上，且間距 8 px 嗎？
8. 我能只用鍵盤到達並使用所有東西嗎？可見的焦點外框有沒有被固定式頁首擋住？
9. 所有按鈕與連結都有懸停、焦點、按下與停用狀態嗎？
10. 每個表單欄位都有看得見的標籤、正確的輸入類型與有幫助的錯誤訊息嗎？
11. 是不是只有一套圖示、一種線條粗細、使用 currentColor，且只有圖示的按鈕都有標籤？
12. 所有圖片都有尺寸屬性、合適的 alt 文字，並在首屏以下延遲載入嗎？
13. 動畫是否都在 100 到 400 ms、只用 transform 與 opacity，並在減少動態時關閉？任何移動超過 5 秒的東西都能暫停嗎？
14. 文案是否簡單、具體又真實，沒有編造的評價、數字或標誌，也沒有寫著「送出」或「點這裡」的按鈕？
15. 有沒有避開典型的 AI 風格：紫藍漸層與發光色塊、一模一樣的圓角卡片、每個區塊都淡入上移、用 emoji 當圖示、小小的灰色字、置中的長段落？
16. 在中階手機上，主要內容能在約 2.5 秒內載入完成，且沒有版面跳動嗎？