485 C · Primary Red
#DA291Cปุ่มหลัก · ลิงก์สำคัญออกแบบทุกมื้อ
ให้น่าอร่อยกว่าเดิม
ชุดแนวทาง UI สำหรับ HEAVENLY ตั้งแต่ค้นหาร้าน วางแผนมื้ออาหาร ไปจนถึงยืนยันการจอง ออกแบบด้วยสีอบอุ่น อ่านง่าย และใช้ต่อได้สม่ำเสมอ
DISCOVER · PLAN · EAT · ENJOY
01 / FOUNDATION
ชุดสีที่ชวนให้อยากออกไปกิน
ใช้สีแดงกับการกระทำหลัก สีส้มเน้นจุดสำคัญ และสีเหลืองสำหรับป้ายหรือสถานะที่ต้องการสะดุดตา
Flame Orange
#FC8A17Accent · จุดนำสายตาSpectra Yellow
#F7B718Highlight · ป้ายแนะนำWarm Ink
#29231Fหัวข้อ · เนื้อหาหลักWarm Canvas
#FFFAF4พื้นหลัง · พื้นที่พักสายตา02 / TYPOGRAPHY
ตัวอักษรไทยที่ชัดในทุกขนาด
Prompt สำหรับเนื้อหาภาษาไทย และ DM Sans เป็น fallback สำหรับตัวเลขและข้อมูลสั้น ๆ
32 / 600ค้นพบร้านอร่อย
24 / 600วางแผนมื้อถัดไป
18 / 500เมนูเด็ดประจำร้าน
14 / 400มื้อดี ๆ เริ่มต้นจากร้านที่ใช่
11 / 400ระยะทาง 1.2 กม. · เปิดถึง 21:00 น.
หลักการใช้ตัวอักษร
หัวข้อ: น้ำหนัก 500–700 เพื่อสร้างลำดับการอ่าน
เนื้อหา: น้ำหนัก 400 พร้อม line-height 1.6
ข้อมูลเสริม: ใช้สี muted แต่คงขนาดที่อ่านได้
BASE14 px
LINE HEIGHT1.65
RADIUS10–32
SPACING8 px grid
03 / COMPONENTS
ชิ้นส่วน UI ที่หยิบใช้ได้ทันที
ตัวอย่างปุ่ม ฟอร์ม สถานะ และแถบนำทางที่ใช้ร่วมกันได้ตลอดทั้งแอป
Buttons · ปุ่มและการกระทำ
Text fields · ช่องกรอกข้อมูล
ตัวอย่างสถานะปกติ · focus จะเน้นกรอบสีส้ม
Badges · ป้ายและสถานะ
★ 4.8 คะแนน
เมนูแนะนำ
ใกล้คุณ
● จองสำเร็จ
· 1.2 กม. · เปิดอยู่
Bottom navigation · เมนูหลัก
04 / USER FLOW
จากค้นหาร้าน สู่ทริปมื้ออร่อย
ภาพรวมหน้าจอมือถือ 6 ขั้นตอนตาม User Flow ของ HEAVENLY
9:41●●● ◖
HEAVENLY.
⌖ กำลังค้นหาตำแหน่งเปลี่ยน
หิวแล้วใช่ไหม?
หาร้านอร่อยรอบตัวคุณได้เลย
รัศมี 10 กม.♥⌕ ค้นหาร้านหรือเมนู
ใช้ตำแหน่งของคุณเพื่อแนะนำร้านใกล้เคียง
9:41●●● ◖
HEAVENLY.
สวัสดี, วันนี้กินอะไรดี?
ข้าวกะเพราเนื้อไข่ดาวเมนูยอดนิยม · ร้านบ้านกะเพรา
ร้านใกล้คุณ ดูทั้งหมด →
🍜
ก๋วยเตี๋ยวเรืออยุธยา · 1.2 กม. · ฿฿
🥗
ครัวสวนผัก · 2.0 กม. · เปิดอยู่
⌂ หน้าแรก ⌕ ค้นหา ＋ แพลน ▣ จอง
9:41●●● ◖
แพลนมื้ออร่อย
จัดทริปกินของคุณในวันเดียว
‹ วันเสาร์ 14 พ.ย.＋ เพิ่มมื้อ
12:00 · มื้อกลางวัน
🍜
ก๋วยเตี๋ยวเรืออยุธยาเดินทางต่อ 1.4 กม.
15:30 · มื้อว่าง
🍰
บ้านขนม คาเฟ่ใช้เวลาเดินทาง 8 นาที
19:00 · มื้อเย็น
🍲
ครัวสวนผักใกล้จุดหมาย · จองแล้ว
เส้นทางรวม 4.6 กม. · ประมาณ 22 นาที
9:41●●● ◖
HEAVENLY.
ยืนยันเบอร์โทรศัพท์
เราจะส่งรหัส OTP ไปยังเบอร์มือถือของคุณ
กรอกรหัส 6 หลักที่ส่งไปให้คุณ
••••••
ส่งรหัสอีกครั้งใน 00:30
9:41●●● ◖
สรุปการจอง
ตรวจสอบข้อมูลก่อนชำระเงิน
🍲
ครัวสวนผักโต๊ะสำหรับ 2 ท่าน · 19:00
มัดจำโต๊ะ฿400.00
ค่าบริการ฿10.00
ยอดชำระทั้งหมด฿410.00
✓ ชำระด้วย PromptPay
SCAN TO PAY
สแกน QR ด้วยแอปธนาคารของคุณ
9:41●●● ◖
จองสำเร็จแล้ว!
ร้านอาหารกำลังรอคุณอยู่
HEAVENLY.
BOOKING CONFIRMATION
BOOKING
รหัสการจอง
HV-2026-001
วันที่14 พ.ย. 2026
เวลา19:00 น.
ร้านครัวสวนผัก
ที่นั่ง2 ที่นั่ง
แสดง QR นี้แก่พนักงานเมื่อถึงร้าน