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

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

Mock lottery app on a desk with number chips and handwritten notes

ให้รู้สึกเหมือนกำลังเลือกเลขจริง ไม่ใช่กรอกฟอร์มราชการ ใช้รูปโพย, ชิปเลข, มือถือ และกระดาษ เพื่อเพิ่ม tactile feeling

mock visual

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

BettingNoteOverlay

ใช้แนว "ใบกระดาษเป็น background, ตัวเลขเป็น text layer" สำหรับโพยที่ต้องเปลี่ยนเลข/ราคา/งวดได้จริงใน UI และยัง export เป็น PNG ได้ทีหลัง

MOCK

ใบจดเลข

งวด 16 ก.ค. 69
ตัวอย่าง UX/UI

999998 สลากทั้งใบ 80

998 สามตัวบน 20

998 โต๊ด 20

98 สองตัวบน 20

89 สองตัวล่าง 20

รวม160.-

Mock UX/UI เท่านั้น ไม่มีการรับแทง ไม่มีการชำระเงินจริง และใช้แทนหลักฐานใดๆ ไม่ได้

Layer model Paper layer เป็น CSS background ที่ scale ด้วย aspect-ratio .betting-note-paper { position: relative } Text layer เป็น HTML node วางด้วย % เพื่อ responsive .note-row { grid-template-columns: 47% 1fr 54px } Data binding เปลี่ยนเฉพาะข้อความ ไม่ต้อง regenerate รูป {number, type, amount, total}

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 ตอนท้าย

Reference Sheets

ภาพเหล่านี้เป็น reference จาก research pack ใช้ดู pattern รวม ไม่ใช่ production asset

ใบลอตเตอรี่ Trust, saved tickets, result states

แผงเลข Range tabs, dense grid, bet types

Public audit Landing and marketing references after filtering login/error pages