Screen_Flows

📱 UI/UX Screen Flows & Wireframes (การออกแบบหน้าจอและโฟลว์ผู้ใช้งาน)

---

🇹🇭 ภาษาไทย (For User)

🗺️ 1. แผนผังการเดินทางของผู้ใช้ (User Navigation Flow)

นี่คือลำดับการนำทางหลักภายในแอปพลิเคชัน SplitDee:

[ Login / Signup ]
        │
        ▼
[ Dashboard (หน้าหลัก) ] ──────────────► [ Create Group (สร้างกลุ่ม) ]
        │
        ├──► คลิกเข้ากลุ่ม
        │
        ▼
[ Group Detail (หน้ารายละเอียดกลุ่ม) ] ◄──► [ Group Chat (แชทกลุ่ม) ]
        │
        ├──► [ Group Pet Status (ดูน้องโมจิ) ]
        ├──► คลิกสร้างบิล ──► [ Create Bill (สร้างบิลแชร์เงิน) ]
        └──► คลิกดูบิลค้างจ่าย
                     │
                     ▼
             [ Bill Detail (รายละเอียดบิล) ]
                     │
                     ├──► [ Pay & Upload Slip (จ่ายเงิน & อัปโหลดสลิป) ]
                     └──► [ Slip Verification (ตรวจสอบความถูกต้องสลิป) ]

---

🎨 2. โครงสร้างหน้าจอและเลย์เอาต์ (ASCII Wireframes)

2.1 หน้าจอหลัก (Dashboard / Main Screen)

หน้าหลักแสดงภาพรวมยอดเงินคงค้างทั้งหมด และกลุ่มที่สังกัดอยู่

+-----------------------------------------------------------+
| [Profile]                SplitDee           [Notifications]|
+-----------------------------------------------------------+
|                                                           |
|  🟢 ยอดรวมสุทธิของคุณ (Net Balance)                        |
|  ฿ 1,250.00 (คุณจะได้รับเงินคืน)                          |
|                                                           |
+-----------------------------------------------------------+
|  [ กลุ่มของคุณ ]                              [ + สร้างกลุ่ม ]|
|                                                           |
|  🏠 รูมเมทห้อง 405 (Mochi Lv.3)                            |
|     คุณค้างจ่าย: ฿ 400.00   • เพื่อนค้างคุณ: ฿ 800.00      |
|                                                           |
|  🌴 ทริปพัทยาหน้าร้อน (Mochi Lv.5)                          |
|     คุณค้างจ่าย: ฿ 0.00     • เพื่อนค้างคุณ: ฿ 850.00      |
|                                                           |
+-----------------------------------------------------------+
| [🏠 หน้าหลัก]          [💬 แชททั้งหมด]          [⚙️ ตั้งค่า] |
+-----------------------------------------------------------+

2.2 หน้ารายละเอียดกลุ่ม (Group Detail Screen)

แสดงความคืบหน้าของสัตว์เลี้ยงกลุ่ม ประวัติหนี้ และห้องแชทในตัว

+-----------------------------------------------------------+
| [<]                    🏠 รูมเมทห้อง 405             [⚙️]  |
+-----------------------------------------------------------+
|     🐹 น้องโมจิ (Mochi) Lv.3                               |
|     [████████████░░░░░░░░] XP 60%                         |
|     ❤️ HP: 100/100         😊 Happiness: 95/100           |
|     [ 🍗 ป้อนอาหาร ]         [ 💬 คุยกับสัตว์เลี้ยง ]         |
+-----------------------------------------------------------+
|  [ บิลทั้งหมด ]     [ 💬 ห้องแชทกลุ่ม ]     [ 📊 สมาชิก ]    |
|                                                           |
|  💸 ค่าไฟรอบ พ.ค.                                          |
|     ยอดรวม: ฿ 2,400.00  •  สถานะ: ค้างจ่าย 2/4 คน          |
|                                                           |
|  🛒 ซื้อทิชชู่ส่วนกลาง                                      |
|     ยอดรวม: ฿ 120.00    •  สถานะ: จ่ายครบแล้ว              |
|                                                           |
+-----------------------------------------------------------+
|                       [ + สร้างบิลใหม่ ]                   |
+-----------------------------------------------------------+

2.3 หน้าจอรายละเอียดบิลและการชำระเงิน (Bill Detail & Payment)

หน้าจอสำหรับแสดงข้อมูลบิล รายบุคคล และ PromptPay สำหรับจ่ายเงิน

+-----------------------------------------------------------+
| [<]                    รายละเอียดบิล                      |
+-----------------------------------------------------------+
|  บิล: ค่าไฟรอบ พ.ค.                                         |
|  ยอดรวม: ฿ 2,400.00                                       |
|  ผู้สำรองจ่าย: มินต์ (Mint)                                 |
|  วันที่: 15 ก.ค. 2026                                      |
+-----------------------------------------------------------+
|  ส่วนแบ่งของคุณ: ฿ 600.00                                   |
|  สถานะ: 🔴 ยังไม่ได้จ่าย (Unpaid)                          |
|                                                           |
|  [ สแกนจ่ายด้วย PromptPay QR ]                             |
|  +---------------------------+                            |
|  |                           |                            |
|  |       [ PromptPay ]       |                            |
|  |          QR CODE          |                            |
|  |         ฿ 600.00          |                            |
|  |                           |                            |
|  +---------------------------+                            |
|                                                           |
|  [ 📤 อัปโหลดสลิปเพื่อยืนยัน ]                               |
+-----------------------------------------------------------+

---

🇬🇧 English (For AI Agents)

📌 3. Key Micro-interactions & UX States

1. Slip Upload & Verification Transition:

   • Trigger: User uploads a bank transfer slip image.
   • State 1 (Processing): Show a custom circular loader overlay with text: “AI is scanning and verifying your slip with the bank…”
   • State 2 (Success): Confetti animation with a green checkmark check. The bill card changes status to green [Settled] and Mochi Pet gains +15 XP animation floating on the screen.
   • State 3 (Error/Mismatched): Red banner toast displaying the error details (e.g., “Duplicate Slip” or “Incorrect Amount”).

2. Mochi Pet Reaction States:

   • Healthy & Happy: Mochi bounces gently on the Group Detail page.
   • Sick/HP Lowering (Overdue Bills present): Mochi changes asset state to a sad face, floating sweat drop emojis, and a prompt reminding users: “Please pay your debts to heal Mochi!”
   • Level Up: Full screen celebratory pop-up showing new cosmetic accessories unlocked.