法則一：重複 —— 建立視覺節奏與品牌記憶

跨頁面重複：字體體系、色彩語義、間距刻度、圓角半徑、陰影層級、導航結構、Footer結構。
效用： 降低認知負荷、建立肌肉記憶、強化品牌識別。
實踐： 設計令牌 + 組件庫 強制統一。

法則二：對比 —— 引導視覺流向，建立層級

• 尺寸對比： 標題 >> 正文 >> 輔助文字
• 粗細對比： Bold (600-700) vs Regular (400) vs Light (300)
• 色彩對比： 主色 vs 中性色、高飽和 vs 低飽和、冷 vs 暖
• 空間對比： 密集信息區 vs 大面積留白呼吸區
• 形狀對比： 圓角卡片 vs 直角輸入框、圓形頭像 vs 方形縮略圖

核心： 重要信息高對比，次要信息低對比，干擾信息最低對比。

法則三：留白 —— 不是空間浪費，是認知緩衝

• 宏觀留白：模塊間距 (8px基準倍數: 24/32/48/64/80/96px)
• 微觀留白：行高 (1.5-1.75)、字間距 (0.02-0.05em)、內邊距 (12/16/24px)
• 視覺分組：親密性原理 —— 相關元素聚合，組間留白 > 組內留白

法則四：簡約 —— 每個像素都要為轉化負責

• 拒絕為炫技而炫技：無意義動畫、裝飾性圖標、純展示性插圖
• 拒絕插件依賴：Flash/Unity/Java Applet 時代已終結
• 聚焦核心任務：刪減不服務於「用戶目標」與「業務指標」的一切元素
• 信息架構扁平化：點擊深度 ≤ 3層 (尼爾森三次點擊法則)

法則五：控制滾動 —— 關鍵內容首屏見，長頁提供錨點

• 用戶掃視首屏決策 3 秒：無關 → 關閉
• 長頁必備：右側/頂部 錨點導航 / 返回頂部 / 進度指示器
• 懶加載非首屏資源：圖片/視頻/三方腳本 loading="lazy"

法則六：拒絕閃爍與干擾 —— 尊重注意力稀缺性

• <blink> / text-decoration: blink / 無限循環 GIF / 自動播放有聲視頻 → 絕對禁止
• 動效遵循 prefers-reduced-motion: reduce 用戶偏好
• 載入狀態：骨架屏 > Spinner > 進度條 > 無反饋

法則七：佈局服務導航 —— 視覺結構即信息架構

• 鏈接分組 + 標題 + 視覺分隔 (色塊/分割線/卡片/間距)
• 梅格菜單 適用於超大型站點，需鍵盤完整可訪問
• 麵包屑 + 頁內導航 (目錄/錨點) 並行，滿足不同心智模式

法則八：受眾導向 —— 為具體人群設計，而非泛用戶

用戶畫像	佈局偏好	關鍵適配
專業用戶/高頻操作	高密度、鍵盤優先、多面板、可定制	快捷鍵、命令面板、數據網格、鍵盤導航
大眾消費/低頻瀏覽	低密度、引導式、大視覺、單任務流	清晰CTA、進度指示、智能預設、容錯提示
長者/視障/運動障礙	大字號、高對比、大觸控區、語音輔助	無障礙優先、語義化HTML、ARIA、縮放適配

法則九：視覺層級聚焦核心目標

• 通過用戶調研/熱力圖/漏斗分析 確定「最想被看見的標題/按鈕/數據」
• 佈局資源 (位置/尺寸/色彩/動效) 向核心目標傾斜
• 定期 A/B 測試驗證視覺層級有效性

法則十：持續進化 —— 佈局不是一次性交付

• 建立設計系統治理機制：Token更新 → 組件同步 → 頁面重構 → 灰度發布 → 效果驗證
• 季度佈局審計：清理僵屍組件、合併同類模塊、優化高頻路徑
• 技術債可視化：Storybook覆蓋率、視覺回歸測試通過率、Bundle體積趨勢

好的佈局是隱形的——用戶不覺得它的存在，只覺得「好用」、「順手」、「找得到東西」。當佈局成為被討論的焦點時，往往意味著它失敗了。