水晶質感按鈕是 UI 設計經典題目，核心在於多層透明度疊加模擬折射/反射。本教程拆解 5 步核心邏輯，教你構建可複用、可編輯的水晶按鈕組件庫。

成品：通透晶瑩、高光銳利、邊緣折射真實的水晶按鈕

五步構建法

1. 底座：淺色線性漸變正圓

橢圓工具 (L) 按 Shift 畫正圓，填充線性漸變（淺灰→白→淺灰），角度 -90°，模擬頂部受光。這是整個按鈕的「底色」。

2. 主體體積：雙圓混合模擬球面

複製兩個圓（一大一小），顏色取相近色相、不同明度（如中藍→深藍），選中後 Object > Blend > Make，指定步數 30-50。混合對象自動生成平滑球面過渡，比單一漸變更有「厚度感」。

3. 頂部高光：白圓 + 高斯模糊

畫小白圓置於球頂，Effect > Blur > Gaussian Blur (半徑 3-5px)，透明度 60-80%，模式正常。這是「環境光在頂點的鏡面反射」。

4. 側面折射高光：漸變橢圓 + 不透明度蒙版

畫橢圓填充線性漸變（白→透明），蓋在球體側面。選中橢圓與球體，透明度面板 > 建立不透明蒙版，剪裁多餘部分。調整漸變角度與色標位置，精準控制高光形狀與銳度。這步是水晶質感靈魂——模擬光線進入球體內部折射後從側面射出。

5. 圖標圖形：圓角三角形 + 內部高光

多邊形工具畫三角形，Effect > Stylize > Round Corners (圓角半徑 3-5px)。內部再畫一個縮小版三角形，填充白→透明漸變，模式疊加，表現「玻璃厚度邊緣的聚光」。

進階：建立圖形樣式一鍵複用

1. 選中所有構成元素，圖形樣式面板 > 新建圖形樣式，命名「水晶按鈕/基礎」。
2. 之後繪製任意形狀（圓、方、星、自定路徑），一鍵套用樣式，自動適配形狀生成水晶效果。
3. 配合外觀面板，可非破壞性修改：換底色漸變、調高光銳度、改圖標形狀，全程可撤銷。

避坑指南

• 不要用羽化代替高斯模糊——羽化是矢量邊緣虛化，放大會崩；高斯模糊是光柵效果，需注意文檔光柵效果設置 (300ppi 印刷/72ppi 屏幕)。
• 不透明度蒙版 vs 裁切蒙版：前者保留漸變透明過渡，後者只有硬邊。水晶高光必須用前者。
• 色彩模式陷阱：CMYK 文檔中放射漸變的「透明」色標會顯示為白色，導致高光變灰。解決：改用 RGB 文檔製作，最後轉 CMYK；或用「不透明度蒙版」代替漸變透明色標。

掌握這套邏輯，你就擁有了「水晶質感產生器」——不只是按鈕，圖標、徽章、卡片、甚至 3D 字體表面都能秒套。