輔助線的兩種狀態

❌ 雜亂無序的輔助線：無對齊邏輯、間距隨意、干擾視覺判斷

✅ 精準整齊的輔助線：模組化網格、黃金分割、基線對齊、模組間距統一

基礎操作完全指南

操作	方法	進階技巧
新增	視圖 > 新增輔助線 / 標尺拖拽	輸入精確數值/百分比（50% 中線、61.8% 黃金分割）
刪除	拖出畫布外 / 視圖 > 刪除輔助線	清除所有：視圖 > 清除輔助線
旋轉	Alt+拖拽 = 90° 切換橫縱	—
鎖定	視圖 > 鎖定輔助線	防止誤移動破壞佈局
顯示/隱藏	Ctrl/Cmd+H	臨時隱藏檢視效果
屬性設置	首選項 > 輔助線與網格 / 雙擊輔助線	自定義顏色/樣式（虛線/實線）區分主次
對齊像素	Shift+拖拽自動吸附標尺刻度	視圖縮放時刻度自適應，保證像素級對齊

黃金分割輔助線設置示例

進階工作流：動作/腳本自動化網格系統

960.gs 網格系統一鍵生成

1. 下載 960.gs 官方 .atn 動作文件
2. 載入動作面板播放，自動生成 12/16 欄網格輔助線
3. 畫布寬度調整為 960px 執行動作，再畫布大小左右等寬擴展 → 輔助線自動居中

畫布擴展後輔助線自動居中效果

自定義腳本構建專屬網格系統

// JSX 腳本示例：生成 12 欄、間距 20px、邊距 40px 網格
var doc = app.activeDocument;
var cols = 12, gutter = 20, margin = 40;
var totalWidth = doc.width.value;
var colWidth = (totalWidth - margin*2 - gutter*(cols-1)) / cols;

for (var i = 0; i <= cols; i++) {
    var x = margin + i * (colWidth + gutter);
    if (i == cols) x = totalWidth - margin; // 右邊距
    doc.guides.add(Direction.VERTICAL, x);
}
// 添加基線網格（行高 24px）
for (var y = 0; y < doc.height.value; y += 24) {
    doc.guides.add(Direction.HORIZONTAL, y);
}

實戰佈局策略

模組化設計系統

• 基礎單元：8px/4px 基礎網格（適配移動端/桌面端）
• 組件容器：4/8/12 欄跨度標準化
• 間距規範：xs(4px) / sm(8px) / md(16px) / lg(24px) / xl(32px) / xxl(48px)
• 基線網格：行高 24px（或 1.5×字號），所有文字基線對齊

響應式斷點輔助線

在單一文檔中預設多組斷點輔助線（隱藏/顯示切換）：

• Mobile: 375px / 414px
• Tablet: 768px / 1024px
• Desktop: 1440px / 1920px

團隊協作規範

1. 專案統一輔助線顏色規範：紅=主網格、藍=組件邊界、綠=安全區、灰=基線
2. 導出 .guides 文件（腳本實現）供團隊成員導入，保證像素級一致
3. 設計交付標註文件必須包含關鍵輔助線截圖

總結

輔助線不是裝飾，是設計決策的視覺化外化。從手動拖拽到腳本自動生成，從單頁佈局到設計系統基礎設施，掌握輔助線體系，是從「畫圖」進化為「設計工程化」的關鍵一步。