高質感金屬按鈕設計不靠堆疊濾鏡，靠結構分層與圖層樣式精準參數。本教學拆解按鈕形狀規範、配色原則、實驗迭代心法，並完整公開分層結構與混合選項參數，讓你舉一反三設計出任意風格的高級按鈕。

最終效果預覽

設計原則

1. 形狀規範：只做經典形狀

矩形、圓角矩形、橢圓、胶囊形——這四類覆蓋 95% UI 場景。拒絕奇形怪狀，按鈕核心使命是「引導點擊」，識別度優先。

2. 配色審美：建立色彩系統

金色非單一色值，需構建：主金色（高光）、中性金（側面）、暗金/棕（陰影/邊緣）、高光白（鏡面反射）。參考實物金屬在不同光照下的光譜分布。

3. 實驗迭代：量變引質變

不斷嘗試不同圖層樣式組合、混合模式、不透明度。每次微調保存版本，對比篩選。堅持 = 直覺 + 經驗積累。

實戰拆解：高檔金色按鈕分層結構

分層架構（自下而上）

1. 底座陰影層：投影、外發光（深色），定位空間位置。
2. 主體厚度層：倒角浮雕（內部/外部）、漸變疊加（暗金→中金→亮金），構建 3D 體積。
3. 主體表面層：倒角浮雕（鏡面）、光澤（高光輪廓）、漸變疊加（金色光譜）、描邊（暗金邊框）。
4. 高光細節層：筆刷手繪/形狀勾勒鏡面高光，混合模式「線性減淡/篩色」。
5. 文字/圖標層：內陰影（壓印感）、倒角浮雕（立體字）、漸變文字色。

關鍵混合選項參數（部分核心參數）

• 倒角浮雕：風格「內部斜角」，深度 200-300%，方向「上」，大小匹配按鈕厚度，光暈角度 120°/高度 30°，高光模式「線性減淡」不透明度 70%，陰影模式「線性加深」不透明度 50%。
• 漸變疊加：金色光譜漸變（#B8860B → #FFD700 → #FFF8DC → #DAA520），混合模式「疊加」，不透明度 40-60%。
• 光澤：自定義高光輪廓（雙峰曲線），模式「篩色」，不透明度 50%。
• 描邊：1-2px，漸變填充（暗金→中金），位置「內部」。

舉一反三：從金色按鈕延伸

• 銀色/鉻金屬：漸變換為灰白光譜，高光更銳利，反射率更高。
• 玻璃/陶瓷：倒角浮雕改「外部斜角」，增加「內發光」，降低不透明度，添加折射邊緣。
• 發光/霓虹：外發光「線性減淡」，內發光「篩色」，描邊發光色。

最終效果

掌握「結構分層 + 參數精控 + 實驗迭代」，任意材質按鈕信手拈來。