鼠標圖標作為電腦周邊產品的經典表徵，其設計挑戰在於：如何在有限畫面中表現人體工學曲面、多材質過渡（頂蓋光滑/側裙磨砂/底部滑腳）、按鍵微觀結構與滾輪紋理，並兼顧「靜態展示」與「交互狀態」雙重視覺需求。本教程將完整拆解雙態鼠標圖標的專業創作流程。

效果預覽：雙態設計

靜態展示態：標準姿態，完整呈現產品設計語言
交互懸停態：滾輪高亮、側鍵微亮、底部感應光啟動，暗示可操作性

產品結構分析與圖層架構規劃

標準對稱式鼠標可分解為 7 大幾何體塊：

Mouse_Icon
├── Base_Bottom (底殼：含滑腳、感應窗、標籤)
├── Skirt_Sides (側裙：左/右磨砂側面、側鍵)
├── Top_Cover (頂蓋：主體曲面、左/右鍵分界、Logo區)
├── Scroll_Wheel (滾輪：橡膠紋理、編碼器齒槽、點擊機構)
├── Buttons_Group (按鍵：左鍵、右鍵、側鍵、DPI鍵)
├── Lighting_System (燈效：Logo燈、滾輪燈、底部追蹤光)
└── Shadow_System (陰影：接觸陰影、投射陰影、環境光遮蔽)

核心制作階段

階段一：精確矢量建模（奠定幾何準確性）

1. 側視輪廓繪製：參考實物測量/官方渲染圖，鋼筆工具繪製鼠標側視輪廓路徑（關鍵點：最高點位置、前端傾角、尾部上翹角度）
2. 頂視輪廓繪製：新建圖層組，鋼筆繪製頂視外輪廓（寬度、腰線收窄、按鍵分界線）
3. 3D 結構推導：將側視/頂視路徑導入 Blender/C4D 建立基礎白模，渲染 3 視圖線稿回 PS 作為精確參考（或純 PS 透視邏輯手繪）
4. 矢量形狀組構建：在 PS 中按組件建立形狀圖層，全部為可編輯矢量，命名規範：`Shape_[Component]_[Material]`

階段二：材質系統定義（物理渲染邏輯）

組件	材質類型	核心樣式參數	關鍵差異化細節
頂蓋	高光鋼琴烤漆 / 磨砂塑膠	斜面浮雕(外部,大小6-8px) + 漸變疊加(徑向) + 銳利高光線	指紋抗性紋理(極細雜色)、Logo區鏡面拋光差異
側裙	磨砂塑膠 / 橡膠漆	斜面浮雕(內部,大小2px) + 圖案疊加(程序化雜色,柔光15%)	側鍵凹陷感、側裙與頂蓋分條線(0.5px高光+1px陰影)
底殼	哑光塑膠	色彩疊加(基礎色) + 內陰影(滑腳凹槽) + 描邊(邊緣定義)	滑腳: 圓角矩形4個,斜面浮雕(外部,大小1px)、感應窗:紅外透鏡材質
滾輪	橡膠/金屬	斜面浮雕(外部,大小4px) + 圖案疊加(徑向條紋/菱形紋) + 內陰影(齒槽)	編碼器齒槽: 24條放射狀細線、點擊觸覺凸起
按鍵	同頂蓋/側裙材質	斜面浮雕(內部,大小3px)表現按鍵行程凹陷	左/右鍵分界線: 0.5px 高光線 + 1px 陰影線

階段三：光影統一與微觀細節（決定質感上限）

• 全局光源：左上 120°/35°，色溫 5500K，環境光強度 0.3
• 關鍵光刻畫（新建圖層組「Lighting」，混合模式正常/疊加/線性減淡）：
  • 頂蓋中心高光帶：橢圓選區羽化 30 px → 白 #FFFFFF 疊加 25%
  • 側裙捕光邊緣：1 px 硬邊筆刷 #E0E0E0 線性減淡 60%
  • 滾輪輪緣高光：頂部 2 px 弧形高光 (線性減淡 80%)
  • Logo 發光區：外發光 + 顏色減淡模式粒子
