質感按鈕是介面設計的顏值擔當。本教學系統拆解金屬拉絲、玻璃釉面、陶瓷釉質、軟膠觸感四大主流質感按鈕的 Fireworks 實現方案，從矢量骨架到漸層佈局、濾鏡堆疊、高光陰影體系，建立可複用的按鈕質感設計語言。

通用按鈕骨架

1. 圓角矩形工具繪製基礎形狀（半徑 4-8px 視尺寸）。
2. 轉為矢量路徑（Ctrl+Shift+G 取消群組），微調錨點消除機械感。
3. 建立「按鈕基礎」圖層組，內含：底色層、紋理層、高光層、陰影層、文字層，便於批量複製修改。

四大質感配方

1. 金屬拉絲質感

• 底色：線性漸層 #CCCCCC → #999999 → #CCCCCC → #EEEEEE（模擬金屬反光帶）。
• 紋理：填充「線性」紋理，總量 15%，角度 90°（垂直拉絲）或 0°（水平拉絲）。
• 高光：頂部 1px 白線（疊加 60%），底部 1px 深灰線（正片疊底 40%）。
• 內陰影：距離 1px，模糊 2px，不透明度 30%，角度 -90°（頂部內凹感）。

2. 玻璃釉面質感

• 底色：放射狀漸層，中心透明白 → 邊緣主題色（如 #0066CC）。
• 高光系統：頂部大面積放射漸層白（疊加 40%）、中心銳利高光橢圓（疊加 80%）、底部倒影漸層（正常 20%）。
• 邊緣：1px 筆觸 #FFFFFF（疊加 50%），內側 1px #000000（正片疊底 20%）。
• 投影：距離 2px，模糊 6px，不透明度 25%，顏色主題色加深。

3. 陶瓷釉質質感（延續青花瓷邏輯）

• 底色：淺灰藍線性漸層 #D7DDDD → #E8EBEB → #D7DDDD。
• 雙重內陰影：邊緣厚釉積聚 + 中心凸起釉面。
• 高光：頂部弧線高光（路徑噴槍漸變寬度）、側面細線高光。
• 紋樣：裝飾字體字符 + 輪廓漸層 + 底層模糊暈染。

4. 軟膠觸感質感

• 底色：高飽和度色相，線性漸層明度變化較小（#FF3366 → #E62E5C → #FF3366）。
• 內發光：顏色同色系淺色，模式「螢幕」，模糊 4px，不透明度 50%（模擬次表面散射）。
• 高光：頂部小圓高光（疊加 70%），側面條狀高光（柔光 50%），銳利邊緣模擬濕潤感。
• 投影：距離 1px，模糊 3px，不透明度 40%，極近距離貼合感。

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

建立「狀態變量表」，僅調整關鍵參數即可全套切換：

狀態	底色亮度	高光強度	投影距離	內發光
正常	基準	100%	2px	啟用
懸停	+10%	120%	3px	增強
按下	-10%	60%	0px	減弱
禁用	去飽和	0%	1px	關閉

元件化工作流

將四大質感按鈕各存為「圖形元件」，屬性面板定義 9 切片縮放區域，配合「狀態」面板一鍵切換四態，構建專屬質感按鈕設計系統，新專案拖拽即用，參數微調即得新風格。