# 購物網站 APP 功能與 UI 文案規劃 初稿 - Ge

這份文件詳細規劃了一個標準購物 APP 所需的各個功能頁面、詳細內容以及對應的 UI 文案。

---

## 1. 使用者核心流程 (Core User Flows)

本章節描述使用者為達成特定目標，在 APP 中所經過的一系列步驟與頁面。

### 1.1. 首次訪客購物流程 (Guest Checkout Flow)

此流程描述一位新使用者從進入 APP 到完成購買的完整路徑。

1. **進入 APP -> [首頁]**: 瀏覽熱門商品或活動 Banner。
2. **點擊商品 -> [商品詳細頁]**: 查看商品資訊，選擇規格 (如尺寸、顏色)，點擊「加入購物車」。
3. **點擊購物車圖示 -> [購物車頁]**: 確認商品清單與金額，點擊「前往結帳」。
4. **系統提示**: APP 會提示使用者「登入」或「以訪客身份繼續」。使用者選擇「以訪客身份繼續」。
5. **進入結帳 -> [結帳流程 - 運送資訊]**: 填寫收件人姓名、電話、地址等資訊。
6. **下一步 -> [結帳流程 - 付款資訊]**: 選擇付款方式並填寫資料。
7. **下一步 -> [結帳流程 - 最終確認]**: 再次核對所有資訊是否正確。
8. **點擊「完成訂單」 -> [完成訂單頁]**: 看到訂單成功訊息與訂單編號。頁面可提示「註冊會員以方便查詢訂單」。

### 1.2. 已註冊會員購物流程 (Returning Customer Flow)

此流程描述已登入的會員進行購物，流程更為簡便。

1. **進入 APP -> [首頁]**: APP 顯示個人化推薦，使用者已是登入狀態。
2. **瀏覽或搜尋 -> [商品詳細頁]**: 找到心儀商品，點擊「加入購物車」。
3. **點擊購物車圖示 -> [購物車頁]**: 確認商品，點擊「前往結帳」。
4. **進入結帳 -> [結帳流程 - 運送資訊]**: 系統自動帶入預設收貨地址，使用者可直接確認或選擇其他已存地址。
5. **下一步 -> [結帳流程 - 付款資訊]**: 系統可能帶入預設付款方式，使用者確認即可。
6. **下一步 -> [結帳流程 - 最終確認]**: 快速核對後，點擊「完成訂單」。
7. **完成 -> [完成訂單頁]**: 看到訂單成功訊息。

### 1.3. 瀏覽與收藏商品流程 (Browsing & Wishlist Flow)

此流程描述使用者沒有立即購買，而是探索並收藏商品。

1. **進入 APP -> [首頁]**: 點擊「分類」或使用「搜尋」。
2. **瀏覽 -> [商品分類/列表頁]**: 使用篩選和排序功能，瀏覽商品列表。
3. **點擊商品 -> [商品詳細頁]**: 查看商品詳情，覺得有興趣但暫不購買，點擊「加入願望清單」。
4. **系統提示**: 若使用者未登入，系統會提示需要「登入」或「註冊」才能同步願望清單。
5. **查看收藏 -> [會員中心 - 願望清單]**: 使用者可隨時在會員中心查看所有收藏的商品。

### 1.4. 查詢訂單狀態流程 (Order Status Check Flow)

此流程描述使用者在下單後，回來關心訂單的處理進度。

1. **進入 APP -> [會員中心]**: 點擊「我的訂單」或「訂單歷史紀錄」。
2. **查看列表 -> [訂單歷史紀錄]**: 瀏覽所有歷史訂單的列表，包含訂單狀態（如：處理中、已出貨）。
3. **點擊訂單 -> [訂單詳細頁]**: 查看特定訂單的詳細商品、收件資訊及物流追蹤號碼（如果已出貨）。

### 1.5. 忘記密碼流程 (Password Reset Flow)

此流程描述使用者忘記密碼時，如何重設密碼。

