# 01 購物網站APP功能規劃與UI文案（HackMD版本）初版 - Co

:::info
💡 **文檔說明**
本文檔包含購物網站APP的完整功能規劃、使用者流程設計和UI文案，適用於產品設計、開發和測試參考。
:::

## 📑 目錄
1. [核心功能模組概覽](#核心功能模組概覽)
2. [使用者流程設計](#使用者流程設計)
3. [用戶相關頁面](#用戶相關頁面)
4. [商品相關頁面](#商品相關頁面)
5. [購物流程頁面](#購物流程頁面)
6. [其他功能頁面](#其他功能頁面)
7. [通用組件UI文案](#通用組件UI文案)

---

## 核心功能模組概覽

### 主要功能模組
1. **用戶管理系統**
- 用戶註冊/登入
- 個人資料管理
- 訂單歷史
- 收藏與願望清單

2. **商品展示系統**
- 商品瀏覽
- 分類檢索
- 搜尋功能
- 商品詳情

3. **購物車系統**
- 購物車管理
- 結帳流程
- 配送選項
- 付款處理

4. **訂單管理系統**
- 訂單追蹤
- 退換貨處理
- 發票管理
- 客服支援

5. **優惠促銷系統**
- 優惠券
- 折扣活動
- 會員制度
- 推薦獎勵

---

## 使用者流程設計

:::warning
🔄 **流程設計原則**
- 簡化用戶操作步驟
- 提供清晰的視覺回饋
- 確保容錯機制完善
- 支援多種設備和瀏覽器
:::

### 1. 新用戶註冊流程

#### 🔄 流程概覽

graph LR
    A[APP啟動] --> B[引導頁面]
    B --> C[註冊/登入選擇]
    C --> D[填寫註冊資訊]
    D --> E[手機驗證]
    E --> F[設定密碼]
    F --> G[註冊成功]
    G --> H[完善個人資料]
    H --> I[進入首頁]

#### 📋 詳細步驟
1. **APP首次啟動**
- 顯示歡迎引導頁（3-4頁）
- 展示APP主要功能特色
- 最後一頁提供「註冊」和「登入」選項

2. **註冊資訊填寫**
- 輸入手機號碼
- 發送並輸入驗證碼
- 設定登入密碼
- 同意服務條款

3. **帳戶設定**
- 設定暱稱（可選）
- 選擇性別（可選）
- 設定生日（可選）
- 選擇興趣分類（用於推薦）

4. **註冊完成**
- 顯示註冊成功頁面
- 自動登入並跳轉到首頁
- 發送歡迎訊息或新手優惠券

### 2. 用戶登入流程

#### 🔄 流程概覽

graph LR
    A[點擊登入] --> B[選擇登入方式]
    B --> C[輸入帳密/第三方授權]
    C --> D[身份驗證]
    D --> E[登入成功]
    E --> F[進入首頁/返回原頁面]

#### 📋 詳細步驟
1. **登入方式選擇**
- 手機號/郵箱 + 密碼
- 手機號 + 驗證碼
- 第三方登入（Google/Facebook/Apple）

2. **身份驗證**
- 驗證帳號密碼
- 檢查帳戶狀態
- 更新登入時間和設備資訊

3. **登入後處理**
- 同步用戶資料
- 載入購物車數據
- 檢查未讀通知

### 3. 商品瀏覽與搜尋流程

#### 🔄 流程概覽

graph LR
    A[進入首頁] --> B[瀏覽推薦商品/分類]
    B --> C[搜尋特定商品]
    C --> D[查看商品列表]
    D --> E[篩選排序]
    E --> F[查看商品詳情]
    F --> G[決定購買/收藏]

#### 📋 詳細步驟
1. **首頁瀏覽**
- 查看輪播廣告
- 瀏覽熱門分類
- 查看個人化推薦

2. **商品搜尋**
- 輸入關鍵字搜尋
- 語音搜尋
- 掃描條碼搜尋
- 查看搜尋建議

3. **結果篩選**
- 按價格範圍篩選
- 按品牌篩選
- 按評分篩選
- 按銷量排序

4. **商品詳情**
- 查看商品圖片
- 閱讀商品描述
- 查看用戶評價
- 選擇商品規格

### 4. 購物車與結帳流程

#### 🔄 流程概覽

graph LR
    A[加入購物車] --> B[調整商品數量]
    B --> C[選擇結帳商品]
    C --> D[確認收貨地址]
    D --> E[選擇配送方式]
    E --> F[選擇支付方式]
    F --> G[使用優惠券]
    G --> H[提交訂單]
    H --> I[完成支付]

#### 📋 詳細步驟
1. **購物車管理**
- 查看購物車商品
- 調整商品數量
- 刪除不需要的商品
- 選擇結帳商品

2. **地址與配送**
- 選擇或新增收貨地址
- 選擇配送方式
- 查看配送費用
- 選擇配送時間

3. **支付處理**
- 選擇支付方式
- 使用優惠券或折扣碼
- 確認訂單總金額
- 完成支付

4. **訂單確認**
- 顯示訂單成功頁面
- 發送訂單確認通知
- 提供訂單追蹤資訊

### 5. 訂單管理流程

#### 🔄 流程概覽

graph LR
    A[查看訂單] --> B[追蹤物流]
    B --> C[確認收貨]
    C --> D[商品評價]
    D --> E[申請售後（如需要）]

#### 📋 詳細步驟
1. **訂單追蹤**
- 查看訂單狀態
- 追蹤物流資訊
- 接收狀態更新通知

2. **收貨確認**
- 收到商品
- 檢查商品品質
- 確認收貨

3. **售後處理**
- 評價商品和服務
- 申請退換貨（如需要）
- 聯絡客服

### 6. 客服與支援流程

#### 🔄 流程概覽

graph LR
    A[遇到問題] --> B[查看常見問題]
    B --> C[線上客服諮詢]
    C --> D[問題解決]
    D --> E[評價服務]

#### 📋 詳細步驟
1. **問題諮詢**
- 查看FAQ
- 聯絡線上客服
- 提交問題表單

2. **問題處理**
- 客服回應
- 提供解決方案
- 跟進處理進度

3. **服務評價**
- 評價客服服務
- 提供改善建議

### 7. 會員權益流程

#### 🔄 流程概覽

graph LR
    A[註冊成為會員] --> B[累積積分]
    B --> C[享受會員折扣]
    C --> D[使用優惠券]
    D --> E[升級會員等級]
    E --> F[專享權益]

#### 📋 詳細步驟
1. **積分累積**
- 購物獲得積分
- 完成任務獲得積分
- 邀請好友獲得積分

2. **權益使用**
- 積分兌換商品
- 使用會員專屬優惠
- 享受免運費權益

3. **等級升級**
- 達成升級條件
- 解鎖新權益
- 獲得升級獎勵

:::success
💡 **流程優化建議**

**減少流程摩擦**
- 最小化必填欄位
- 提供快速登入選項
- 記住用戶選擇
- 智能預填資訊

**提升用戶體驗**
- 清晰的進度指示
- 即時的反饋訊息
- 容錯設計
- 快速返回選項

**個人化體驗**
- 基於行為的推薦
- 個人化首頁
- 智能搜尋建議
- 定制化通知
:::

---

## 用戶相關頁面

### 1. 登入/註冊頁面

#### 功能描述
提供用戶快速登入或新用戶註冊的入口

#### 頁面內容
- 登入表單（手機號/email + 密碼）
- 第三方登入選項（Google、Facebook、Apple）
- 註冊入口
- 忘記密碼連結

#### UI文案

標題：歡迎回來！
副標題：登入以享受更好的購物體驗

登入表單：
- 輸入框提示文字：「手機號碼或電子信箱」
- 密碼框提示文字：「請輸入密碼」
- 登入按鈕：「登入」
- 記住我：「記住登入狀態」
- 忘記密碼連結：「忘記密碼？」

其他登入方式：
- 標題：「或使用以下方式快速登入」
- Google按鈕：「使用Google登入」
- Facebook按鈕：「使用Facebook登入」
- Apple按鈕：「使用Apple登入」

註冊入口：
- 提示文字：「還沒有帳戶？」
- 註冊連結：「立即註冊」

錯誤提示：
- 「請輸入正確的手機號碼或電子信箱」
- 「密碼不能為空」
- 「帳號或密碼錯誤，請重新輸入」

### 2. 用戶註冊頁面

#### 功能描述
新用戶註冊流程，收集基本用戶資訊

#### 頁面內容
- 註冊表單（姓名、手機、email、密碼）
- 驗證碼輸入
- 服務條款同意
- 註冊完成引導

#### UI文案

標題：加入我們
副標題：創建您的專屬購物帳戶

註冊表單：
- 姓名輸入框：「請輸入您的姓名」
- 手機輸入框：「請輸入手機號碼」
- 郵箱輸入框：「請輸入電子信箱」
- 密碼輸入框：「請設定密碼（至少8位）」
- 確認密碼：「請再次輸入密碼」
- 驗證碼：「請輸入驗證碼」
- 獲取驗證碼按鈕：「獲取驗證碼」

服務條款：
- 「我已閱讀並同意」
- 服務條款連結：「《服務條款》」
- 隱私政策連結：「《隱私政策》」

註冊按鈕：「立即註冊」

已有帳戶：
- 提示文字：「已經有帳戶了？」
- 登入連結：「立即登入」

成功提示：
- 「註冊成功！歡迎加入我們」
- 「正在為您跳轉...」

### 3. 個人中心頁面

#### 功能描述
用戶個人資訊管理中樞，包含各項個人功能入口

#### 頁面內容
- 用戶頭像和基本資訊
- 訂單狀態快捷入口
- 個人資料編輯
- 地址管理
- 收藏夾
- 客服中心
- 設定選項

#### UI文案

頁面標題：個人中心

用戶資訊區：
- 預設頭像alt：「用戶頭像」
- 等級標示：「普通會員」/「VIP會員」
- 積分顯示：「積分：XXX分」

訂單管理：
- 區塊標題：「我的訂單」
- 查看全部：「查看全部訂單」
- 待付款：「待付款」
- 待發貨：「待發貨」  
- 待收貨：「待收貨」
- 待評價：「待評價」
- 退換貨：「退換/售後」

功能選單：
- 個人資料：「個人資料」
- 收貨地址：「收貨地址」
- 我的收藏：「我的收藏」
- 優惠券：「我的優惠券」
- 客服中心：「客服中心」
- 系統設定：「設定」
- 登出：「登出」

會員權益：
- 標題：「會員專享」
- VIP特權：「升級VIP享更多特權」
- 積分商城：「積分兌換好禮」

### 4. 個人資料編輯頁面

#### 功能描述
用戶可編輯個人基本資訊

#### 頁面內容
- 頭像上傳
- 基本資訊編輯
- 聯絡資訊更新
- 密碼修改

#### UI文案

頁面標題：個人資料

頭像設定：
- 「點擊更換頭像」
- 「從相冊選擇」
- 「拍照」
- 「移除當前頭像」

基本資訊：
- 暱稱：「暱稱」
- 真實姓名：「真實姓名」
- 性別：「性別」「男」「女」「不便透露」
- 生日：「生日」
- 所在地：「所在地區」

聯絡資訊：
- 手機號：「手機號碼」
- 郵箱：「電子信箱」

安全設定：
- 修改密碼：「修改密碼」
- 綁定設定：「帳戶綁定」

操作按鈕：
- 儲存：「儲存修改」
- 取消：「取消」

成功提示：
- 「個人資料更新成功」

### 5. 地址管理頁面

#### 功能描述
管理用戶的收貨地址

#### 頁面內容
- 地址清單顯示
- 新增地址功能
- 編輯現有地址
- 設定預設地址

#### UI文案

頁面標題：收貨地址

操作按鈕：
- 新增地址：「新增收貨地址」

地址卡片：
- 收件人姓名：「收件人：XXX」
- 聯絡電話：「電話：XXX」
- 詳細地址：「地址：XXX」
- 預設標籤：「預設地址」
- 編輯按鈕：「編輯」
- 刪除按鈕：「刪除」
- 設為預設：「設為預設」

空狀態：
- 標題：「還沒有收貨地址」
- 描述：「快去新增一個收貨地址吧」
- 按鈕：「新增地址」

新增/編輯地址表單：
- 收件人：「收件人姓名」
- 聯絡電話：「聯絡電話」
- 所在地區：「請選擇省市區」
- 詳細地址：「詳細地址（街道、門牌號等）」
- 地址標籤：「家」「公司」「學校」「其他」
- 設為預設：「設為預設收貨地址」
- 儲存按鈕：「儲存地址」

確認刪除：
- 標題：「確認刪除」
- 內容：「確定要刪除這個收貨地址嗎？」
- 取消：「取消」
- 確認：「刪除」

---

## 商品相關頁面

### 1. 首頁

#### 功能描述
APP主入口，展示推薦商品、熱門分類、促銷活動

#### 頁面內容
- 搜尋框
- 輪播廣告
- 分類導航
- 推薦商品
- 熱門活動
- 新品上市

#### UI文案

搜尋框：
- 提示文字：「搜尋商品、品牌、店鋪」
- 語音搜尋：「語音」
- 掃碼：「掃一掃」

分類導航：
- 全部分類：「全部分類」
- 常見分類：「數碼3C」「服飾」「美妝」「居家」「運動」

廣告輪播：
- 指示點：「第X張，共Y張」

推薦區塊：
- 為你推薦：「為你推薦」
- 查看更多：「查看更多」
- 刷新推薦：「換一批」

熱門活動：
- 標題：「熱門活動」
- 限時特賣：「限時特賣」
- 新人專享：「新人專享」
- 品牌特賣：「品牌特賣」

新品上市：
- 標題：「新品首發」
- 更多新品：「更多新品」

商品卡片：
- 原價：「原價：￥XXX」
- 現價：「￥XXX」
- 折扣標籤：「X折」
- 免運標籤：「免運」
- 評價：「X人評價」
- 好評率：「好評率XX%」

### 2. 分類頁面

#### 功能描述
商品分類瀏覽，多級分類結構

#### 頁面內容
- 一級分類導航
- 二級分類展示
- 分類商品列表
- 篩選排序功能

#### UI文案

頁面標題：商品分類

分類標籤：
- 全部：「全部」
- 熱門分類示例：「手機數碼」「服飾鞋包」「美妝護膚」「家居百貨」

篩選排序：
- 篩選：「篩選」
- 排序：「排序」
- 綜合排序：「綜合」
- 銷量優先：「銷量」
- 價格升序：「價格↑」
- 價格降序：「價格↓」
- 評價優先：「評價」
- 上新時間：「新品」

篩選面板：
- 標題：「篩選條件」
- 價格區間：「價格區間」
- 品牌：「品牌」
- 更多篩選：「更多篩選」
- 重置：「重置」
- 確定：「確定」

商品列表：
- 加載中：「正在載入更多商品...」
- 沒有更多：「沒有更多商品了」
- 空狀態：「該分類下暫無商品」

### 3. 商品詳情頁面

#### 功能描述
展示商品詳細資訊，包含圖片、規格、評價等

#### 頁面內容
- 商品圖片輪播
- 商品基本資訊
- 規格選擇
- 商品詳情
- 用戶評價
- 推薦商品

#### UI文案

商品資訊：
- 收藏按鈕：「收藏」「已收藏」
- 分享按鈕：「分享」
- 優惠標籤：「限時特價」「滿減優惠」「新人專享」
- 原價：「原價：￥XXX」
- 現價：「￥XXX」
- 運費：「免運費」「運費：￥X」
- 庫存：「庫存：XXX件」
- 銷量：「已售XXX件」

規格選擇：
- 顏色：「顏色」
- 尺寸：「尺寸」  
- 版本：「版本」
- 數量：「數量」
- 減少：「-」
- 增加：「+」

購買操作：
- 加入購物車：「加入購物車」
- 立即購買：「立即購買」
- 客服諮詢：「客服」

商品詳情：
- 標籤：「商品詳情」「規格參數」「用戶評價」「售後保障」

評價區塊：
- 評價標題：「用戶評價」
- 好評率：「好評率XX%」
- 評價標籤：「全部」「有圖」「好評」「中評」「差評」
- 查看更多：「查看全部XXX條評價」

推薦區塊：
- 標題：「推薦商品」「看了又看」「買了又買」

商品服務：
- 正品保證：「正品保證」
- 七天退換：「7天無理由退換」
- 售後服務：「售後服務」
- 快速配送：「快速配送」

### 4. 搜尋結果頁面

#### 功能描述
顯示搜尋關鍵字的商品結果

#### 頁面內容
- 搜尋框
- 搜尋建議
- 結果篩選
- 商品列表

#### UI文案

搜尋框：
- 提示文字：「搜尋商品、品牌、店鋪」
- 搜尋按鈕：「搜尋」
- 清除按鈕：「清除」

搜尋結果：
- 結果統計：「為您找到XXX個相關商品」
- 暫無結果：「抱歉，沒有找到相關商品」
- 搜尋建議：「您是不是想找：」

歷史搜尋：
- 標題：「搜尋歷史」
- 清除歷史：「清除歷史」

熱門搜尋：
- 標題：「熱門搜尋」

篩選排序：
- 篩選：「篩選」
- 排序：「排序」
- 綜合：「綜合」
- 銷量：「銷量」
- 價格：「價格」
- 評價：「評價」

空狀態建議：
- 標題：「沒有找到相關商品」
- 建議：「建議您：」
- 檢查拼寫：「檢查關鍵字拼寫」
- 簡化關鍵字：「嘗試更簡短的關鍵字」
- 瀏覽分類：「瀏覽商品分類」

### 5. 商品評價頁面

#### 功能描述
詳細展示商品的用戶評價和評分

#### 頁面內容
- 評價統計
- 評價篩選
- 評價列表
- 評價回覆

#### UI文案

頁面標題：商品評價

評價統計：
- 總體評分：「總體評分」
- 星級顯示：「X.X分」
- 評價總數：「共XXX條評價」
- 好評率：「好評率XX%」

評分詳情：
- 五星：「5星（XXX）」
- 四星：「4星（XXX）」
- 三星：「3星（XXX）」
- 二星：「2星（XXX）」
- 一星：「1星（XXX）」

篩選標籤：
- 全部：「全部」
- 有圖評價：「有圖」
- 好評：「好評」
- 中評：「中評」
- 差評：「差評」

評價內容：
- 用戶資訊：「用戶暱稱」
- 評價時間：「YYYY-MM-DD」
- 商品規格：「規格：XXX」
- 評價內容：「評價文字內容」
- 商家回覆：「商家回覆：」
- 點讚數：「有用（XXX）」

操作按鈕：
- 點讚：「有用」
- 舉報：「舉報」

空狀態：
- 標題：「暫無評價」
- 描述：「還沒有用戶評價，快來搶沙發吧！」

---

## 購物流程頁面

### 1. 購物車頁面

#### 功能描述
管理用戶加入購物車的商品

#### 頁面內容
- 商品列表
- 數量調整
- 商品勾選
- 優惠券使用
- 結帳計算

#### UI文案

頁面標題：購物車

商品管理：
- 全選：「全選」
- 編輯：「編輯」
- 完成：「完成」
- 刪除：「刪除」

商品資訊：
- 商品規格：「規格：XXX」
- 商品價格：「￥XXX」
- 原價：「原價：￥XXX」
- 數量調整：「-」「+」
- 庫存提示：「庫存不足」「僅剩X件」

失效商品：
- 標題：「失效商品」
- 商品狀態：「商品已下架」「庫存不足」
- 清除失效：「清除失效商品」

優惠資訊：
- 優惠券：「優惠券」
- 滿減活動：「滿￥XXX減￥XXX」
- 免運提醒：「還差￥XXX免運費」

結算區域：
- 小計：「小計：￥XXX」
- 運費：「運費：￥XXX」
- 優惠：「優惠：-￥XXX」
- 總計：「總計：￥XXX」
- 結帳按鈕：「去結帳（X）」

空購物車：
- 標題：「購物車空空如也」
- 描述：「快去挑選心儀的商品吧」
- 按鈕：「去購物」

推薦商品：
- 標題：「猜你喜歡」

### 2. 結帳頁面

#### 功能描述
確認訂單資訊，完成購買流程

#### 頁面內容
- 收貨地址選擇
- 商品清單確認
- 配送方式選擇
- 支付方式選擇
- 訂單備註

#### UI文案

頁面標題：確認訂單

收貨地址：
- 標題：「收貨地址」
- 添加地址：「新增收貨地址」
- 預設標籤：「預設」
- 收件人：「收件人：XXX」
- 電話：「電話：XXX」
- 地址：「地址：XXX」
- 更換地址：「更換地址」

商品清單：
- 標題：「商品清單」
- 商品數量：「共X件商品」
- 商品規格：「規格：XXX」
- 商品數量：「×X」
- 商品價格：「￥XXX」

配送方式：
- 標題：「配送方式」
- 標準配送：「標準配送（免運費）」
- 快速配送：「快速配送（+￥10）」
- 預計送達：「預計XX月XX日送達」

支付方式：
- 標題：「支付方式」
- 餘額支付：「餘額支付」
- 支付寶：「支付寶」
- 微信支付：「微信支付」
- 信用卡：「信用卡支付」

優惠券：
- 標題：「優惠券」
- 可用優惠券：「X張可用」
- 選擇優惠券：「選擇優惠券」
- 優惠金額：「-￥XXX」

訂單備註：
- 標題：「訂單備註」
- 輸入框：「如有特殊需求請填寫...」

費用明細：
- 商品金額：「商品金額：￥XXX」
- 運費：「運費：￥XXX」
- 優惠券：「優惠券：-￥XXX」
- 實付金額：「實付金額：￥XXX」

提交訂單：
- 按鈕：「提交訂單」
- 同意條款：「提交訂單即表示同意《購買協議》」

### 3. 支付頁面

#### 功能描述
完成訂單支付流程

#### 頁面內容
- 訂單摘要
- 支付方式選擇
- 支付密碼輸入
- 支付結果

#### UI文案

頁面標題：訂單支付

訂單資訊：
- 訂單號：「訂單號：XXX」
- 商品名稱：「商品：XXX等X件商品」
- 收貨地址：「收貨地址：XXX」
- 支付金額：「￥XXX」

支付方式：
- 標題：「選擇支付方式」
- 餘額支付：「餘額支付（餘額：￥XXX）」
- 支付寶：「支付寶」
- 微信支付：「微信支付」
- 銀行卡：「銀行卡支付」

支付密碼：
- 標題：「請輸入支付密碼」
- 密碼框：「● ● ● ● ● ●」
- 忘記密碼：「忘記密碼？」

支付按鈕：
- 確認支付：「確認支付 ￥XXX」
- 取消支付：「取消支付」

支付中：
- 提示：「正在處理支付...」
- 描述：「請稍候，不要關閉頁面」

支付成功：
- 標題：「支付成功」
- 訂單號：「訂單號：XXX」
- 支付金額：「支付金額：￥XXX」
- 查看訂單：「查看訂單」
- 繼續購物：「繼續購物」

支付失敗：
- 標題：「支付失敗」
- 失敗原因：「支付失敗原因」
- 重新支付：「重新支付」
- 更換支付方式：「更換支付方式」

### 4. 訂單確認頁面

#### 功能描述
顯示訂單提交成功的確認資訊

#### 頁面內容
- 訂單狀態
- 訂單詳情
- 後續操作引導

#### UI文案

頁面標題：訂單確認

成功提示：
- 圖標：「✓」
- 標題：「訂單提交成功」
- 描述：「感謝您的購買，我們會盡快為您處理」

訂單資訊：
- 訂單號：「訂單號：XXX」
- 下單時間：「下單時間：YYYY-MM-DD HH:MM」
- 支付金額：「支付金額：￥XXX」
- 預計送達：「預計送達：XX月XX日」

操作按鈕：
- 查看訂單：「查看訂單詳情」
- 繼續購物：「繼續購物」
- 分享好友：「分享給好友」

溫馨提示：
- 標題：「溫馨提示」
- 配送提醒：「商品將在1-3個工作日內發貨」
- 追蹤提醒：「您可以在「我的訂單」中追蹤物流」
- 客服提醒：「如有問題請聯絡客服」

---

## 其他功能頁面

### 1. 我的訂單頁面

#### 功能描述
顯示用戶的所有訂單記錄和狀態

#### 頁面內容
- 訂單狀態篩選
- 訂單列表
- 訂單操作
- 物流追蹤

#### UI文案

頁面標題：我的訂單

狀態篩選：
- 全部：「全部」
- 待付款：「待付款」
- 待發貨：「待發貨」
- 待收貨：「待收貨」
- 待評價：「待評價」
- 已完成：「已完成」
- 售後：「售後」

訂單卡片：
- 訂單號：「訂單號：XXX」
- 訂單狀態：「待付款」「已發貨」「已完成」等
- 下單時間：「YYYY-MM-DD HH:MM」
- 商品資訊：「商品名稱 × 數量」
- 訂單金額：「￥XXX」

訂單操作：
- 取消訂單：「取消訂單」
- 立即付款：「立即付款」
- 確認收貨：「確認收貨」
- 查看物流：「查看物流」
- 申請退款：「申請退款」
- 評價商品：「評價商品」
- 再次購買：「再次購買」

空狀態：
- 標題：「暫無訂單」
- 描述：「您還沒有相關訂單」
- 按鈕：「去購物」

操作確認：
- 取消訂單：「確定要取消這個訂單嗎？」
- 確認收貨：「確認已經收到商品了嗎？」
- 確定：「確定」
- 取消：「取消」

### 2. 物流追蹤頁面

#### 功能描述
顯示訂單的詳細物流資訊

#### 頁面內容
- 物流狀態
- 物流軌跡
- 配送資訊
- 聯絡方式

#### UI文案

頁面標題：物流追蹤

物流狀態：
- 運單號：「運單號：XXX」
- 物流公司：「配送：XXX快遞」
- 當前狀態：「運輸中」「派送中」「已簽收」

配送資訊：
- 發件地址：「發件地：XXX」
- 收件地址：「收件地：XXX」
- 預計送達：「預計送達：XX月XX日」

物流軌跡：
- 時間軸顯示每個物流節點
- 時間：「YYYY-MM-DD HH:MM」
- 狀態：「已發貨」「運輸中」「派送中」「已簽收」
- 詳情：「您的包裹已由XXX快遞接收」

聯絡資訊：
- 快遞員：「快遞員：XXX」
- 聯絡電話：「電話：XXX」
- 聯絡快遞：「聯絡快遞」

操作按鈕：
- 複製運單號：「複製運單號」
- 官網查詢：「快遞官網查詢」
- 聯絡客服：「聯絡客服」

異常處理：
- 查詢失敗：「物流資訊查詢失敗」
- 重新查詢：「重新查詢」
- 手動查詢：「手動輸入運單號查詢」

### 3. 客服中心頁面

#### 功能描述
提供客服諮詢和幫助功能

#### 頁面內容
- 常見問題
- 線上客服
- 聯絡方式
- 意見回饋

#### UI文案

頁面標題：客服中心

快速入口：
- 線上客服：「線上客服」
- 電話客服：「電話客服」
- 常見問題：「常見問題」
- 意見回饋：「意見回饋」

常見問題：
- 標題：「常見問題」
- 分類：「訂單相關」「支付相關」「配送相關」「售後相關」
- 問題示例：
  - 「如何取消訂單？」
  - 「支付失敗怎麼辦？」
  - 「如何申請退款？」
  - 「多久能收到商品？」

線上客服：
- 服務時間：「服務時間：9:00-22:00」
- 開始對話：「開始對話」
- 客服狀態：「客服線上」「客服忙碌」「客服離線」

聯絡方式：
- 客服電話：「客服電話：400-XXX-XXXX」
- 服務時間：「服務時間：9:00-18:00」
- 客服郵箱：「客服郵箱：[e-mail]」

意見回饋：
- 標題：「意見回饋」
- 回饋類型：「功能建議」「問題回報」「投訴建議」
- 內容輸入：「請描述您的意見或建議...」
- 聯絡方式：「您的聯絡方式（可選）」
- 提交按鈕：「提交回饋」

自助服務：
- 標題：「自助服務」
- 退換貨申請：「退換貨申請」
- 發票申請：「發票申請」
- 帳戶問題：「帳戶問題」

### 4. 設定頁面

#### 功能描述
APP系統設定和偏好管理

#### 頁面內容
- 帳戶設定
- 通知設定
- 隱私設定
- 關於APP

#### UI文案

頁面標題：設定

帳戶設定：
- 標題：「帳戶設定」
- 修改密碼：「修改密碼」
- 帳戶綁定：「帳戶綁定」
- 實名認證：「實名認證」

通知設定：
- 標題：「通知設定」
- 推播通知：「推播通知」
- 訂單通知：「訂單通知」
- 優惠通知：「優惠活動通知」
- 物流通知：「物流更新通知」

隱私設定：
- 標題：「隱私設定」
- 個人資料可見性：「個人資料可見性」
- 購買記錄：「購買記錄隱私」
- 廣告個人化：「個人化廣告」

系統設定：
- 標題：「系統設定」
- 語言設定：「語言設定」
- 清除快取：「清除快取」
- 自動更新：「自動更新」

關於APP：
- 標題：「關於」
- 版本資訊：「版本 V1.0.0」
- 檢查更新：「檢查更新」
- 使用條款：「使用條款」
- 隱私政策：「隱私政策」
- 聯絡我們：「聯絡我們」

登出帳戶：
- 登出按鈕：「登出帳戶」
- 確認對話框：「確定要登出嗎？」
- 確定：「確定」
- 取消：「取消」

### 5. 優惠券中心頁面

#### 功能描述
管理用戶的優惠券

#### 頁面內容
- 可用優惠券
- 已使用優惠券
- 已過期優惠券
- 優惠券兌換

#### UI文案

頁面標題：我的優惠券

狀態篩選：
- 可使用：「可使用」
- 已使用：「已使用」
- 已過期：「已過期」

優惠券卡片：
- 優惠金額：「￥XX」
- 使用條件：「滿￥XXX可用」
- 適用範圍：「全場通用」「指定分類」
- 有效期：「有效期至：YYYY-MM-DD」
- 使用按鈕：「立即使用」
- 已使用標籤：「已使用」
- 已過期標籤：「已過期」

兌換功能：
- 兌換入口：「兌換優惠券」
- 兌換碼輸入：「請輸入兌換碼」
- 兌換按鈕：「立即兌換」

優惠券詳情：
- 使用說明：「使用說明」
- 適用商品：「適用商品」
- 使用時間：「使用時間限制」

空狀態：
- 標題：「暫無優惠券」
- 描述：「快去領取優惠券吧」
- 按鈕：「去領券」

操作提示：
- 兌換成功：「優惠券兌換成功」
- 兌換失敗：「兌換碼無效或已過期」
- 即將過期：「優惠券即將過期，請儘快使用」

---

## 通用組件UI文案

### 底部導航欄

首頁：「首頁」
分類：「分類」
購物車：「購物車」
個人：「我的」

### 頂部狀態欄

返回按鈕：「返回」
分享按鈕：「分享」
搜尋按鈕：「搜尋」

### 載入狀態

載入中：「載入中...」
載入失敗：「載入失敗，點擊重試」
網路錯誤：「網路連接異常」
重新載入：「重新載入」

### 通用按鈕

確定：「確定」
取消：「取消」
提交：「提交」
儲存：「儲存」
刪除：「刪除」
編輯：「編輯」
查看詳情：「查看詳情」

### 表單驗證

必填提示：「此欄位為必填」
格式錯誤：「格式不正確」
長度限制：「長度不能超過X個字元」
網路異常：「網路異常，請稍後重試」

---

:::note
📝 **文檔資訊**

**創建日期**：2025年10月2日
**文檔版本**：v2.0（新增使用者流程設計）
**適用範圍**：購物網站APP產品設計、開發、測試團隊
**維護狀態**：持續更新中

*此文档涵盖了购物网站APP的核心功能页面设计、使用者流程和UI文案，可作为产品设计和开发的参考依据。建议在实际开发过程中根据具体需求进行调整和优化。*
:::

---

🔗 **相關連結**
- [HackMD編輯頁面](https://hackmd.io/)
- [Mermaid流程圖語法](https://mermaid-js.github.io/mermaid/)
- [Material Design指南](https://material.io/design)