前言：導航欄是介面的「門面」，透明質感是永恆經典

優秀的導航欄需兼具：品牌識別度、清晰資訊架構、視覺層次感、響應式適配性。本教程以「透明磨砂質感導航欄」為例，拆解從背景氛圍營造、矢量骨架搭建、圖層樣式堆疊到 PSD 結構化管理的完整專業流程。

一、背景氛圍：透明質感的「靈魂伴侶」

透明物體需背景襯托才能顯現質感。單一純色背景無法體現透明層次。

• 素材選擇： 色彩統一、紋理豐富、構圖留白的風景/材質圖 (如麥田、木紋、抽象漸變)。
• 處理手法： 濾鏡 > 模糊 > 高斯模糊 (半徑 50-200 px) → 消除細節、保留色塊關係、營造朦朧纏綿感。
• 進階： 疊加漸變圖層 (徑向/線性)、調整亮度/對比度、加入微量雜色 (濾鏡 > 雜色 > 添加雜色 1-3%) 增加質感顆粒感。

二、矢量骨架：形狀工具構建可無限縮放的結構

堅持：**能用形狀工具 (矩形、圓角矩形、橢圓、多邊形、自定義形狀) 絕不畫像素**。

• 繪製導航欄主體：圓角矩形工具 (U)，設定半徑 (如 6-10 px)，按 Shift 畫正圓角矩形。
• 繪製分隔線、圖示容器、按鈕背景：同層或新圖層繪製形狀。
• 關鍵技巧： 形狀圖層 填充設 0% → 顏色消失，**路徑保留** → 後續完全靠圖層樣式賦予視覺效果，隨時可改形狀、改大小、改圓角，零像素損耗。

三、圖層樣式堆疊：構建透明磨砂質感的「配方」

對填充 0% 的形狀圖層，疊加以下樣式 (順序影響最終效果)：

1. 投影：模式「正片疊底」，顏色深灰/品牌深色，不透明度 30-50%，角度 90°/全域光、距離 1-3px、擴展 0、大小 3-8px → 立體懸浮感。
2. 內陰影：模式「正片疊底」，顏色深色，不透明度 20-40%、距離 0、噴射 0、大小 3-10px → 內凹邊框感、增加厚度。
3. 內發光：模式「篩選/線性減淡」，顏色白/高亮色，不透明度 10-30%、噴射 0、大小 5-20px → 邊緣微光、玻璃感。
4. 斜面與浮雕：風格「內部斜面」、技巧「平滑」、深度 100-200%、方向上、大小 0-3px、軟化 0、角度 90°/全域光、高光模式「篩選」不透明 30-60%、陰影模式「正片疊底」不透明 20-40% → 邊緣微微倒角、晶瑩剔透感。
5. 漸變疊加：混合模式「疊加/柔光」，不透明度 10-30%，漸變「前景到透明」或自定義淺色到深色漸變、角度 90° → 輕微色調豐富層次。
6. 圖案疊加 (可選)：模式「疊加/柔光」，不透明度 5-15%，圖案選「細微紋理」 (布紋、金屬拉絲、噪點) → 微觀質感真實感。
7. 描邊 (可選)；大小 1px、位置「內部」、填充類型「漸變」 (淺到深) → 銳利邊框定義。

四、PSD 結構化管理：團隊協作與易維護的關鍵

• 群組命名： `01_BG_背景`、`02_NavBar_導航欄主體`、`03_Logo_標誌`、`04_Menu_選單項`、`05_Icons_圖示`、`06_States_狀態` (懸停、激活、禁用)。
• 圖層命名規範： `形狀_主體`、`樣式_投影`、`文字_選單_首頁`、`圖示_用戶_默認`、`圖示_用戶_懸停`。
• 智能物件封裝： Logo、複雜圖示、插畫元素 → 轉為智能物件置入，源文件外部管理。
• 圖層佈局版 (Layer Comps) 或 畫板： 儲存「默認態」、「懸停態」、「手機態」、「深色模式態」等狀態，一鍵切換導出。
• 參考線/網格： 視圖 > 新建參考線版面 建立 12 欄網格、基線網格，所有元素對齊吸附。

五、響應式延伸：從桌面到移動端

• 複製桌面版群組 → 重命名 `NavBar_Mobile`。
• 調整畫板尺寸 (375×812 / 390×844)。
• 導航欄高度縮減 (44-48pt)、Logo 縮小、選單摺疊為漢堡包圖示、圖示間距調整、字號縮小。
• 利用矢量形狀 + 圖層樣式，縮放調整零失真，樣式自動縮放 (需勾選「圖層樣式隨圖層縮放」或手動調整樣式數值)。

六、導出交付：給前端/開發的最佳實踐

• 切圖導出： 檔案 > 匯出 > 存儲為 Web 所用格式 / 匯出為 (CC 2015+) → 選中圖層/群組 → 右鍵「快速匯出為 PNG」/「匯出為」→ 設定 @1x, @2x, @3x、格式 PNG/WebP、縮放算法「雙三次」。
• 樣式規格文檔： 標註：高度、內邊距、字體/字號/行高/顏色、圖示尺寸、間距、圓角半徑、陰影參數 (X/Y/模糊/擴展/顏色)、漸變色標、斜面參數。工具：Zeplin、Figma、蓝湖、MarkMan 或手寫 Markdown。
• 原始檔交付： 整理乾淨的 PSD (刪除隱藏圖層、合併無關圖層、鎖定背景、標註顏色模式 RGB/8bit) + 字體授權說明 + 圖示源文件 (AI/SVG)。

總結

專業導航欄設計 = 氛圍背景 (模糊/漸變/雜色) + 矢量骨架 (形狀工具+填充 0%) + 圖層樣式配方 (投影/內陰影/內發光/斜面/漸變/圖案/描邊) + 結構化 PSD (群組/命名/智能物件/版面/響應式) + 規範交付 (切圖/規格/源檔)。掌握這套體系，不只是畫個導航欄，而是構建可擴展、可維護、可交付的 UI 設計資產庫。