Design system สำหรับหวยไทย: มือใหม่เข้าใจง่าย, power user แทงเร็ว

DS นี้แปลง research ให้เป็น component และ interaction ที่จับต้องได้ โดยรวม 3 mental models หลัก: ใบลอตเตอรี่, กดตัวเลขพร้อมโพย, และเลือกจากแผงเลข

entry modes ที่ควรมีใน product

public UX screenshots ที่ clean แล้ว

247

domain audit screenshots raw

บาท เป็น trust anchor ของสลากดิจิทัล

เก็บแล้วสลากทั้งใบ · 6 หลัก

คุณเลือกเลขนี้แล้ว เหมือนได้ใบจริงอยู่ในมือ

999998

งวด 16 ก.ค. 2569 1 ใบ · 80 บาท ยืนยันก่อนปิดรับ

L6-2569-0716-999998-A01

ดูในโพยของฉัน

9:415G 100%

งวด 16 ก.ค. 2569

Wallet 12,500 บาท

หวยรัฐบาลไทย

ปิดรับก่อนออกรางวัล

เหลือ 03:28:14

GLO verified 80 บาท

999998

ชุด 1 ใบ · งวดล่าสุด

seller rank A 2 ใบ

735867

เลขดัง · เหลือ 2 ใบ

กดเลข

โพยของฉัน 2 รายการ

รวม 180 บาท

Foundation Tokens

ใช้สีหลายกลุ่มเพื่อแยก intent ไม่ให้ UI กลายเป็นโทนเดียว: blue สำหรับ trust/action, teal สำหรับ selected/safe, amber สำหรับ urgency/lottery highlight, red สำหรับ close/error

Action Blue#1463ff

Selected Teal#009b86

Urgency Amber#f3a712

Risk Red#d83a3a

Slip Ink#101820

Canvas#f6f7f9

Core Components

Component set ที่ควรสร้างเป็น shared UI ก่อนลงรายละเอียด feature: ทุก mode ใช้ draw selector, type chips, slip, result state ร่วมกัน

FullTicketBanner

ใช้หลังจาก user เลือกเลข 6 หลักครบแล้ว เพื่อให้รู้สึกว่าได้ "ใบ" ไม่ใช่แค่ตัวเลขในฟอร์ม เหมาะกับ transition ก่อนเข้าโพย/checkout

TicketCard

เหมาะกับมือใหม่และ flow สลากจริง ใช้เลขใหญ่, ราคา, source badge, งวด, จำนวนใบ

verified seller80 บาท

123456

เหลือ 1 ใบ

BetTypeChip

ชิปประเภทหวยต้อง scan ง่ายและมี selected/disabled/error state ชัด

3 ตัวบน 3 ตัวโต๊ด 2 ตัวล่าง ปิดรับ

NumberGrid Cell

ใช้กับคนเล่นประจำ: tap target คงที่, selected state ไม่ขยับ layout, sold-out state แยกชัด

States และ Rules

หน้าแทงที่ดีต้องให้ user รู้ตลอดว่าเลขไหนเลือกแล้ว, ยอดเท่าไร, ปิดรับเมื่อไร, และยังแก้โพยได้ตรงไหน

State	UI treatment	Reason
Selected number	Amber background + strong border + persistent slip row	ช่วยให้ user ไม่ลืมว่าเลือกอะไรไปแล้ว โดยเฉพาะในแผงเลขใหญ่
Close soon	Red countdown, but submit still blue until closed	เพิ่ม urgency โดยไม่ทำให้ primary action ดูเหมือน error
Review before submit	Bottom sheet / side panel with total, editable rows, deadline	ลดการกดผิดเลขหรือผิดประเภทหวย
Closed draw	Disable cells and replace CTA with result/check state	ไม่ควรปล่อยให้ user กดเลือกแล้วค่อยขึ้น error ตอนท้าย