效果預覽

一枚通透剔綠、邊緣倒角精準、高光陰影邏輯嚴謹、按下狀態與懸停狀態皆可延伸的水晶質感按鈕，適合遊戲 UI、APP 介面、網頁交互元素。

按鈕結構四層拆解

優秀的擬物按鈕結構自下而上分為四層，各司其職：

1. 底座層：最底層，提供厚度感與底部陰影投射基礎。通常為深色金屬/塑膠材質，添加斜面浮雕(內斜面)與投影。
2. 主體層：按鈕主體，承載核心材質(水晶/玻璃/寶石)。關鍵圖層樣式：斜面浮雕(內斜面/外斜面組合)、內發光(邊緣折射)、光澤(內部高光)、顏色疊加(本體色)、描邊(邊緣高光)。
3. 高光層：模擬頂部光源擊中彎曲表面形成的高光帶。新建橢圓選區羽化填白、或漸變填充、混合模式「疊加/柔光/強光」，蒙版控制範圍與衰減。
4. 倒影/投影層：按鈕在底座/桌面上的投影(柔和擴散)與桌面倒影(垂直翻轉+漸變蒙版漸隱)。

關鍵圖層樣式參數參考（主體層為例）

• 斜面與浮雕：風格「內斜面」、技術「平滑」、深度 100-150%、方向「向上」、大小 10-20px(視尺寸)、柔化 0-3px、角度 120°、高度 30-45°、勾選「使用全局光」、勾選「等高線」調整曲線模擬水晶切面反光。
• 描邊：大小 1-2px、位置「內部」、填滿類型「漸變」(白→透明→白模擬邊緣折射)、混合模式「疊加」。
• 內發光：混合模式「螢幕」、顏色淺綠/白、不透明度 30-50%、來源「邊緣」、擴展 0%、大小 5-15px(邊緣折射暈散)。
• 光澤：混合模式「疊加/柔光」、不透明度 20-40%、角度 120°、距離 0%、大小 10-30px、輪廓「圓錐-倒置」(模擬頂部高光帶)。
• 顏色疊加：混合模式「正常」、顏色目標綠色(如 #00C853)、不透明度 30-50%(保留底層紋理/光影)。

進階技巧：狀態擴展

• 正常態：上述完整結構。
• 懸停態：主體層「外發光」增強(顏色更亮、大小更大)、高光層不透明度提高、整體亮度曲線上揚。
• 按下態：主體層斜面浮雕改為「外斜面」(凹陷感)、投影距離/大小縮小(貼近桌面)、高光層位置下移/縮小、整體色相微偏暗。
• 禁用態：全群組不透明度 40%、去色(黑白調整層剪貼)、移除高光/發光。

工作流建議

1. 建立「按鈕元件」群組，內含四層標準結構。
2. 將主體層圖層樣式存為預設(.asl)，命名「Btn_Crystal_Green_Base」。
3. 新按鈕需求時：複製群組→修改顏色疊加顏色→微調大小/圓角→完成。
4. 配合「圖層 comps」(圖層佈局) 管理四態，一鍵切換預覽/導出。

小結

水晶按鈕的靈魂在於「通透感(內發光/光澤)」+「切面感(等高線曲線)」+「邊緣折射(漸變描邊)」三者的參數平衡。掌握四層結構法與參數化樣式庫，不僅能快速產出綠色水晶按鈕，更能舉一反三產出藍寶石、紅寶石、鑽石、琥珀等全系列寶石質感 UI 元件。