網頁頭部導航欄是用戶進入網站的第一視覺觸點，其設計質量直接決定品牌專業度感知與用戶導航效率。本教學以 800px 實際內容寬度為例，建立從「畫布規劃、參考線系統、基礎構件、交互狀態、Logo 系統、紋理質感、背景氛圍」的完整設計交付標準流程。

畫布與參考線系統：專業佈局的隱形骨架

新建文檔：寬 1000px (大於實際內容寬 800px，留白便於展示) > 高度自定 (建議 1200px+，後期裁切)。
參考線建立 SOP：

1. 矩形選框工具 > 固定寬度 800px > 新建圖層填充任意色
2. 移動工具 (V) 水平置中 > Ctrl+R 開啟標尺
3. 從標尺拖出 4 條參考線貼合選區邊緣 (左/右/上/下)
4. 刪除輔助圖層，保留參考線系統。所有設計元素嚴格限制在左右參考線內。

導航欄基礎構件構建

步驟 1：主導航背景條——漸變疊加建立材質感

矩形選框工具固定高度 60px，新建圖層建立選區填充任意色。取消選區 (Ctrl+D) > 雙擊圖層開啟層樣式 > 「漸變疊加」：線性漸變、角度 90°、左色 #2C3E50 (深藍灰)、右色 #1A252F (更深)、不透明度 100%、比例 100%。

步驟 2：雙線邊框——高光/陰影單像素技法

導航底部新建兩個 1px 高度圖層：上層純白 #FFFFFF (模擬頂部高光)、下層純黑 #000000 (模擬底部陰影)。合併兩層 (Ctrl+E) > 混合模式「疊加」> 不透明度 50%。單像素高光/陰影是賦予扁平介面「物理厚度」最經濟有效的手法。

步驟 3：Hover/Active 狀態按鈕——非破壞性變體製作

複製主導航背景圖層 (Ctrl+J) > Ctrl+T 縮寬至單個按鈕寬度 (如 120px) > 調整漸變疊加：增加對比度 (左色 #34495E、右色 #2C3E50)、角度改為 -90° (垂直反轉) > 添加「內發光」白色 #FFFFFF、不透明度 30%、大小 5px 模擬按下凹陷感。

步驟 4：分隔線與背景強化

按鈕左右兩側各建 1px 寬灰色垂直線 (#7F8C8D) 作為分隔。導航下方新建圖層填充高對比度漸變 (如 #E74C3C 到 #C0392B)，混合模式「柔光」不透明度 20%，增強導航與頁面主體的視覺分層。

Logo 系統設計：品牌識別的視覺錨點

文字工具輸入 "shop"，字體 Montserrat Bold/Source Han Sans Heavy，字號 36pt，字距 -50。層樣式堆疊：

1. 倒角與浮雕：外部倒角、平滑、深度 150%、大小 10px、光澤輪廓「圓錐-倒置」
2. 描邊：1px、內部、漸變填充 (金屬銀)
3. 內發光：螢幕模式、#FFFFFF、大小 8px
4. 投影：正片疊底、距離 3px、大小 5px

像素級紋理：3×3px 圖案定義與應用

新建 3×3px 透明文檔 > 鉛筆工具 1px 繪製三個對角線黑點 (對角線模式) > 編輯 > 定義圖案「Diagonal_Dots_3px」。
回主文檔：Ctrl+點擊 Logo 文字層載入選區 > 編輯 > 填充 > 內容「圖案」選擇剛定義圖案 > 確定。像素級圖案賦予 Logo 獨特的「數位織物」觸感，區別於純色填充的平庸感。

背景氛圍與最終交付

背景圖層套用「濾鏡 > 雜色 > 添加雜色」：數量 2.5%、高斯分佈、單色。微弱噪點質感消除數位純色的「塑料感」，提升整體質感檔次。
最終檢查清單：參考線對齊、圖層命名規範、圖層組結構 (Nav_BG / Nav_Buttons / Logo / Dividers / BG_Atmosphere)、另存為 .psd 源檔 + 導出 @1x/@2x PNG 切圖供前端開發。

響應式設計延伸思考

• 斷點系統：1200px / 992px / 768px / 576px 四級斷點
• 導航折疊邏輯：>992px 顯示全文本，768-992px 圖標+關鍵詞，<768px 漢堡菜單
• 設計交付：提供 4 種斷點下的導航欄 PSD/Figma 源檔，標註間距、字號、顏色變量

專業的導航欄設計，不是畫幾個矩形加幾行字，而是一套包含佈局系統、狀態機制、品牌系統、質感語言、響應式規則的完整設計系統模塊。建立這套 SOP，讓每一次導航設計都成為品牌資產的積累，而非重複勞動的開始。