本文針對「想提升 UI 視覺質感的開發者/UX 設計師」，提煉自作者從零自學 UI、大量試錯、臨摹 Dribbble/Behance 佳作的 7 條實戰法則。不講黃金分割、色彩理論等學院派理論，只講「立竿見影」的執行策略——產品設計界的「以色列格鬥術」。

法則 1：光線來自天空 —— 陰影決定 UI 元素層級

• 光源永遠在上方 → 物件上亮下暗、底部投影。
• 按鈕 4 種光影細節：
  ① 未按下：底部邊緣暗、上半部亮（模擬微凸弧面）、下方微投影。
  ② 按下：整體變暗、下半部更暗（貼合平面/手遮光）。
• iOS 6 設定頁仍是學習光影分層經典範例（控制面板邊緣、滑桿、按鈕、分割線各有層次）。
• 內凹元素：輸入框、按下按鈕、滑桿、未選單選/核取方塊。
  外凸元素：未按按鈕、滑塊、下拉選單、卡片、已選單選、彈窗。
• 趨勢：「半扁平」= 扁平基調 + 微陰影/高光提示交互狀態。Google Material Design 以陰影高度 (dp) 定義層級，值得系統學習。

法則 2：黑白優先 —— 先解決佈局與層級，再上色

• 灰度模式設計 → 強迫關注空間、尺寸、層級、對比，不被色彩干擾。
• 類比「Mobile First」：先解決難問題（小螢幕/無色彩），再解決易問題（大螢幕/上色）。
• 經典灰度介面參考：Medium 文章頁、Apple 設定頁、Google Material 線框圖。
• 例外：運動、卡通、兒童類強品牌色彩項目，需前置色彩策略。

法則 3：增加留白空間 —— 呼吸感是高級感的來源

• 留白 ≠ 空白，是「視覺緩衝區」。邊距、行距、組件間距、模組內邊距統一倍數體系（如 8pt 基準）。
• 留白足夠 → 視覺焦點清晰 → 認知負荷降低 → 體驗感知提升。

法則 4：學會在圖片上呈現文字 —— 遮罩、漸層、陰影三板斧

• 文字直疊圖片 = 業餘。專業做法：
  ① 圖片上疊加半透明黑/漸層遮罩（底部→頂部透明）。
  ② 文字加外發光/投影（text-shadow: 0 2px 8px rgba(0,0,0,.6)）。
  ③ 關鍵文字區域局部提亮圖片（曲線/色階拉高高光）。

法則 5：做好強調與淡化 —— 視覺權重分配

• 主要動作按鈕：高飽和品牌色、大字號、飽滿留白。
  次要動作：描邊按鈕/文字按鈕、降低飽和度/對比度。
  輔助資訊：小字號、灰色、較緊湊間距。
• 一個介面只能有一個視覺焦點（Primary CTA）。

法則 6：只用合適的字體 —— 字體庫精簡到 2-3 套

• 標題：幾何無襯線（Inter, Plus Jakarta Sans, Space Grotesk）或高對比襯線。
  正文：人文無襯線（IBM Plex Sans, Source Sans 3, Noto Sans TC）。
  代碼/數據：等寬字體（JetBrains Mono, Fira Code）。
• 拒絕「花俏字體」，除非品牌強制要求。

法則 7：善於借鑒優秀作品 —— 建立「拆解庫」而非「收藏夾」

• 見到好設計 → 截圖 → 進 PS/AI/Figma 疊圖層 → 標註：間距、字階、色碼、陰影參數、對齊邏輯。
  每週拆解 3-5 個，半年後擁有私人「設計規範手冊」。
• 推薦拆解源：Apple HIG、Google Material、Linear、Notion、Vercel、Arc Browser、Raycast 官網。

這 7 條法則不需天賦，只需刻意練習。從今天開始，每個專案強制套用「黑白優先 → 留白系統化 → 光影統一 → 字體精簡 → 拆解複盤」，半年內 UI 視覺質感必有質變。