手電筒紅色按鈕是產品設計、UI 圖標、智能硬體介面、工業設計表現圖中的高頻微觀元素。其視覺挑戰在於：在極小尺寸（如 20×20 px）下仍清晰傳達「可按壓」、「發光」、「材質（金屬/塑膠/橡膠）」、「狀態（開/關/呼吸閃爍）」。本教學將演示如何在 Illustrator 中運用「圓角矩形工具」、「橢圓工具同心圓漸層」、「偏移路徑疊層」、「縮放複製」、「外觀面板非破壞效果」，構建一枚具備微觀真實感與多狀態擴展性的手電筒紅色按鈕向量資產。

結構拆解：從外到內的層級邏輯

層級	物理對應	向量構建	關鍵參數
L1 基座殼體	手電筒機身開孔邊緣	圓角矩形 + 內發光/投影	圓角 8–12 px、內發光模式「正片疊底」
L2 按鈕主體	矽膠/塑膠按鍵本體	橢圓工具同心圓漸層疊加	4–5 層同心圓、徑向漸層、縮放複製
L3 發光核心	LED 燈珠/導光柱頂端	最內層高亮圓 + 外發光效果	紅色系漸層、外發光模式「螢幕」
L4 表面細節	防滑紋理/品牌 Logo/指示刻度	線條/文字/符號、疊加模式	不透明度 20–40%

步驟詳解

1. 基座殼體：圓角矩形奠定安裝基準

1. 「圓角矩形工具」繪製圓角矩形（寬 180×高 60 px，圓角 10 px），填充金屬拉絲漸層（線性 90°：深灰→中灰→深灰）。
2. 效果 → 風格化 → 內發光：模式「正片疊底」、顏色黑、不透明度 30%、模糊 3 px、邊緣，模擬開孔倒角陰影。

2. 按鈕主體：同心圓漸層構建立體按鍵

1. 「橢圓工具」（L）按 Shift 繪製正圓（直徑 120 px），置於基座中心。
2. 填充徑向漸層：中心亮紅（R:255 G:50 B:50）→ 中紅（R:200 G:20 B:20）→ 邊緣暗紅（R:120 G:0 B:0），模擬球面受光。
3. 物件 → 路徑 → 偏移路徑，偏移 -10 px，生成內圈。填充相似漸層但亮度提升 10%，形成高光帶。
4. 重複偏移 3–4 次，每層漸層微調，構建豐富球面層次。

3. 多層偏移疊加：增強材質厚度感

1. 對中層圓形再次執行「偏移路徑」（-8 px），填充高光強化漸層（淺紅→白→透明），模式「疊加」。
2. 再次偏移（-6 px），填充陰影加深漸層（深紅→黑），模式「正片疊底」。
3. 這些同心圓層疊加，無需 3D 軟體即可構建極具說服力的球面體積感。

4. 縮放複製：構建發光核心與頂部高光

1. 選取最內層圓形，右鍵 → 變換 → 縮放，縮放 60%，勾選「複製」。
2. 填充高亮紅漸層（R:255 G:100 B:100 → R:255 G:200 B:200），添加「效果」→「風格化」→「外發光」：模式「螢幕」、顏色紅、不透明度 80%、模糊 8 px，形成發光核心。
3. 再次縮放複製（40%），純白填充，模式「疊加」，不透明度 60%，形成頂部鏡面高光點。

成果展示

多狀態變體系統（UI 交互就緒）

狀態	視覺變化	外觀面板參數調整	動畫建議
待機	紅色呼吸閃爍（亮度 40%↔80%）	發光核心外發光不透明度關鍵幀動畫	CSS `animation: breathe 2s ease-in-out infinite`
開啟/常亮	最高亮度、光環擴散、投影增強	外發光模糊 8→20px、不透明度 100%、按鈕投影模糊 10→20px	狀態切換 0.3s ease-out
關閉	暗紅靜態、無發光、投影最小	外發光關閉、填色亮度 -40%、投影模糊 2px	淡出 0.2s
按下/觸發	按鈕下沉（Y+2px）、縮放 0.96、光環瞬間擴散	基座變換位移、整體縮放、光環縮放 150% 淡出	即時響應，無延遲
低電量警示	紅色閃爍 3Hz、圖標疊加電池圖示	填色紅/暗紅交替、符號實例顯示	CSS `steps(6)` 幀動畫

設計系統交付規範

• 尺寸標準：基座 48×48 dp（最小點擊區），按鈕主體 32×32 dp，圖標 24×24 dp，支援 @1x/@2x/@3x/@4x。
• 色彩系統：語義化色票 `Brand_Red_500` `Brand_Red_600` `State_Success_Green` `State_Error_Red` `State_Warning_Amber`，支援亮/暗模式自動切換。
• 圖層命名：`Btn/Base` `Btn/Body` `Btn/GlowCore` `Btn/Details` `Btn/StateRing` `Btn/Hotspot`。
• 輸出格式：AI 源檔、SVG Sprite（含 ``）、Figma Variants（State/Size/Theme）、Android VectorDrawable、iOS PDF Vector、設計規範 Markdown。

進階材質變體

• 金屬機械鍵：基座改為 CNC 鋁陽極氧化質感（線性漸層+噪點紋理），按鈕主體添加鑽石紋/防滑槽（線條圖案筆刷）。
• 矽膠軟鍵：主體添加「內發光」（邊緣透光感）、偏移路徑負值疊加模擬邊緣薄壁、頂部高光極細銳利。
• 玻璃觸控：無物理凸起，純平面玻璃下發光，依賴「內發光」+「漸層遮罩」模擬導光板效果。

手電筒紅色按鈕雖小，却是「微觀質感表達」與「交互狀態機」的完美練兵場。掌握同心圓漸層疊加、偏移路徑建模、外觀面板非破壞效果、多狀態變體系統這套核心方法論，你將能輕鬆應對智能硬體、車載介面、醫療設備、工業控制面板等高要求場景下的各類微觀 UI 元素設計挑戰。