教學緣起與成果展示

翻譯自國外優質教程，展示從空白畫布到高保真 WordPress 主題設計稿的完整決策流程。重點不在於具體像素值，而在於設計系統建立、元件化思維、圖層結構規範，可直接移植至 Figma/Sketch/Adobe XD 現代協作流程。

圖 01：最終高保真設計稿

核心設計系統建立

步驟 1-2：畫布與基底質感

1. 新建文件（參考圖 02 參數：寬 1200px 以上、高度依內容、72 DPI、RGB）
2. 前景色 #232323（深灰近黑），油漆桶填充背景
3. 「濾鏡」→「雜色」→「添加雜色」（數量 2%、高斯分佈、單色），賦予微妙紙質感

步驟 3-4：頂部導航欄與三角形裝飾系統

1. 矩形工具繪製頂部橙色區域（品牌色 #ff6600 等），高度 ~80-100px
2. 新建小文檔（如 20×20px），鋼筆繪製等邊三角形填充橙色 →「編輯」→「定義圖案」命名「Triangle Pattern」
3. 導航欄下方新建圖層，矩形選區填充「Triangle Pattern」 → 矩形選框刪除多餘 → 移動工具對齊至導航欄底部 → 合併

步驟 5-9：導航欄圖層樣式精修（質感引擎）

合併導航相關圖層，套用綜合圖層樣式：

• 投影：正片疊底、距離 1px、大小 1px、不透明度 50%
• 內發光：螢幕模式、白色、不透明度 30%、大小 5px、來源「邊緣」
• 漸層疊加：線性、90°、色標：左 #333 → 右 #222，不透明度 40%

步驟 10-12：底部區塊與鋸齒裝飾鏡像

1. 矩形工具繪製底部區塊，吸管採樣顏色保持一致
2. 同法製作白色鋸齒裝飾（定義白色三角形圖案 → 填充 → 擦除兩側多餘 → 移動對齊頂部）
3. 合併鋸齒層，套用圖層樣式：投影、內發光、斜面與浮雕（內斜面）、漸層疊加，營造折紙/壓紋質感

步驟 13-16：內容區塊、折紙效果與陰影系統

1. Ctrl+點擊底部鋸齒圖層縮圖載入選區 → 矩形選框 Alt 減去左側選區 → 新建圖層填充 #b2a891（暖灰啡）
2. 矩形工具繪製稍亮色塊疊加 → 鋼筆繪製小三角形 → 填充深色 → 高斯模糊 → 移動至邊緣形成折紙陰影
3. 中央矩形區域白色填充，作為圖片/內容佔位區

步驟 17-21：圖片框、按鈕、細節豐富與高光收尾

1. 置入圖片素材至佔位區（剪貼蒙版限制範圍）
2. 按鈕設計：圓角矩形 + 圖層樣式（投影、內發光、斜面浮雕、漸層疊加），兩種狀態（主按鈕/次按鈕）
3. 細節：分隔線、標籤、meta 信息、社交圖標等
4. 頂層新建圖層，大柔邊白筆刷點繪中心高光，混合模式「疊加/柔光」，不透明度 20-30%，提升畫面通透度

現代設計交付規範建議

• 命名規範：BEM 制：`header/nav/logo`、`header/nav/item--active`、`content/post/card`
• 元件庫：將按鈕、輸入框、卡片、導航項、模態框等建立為「連結智能物件」或 CC 庫元件
• 設計標記：色彩、字體、間距、陰影、圓角半徑導出為 JSON/Token，開發直用
• 響應式標註：關鍵斷點（1200/992/768/576px）佈局變化以圖層組隔離標註
• 交互狀態：每個元件最少提供：Default、Hover、Focus、Active、Disabled 5 狀態圖層組