1. **進入 APP -> [會員註冊/登入頁]**: 在登入區塊，點擊「忘記密碼？」。
2. **輸入驗證資訊 -> [忘記密碼頁]**: 輸入註冊時使用的電子郵件或手機號碼，點擊「發送驗證信/簡訊」。
3. **接收驗證碼**: 使用者到信箱或手機查看驗證碼或點擊重設連結。
4. **重設密碼 -> [重設密碼頁]**: 輸入驗證碼（如果需要）以及新的密碼兩次。
5. **完成 -> [會員註冊/登入頁]**: 密碼重設成功，頁面跳轉回登入頁，提示使用者用新密碼登入。

---

## 2. 核心購物流程頁面

### 2.1. 首頁 (Home)

* **頁面目標:** 吸引使用者、展示熱門商品或活動、引導使用者探索。
* **詳細內容:**
* 頂部 Logo 與搜尋欄。
* 主要橫幅廣告 (Banner)，可輪播多張活動圖片。
* 主要商品分類入口 (例如：女裝、男裝、電子產品)。
* 促銷活動區塊 (例如：限時特賣、本週新品)。
* 熱門商品推薦列表 (卡片式設計，包含商品圖、名稱、價格)。
* 品牌合作夥伴 Logo 牆。
* 底部導覽列 (首頁、分類、購物車、會員)。
* **UI 文案:**
* **搜尋欄:** "尋找您喜歡的商品..."
* **橫幅廣告:** (根據活動而定) "夏季新品上市，全館 8 折起！", "歡慶週年，滿千送百！"
* **區塊標題:** "熱門分類", "限時特賣", "猜您喜歡"
* **商品卡片按鈕:** "查看詳情", "加入購物車"

### 2.2. 商品分類/列表頁 (Product Listing Page)

* **頁面目標:** 讓使用者瀏覽特定分類下的所有商品，並提供篩選和排序功能。
* **詳細內容:**
* 當前分類的標題 (例如："女裝上衣")。
* 排序功能下拉選單 (依價格、上架時間、熱門度)。
* 篩選功能按鈕 (開啟側邊欄或彈出視窗)。
* 篩選條件：價格區間、品牌、尺寸、顏色等。
* 商品網格或列表 (包含商品圖、名稱、價格、評價星級)。
* **UI 文案:**
* **排序:** "排序方式", "預設排序", "價格由低到高", "價格由高到低", "最新上架"
* **篩選:** "篩選", "重設", "完成"
* **篩選條件標題:** "價格範圍", "品牌", "尺寸"
* **無商品提示:** "此分類下目前沒有商品。"

### 2.3. 商品詳細頁 (Product Detail Page)

* **頁面目標:** 提供單一商品的完整資訊，促使使用者做出購買決定。
* **詳細內容:**
* 商品圖片集 (可滑動、放大)。
* 商品名稱。
* 商品價格 (若有特價則顯示原價和特價)。
* 商品簡短描述。
* 規格選擇 (例如：顏色、尺寸、容量)。
* 數量選擇器。
* "加入購物車" 按鈕。
* "立即購買" 按鈕。
* "加入願望清單" 按鈕/圖示。
* 詳細資訊區塊 (可切換標籤頁：商品描述、規格、顧客評價)。
* 相關商品推薦。
* **UI 文案:**
* **按鈕:** "加入購物車", "立即購買"
* **標籤頁:** "商品詳情", "規格參數", "顧客評價"
* **規格選擇:** "請選擇顏色", "請選擇尺寸"
* **區塊標題:** "您可能也會喜歡"

### 2.4. 搜尋結果頁 (Search Results Page)

* **頁面目標:** 根據使用者輸入的關鍵字顯示相關商品。
* **詳細內容:**
* 顯示搜尋的關鍵字。
* 顯示搜尋到的商品數量。
* 與商品列表頁相同的排序和篩選功能。
* 商品網格或列表。
* 若無結果，顯示提示訊息和推薦關鍵字。
* **UI 文案:**
* **結果標題:** "`[關鍵字]` 的搜尋結果", "共找到 `[數量]` 件商品"
* **無結果提示:** "找不到與 `[關鍵字]` 相關的商品。", "您可以試試：`[推薦關鍵字1]`、`[推薦關鍵字2]`"

