前言：柵格系統是設計的「隱形骨架」

960 Grid System（960.gs）以 960px 寬度、12/16 欄靈活分割，**優化設計決策、統一團隊語言、加速原型到視覺稿流程**。本教程完整演示：從新建文檔、導入柵格、建立基準網格、劃定參考線，到五大區塊逐步落地。

第一階段：文檔與柵格基建

1. 新建文檔

• 畫布：1680px × 1100px（寬屏適配，留白充足）
• 背景：亮灰 `#F9F9F9`（模擬瀏覽器默認背景，減輕眼部疲勞）

2. 導入 960 12 欄柵格

• 下載：960.gs → `templates/photoshop/960_grid_12_col.psd`
• 合併「12_col_grid」圖層組 → 複製進工作文檔，置中對齊

3. 建立基準網格

**基準網格 = 垂直節奏基石**（行高、留白、模塊高度倍數關係）。
步驟：
① 新建 24px × 24px 文檔，刪除背景
② 畫 1px 底部橫線 → 定義圖案（命名：Baseline_24px）
③ 回工作文檔，新建圖層 → 編輯 → 填充 → 圖案 → 選 Baseline_24px
④ 圖層置底，命名「Baseline Grid」

4. 參考線鎖定 960px 核心工作區

視圖 → 新建參考線 → 垂直：`360px`、`840px`、`1320px`（對應 1680px 畫布居中 960px 區域）

第二階段：五大區塊佈局規劃

整站劃分為：
① 頁眉 ② 插圖區 ③ 內容區-左 ④ 內容區-右 ⑤ 頁腳

第三階段：逐塊精細落地

4. 頁眉：品牌與導航的錨點

• 矩形選區：全寬 × 120px（恰好 5 個 24px 基準網格）
• 填充：深灰 `#2C2C2C`
• 承載：Logo + 主導航

5. Logo：字體、色彩、陰影的微調

• 對齊：第 2 根豎向柵格線（左內邊距 40px）
• 字體：Century Gothic 50pt
• 配色：「Blue」亮藍 `#ADC7D9`，「Grid」加粗白色 `#FFFFFF`
• 內陰影：不透明度 25%、距離 2px、大小 5px → 立體感不浮誇

6. 導航：文字列表的極簡克制

• 字體：Arial 18pt
• 當前態：「Home」白色 `#FFFFFF`
• 常態：其餘亮灰 `#BBBBBB`
• 垂直置中對齊頁眉區塊

7. 插圖區：品牌調性的視覺宣言

• 高度：240px（10 個基準網格）
• 底色：品牌亮藍 `#ADC7D9`
• 漸變疊加：混合模式「疊加」，不透明度 30% → 豐富層次不喧賓奪主

8-9. 柵格紋理背景：品牌基因的視覺化

1. 新建 25px × 25px 文檔，底部+右側各 1px 線 → 定義圖案「Grid_Pattern」
2. 工作文檔新建圖層填充該圖案 → 旋轉 15° → 白色疊加 → 與空白圖層合併命名「grid」
3. 混合模式：「柔光」→ 自然融入背景
4. Ctrl+點擊插圖區底色圖層取選區 → Ctrl+Shift+I 反選 → 刪除多餘柵格
5. 漸變遮罩：黑→透明線性漸變，從左右邊緣向中間參考線拖拽，**柔化邊緣過渡**

10. 插圖區文案：純文字的排版張力

• 標語：Arial 45pt，左對齊 Logo
• 副文案：17pt，緊跟標語，同左對齊
• **純文字也能成就高級感**——關鍵在於字級、行高、留白、對齊的極致克制

11. 滑動展示區：右側功能模塊的承載

• 區域：右側兩根參考線間（第 11-12 欄），高度 8 個基準網格 = 192px，扣除上下 1px 做投影間距
• 投影：`#2C2C2C`，距離 1px，大小 10px → 懸浮感

核心經驗總結

1. **柵格 ≠ 束縛**，是「自由的邊界」——在 960px/12 欄/24px 基準網格三重約束下，設計決策反而更果斷
2. **基準網格貫穿始終**——從頁眉高度、插圖區高度、模塊間距、文字行高，一切尺寸皆為 24px 整數倍
3. **圖層命名與分組規範化**——`Header`、`Hero`、`Content_Left`、`Content_Right`、`Footer`、`Grid_Pattern`、`Guides`……移交前端零溝通成本
4. **智慧對象/圖層組/圖層合成**——非破壞性編輯，支援隨時回滾與響應式斷點推演

給前端的交付清單

• ✅ 960px 核心寬度 + 12 欄柵格規格文檔
• ✅ 24px 基準網格規範（行高、間距、模塊高度倍數）
• ✅ 色值、字體、圓角、陰影、間距 Design Token 表
• ✅ 狀態圖：Default / Hover / Active / Focus / Disabled / Loading
• ✅ 響應式斷點建議：< 768px 單欄堆疊，768-992px 8 欄，>992px 12 欄

**960 Grid 不是終點，是起點**——掌握柵格思維，才能在任何設計系統（Bootstrap、Tailwind、Ant Design、自建 Design System）中遊刃有餘。