剔透雨滴按鈕結合了水滴的有機流體造型與 UI 圖標的幾何規範，適用於天氣應用、音樂播放器、智能家居控制介面。本教學拆解從基礎幾何構建到材質質感賦予的完整流程。

一、雨滴基礎幾何構建

1. 橢圓工具 (L) 繪製正圓 (基部)，鋼筆工具 (P) 在頂點向上拉出貝塞爾手柄，形成水滴尖頂。
2. 或使用「效果 > 風格化 > 圓角」於矩形頂部邊緣，再用「物件 > 擴展外觀」轉為可編輯路徑，再手動調整頂點手柄得標準水滴形。
3. 路徑簡化 (物件 > 路徑 > 簡化) 保留關鍵錨點，確保曲線平滑無抖動。

二、玻璃質感漸變系統

1. 主體漸變：徑向漸變，中心偏上 (光源方向) 白/極淡藍 (不透明度 60%) → 中部品牌主色 (如 #007AFF, 不透明度 80%) → 邊緣深色系 (不透明度 100%)，模擬玻璃厚度與折射。
2. 高光層：複製主體 (Ctrl+C, Ctrl+F)，縮放 80% 置中，填白→透明線性漸變 (角度 -45°)，混合模式「疊加」，不透明度 50%。
3. 邊緣折射光：再複製一層，描邊 1 px 白→透明漸變描邊 (需 CS6+ 描邊漸變功能)，混合模式「濾色」。
4. 底部陰影/折射亮帶：底部區域添加弧形路徑，填白/淡彩色徑向漸變，模式「濾色」，不透明度 30%。

三、按鈕交互狀態擴展

• 默認態：上述完整層疊。
• 懸停態：整體亮度 +10%，高光不透明度 +20%，添加外發光 (效果 > 風格化 > 外發光，模式「濾色」，藍色 3px)。
• 按下態：整體縮放 95%，高光位置下移 2px，陰影方向反轉，模擬物理按壓。
• 禁用態：去飽和度 80%，不透明度 40%，移除高光與發光。

四、像素完美與輸出規範

1. 開啟「檢視 > 像素預覽」與「對齊像素網格」，確保關鍵邊緣 (尖頂、基部切線) 落在整數像素座標。
2. 畫板工具 (Shift+O) 為每個狀態建立獨立畫板 (如 48×48, 64×64, 96×96 pt)。
3. 匯出：
  • SVG：響應式網頁、可 CSS 動畫控制狀態切換。
  • PNG 系列：@1x/@2x/@3x，iOS/Android 原生開發。
  • PDF：設計規範文檔、印刷輔助圖。
  • Android VectorDrawable (XML)：透過 Shape Shifter 或手動轉換路徑數據。

五、設計系統整合建議

• 將雨滴按鈕封裝為「元件/組件」，定義 Props：size (sm/md/lg)、variant (primary/secondary/ghost)、state (default/hover/pressed/disabled)。
• 色彩令牌化：主色、高光色、陰影色引用全域 Color Tokens，主題切換 (深色/淺色模式) 自動生效。
• 動效規格：狀態切換 150ms ease-out，按下縮放 transform: scale(0.95)，高光位移 translateY(2px)。

此工作流產出的不僅是單一圖標，而是一套可直接接入設計系統、支援多平台輸出、具備交互狀態與動效規格的標準化 UI 元件資產。