### 2.5. 購物車頁 (Shopping Cart)

* **頁面目標:** 讓使用者檢視已選擇的商品，修改數量或刪除，並準備結帳。
* **詳細內容:**
* 購物車內的商品列表 (包含商品圖、名稱、規格、單價、數量)。
* 可修改商品數量或刪除單項商品。
* 優惠碼/折扣碼輸入欄位。
* 訂單金額摘要 (商品總額、運費、折扣、應付總額)。
* "繼續購物" 連結。
* "前往結帳" 按鈕。
* 若購物車為空，顯示提示訊息。
* **UI 文案:**
* **頁面標題:** "我的購物車"
* **按鈕:** "前往結帳", "套用優惠碼"
* **摘要標題:** "訂單摘要"
* **摘要項目:** "商品總計", "運費", "折扣金額", "應付總額"
* **空購物車提示:** "您的購物車是空的。", "立即前往探索商品吧！"
* **連結:** "繼續購物"

---

## 3. 結帳流程頁面 (Checkout)

### 3.1. 步驟一：運送資訊

* **頁面目標:** 收集使用者的收貨地址和選擇運送方式。
* **詳細內容:**
* 收件人姓名、電話、地址表單。
* 可選擇已存地址。
* 運送方式選項 (例如：宅配、超商取貨)。
* 若選超商，提供選擇門市的按鈕。
* "下一步" 或 "前往付款" 按鈕。
* **UI 文案:**
* **頁面標題:** "運送資訊"
* **表單標籤:** "收件人姓名", "聯絡電話", "收件地址"
* **運送方式標題:** "選擇運送方式"
* **選項:** "宅配到府", "7-11 超商取貨", "全家超商取貨"
* **按鈕:** "選擇取貨門市", "儲存地址", "下一步：選擇付款方式"

### 3.2. 步驟二：付款資訊

* **頁面目標:** 讓使用者選擇付款方式並填寫相關資訊。
* **詳細內容:**
* 付款方式選項 (信用卡、LINE Pay、貨到付款等)。
* 若選信用卡，顯示信用卡號、到期日、安全碼的表單。
* 發票選項 (電子發票、公司統編)。
* "返回上一步" 連結。
* "下一步" 或 "確認訂單" 按鈕。
* **UI 文案:**
* **頁面標題:** "付款資訊"
* **付款方式標題:** "選擇付款方式"
* **選項:** "信用卡/金融卡", "LINE Pay", "貨到付款"
* **發票標題:** "發票設定"
* **按鈕:** "下一步：預覽訂單"

### 3.3. 步驟三：最終確認

* **頁面目標:** 讓使用者在送出訂單前做最後的總覽和確認。
* **詳細內容:**
* 完整訂單摘要：
* 收件資訊。
* 運送方式。
* 付款方式。
* 購買的商品列表及數量。
* 最終金額明細。
* "完成訂單" 或 "送出訂單" 按鈕。
* **UI 文案:**
* **頁面標題:** "確認訂單"
* **區塊標題:** "收件資訊", "付款方式", "商品清單", "金額明細"
* **按鈕:** "確認並送出訂單"
* **提示:** "送出訂單前，請再次確認您的訂單資訊是否正確。"

### 3.4. 完成訂單頁 (Order Confirmation)

* **頁面目標:** 告知使用者訂單已成功建立，並提供訂單編號。
* **詳細內容:**
* 感謝訊息。
* 訂單成功的圖示。
* 訂單編號。
* 訂單摘要簡述。
* "繼續購物" 按鈕。
* "查看訂單詳情" 按鈕。
* **UI 文案:**
* **訊息:** "感謝您的購買！", "您的訂單已成功建立。"
* **訂單編號:** "訂單編號： `[OrderNumber]`"
* **提示:** "我們已將訂單詳情寄至您的電子信箱。"
* **按鈕:** "繼續購物", "查看我的訂單"

