方形錄音機圖標承載著磁帶時代的集體記憶：方正的機身、雙卷軸、VU 錄音電平指示燈、紅色錄製鍵、機械按鍵手感。本教學將示範如何在 Illustrator 中以「圓角矩形」、「矩形」、「橢圓」、「直線」、「路徑查找器」、「偏移路徑」、「縮放複製」等核心工具，構建一枚結構清晰、質感豐富、風格統一的方形錄音機向量圖標，並建立可擴展的復古音頻圖標族群系統。

結構解剖：功能區塊的幾何映射

功能區	幾何原語	視覺角色	關鍵參數
機身殼體	圓角矩形	主體輪廓、材質質感	圓角 12–16 px、塑膠/金屬漸層
螢幕/顯示窗	矩形（偏移路徑生成）	資訊顯示區	內縮 8 px、深色背景+綠色/琥珀色文字
功能鍵列	矩形陣列（縮放複製）	播放/停止/快轉/倒帶/錄音	等寬等距、圖標+文字標籤
雙卷軸	橢圓 + 偏移路徑同心圓	磁帶卷軸核心視覺	3–4 層同心圓、灰黑漸層模擬磁帶層
VU 指示燈	橢圓陣列	錄音電平動態反饋	5–7 條橫條、綠/黃/紅漸變
紅色錄音鍵	圓形 + 偏移路徑 + 內發光	核心操作鍵、狀態指示	脈動動畫預留、高對比紅

步驟詳解

1. 機身殼體：圓角矩形奠定基調

1. 「圓角矩形工具」按 Shift 繪製正方形（240×240 px），圓角 16 px。
2. 填充線性漸層：頂部淺灰（R:220 G:220 B:220）→ 底部深灰（R:100 G:100 B:100），角度 -90°，模擬頂部受光、底部陰影。
3. 效果 → 風格化 → 投影：模式「正片疊底」、X/Y 2 px、模糊 6 px、不透明度 30%。

2. 顯示窗口：偏移路徑建立內嵌層次

1. 選取機身路徑，物件 → 路徑 → 偏移路徑，偏移 -15 px，生成內嵌矩形。
2. 填充深灰近黑（R:30 G:30 B:35），模擬 LCD 背景。
3. 再次偏移 -3 px，填充極淺灰（R:200 G:200 B:200），模擬窗口玻璃倒角邊緣。

3. 功能鍵列：矩形縮放複製建立等距陣列

1. 繪製第一顆功能鍵基礎矩形（寬 36 px、高 24 px，圓角 4 px），填充中性灰漸層。
2. 右鍵 → 變換 → 縮放，縮放 100%，勾選「複製」，移動水平間距 48 px（含間隙）。
3. 連續按 Ctrl+D 複製 5 次，獲得 6 枚功能鍵（倒帶、停止、播放、快轉、暫停、錄音）。
4. 為「錄音鍵」單獨替換為紅色圓形（見步驟 6），其餘鍵添加對應圖標（三角形、方形、雙三角等）。

4. 分隔線與細節點綴

1. 「線段工具」（\）繪製細直線分隔功能區，描邊 1 pt、顏色深灰、虛線 4pt/4pt。
2. 頂部添加品牌 Logo/型號文字，字體：等寬像素體/早期數位字體。

5. 雙卷軸：同心圓漸層重現磁帶質感

1. 「橢圓工具」按 Shift 繪製正圓（直徑 50 px），置於機身上部左右對稱位置。
2. 物件 → 路徑 → 偏移路徑，偏移 -4 px，生成內圈。填充徑向漸層：中心深灰→中灰→邊緣淺灰，模擬磁帶層疊。
3. 再次偏移 -3 px、-2 px，共 3–4 層同心圓，最內層填充品牌色/紅色小圓點（標識磁帶類型）。
4. 兩側卷軸鏡像對稱，群組命名 `Reel_L` `Reel_R`。

6. 紅色錄音鍵：狀態指示核心

1. 在功能鍵列最右側位置，繪製圓形（直徑 28 px），填充紅色徑向漸層（中心亮紅→邊緣暗紅）。
2. 偏移路徑 -3 px 形成內環，填充更深紅，模擬按鍵凹陷。
3. 添加「效果」→「風格化」→「內發光」（模式「正片疊底」、紅色、模糊 2 px）+「外發光」（模式「螢幕」、紅色、模糊 5 px、不透明度 50%），預留錄音中脈動動畫鉤子。

成果展示

系列化擴展：復古音頻圖標族群

• 圓形錄音機（見下一教學）：圓形機身、頂置麥克風、側邊旋鈕。
• 卡式錄音帶：矩形殼體、雙卷軸透視、標籤貼紙、防誤擦簧片。
• 專業開盤機：大尺寸卷軸、VU 檯、三馬達標識、平衡輸入接口。
• 麥克風/揚聲器/耳機/音頻線材：統一圓角半徑、描邊寬度、色彩體系、圖標語義。

動態交互預留（Lottie/AE 就緒）

• 卷軸旋轉動畫：`Reel_L` 逆時針、`Reel_R` 順時針，速度比 1:1.002（模擬張力差）。
• VU 指示燈：高度隨音頻振幅關鍵幀/表達式驅動（`linear(value, 0, 100, 0, 100)`）。
• 錄音鍵脈動：外發光不透明度/模糊半徑循環關鍵幀。
• 按鍵按下：對應鍵縮放 0.92、Y 軸位移 +2px、投影縮小。

設計系統交付標準

• AI 源檔：完整圖層結構、符號（卷軸、功能鍵、指示燈）、圖形樣式（機身、按鍵、玻璃窗）、色板（全域色彩語義化）。
• SVG Sprite：每組件獨立 ``，支援 CSS 變色、動畫掛載。
• Figma/Sketch 組件庫：Variant `Device=Recorder/Reel/Deck` `State=Idle/Play/Rec/Pause/FF/RW` `Theme=Light/Dark`。
• 設計 Token JSON：尺寸、圓角、間距、色彩、陰影、動畫時長標準化。

方形錄音機圖標不僅是一個圖形，更是一段「可編程的聲音記憶」。透過幾何原語的精準組合、漸層疊加的質感重構、非破壞外觀的狀態管理，你將能構建出一套既具備歷史厚度、又擁有現代交互表達力的復古音頻視覺系統，為音頻類產品、音樂類品牌、懷舊風專案注入靈魂。