AAPD 專題  |  快素 Fastock

📋 目錄

• 團隊成員
  • 設計團隊
  • 前端團隊
• 專題概念
• 頁面設計
  • 頁面架構
• 開發進度
• 技術

---

👥 團隊成員

• 設計團隊：

  • Ryan
  • 小麥
  • 白白
  • Wei Wei
  • Ashley

• 前端團隊（名單按 A-Z 英文字母排序）：

  • Angel
  • Nora
  • Zenos

💡 專題概念

快素 Fastock，是一個專為設計師打造的素材購買平台，我們旨在解決現有素材網站中「分類混亂」、「購買流程繁瑣」以及「素材實用性不明」等痛點，提供一個**「分類清晰、單次購買友善、輕鬆上手及提供素材試用及評價機制」**的體驗，讓使用者能快速找到並購買所需的創意資源。

品牌核心

提升購物流程的順暢度，讓使用者能夠快速找到合適的素材，並立即下單。

設計理念

• 🧩 分類清晰： 搜尋工具分類豐富，但又不會令人眼花撩亂，讓新手也能快速導航到適合商品。
• ✨ 簡潔明亮： 介面主要搭配簡潔的平面顏色，並搭配鮮明的點綴，容易令人眼前一亮。
• 🚀 操作直覺： 在結帳過程不需要使用者進行太多步驟，能快速完成購買。
• 🎯 改善搜尋與分類設計： 針對使用者痛點，優化標籤與分類系統，提升搜尋效率。

設計特色

我們的設計圍繞著**「分類清晰」、「簡潔明亮」、「操作直覺」**三大核心原則，確保使用者能在最短時間內找到並購買所需素材，大幅提升工作效率與購買體驗。

---

🎨 頁面設計

📄 頁面架構

快素 Fastock

├── 🏠 首頁 (Home)

│       ├── 🔍 關鍵字搜尋結果 (Keyword-search)

│       └── ❌ 搜尋失敗 (No-search)

├── 📂 產品列表 (Product-list)

├── 🖼️ 產品詳情 (Product-detail)

├── 🛒 結帳流程 (Order page)

└── ✔️ 結帳完成 (Order complete)

---

🏠 首頁

功能

• Header： 包含分類選單、搜尋欄與快速結帳功能。
• 卡片： 點擊後可前往產品詳情頁。
• Footer： 包含聯絡資訊與社群連結。

導航/功能路徑

• 點擊「登入」 → 切換到登入樣式
• 點擊「header購物車icon」 → 顯示快速結帳視窗
  • 在視窗中點擊結帳 → 前往結帳完成頁面
• 搜尋欄
  • 可切換文字模式與圖搜圖模式。
  • 輸入「貓」或「cat」導向關鍵字搜尋結果頁。
  • 輸入其他文字導向關鍵字搜尋失敗頁。
• 點擊「查看更多」 → 產品列表頁
• 點擊「精選區的卡片」 → 產品詳情頁

---

📂 產品列表頁

功能

• 篩選器： 可依據不同標籤篩選商品。
• 產品列表： 呈現符合篩選條件的商品清單。
• 搜尋欄： 供使用者進行關鍵字搜尋。

導航/功能路徑

• 點擊任一商品卡片 → 產品詳情頁

---

🖼️ 產品詳情頁

功能

• 商品主圖： 可智慧裁切、複製、下載。
• 商品資訊： 包含名稱、價格、描述等。
• 結帳視窗： 提供「快速結帳」與「加入購物車」選項。
• 相關商品推薦。

導航/功能路徑

• 點擊「結帳」 → 結帳流程頁

---

🛒 結帳流程頁

功能

• 購物車列表： 顯示欲購買的商品。
• 結帳表單： 包含收件人資訊、付款方式等。
• 註冊/登入功能。

導航/功能路徑

• 點擊「結帳」 → 完成結帳頁

---

✔️ 結帳完成頁

功能

• 結帳明細： 顯示已購買的商品、時間、訂單編號等。
• 提供購買商品與明細下載。
• 註冊/登入功能。

導航/功能路徑

• 點擊「下載」 → 下載購入圖片
• 點擊「下載購買明細」 → 下載購買明細
• 在密碼欄位輸入密碼 → 快速註冊會員

📈 開發進度

💻 前端切版階段

• 首頁 - PC / 手機版靜態切版已完成。
• 產品列表頁 - PC 版靜態切版已完成。
• 產品詳情頁 - PC / 手機版靜態切版已完成。
• 結帳流程頁 - PC / 手機版靜態切版已完成。

⚙️ 動態功能實作

• 首頁： 可使用簡易關鍵字搜尋與圖搜圖功能。
• 產品列表頁： 篩選器可選擇標籤。
• 產品詳情頁： 已完成照片智慧裁切、複製、下載、快速結帳視窗及必填資料驗證功能。
• 結帳流程頁： 已完成結帳與註冊功能。

---

🛠️ 技術

• 前端技術： HTML, CSS, JavaScript
• CSS 框架： Bootstrap 5