在 Photoshop 中手動拖曳參考線、計算欄寬、間距、邊距，是每位 UI/網頁設計師的痛點。GuideGuide 這款免費擴展面板，以「輸入數字 → 一鍵生成精準輔助線/網格」的極簡交互，徹底解決了 PS 原生佈局工具的短板。本文詳細介紹其核心功能、實戰場景與安裝指南。

為什麼需要 GuideGuide？

傳統 PS 佈局痛點：

• 手算公式：`(頁面寬 - 間隙×(欄數-1)) ÷ 欄數 = 欄寬`，改動一次重算一次。
• 矩形複製對齊：繪製矩形 → 複製移動 → 對齊分佈，圖層污染嚴重。
• 無法針對選區/圖層生成局部網格。
• 基線網格、中線、邊距需手動拖曳參考線，極易出現 1 px 偏差。

核心功能實戰演示

1. 多欄網格一鍵生成

• 面板輸入：`Columns: 12` | `Gutter: 24px` | `Margins: 40px` | `Row Height: 40px`。
• 點擊「Make Grid」→ 畫布瞬間生成 12 欄、24 px 間隙、四邊 40 px 邊距、40 px 行高的完整參考線系統。
  

2. 選區/圖層級局部網格

• 選框工具（M）拉選區，或 Ctrl+點擊 圖層縮略圖載入選區。
• 面板輸入欄數/間距 → 點擊圖標 → 輔助線僅在選區範圍內生成，完美適配組件級佈局（導航欄、卡片列表、模態框內部）。
  

3. 一鍵中線/中心點定位

• 選區/圖層選中狀態，點擊面板「Midpoints」圖標 → 瞬間生成水平/垂直/十字中心線，對齊 Logo、圖標、按鈕零誤差。

4. 常用佈局預設存儲與複用

• 面板「Save」按鈕將當前參數存為預設（如「Web_12Col_1200」「Mobile_4Col_375」「Dashboard_24Col_1440」）。
• 下次打開面板直接下拉選擇，零配置恢復專案規範。

5. 等邊距矩形/卡片快速繪製

• 選中參考圖層 → Ctrl+點擊 載入選區 → 面板 `Margins` 輸入負值（如 `-20px`） → 點擊圖標 → 自動生成內縮 20 px 的四邊參考線 → 矩形工具吸附繪製完美等邊距卡片。
  

6. 基線網格系統

• 輸入 `Row Height: 8px`（或 4px/12px 依設計規範） → 點擊「Rows」→ 全畫布生成水平基線參考線。
  
• 文字層基線對齊網格，實現垂直韻律。

7. 剩餘像素智能分配

• 當畫布寬度無法被「欄寬+間隙」整除時，面板 `Remainder` 選項決定多餘像素分配位置：`Right/Bottom`（默認）、`Left/Top`、`Center`、`Distribute`（均勻分配到各間隙）。

安裝指南

1. 下載 `.zxp` 安裝包（官網 guideguide.me 或 GitHub Releases）。
2. 啟動 Adobe Extension Manager（CC 2014-2018）或 Creative Cloud 桌面應用（CC 2019+）→ 安裝擴展。
3. PS 中：窗口 → 擴展功能 → GuideGuide 打開面板。
4. CC 2015+ 可能需在「偏好設定 → 外掌模組」勾選「允許未簽名擴展」。

進階技巧與替代方案

• 鍵盤快捷鍵綁定：編輯 → 鍵盤快捷鍵 → 面板選單 → GuideGuide 指派 Ctrl+Shift+G 快速喚出。
• 配合 Artboards：多畫板文檔中，選中特定畫板再執行 GuideGuide，網格自動限制在該畫板邊界。
• 原生替代：PS CC 2020+ 「視圖 → 新建參考線佈局」提供基礎欄/間距/邊距功能，但缺乏選區級、基線、預設管理、負邊距等進階能力。
• 腳本替代：ExtendScript/UXP 腳本可實現類似功能，但無 GUI 交互，維護成本高。

結語

GuideGuide 以「做減法」的設計哲學——隱藏複雜計算、暴露核心參數、尊重選區上下文——將 PS 從「繪圖工具」升級為「佈局設計工具」。對於日產出十幾版頁面的設計師，它節省的不只是時間，更是認知負荷，將精力真正歸還給設計決策本身。