車速表盤是儀表板 UI 設計的經典課題，涉及精密幾何構圖、刻度線算法生成、多層光影材質模擬、文字排版等核心技能。本教學以 600×600 px 畫布為例，完整演示從背景建立、主體框架、細/粗刻度線程式化生成、刻度間隔區塊、指針、數字標籤、高光陰影系統的全流程，適合進階學習者鞏固 AI 精密繪圖與外觀面板非破壞渲染工作流。

第一階段：畫布、背景與主體框架

Step 1-2 新建文件與深色背景

• Ctrl+N：600×600 px、RGB、72 ppi、取消「對齊像素網格」。
• 矩形工具 (M) 畫 610×610 px 深灰藍矩形 #22202C，對齊面板「對齊到畫布」水平垂直置中。圖層命名「bg」並鎖定。

Step 3-6 主體框架：多層漸變/內發光/投影/膠片顆粒疊加

1. 主背景圓：橢圓工具 260 px 圓，徑向漸變 (角度 90°)，右色 #403E4A、左色 #7BA075 (位置 15%)。置中，圖層「mainBack」。
2. 外環陰影：外觀面板 > 新增填色 > 50% 不透明度 > 效果 > 路徑 > 偏移路徑 10px > 高斯模糊 15px。形成外擴柔和陰暈。
3. 第二層漸變：外觀面板再新增填色，漸變參數見圖，透明度 15%，偏移路徑 10px。增強邊緣立體過渡。
4. 內凹邊框：260 px 圓、填 #22202C、置中、圖層「mainFont」。外觀面板：內發光 (模式正片疊底、不透明度 75%、模糊 5px、邊緣) + 投影 (模式正片疊底、距離 2px、模糊 3px)。
5. 膠片顆粒質感：mainFont 外觀面板新增填色：黑色、10% 不透明度、正片疊底、偏移路徑 -1px、藝術效果 > 膠片顆粒 (顆粒 15、醒目 0、強度 10)。賦予儀表板細微磨砂質感。

第二階段：刻度線系統程式化生成 (核心算法)

關鍵設定：視圖 > 顯示網格/對齊網格；偏好設定 > 參考線與網格：網格 5px/分割 1 (即 5px 主網格)；偏好設定 > 一般：鍵盤增量 1px。

細刻度線 (每 5° 一條，共 36 條，刪除 11 條留 25 條)

1. 鋼筆工具畫兩條垂直 10px 線段 (間距 5px)，描邊 2pt、色 #01D444 (綠)。群組 (Ctrl+G)。
2. 效果 > 扭曲與變形 > 變形：旋轉 10°、複製 35 (360°/10°=36 條，含原件共 36 組)。
3. 物件 > 擴展外觀 > 物件 > 路徑 > 外描邊。取消群組 (Shift+Ctrl+G 兩次)。
4. 直接選取工具選中需刪除的 11 組 (對應 0°、90°、180°、270° 等主刻度位置)，刪除。
5. 選取剩餘細線，路徑查找器 > 聯集 > Ctrl+8 (建立複合路徑)。圖層命名「thinLines」。

粗刻度線 (每 30° 一條，共 12 條，刪除 3 條留 9 條)

1. 鋼筆畫兩條垂直 15px 線段，描邊 4pt、同色。群組。
2. 效果 > 扭曲與變形 > 變形：旋轉 30°、複製 11 (共 12 組)。
3. 擴展外觀 > 外描邊 > 取消群組。刪除 3 組 (對應細刻度已存在的主刻度位置)。
4. 路徑查找器 > 聯集 > Ctrl+8 複合路徑，命名「thickLines」。
5. 外觀面板新增填色：綠色 #00FF00、效果 > 路徑 > 偏移路徑 -1px (形成內縮高光邊)。

刻度間隔區塊 (間隔高光帶)

1. 225 px 圓、無填色、描邊 5pt #01D444、偏移路徑 -2.5px、擴展外觀。
2. 物件 > 路徑 > 添加錨點。直接選取工具刪除特定錨點 (保留主刻度對應段落)。物件 > 路徑 > 外描邊。
3. thickLines 複製偏移 2px、置頂 (Shift+Ctrl+])、與上述路徑「減去前面」得間隔區塊。Ctrl+8 複合路徑，命名「intervals」。

第三階段：指針、數字、細節與完成

(原文內容截至 Step 4 開始，此處補全邏輯)

• 指針：鋼筆繪製指針形狀 (寬基部、尖頭、尾部平衡配重)，填紅色漸變，中心點對齊表盤中心，效果 > 3D > 旋轉 微調立體感。
• 數字標籤：文字工具輸入數字，路徑文字工具貼附 200px 圓周，調整字符間距、基線偏移。外觀面板加投影融入光影體系。
• 中心蓋/品牌 Logo：小圓形疊加漸變、高光、投影。
• 整體分組與命名：圖層面板按結構分組 (背景、主體框架、細刻度、粗刻度、間隔區、指針、文字、中心蓋)，便於後續動畫導出 (如 Bodymovin/Lottie) 時按圖層輸出。

核心技術點總結

1. 像素網格 + 鍵盤增量 1px：構建精密幾何的座標系。
2. 變形效果 + 擴展外觀 + 路徑查找器：將「旋轉複製」參數化為程式化生成刻度線，避免手動逐個旋轉的誤差與低效。
3. 外觀面板多重填色/效果疊加：單一路徑承載主體漸變、內發光、投影、膠片顆粒、偏移高光等多層視覺屬性，非破壞、可隨時回調。
4. 複合路徑 (Ctrl+8) 管理同屬性元素群：刻度線、間隔區塊合併為單一複合路徑，統一上色、編輯、導出。
5. 不透明度蒙版/混合模式控制透明過渡：玻璃罩、高光帶等半透明效果。

此工作流可直接遷移至儀表板、智能手錶表盤、汽車 HUD 等精密圓形 UI 組件的設計生產中。