產品官網設計的核心任務是「在 2D 畫布構建 3D 空間感，引導用戶視覺流向核心 CTA」。本教程以 iPhone App 電商頁為例，從畫布規劃、網格系統、光影材質、透視構建、組件化設計到交互狀態標註，完整還原商業級網頁設計流程。

最終效果

畫布與網格系統

新建 1100×721px（960px 內容區 + 兩側留白）。背景 #2b2b2b。添加「圖層樣式 > 圖案疊加」：自定 2×2px 對角線像素點圖案（鉛筆工具畫兩像素點 → 定義圖案），營造細微紋理感。

Hero 區：透視卡片與光影建模

1. 基礎卡片：圓角矩形 940×226px，R=5px，填 #010101。
2. 左側功能塊：69×81px 圓角矩形，添加「漸變疊加」（#010101→#222222）、內陰影、描邊、外發光，構建凹陷按鈕質感。
3. 透視延伸面：複製功能塊，Ctrl+T 右鍵「透視」，拖動頂部控制點構建透視深度。漸變疊加增強立體面光影變化。
4. 紋理疊加：複製基礎卡片，濾鏡 > 雜色 > 添加雜色（3%，單色），模式「疊加」，賦予金屬拉絲感。
5. 邊緣高光線：直線工具繪製傾斜細線，漸變填充（透明→白→透明），高斯模糊疊加多層（半徑 2/5/7/7），營造邊緣折射光暈。

交互組件：按鈕與導航

縮進按鈕：圓角矩形 + 「斜面浮雕」（內部斜面、平滑、深度 100%、大小 3px、光源 120°/30°、高光線性減淡 70%、陰影線性加深 50%）+「內陰影」+「描邊」。右側鏡像複製，漸變勾選「反向」。

中部內容區：卡片列表與視覺層級

1. 中間矩形 #2a2a2a 作為容器背景。
2. 鋼筆勾勒不規則形狀（頂部彎曲），添加「漸變疊加」「內陰影」「描邊」「外發光」，構建懸浮卡片感。
3. 圓角矩形制作內容卡片，格式化圖層刪除底部圓角，添加雜色（2%，單色）增強紋理。
4. 1px 分割線 #8d8d8d 區隔信息層級。
5. 幻燈片底部鋼筆勾勒曲線形狀，添加投影/高光收尾。

頂部導航與 Logo

Logo 置頂，導航文字對齊基線網格，懸浮/點擊狀態分組標註（供前端實現參考）。

設計交付規範

• 圖層命名規範：`Module_Component_State`（如 `Hero_Card_Default`、`Nav_Link_Hover`）。
• 智能對象封裝：所有圖標/圖片/重複組件轉智能對象，便於批量替換。
• 標註文檔：使用「標註外掛」或手動標註關鍵間距、顏色值、字號、透明度、動效時長。
• 切圖導出：圖標 SVG，插圖 WebP，背景圖 JPEG 品質 85%。

網頁設計不止於「畫好看」，更在於「畫得懂工程、經得起迭代、便於團隊協作」。這套流程與規範，正是從視覺設計邁向產品設計的關鍵一步。