設計規格與結構拆解

• 畫布： 510×440 px（演示尺寸），實際組件寬 300px，高度自適應
• 色系： 背景深灰漸變 #343435→#222222，導航框主色 #007ccb→#004877（科技藍），文字白 #ffffff，分割線白 20% 疊加
• 組件結構： 圓角矩形容器 → 標題區 → 分割線 → 選項列表（文字+分隔線） → 懸停狀態層
• 核心技法： 圖層樣式堆疊（投影+漸變疊加+描邊）、蒙版漸變控制分隔線顯示、移動工具精準複製分佈、混合模式模擬交互狀態

步驟 1：深色漸變背景

1. 新建文件 510×440 px
2. 漸變工具（G）→ 徑向漸變：左上 #343435 → 右下 #222222 → 從左上向右下拖曳

步驟 2：導航框容器基礎形狀

1. 新建圖層 → 圓角矩形工具（U）→ 半徑 10px → 拉 300×300px 正方形（高度後續隨內容擴展）
2. 漸變工具 → 徑向漸變：左上 #007ccb → 右下 #004877 → 從左上向右下拉 → 容器基礎色
3. Ctrl+D 取消選區

步驟 3：容器投影（懸浮感）

圖層樣式 → 「投影」：

• 混合模式：正常
• 顏色：黑 #000000
• 不透明度：40%
• 角度：90°（正上方光源）
• 距離：5px
• 大小：8px
• 雜色：0%

步驟 4：漸變疊加（立體弧面感）

圖層樣式 → 「漸變疊加」：

• 混合模式：正常
• 不透明度：100%
• 漸變：線性、角度 90°、色標：頂部 #0099ff(0%) → 中部 #007ccb(50%) → 底部 #004877(100%)
• 比例：100%
• 勾選「與圖層對齊」

步驟 5：標題區

1. 文字工具輸入標題（如「NAVIGATION」）
2. 字體設定：無襯線粗體（如 Roboto Bold, PingFang SC Semibold）、字號 18-24pt、字距 0、行高 1.2、顏色白 #ffffff
3. 文字圖層樣式 → 「投影」：距離 1px、大小 2px、不透明度 50%、顏色黑 → 增強可讀性

步驟 6：分割線系統（蒙版漸變控制）

1. 矩形選框工具 → 寬 260px、高 1px → 填充白 #ffffff → 得到第一條分割線
2. 圖層混合模式 → 「疊加」 → 不透明度 20% → 形成若隱若現的分隔感
3. 複製分割線（Ctrl+J） → Ctrl+Shift+下箭頭 向下移動 30px（行高） → 重複至填滿選項區
4. 所有分割線圖層選中 → Ctrl+G 成組「Dividers」

步驟 7：選項文字與行高對齊

1. 文字工具輸入選項文字（如「Home」「About」「Services」「Contact」等）
2. 段落面板 → 行高設定 30px（與分割線間距一致）
3. 文字顏色白，字體常規體重，左對齊，左邊距 20px
4. 每個選項文字置於對應分割線上方區域

步驟 8：懸停/選中狀態指示器

1. 新建圖層置於文字層下方、分割線組上方 → 命名「Hover_State」
2. 矩形選框工具選取單個選項區域大小（寬 260px、高 30px） → 填充白 #ffffff
3. 圖層混合模式 → 「柔光」 → 不透明度 20% → 形成微亮選中帶
4. 實際交互原型中，此層對應 :hover/:active 狀態，配合 JS 切換顯示

關鍵參數速查表

元素	關鍵參數	數值/設定
畫布	尺寸	510×440 px
背景漸變	類型/色標	徑向、左上#343435→右下#222222
容器	圓角/尺寸/漸變	10px、300×自適應、徑向#007ccb→#004877
投影	距離/大小/不透明度	5px/8px/40%、角度90°
漸變疊加	類型/角度/色標	線性/90°/頂#0099ff→中#007ccb→底#004877
標題文字	字體/大小/顏色/投影	粗體/20pt/白/1px距離2px大小50%不透明度
分割線	尺寸/顏色/模式/不透明度	260×1px/白/疊加/20%
行高	段落行高	30px（=分割線間距）
懸停態	尺寸/填充/模式/不透明度	260×30px/白/柔光/20%

組件化與設計系統整合建議

• 元件化： 將容器+標題+分割線組+文字組+懸停態層打包為智能物件/CC 資料庫元件/Figma Component
• 變體定義： Primary(藍)/Secondary(灰)/Danger(紅)/Success(綠) 四種色系變體，僅修改漸變疊加色標
• 狀態完整： Default/Hover/Active/Disabled/Focus 五狀態，對應圖層組可視性控制
• 響應式： 容器寬度 100%/300px/280px 斷點，內容自動換行/截斷，分割線寬度跟隨容器內邊距
• 無障礙： 對比度 ≥4.5:1、焦點指示器明顯、語義化 HTML 結構對應（nav>ul>li>a）

避坑指南

• 投影方向與漸變光源衝突： 投影角度 90°（光源正上）與漸變疊加角度 90°（光源正上）必須一致
• 分割線疊加模式失效： 疊加模式依賴底層像素，若容器漸變過暗/過亮會導致分割線不可見，需實測調整不透明度 15-30%
• 行高與分割線間距脫節： 段落行高必須精確等於分割線垂直間距，否則文字無法精準置於分割線間
• 懸停態層級錯誤： 懸停層必須在文字之下、分割線之上，否則遮擋文字或被分割線遮擋
• 圓角矩形縮放樣式失效： Ctrl+T 縮放形狀圖層時，圖層樣式（描邊/投影/斜面大小）不自動縮放，需勾選「隨圖層縮放效果」或轉智能物件

從 PS 到代碼的交付清單

• 設計標註圖（標註尺寸/間距/色值/字體/圓角/陰影/狀態）
• 切圖資源：圖示 SVG、背景圖案 PNG、字體檔案/Google Fonts 鏈接
• CSS 變量表：--nav-bg-start, --nav-bg-end, --nav-shadow, --divider-color, --hover-bg 等
• 交互狀態說明文檔：hover/active/focus/disabled 視覺與行為定義