喬布斯曾為 Siri 圖標專門申請設計專利，這枚「小圖標、大智慧」的經典之作，完美展示了矢量精度與微觀質感的極致平衡。本教程將完整複刻 Siri 圖標創作全過程，重點講解矢量形狀工具與蒙版的專業配合、金屬質感程序化構建、以及圖標級微觀細節處理標準。

最終效果與動態預覽

靜態成品與錄音狀態動態效果（光點脈動、內環變色）完美還原 iOS 系統級圖標質感：

專案規範與規格參數

規範項	標準值	說明
畫布尺寸	1024×1024 px	App Store 規範基礎尺寸
安全區	80% (819×819 px)	核心內容不超出此範圍
網格系統	32 px 基礎網格	所有關鍵尺寸為 32 倍數
光源	正上方 (90°)，模擬螢幕頂部光源	統一所有高光/陰影方向
色彩空間	sRGB IEC61966-2.1	跨平台一致性

16 步精密構建流程

步驟 1-4：三層同心圓環體系（主體骨架）

1. 大圓 (900×900 px)：橢圓工具居中繪製 → 圖層樣式：
   漸變疊加：線性 -90°，#4A4A4A → #292929 → #1A1A1A → #292929 → #4A4A4A（金屬環漸變）
   描邊：2 px，內部，#000000 80%
2. 中圓 (836×836 px)：複製大圓 → 縮放 → 填充 #292929 → 樣式：
   斜面浮雕：內部斜面，大小 4 px，深度 150%，高光「線性減淡」#555 60%，陰影「線性加深」#111 50%
   內陰影：距離 2 px，大小 4 px，#000 40%
3. 小圓 (778×778 px)：複製大圓 → 縮放 → 保留漸變疊加 → 移除描邊 → 添加：
   斜面浮雕：外部斜面，大小 3 px，高光「線性減淡」#FFF 40%
   投影：距離 1 px，大小 3 px，#000 30%
4. 三層同心圓環形成「外環-中環-內環」三層金屬結構，模擬真實機加工公差

步驟 5-6：金屬質感雙層紋理系統（程序化無損）

1. 金屬雜色層：新建圖層「Metal_Noise」→ 載入大圓選區 → 填充 #666666 → 濾鏡 → 雜色 → 添加雜色 30% → 智能濾鏡化 → 不透明度 8%，混合模式「疊加」
2. 金屬拉絲紋理（Illustrator 協作）：
   AI 新建 1024×1024 → 橢圓工具 900×900 px 圓環 (描邊 0.25 pt 黑) → 複製縮放 32×32 px → 選中兩圓 → 對象 → 混合 → 混合選項 指定步數 130 → 對象 → 混合 → 建立 (Alt+Ctrl+B) → 拖入 PS 命名「Metal_Grain」→ 不透明度 25%
3. 蒙版限制紋理區域：選中「Metal_Noise」「Metal_Grain」→ Ctrl+G 群組「Texture」→ 載入中圓選區 + Alt 減去小圓選區 = 圓環選區 → 反選 → 群組添加蒙版（紋理僅顯示於中環區域）

步驟 7-9：麥克風支架精密構建（矢量布爾運算）

1. 拉參考線網格（間距 16 px）確保精確對齊
2. 橢圓工具：320×320 px 圓 → 選項欄「減去頂層形狀」繪製 258×258 px 內圓 = 圓環
3. 矩形工具「減去頂層形狀」移除上半部圓環 → 繪製左右兩側支撐條 (31×105 px)
4. 合併路徑命名「Stand」→ 填充 #20202C → 樣式：
   斜面浮雕：內部斜面，大小 3 px，高光「線性減淡」#444 50%
   內陰影：距離 2 px，大小 4 px，#000 40%

步驟 10-12：麥克風主體三層巢狀結構

1. 外殼：圓角矩形 190×410 px，半徑 100 px，填充 #20202C → 斜面浮雕（外部，大小 5 px）+ 描邊 (1 px #0A0A0C)
2. 內腔：圓角矩形 166×386 px，半徑 100 px，填充 #1B1227 → 斜面浮雕（內部，大小 4 px）+ 外發光 (螢幕，#6B40FF，20%，大小 8 px)
3. 麥克風網孔：橢圓 20×20 px #000000 → 斜面浮雕（外部，大小 1 px）→ 轉智能對象 → 複製均勻分佈填滿內腔 → 群組「Mic_Mesh」

