設計背景

扁平化設計演變出多種視覺變體。本教學以單一基礎圖標為骨架，系統展示常規扁平、長投影、漸變式、投影式四種風格的構建邏輯與參數細節，幫助設計師建立風格遷移能力。

共同基礎：畫布與參考線系統

• 畫布：500 × 400 px，背景 #e8d59b
• 參考線佈局（垂直/水平像素座標見下圖）確保幾何精準對齊

風格一：常規扁平化

基礎幾何構建

1. 圓角矩形：前景 #d14242，半徑 40 px
2. 橢圓工具：白色圓環（減去頂層形狀模式）
3. 自定義形狀：白色三角箭頭置中

風格二：長投影

投影構建邏輯

1. 矩形工具：黑色形狀置於圖標圖層下方
2. Ctrl+T 旋轉 45° → 矩形變長投影形態
3. 添加圖層蒙版 → Cmd+點擊 基礎圓角矩形載入選區 → 選擇 → 反向 → 黑色填充蒙版移除超出部分
4. 鋼筆工具微調投影尖端形狀 → 不透明度 20%

圓環投影同理構建

風格三：漸變式

疊加漸變層構建體積感

1. 複製基礎圓角矩形 → 移至頂層 → 填充 0%
2. 鋼筆工具刪減/拖動錨點 → 形成向中心收攏的漸變蒙版形狀
3. 圖層樣式 → 漸變疊加：正片疊底，不透明度 20%，縮放 100%
4. 原圓角矩形同加漸變疊加：正片疊底，不透明度 10%

風格四：投影式

最簡單：為所有圖層統一添加投影層樣式：正片疊底，不透明度 20%，距離 10px。

設計思維總結

風格	核心邏輯	適用場景
常規扁平	純色塊+幾何布爾運算	極簡UI、小尺寸圖標
長投影	45°投影模擬立體厚度	Material Design早期、插畫風
漸變式	模擬光源照射的體積感	品牌圖標、營銷物料、大尺寸展示
投影式	統一下投影建立層級	卡片式介面、按鈕懸浮狀態