---

## 4. 會員中心頁面 (User Account)

### 4.1. 會員註冊/登入頁 (Login/Register)

* **頁面目標:** 讓新使用者註冊或讓既有使用者登入。
* **詳細內容:**
* 可切換的 "登入" 與 "註冊" 標籤。
* **登入:** Email/手機號碼、密碼欄位、"忘記密碼" 連結。
* **註冊:** Email/手機號碼、設定密碼、確認密碼、同意服務條款勾選框。
* 第三方登入按鈕 (Google, Facebook, Apple)。
* **UI 文案:**
* **標題:** "登入", "註冊新帳號"
* **表單標籤:** "電子郵件", "密碼", "確認密碼"
* **連結/勾選框:** "忘記密碼？", "我已閱讀並同意服務條款與隱私權政策。"
* **按鈕:** "登入", "註冊"
* **分隔線文字:** "或使用其他方式登入"

### 4.2. 會員資料管理 (Profile Management)

* **頁面目標:** 讓使用者管理個人資料、密碼和收貨地址。
* **詳細內容:**
* 顯示使用者暱稱和頭像。
* 修改個人資料 (暱稱、生日等)。
* 修改密碼。
* 管理收貨地址 (新增、編輯、刪除)。
* 登出按鈕。
* **UI 文案:**
* **頁面標題:** "我的帳戶"
* **選項:** "個人資料", "修改密碼", "地址管理"
* **按鈕:** "儲存變更", "登出"

### 4.3. 訂單歷史紀錄 (Order History)

* **頁面目標:** 讓使用者查詢過去的所有訂單狀態與詳情。
* **詳細內容:**
* 訂單列表 (顯示訂單編號、下單日期、總金額、訂單狀態)。
* 可依訂單狀態篩選 (待付款、處理中、已出貨、已完成、已取消)。
* 點擊單筆訂單可查看完整詳情。
* **UI 文案:**
* **頁面標題:** "我的訂單"
* **篩選標籤:** "全部", "待付款", "待出貨", "運送中", "已完成"
* **訂單狀態:** "處理中", "已出貨", "已送達"
* **無訂單提示:** "您目前沒有任何訂單記錄。"

### 4.4. 願望清單 (Wishlist)

* **頁面目標:** 讓使用者收藏感興趣的商品，以便未來快速找到或購買。
* **詳細內容:**
* 收藏的商品列表 (類似商品列表頁)。
* 可以直接將商品 "加入購物車"。
* 可以 "從願望清單中移除"。
* **UI 文案:**
* **頁面標題:** "我的願望清單"
* **按鈕:** "加入購物車", "移除"
* **無商品提示:** "您的願望清單是空的。", "快去把喜歡的商品加進來吧！"

---

## 5. 靜態與支援頁面

### 5.1. 關於我們 (About Us)

* **頁面目標:** 介紹品牌故事、理念與價值。
* **詳細內容:**
* 品牌故事文字。
* 公司里程碑或照片。
* **UI 文案:**
* **頁面標題:** "關於我們"

### 5.2. 常見問題 (FAQ)

* **頁面目標:** 提供常見問題的解答，減少客服壓力。
* **詳細內容:**
* 問題分類 (例如：訂單、付款、運送、退貨)。
* 可展開/收合的問答列表。
* **UI 文案:**
* **頁面標題:** "常見問題"
* **問題分類:** "訂單問題", "付款問題", "退貨政策"

### 5.3. 聯絡我們 (Contact Us)

* **頁面目標:** 提供使用者聯繫客服的管道。
* **詳細內容:**
* 客服電話、Email。
* 線上客服對談入口。
* 聯絡表單。
* 服務時間說明。
* **UI 文案:**
* **頁面標題:** "聯絡我們"
* **區塊標題:** "線上客服", "聯絡表單"
* **服務時間:** "服務時間：週一至週五 09:00 - 18:00"