商業地產官網首頁設計，需兼顧品牌調性、項目亮點展示、用戶轉化路徑。本教程從線框構思到高保真視覺稿，展示大氣穩重的配色、模塊化佈局、關鍵資訊層級與交互狀態設計，適合中高級 UI/WEB 設計師參考。

設計策略與佈局規劃

• 色調：深藍 #0A2463 + 金 #C5A04A + 留白，傳遞專業、信賴、高端感。
• 模塊結構：
  ① 頂部導航（Logo、項目分類、登錄/註冊、400 電話）
  ② 全屏 Banner 輪播（項目主視覺+核心賣點+CTA 按鈕）
  ③ 核心優勢四圖標區塊（區位、配套、品牌、增值）
  ④ 戶型展示模塊（戶型圖+面積+價格+預約按鈕）
  ⑤ 實景/樣板間畫廊（燈箱查看）
  ⑥ 品牌故事/開發商資質
  ⑦ 底部：聯繫表單、友情鏈接、備案號、社交媒體入口

關鍵視覺細節製作

Banner 區：大圖蒙版漸變融合、標題字體加粗描邊、CTA 按鈕「金色漸變+白色描邊+投影」懸停態放大 1.02 倍。
戶型卡片：圖片 4:3 比例、鼠標懸停顯示「戶型解析」遮罩層、價格區塊紅色標籤「熱銷中」。
畫廊：縮圖網格間距 20px、點擊放大燈箱支持鍵盤左右鍵切換。
表單驗證：即時提示、提交成功 Toast 彈窗、自動追蹤事件埋點。

圖層組織與交付規範

• 圖層組命名：`01_Header`、`02_Banner`、`03_Advantage`…
• 顏色/字體/間距定義於「設計規範」頁面。
• 圖標統一用智能物件/形狀圖層，支持無損縮放。
• 交付：PSD 源文件 + 切圖標註 (Zeplin/Figma 鏈接) + 響應式斷點說明 (1200/992/768/576px)。

此設計體系可延展至項目小程序、銷售中心大屏、物料設計，保證品牌視覺一致性。