複雜 UI 元件的關鍵在於「結構拆解」與「層級疊加」。本教學將紅色水晶按鈕拆解為「底盤金屬環 → 內圈金屬環 → 水晶面板 → 高光飾條 → 環境光/泛光 → 文字/圖標 → 底部投影」七大模組，逐層以圖層樣式構建，最終合成極具質感的可交互狀態按鈕。

最終效果

結構拆解圖

模組化製作流程

模組 1：底盤金屬環 (Base_Ring)

1. 橢圓工具拉正圓填黑 → 圖層樣式：
    • 內陰影：正片疊底、黑、距離 0、大小 8px、雜質 10%
    • 斜面與浮雕：外斜面、平滑、深度 200%、大小 10px、環形等高線、高光螢幕幕 #FFD700 (金高光)、陰影正片疊底 #4A1A00
    • 漸層疊加：線性 90°、#8B0000 → #FF3030 → #8B0000 (紅銅漸層)

模組 2：內圈金屬環 (Inner_Ring)

1. 橢圓工具拉稍小正圓置中 → 圖層樣式：
    • 投影：正片疊底、黑、不透明度 30%、距離 2px、大小 4px (內凹感)
    • 內陰影：正片疊底、黑、距離 0、大小 5px
    • 斜面與浮雕：內斜面、平滑、深度 150%、大小 8px、環形等高線
    • 漸層疊加：線性 90°、#CC0000 → #FF6666 → #CC0000 (較亮紅銅)

模組 3：水晶面板細節 (Crystal_Details)

1. 頂部高光點：新建圖層「Highlight_Dots」，白色硬邊筆刷點 3-5 點 → 混合模式「疊加」 → 複製 2 層疊加 → 群組添加內圈選區蒙版防止溢出。

2. 環境光映射：新建圖層「Env_Reflection」，橢圓工具拉橢圓填白 → 混合模式「疊加」、不透明度 30% → 高斯模糊 5px。

3. 陰影夾角：新建圖層「Shadow_Accent」，鋼筆勾勒內圈底部內側三角陰影 → 填黑 → 高斯模糊 3px → 不透明度 40%。

4. 泛光/邊緣發光：新建圖層「Fresnel_Glow」，內圈選區 → 選取 > 修改 > 緣羽 2px → 反選 → 刪除 (僅保留邊緣 2px 環) → 填白 → 模式「螢幕幕」、不透明度 60% → 高斯模糊 1px。

模組 4：文字/圖標環繞

鋼筆工具繪製圓形路徑 → 文字工具點擊路徑輸入文字 → 文字圖層樣式：漸層疊加 (金屬金漸層) + 斜面浮雕 (內斜面、小尺寸)。

模組 5：底部投影

新建圖層置底，橢圓工具拉扁平橢圓填黑 → 高斯模糊 10-15px → 不透明度 20% → 移動至按鈕正下方。

狀態擴展：懸停/按下/禁用

狀態	圖層樣式微調
懸停	水晶面板漸層亮度 +10%、外發光 (螢幕幕、紅、大小 8px) 開啟、內圈斜面深度 +50%
按下	整體向下位移 2px、底盤投影距離 1px、水晶面板漸層角度反轉 180° (模擬凹陷)、高光點隱藏
禁用	所有圖層群組不透明度 40%、去飽和 (Ctrl+Shift+U)、移除所有發光/高光樣式

元件化交付建議

• 將完整按鈕群組轉為「連結智慧物件」存為 `.psb`，供多頁面/多專案複用。
• 輸出設計規格表：標註各模組尺寸、顏色十六進制、圖層樣式參數、狀態變化邏輯，交付前端實作 (CSS/Flutter/React Native)。
• 建立 Figma/Sketch/Adobe XD 對應元件庫，保持設計語言跨工具一致。