一個整合建材資料庫、即時3D渲染與透明化價格機制的數位平台， 旨在為屋主、設計師和建材供應商三方提供高效、透明的建材選擇體驗。
本項目採用莫蘭迪色系（Morandi Color Palette），呈現優雅、寧靜的視覺風格。
| 色系 | 色值 | 用途 |
|---|---|---|
| 背景色 | #ede8e3 | 主要背景，溫暖淡米色 |
| 卡片色 | #f5f0eb | 內容卡片，奶油白 |
| 主文字 | #4a453f | 標題與重要文字，深棕灰 |
| 副文字 | #8b8680 | 說明文字，淺灰棕 |
| 強調色-土紅 | #b8926f | 主要操作按鈕、標題線 |
| 強調色-藍綠 | #7b9d9e | 亮點、連結、高級感 |
| 強調色-土棕 | #9d8b7e | 副按鈕、標籤 |
- 玻璃毛玻璃效果 - 使用
backdrop-filter: blur() - 漸層設計 - 135° 線性漸層，呈現深度感
- 圓角 - 主要圓角值 16px，細節圓角 8-12px
- 陰影 - 柔和的陰影，提升卡片立體感
- 邊框 - 半透明土色邊框，和諧融合
- Hero 區塊：平台核心概念與價值主張
- 三大特色卡片：視覺、價格、評價
- 建材資料庫展示（可滾動的卡片網格）
- 核心設計、客群、操作模式說明
- 痛點與解決方案對比
- 詳細說明平台解決的問題
- 核心理念與創新亮點
- 與現有方案的差異化分析
- 三方受益情況說明
- 專業導入模式 vs 自主創作模式詳解
- 兩種模式的對比表
- 完整的操作流程示意（6步驟）
- 適用對象與使用場景說明
- 現行痛點列表
- 六大核心解決方案詳解
- 三方受益情況分析
- 與競爭方案的對比表
- 未來發展方向
- 正式的項目企劃書格式
- Situation-Problem-Solution 論文結構
- 實施計畫與時程
- 商業模式與營收策略
- 定量目標與成效評估
- 可列印格式
- 主字型：Inter, Segoe UI, 微軟正黑體
- 備選字型：-apple-system, BlinkMacSystemFont
- 斷點：768px (平板/手機)
- Grid 系統：
repeat(auto-fit, minmax(...)) - 彈性布局：Flexbox 與 CSS Grid 混合使用
- Hover 狀態：
translateY(-4px)+ 陰影增強 - 轉場：
transition: all 0.3s ease - 按鈕按壓效果：
translateY(-2px)
- 語義化 HTML 標籤
- 足夠的色彩對比度
- 可感知的 focus 狀態
直接在瀏覽器中打開各個 .html 檔案，無需伺服器
-
將所有 HTML 文件上傳到靜態網站託管服務
- GitHub Pages
- Vercel
- Netlify
- AWS S3 + CloudFront
-
若需動態功能（如表單提交），添加後端服務
- Node.js + Express
- Python + Flask/Django
- Firebase
- 各頁面已設定 meta charset 和 viewport
- 建議添加 Open Graph 標籤
- 建議添加結構化資料 (Schema.org)
- 標題層 - H1 (2.8rem) 帶左邊框
- 副標題層 - H2 (1.4-1.8rem) 帶左邊框
- 內容層 - 段落、卡片、列表
- 細節層 - 標籤、小文字、圖示
- 卡片懸停 - 向上浮起 + 邊框色變亮
- 按鈕按下 - 輕微縮小 + 陰影減弱
- 連結狀態 - 顏色變化 + 下劃線（可選）
- 邏輯清晰的分頁導航
- 每頁有相同 Header 和 Footer
- 麵包屑導航支援（可選）
- TOC 目錄支援（在企劃書頁面）
Header
└─ Logo + Brand
└─ Navigation (5個分頁)
Main
├─ Hero Section
│ ├─ 左側：文案 + 按鈕
│ └─ 右側：建材卡片網格
├─ 三大特色卡片
└─ 痛點 & 解決方案對比
Footer
Header
Main
├─ 標題與簡介
├─ 雙模式卡片（2欄）
├─ 對比表格
└─ 流程步驟（6步驟 × 2種模式）
Footer
Header
Main
├─ 文件頭部（標題頁）
├─ 目錄 (TOC)
├─ 正文
│ ├─ Move 1: Situation
│ ├─ Move 2: Problems
│ ├─ Move 3: Solution
│ ├─ Move 4: Implementation
│ ├─ Move 5: Business Model
│ └─ Move 6: Outcomes
└─ 結論
Footer
-
互動式 3D 預覽
- 整合 Three.js 或 Babylon.js
- 實時材質替換
- 光源與視角調整
-
用戶系統
- 登入/註冊
- 個人設計方案保存
- 設計方案分享
-
建材資料庫管理
- Admin 後台
- 建材上架審核
- 供應商管理
-
電商整合
- 直接下單功能
- 支付系統
- 訂單管理
- 深色模式 (Dark Mode)
- 多語言支援 (i18n)
- 無障礙增強 (WCAG 2.1 AA)
- 移動應用 (React Native / Flutter)
項目名稱 | 自己來設計 - Build-It-Yourself
簡述 | 建材自主設計與比價平台
版本 | 1.0
更新日期 | 2025年11月
本設計方案採用示例設計，供學習和參考使用。 若要商業化使用，請確保獲得相關授權。
設計團隊 | 建築設計研究 (Architecture & Design Research)
製作日期 | 2025年11月25日
更新時間 | 持續迭代中