速成目標

在 10 分鐘內產出一組**可直接用於 UI 設計系統**的旋鈕圖標集：基礎態、懸停態、按下態、禁用態、高亮態。採用 **新拟態** 風格：柔和雙重陰影、微妙內發光、極簡幾何，適配淺/深色模式。

一、基礎幾何構建（2 分鐘）

1. 新建 256×256 px。橢圓工具 Shift 畫正圓「Knob Base」，填充 #E0E5EC（新拟態標準底色）。
2. 複製縮放 70% 畫內圓「Knob Inner」，填充同色，置中。
3. 矩形工具畫指示標「Indicator」（寬 4px、高 40px），置於頂部中心，填充品牌色 #007AFF。

二、新拟態核心樣式（3 分鐘）

對「Knob Base」添加圖層樣式（存為樣式預設「Neumorph_Base」）：

• 投影：正片疊底、#A3B1C6、不透明度 40%、角度 135°、距離 8px、展開 0、大小 16px。
• 內陰影：螢幕、#FFFFFF、不透明度 60%、角度 -45°、距離 -4px、大小 8px。
• 斜面與浮雕：外部斜面、平滑、深度 30%、方向「向上」、大小 4px、軟化 2px、高光「螢幕」30%、陰影「正片疊底」20%。

右鍵「Knob Base」→ 「複製圖層樣式」→ 右鍵「Knob Inner」→ 「貼上圖層樣式」。調整「Knob Inner」內陰影距離 -2px、大小 4px，投影距離 4px、大小 8px，形成內凹感。

三、狀態變體製作（3 分鐘）

狀態	關鍵調整	用途
基礎態	上述標準樣式	默認顯示
懸停態	Base 填色 #D5DCEA；Indicator 填色 #0056CC；投影距離 12px、大小 20px	滑鼠進入/手指按下前
按下態	Base 移除投影、內陰影；添加「內部陰影」正片疊底 #A3B1C6 距離 4px 大小 8px（凹陷感）；Indicator 縮放 90%	點擊/長按瞬間
禁用態	Base 填色 #F2F3F5；移除所有陰光樣式；Indicator 填色 #C8CCD4；整體不透明度 50%	不可操作狀態
高亮態	Base 添加「外發光」螢幕 #007AFF 大小 20px 不透明度 40%；Indicator 添加脈動動畫（AE/Lottie）	聚焦/錯誤/錄音中

四、組件化交付（2 分鐘）

1. 將五態圖層組分別轉為智能對象，命名 Knob_Default, Knob_Hover 等。
2. 導出：
   📁 Figma/Sketch/Adobe XD 組件庫（複製圖層樣式至對應工具）
   📁 PNG@2x/@3x：512/768/1024 px
   📁 SVG：矢量版（形狀+CSS filter 模擬新拟態陰影）
   📁 Tokens.json：設計令牌（色值、陰影參數、圓角、間距）

五、深色模式適配

複製整組，Base 填色 #1E1E1E，投影 #000000 60%，內陰影 #3A3A3A 30%，品牌色調整為 #0A84FF。存為 Knob_Dark_* 變體。

核心參數速查表

/* CSS 映射參考 */
--knob-bg: #E0E5EC;
--shadow-dark: #A3B1C6;
--shadow-light: #FFFFFF;
--shadow-dist: 8px;
--shadow-blur: 16px;
--inner-shadow-dist: -4px;
--inner-shadow-blur: 8px;
--brand: #007AFF;