步驟 13-14：錄音狀態動態效果（光點脈動 + 環變色）

1. 光點陣列：橢圓 15×15 px 白 → 智能對象 → 複製分佈於網孔上 → 群組「Light_Dots」→ 轉為智能濾鏡 → 高斯模糊 2.5 px → 外發光 (螢幕，#00FFFF，50%，大小 10 px)
2. 內環變色：複製「內腔」→ 清除樣式 → 填充徑向漸變 #6B40FF→#00FFFF→#6B40FF → 描邊漸變 (CS6+ 支援) → 新建橢圓「強光」置頂，徑向漸變 白→透明，混合模式「濾色」 → Alt 點擊圖層間建立剪貼蒙版

步驟 15-16：蒙版精修與高光面收尾（像素級完美）

1. 為「內環變色」「麥克風網孔」「光點陣列」分別添加圖層蒙版
2. 黑色筆刷在蒙版上精細塗抹：
   • 網孔邊緣柔化過渡
   • 光點隨機亮滅模擬（蒙版灰度控制）
   • 內環變色邊緣羽化 2 px
3. 頂部高光面：複製「內腔」→ 置頂 → 清除樣式 → 填充 0% → 斜面浮雕（外部，大小 2 px，高光「線性減淡」#FFF 80%，陰影 0%）→ 蒙版僅保留頂部 15% 區域

圖標級質量把控標準（驗收清單）

• [ ] 像素完美：所有矢量邊緣落在像素網格，400% 放大無虛邊、無色暈
• [ ] 幾何精度：同心圓同心度 < 0.5 px，滑塊/支架對稱誤差 < 1 px
• [ ] 材質一致性：同一材質（金屬/玻璃/塑膠）在不同部件上參數統一
• [ ] 光源統一：所有高光/陰影/投影角度嚴格一致 (90° 頂光)
• [ ] 狀態語義：開/關/錄音三態視覺語義清晰，無歧義
• [ ] 多尺寸適配：@1x/@2x/@3x 導出無模糊、無鋸齒、細節保留率 > 90%
• [ ] 文件整潔度：圖層命名規範、無空圖層、無隱藏廢棄圖層、智能對象邏輯清晰

擴展應用與設計系統整合

• 設計系統組件化：將 Siri 圖標拆解為「外環」「中環」「內環」「支架」「麥克風主體」「網孔」「光點」7 個原子組件，建立 Figma/Sketch 元件庫
• 主題適配：建立色彩 Token 系統，一鍵切換亮/暗模式、品牌色定制版
• 動效規格書：輸出 JSON 格式動畫參數（關鍵幀、緩動函數、時長、彈性係數）供開發直還原
• 無障礙適配：高對比度模式下的替代版本設計（邊框加粗、色彩增強）
• 跨平台輸出：iOS (PNG/SVG)、Android (XML VectorDrawable)、Web (SVG/React Component)、Flutter (CustomPainter)

大師級細節觀察：從 Siri 圖標學到的 5 個微觀原則

1. 公差之美：三層同心圓環厚度漸變 (32px→29px→22px) 模擬真實 CNC 加工公差遞減
2. 材質誠實：金屬拉絲方向嚴格遵循環向，而非任意角度
3. 光影物理：內發光而非外發光表現玻璃/塑膠內部發光，符合光傳輸物理
4. 克制的動態：錄音態光點脈動頻率 1.2Hz，模擬人類呼吸節奏，而非機械閃爍
5. 系統級統一：圓角半徑、描邊寬度、陰影參數與系統其他圖標 (電話、郵件、設置) 共享設計語言

Siri 圖標的復刻不僅是技術練習，更是一次「設計考古」——通過逆向工程經典設計，理解決策背後的工程邏輯、品牌哲學與用戶體驗考量。建議將此工作流應用於其他經典圖標復刻（如 macOS 應用程序圖標、Material Design 系統圖標），構建個人「圖標解剖庫」，最終形成獨特的圖標設計方法論。