扁平化依然是主流設計語言，但「扁」不等於「簡單」。@正越升 同學總結了 8 個扁平化設計核心技巧，涵蓋字體選擇、圖標系統、排版邏輯、配色策略四大維度，深入淺出、即學即用，新手也能直接套用到海報、PPT、UI 介面設計中。

八大技巧速覽

🎨 技巧 1：字體——幾何無襯線為主，權重對比建立層級

推薦：PingFang SC / Noto Sans TC / Inter / SF Pro。標題用 Bold/Heavy，正文用 Regular/Medium，避免使用過多字重，保持視覺乾淨。

🔷 技巧 2：圖標——統一線寬、圓角、視覺重心

• 線寬建議 2px（@1x 基準），圓角半徑統一為 2px 或 4px
• 使用像素網格對齊，避免模糊邊緣
• 同組圖標視覺重心對齊（光學對齊 > 數學對齊）

📐 技巧 3：排版——網格系統 + 留白呼吸感

• 8px 基礎網格，模組化佈局
• 大面積留白不是浪費，是視覺焦點引導
• 對齊方式統一（左對齊/居中對齊二選一，不要混用）

🌈 技巧 4：配色——主色 + 功能色 + 中性灰，飽和度克制

• 主色佔 60%，功能色（成功/警告/錯誤）佔 10%，中性灰佔 30%
• 扁平風避免大面積高飽和，建議飽和度 60–80%，亮度 50–70%
• 漸變僅作點綴（如按鈕 hover、插畫裝飾），主介面以平涂為主

🖼 技巧 5：插畫——幾何構圖、平涂配色、隱喻簡潔

用基本幾何形組合（圓、三角、矩形）構建意象，避免寫實細節，配色呼應品牌主色。

⚪ 技巧 6：按鈕與交互——狀態完整、反饋明確

• Default / Hover / Active / Disabled / Loading 五狀態齊全
• 圓角 4–8px，內邊距上下 12px、左右 24px 起

🧱 技巧 7：卡片與容器——邊框極薄或無邊框，陰影分層級

• Level 1：無陰影，1px 分割線
• Level 2：柔和陰影（0 4px 12px rgba(0,0,0,.08)）
• Level 3：明顯陰影（0 12px 24px rgba(0,0,0,.12)）用於彈窗、下拉選單

📱 技巧 8：響應式與適配——斷點規劃、組件彈性

定義 3–4 個主要斷點（Mobile/Tablet/Desktop/Large Desktop），組件採用自動佈局，內容決定寬度。

實戰應用場景

• 🎯 海報設計：大標題 + 幾何圖形 + 留白 + 主色塊 = 高級感
• 🎯 PPT 簡報：統一母版、圖標風格、配色體系，專業度瞬間提升
• 🎯 UI 介面：建立 Design System 元件庫，團隊協作效率翻倍

收藏這 8 招，下次扁平化專案不再踩坑，作品質感穩穩升級！