• 環境光遮蔽 (AO)：新建圖層「AO」，正片疊底 20%，柔邊筆刷 15 px #000000，繪製：按鍵縫隙、滾輪兩側、側裙內凹、底部滑腳周圍
• 材質微觀紋理：程序化生成（智能濾鏡非破壞）：
  • 指紋紋理：雜色 3% → 高斯模糊 0.5 px → 動感模糊 角度匹配表面流向
  • 橡膠紋理：雜色 8% → 結晶化 細胞大小 3 → 疊加 10%

階段四：雙態差異化設計（交互語義視覺化）

特徵	靜態展示態	交互懸停態
滾輪	常態材質	頂部高光增強 50%，添加外發光 #00FFFF 30%
側鍵	融入側裙	側鍵頂面高光銳利化，暗示可點擊
底部感應光	微弱紅點	紅色脈動光環 (外發光 徑向漸變 #FF0000→透明)
Logo 燈	單色常亮	呼吸閃爍關鍵幀 (透明度 30%↔80%)
整體投影	標準投影	投影距離 +2px，大小 +3px (微微懸浮感)

階段五：多尺寸導出與規格交付

Export Specs:
├── PNG Raster (for legacy/bitmap contexts)
│   ├── mouse_idle@1x.png (512×512)
│   ├── mouse_idle@2x.png (1024×1024)
│   ├── mouse_idle@3x.png (1536×1536)
│   ├── mouse_hover@1x.png
│   └── ...
├── SVG Vector (for web/responsive)
│   ├── mouse_idle.svg (flat shapes only, no effects)
│   └── mouse_hover.svg (state layer separation)
├── Lottie/JSON (for animation)
│   └── mouse_interaction.json (keyframes: wheel_glow, sidekey_highlight, sensor_pulse)
└── Design Tokens
    ├── colors.json (--mouse-primary, --mouse-accent, --mouse-tracking-red)
    ├── spacing.json (--mouse-corner-radius, --mouse-wheel-groove-depth)
    └── shadows.json (--mouse-contact-shadow, --mouse-cast-shadow)

專業級細節自查清單

• [ ] 滾輪齒槽數量正確 (通常 24 槽)，間距均勻，透視正確
• [ ] 左右鍵分界線位置符合人體工學 (約 55%/45% 分割)
• [ ] 側鍵位置對應拇指/小指自然落點
• [ ] 底部滑腳排列符合三角形/矩形穩定支撐原則
• [ ] 感應窗透鏡材質表現：菲涅耳反射 + 紅外濾光片色澤
• [ ] 所有圓角半徑為 4 的倍數 (4/8/12/16/20/24...)，符合設計系統網格
• [ ] 文件結構可維護：新設計師 10 分鐘內理解圖層邏輯並能修改顏色/材質

延伸挑戰：從單枚圖標到產品視覺系統

• 產品族群擴展：同一設計語言延伸至鍵盤、耳機、手柄、充電座圖標
• 爆炸圖解構：各組件沿爆炸軸向分離，展示內部結構 (PCB、電池、馬達、天線)
• 材質變體矩陣：同一造型產出 5 種配色 (太空灰、銀白、玫瑰金、午夜綠、極光藍) + 3 種材質 (磨砂/亮面/陶瓷)
• AR 預覽模型：導出 USDZ/GLB，支援實時材質切換、爆炸動畫、規格標註

鼠標圖標設計的最高境界，不是畫得「像」，而是畫得「對」——每一個倒角半徑、每一道分條線、每一處材質轉換，都對應著真實的模具設計決策、注塑工藝限制、組裝公差要求。建議設計師定期拆解實體鼠標，用卡尺測量關鍵尺寸，用顯微鏡觀察表面紋理，用分光測色儀量測材質參數，將工程認知轉化為設計語言，這才是「懂產品的設計師」的核心競爭力。