光影：設計的「第三維度」

平面設計中，光影不是裝飾，而是構建空間感、材質感、視覺層級、情緒氛圍的核心語言。系統掌握光影原理，是從「平面佈局」進化為「立體構圖」的關鍵。

光影物理基礎（設計師版）

• 光源類型： 平行光（陽光）、點光源（燈泡）、面光源（柔光箱）、環境光（全域照明）；
• 光影三要素： 高光、固有色陰、投射陰影、反射光、折射/次表面散射（透明/半透明材質）；
• 材質參數： 漫反射、鏡面反射、粗糙度、金屬度、折射率、法線貼圖細節。

UI/平面設計中的光影實戰法則

1. 層級建立：陰影即 Z 軸

• Material Design 標準：`elevation 1-24dp` 對應 `box-shadow` 參數表；
• iOS Human Interface：柔和陰影、背景模糊、玻璃質感；
• 自定義系統：建立 4-5 級陰影 Token（微/淺/中/深/浮層），統一設計語言。

2. 材質表達：質感即品牌調性

• 紙/布/麵包： 柔和漫反射、微細紋理、邊緣柔化；
• 金屬/玻璃/陶瓷： 銳利高光、環境反射、菲涅爾效應、折射扭曲；
• 塑膠/橡膠： 中等鏡面、次表面散射（紅耳朵效應）、彈性形變暗示。

3. 視覺引導：光做導演

• 主光源方向統一（通常左上/正上），建立全局一致性；
• 關鍵 CTA/重點資訊區域加強對比（高光/投射陰深度）；
• 次要資訊弱化光影，後退視覺層級。

4. 情緒渲染：光影敘事

• 高鍵/高光/柔光 → 輕盈、愉悅、科技、未來；
• 低鍵/硬光/強對比 → 莊嚴、神秘、力量、懸疑；
• 體積光/丁達爾效應/光斑 → 夢幻、靈性、藝術氛圍。

常用軟體光影工作流

• PS： 圖層樣式（投影/內發光/斜面浮雕）+ 手繪修飾圖層（柔光/疊加模式）；
• AI/Figma/Sketch： Effects 面板參數化、元件化陰影 Token、插件（Shadows、Blobs、Glassmorphism）；
• C4D/Blender/Spline： 物理渲染級光影，導出 PNG 序列/GLTF/WebGL 直用於數位產品；
• CSS/JS： `box-shadow`、`filter: drop-shadow()`、`backdrop-filter`、Three.js 實時光影。

避坑指南

• ❌ 多光源方向混亂 → 破壞空間真實感；
• ❌ 陰影過重/過黑/過銳 → 髒臃腫、廉價感；
• ❌ 忽視暗模式下的光影反轉 → 亮色陰影在深色背景失效；
• ✅ 建立 Design System 光影 Token，跨平台一鍵切換亮/暗模式。

光影，是設計師手中最隱形也最強大的魔法筆。練好內功，讓每一個像素都懂得「呼吸」。