從零設計一套棕色系網頁 UI 模板，涵蓋頁首、導航、主視覺圖標區、內容模組、頁尾五大板塊。重點展示圖層樣式系統化應用、組件化思維與設計規範輸出，適合 UI 設計入門實戰。

最終效果預覽

一、畫布與設計規範建立

新建 1200×1500 px、72 dpi、RGB 文件。背景填充 #e9e3c9 (淺棕灰)。建立 960px/1200px 參考線網格系統，規範模組對齊。

二、頁首區塊

1. 頂部導航條：矩形選框 (M) 拉取 1200×100 px 矩形，圖層樣式 → 漸層疊加 (#37281e → #5a4a3e) + 描邊 (1px #ffffff, 內部, 顏色減淡)。
2. 品牌區：Logo (圓角矩形 20px 圓角 + 漸層疊加 + 描邊)、標題「Design.Studio」(Helvetica Neue Bold, 陰影+漸層+描邊)、廣告語、公司簡介文字，對齊基線網格。

三、主導航菜單

1. 複製頁首矩形圖層，高度縮減，複製標題圖層樣式並關閉「陰影」。
2. 菜單文字：常態 #333333、當前頁面白色 (#ffffff) 高亮。
3. 菜單分隔線：1px 直線 #cccccc / #999999 雙線疊加。
4. 當前頁高亮指示器：矩形選框選中白色文字區域 → 新建圖層填充 #9bcd00 (嫩綠) → 不透明度 20%，極簡高亮狀態。
5. 二級導航同邏輯縮小高度製作。

四、主視覺圖標區

三欄等寬佈局，各欄包含：圖標 (PS 內建形狀庫、同 Logo 樣式) + 標題 + 說明文字 + 分隔線。保持 40px 標準間距，基線對齊。

五、主要內容區

1. 大容器：矩形選框填充 #a9a282，描邊 1px #7c6c4b 內部。
2. 四欄內容卡片：同容器樣式縮小，包含縮圖、標題、摘要、閱讀更多按鈕 (漸層+描邊)。
3. 部落格/作品集/服務/關於我們 四大模組格式統一，內容差異化。

六、頁尾呼應頁首

複製頁首品牌區 (Logo、標題、版權信息)，背景色加深至 #37281e，文字色調提亮至 #edd3aa，形成首尾呼應的視覺閉環。

完成作品賞析

UI 設計師交付規範清單

• ☐ 圖層命名規範：`module_component_state` (如 `nav_btn_hover`)
• ☐ 顏色變數化：主色 #37281e、輔助色 #9bcd00、中性灰 #7c6c4b、背景 #e9e3c9 存入色板庫
• ☐ 間距系統：基礎單位 8px (8/16/24/32/40/48...)
• ☐ 字體階層：H1 24pt Bold / H2 18pt Medium / Body 14pt Regular / Caption 12pt Light
• ☐ 圖層樣式庫：按鈕/輸入框/卡片/標籤 統一樣式預設
• ☐ 切圖標記：圖層名後綴 `.png` `.svg` `@2x` 配合生成器自動輸出
• ☐ 響應式斷點標註：1200/992/768/576 px 關鍵佈局變化說明

本教學展示的不只是「畫介面」，更是「建立設計系統雛形」的思維訓練。從單頁模板延伸至組件庫、設計語言、交付規範，是 UI 設計師進階的必經之路。