FRUT POS · Design system

ภาษาภาพเดียวกัน สำหรับทุกหน้าของร้าน

ชุดข้อมูลอ้างอิงสำหรับสร้างและดูแลหน้าจอ FRUT ให้คงความชัดเจน อบอุ่น และใช้งานง่าย ทั้งหน้าแคชเชียร์ รายงาน และการจัดการสต๊อก โดยเคสนี้เป็น Design System และ implementation reference ไม่ใช่หลักฐานของ live POS หรือ backend

Thai-firstFrontend DesignHTML / CSS referenceDesign System · v1.0

Role & scope

ขอบเขตงานที่หลักฐานรองรับ

แยก deliverable, technology และสถานะจริง ไม่ขยาย design system ให้กลายเป็นระบบที่ยังไม่มีหลักฐาน

01 · Boundary

Web Developer

ไม่อ้างขอบเขต Web Developer จากเคสนี้ เพราะ artifact ไม่ได้แสดง application route, API, database, authentication หรือ deployment

Deliverables
  • ไม่มี live website หรือ POS application ที่ยืนยันจากไฟล์นี้
  • ไม่มี backend และ production integration ในขอบเขต
Not evidencedNo backend claim
NOT IN SCOPE

02 · Primary evidence

Frontend Design

ออกแบบภาษาภาพและโครงสร้างการใช้งานของ POS ให้พร้อมนำไปสร้างหน้าจออย่างสม่ำเสมอ

Deliverables
  • Color, typography, spacing, radius และ shadow tokens
  • Button, input, status และ component patterns
  • User flow, role-based IA และ sitemap
Design TokensCSS VariablesResponsive UIThai-first
DESIGN SYSTEM · V1.0

03 · Implementation reference

Frontend Developer

มีหลักฐานระดับหน้าอ้างอิง HTML/CSS ที่ responsive และแสดง component/state แต่ยังไม่ใช่ application logic ที่เชื่อมระบบจริง

Deliverables
  • Responsive documentation page และ sticky navigation
  • CSS variable block ที่นำไปใช้ต่อได้
  • ตัวอย่าง default, warning, success และ stock-error behavior
HTMLCSSSemantic markupResponsive breakpoints
STATIC REFERENCE

Foundation

สี

ใช้สีเขียวเป็นแกนหลัก และสีรองเพื่อสื่อสถานะหรือเน้นข้อมูล

Primary Green--green · #176B47
Lime Accent--lime · #D9F45F
Ink--ink · #172621
Page--page · #F6F8F4
Orange--orange · #FF8A55
Coral--coral · #F47462
Purple--purple · #8267D8
Yellow--yellow · #FFC94C

Foundation

ตัวอักษร

ใช้ DM Sans ร่วมกับ Noto Sans Thai เพื่อให้อ่านภาษาไทยได้เป็นธรรมชาติ

Type scale

--font-sans: "DM Sans", "Noto Sans Thai", sans-serif

รับออเดอร์Display · 42 / 700
แดชบอร์ดยอดขายHeading · 28 / 700
เลือกสินค้าจากเมนูด้านซ้ายBody · 14 / 400
ยอดขายแยกวันและเวลาCaption · 11 / 400

หลักการใช้งาน

ลำดับชั้นของข้อมูลที่แนะนำ

หัวเรื่อง
น้ำหนัก 700 · letter spacing ติดลบเล็กน้อย
ข้อความปกติ
น้ำหนัก 400 · สี Ink
ข้อความรอง
ใช้สี Muted หลีกเลี่ยงการลดขนาดมากเกินไป

Foundation

ระยะห่างและรูปทรง

ใช้หน่วย 4px เป็นฐาน เพื่อให้ layout ปรับขนาดและดูสมดุล

Spacing scale

เว้นช่องว่างภายในและระหว่างองค์ประกอบ

space-14px
space-28px
space-312px
space-416px
space-524px
space-632px
space-848px

Radius

โค้งมนพอดี ให้ความรู้สึกสดใสและเข้าถึงง่าย

Small10px
Medium15px
Large20px
Card shadow
0 10px 40px rgba(24, 60, 43, .04)

Patterns

องค์ประกอบ UI

ตัวอย่างการนำ token ไปใช้กับชิ้นส่วนที่พบบ่อยในระบบ

Buttons

Primary ใช้สำหรับการกระทำหลักหนึ่งอย่างต่อพื้นที่

height 43px · radius 10px · font 600 / 12

Input field

เส้นขอบอ่อน พื้นขาว และ focus ใช้สีเขียว

⌕ค้นหาสินค้า
border --line · radius 11px

Statuses

มีป้ายกำกับเสมอ ไม่พึ่งสีเพียงอย่างเดียว

● ชำระแล้ว● ใกล้หมด● หมดสต๊อก

Experience map

User flow · ขายหน้าร้าน

เส้นทางหลักของแคชเชียร์ ตั้งแต่เริ่มบิลจนบันทึกยอดขายสำเร็จ

01

เริ่มบิลใหม่

เข้าสู่หน้า “ขายหน้าร้าน” และเปิดรายการขายว่าง

Default / Empty cart
02

เลือกสินค้า

ค้นหาหรือเลือกหมวดสินค้า แล้วเพิ่มสินค้าลงในตะกร้า

Cart updated
03

ตรวจรายการ

ปรับจำนวน ลบสินค้า หรือใส่ส่วนลดก่อนคิดเงิน

Review
04

รับชำระ

เลือก QR พร้อมเพย์ เงินสด หรือบัตร แล้วกดยืนยัน

Awaiting payment
05

บันทึกสำเร็จ

ระบบบันทึกบิล ตัดสต๊อก และแจ้งผลการชำระเงิน

Paid / Stock updated
จุดตรวจสอบ: ถ้าสต๊อกไม่พอ ระบบต้องป้องกันการยืนยันบิลและบอกสินค้าที่มีปัญหาอย่างชัดเจน · หากชำระไม่สำเร็จ ให้คงรายการขายไว้เพื่อเลือกวิธีชำระใหม่

Structure

Information architecture

จัดเมนูตามงานของผู้ใช้ โดยกำหนดสิทธิ์แต่ละบทบาทให้ชัดเจน

บทบาทและงานหลัก

สิทธิ์ถูกออกแบบให้สอดคล้องกับการทำงานหน้าเคาน์เตอร์และหลังบ้าน

เจ้าของกิจการดูทุกสาขา · วิเคราะห์ยอดขาย · จัดการสินค้าและสต๊อก
ผู้จัดการดูยอดขายสาขา · ดูและปรับสต๊อก · ดูสินค้า
แคชเชียร์ขายหน้าร้าน · ดูประวัติขาย · ดูยอดคงเหลือ

เมนูหลักตามสิทธิ์

✓ = ใช้งานได้ · ดู = อ่านข้อมูลเท่านั้น

พื้นที่เจ้าของผู้จัดการแคชเชียร์
ขายหน้าร้าน
รับออเดอร์และชำระเงิน		✓✓✓
แดชบอร์ด
ยอดขายและแนวโน้ม		ทุกสาขาสาขา—
ประวัติการขาย
ค้นหาและ export CSV		✓✓ดู
สต๊อกสินค้า
รับเข้า ของเสีย ปรับยอด		ปรับปรับดู
สินค้า
จัดการเมนูสินค้า		จัดการดู—

Structure

Sitemap

แผนผังหน้าจอและโมดัลที่ผู้ใช้เข้าถึงได้จาก FRUT POS

  • FRUT POS /
    • เข้าสู่ระบบ /login
    • ขายหน้าร้าน #pos
      • ค้นหาและหมวดสินค้า
      • ตะกร้าสินค้า
      • โมดัลส่วนลด
      • โมดัลชำระเงิน
    • แดชบอร์ด #dashboard
      • KPI ยอดขาย
      • แนวโน้มและสินค้าขายดี
      • ช่องทางการชำระเงิน
    • ประวัติการขาย #history
      • ค้นหารายการ
      • ส่งออก CSV
    • สต๊อกสินค้า #inventory
      • ยอดคงเหลือ
      • ความเคลื่อนไหว
      • โมดัลปรับสต๊อก
    • สินค้า #products
      • รายการสินค้า
      • เพิ่มสินค้า

Implementation

CSS variables

คัดลอกชุดนี้ไปใช้เมื่อสร้างหน้าจอใหม่

:root {
  --ink: #172621;      --muted: #75807B;
  --line: #E6EAE6;     --surface: #FFFFFF;
  --page: #F6F8F4;     --green: #176B47;
  --green-light: #E4F2EA; --lime: #D9F45F;
  --orange: #FF8A55;   --coral: #F47462;
  --purple: #8267D8;   --yellow: #FFC94C;
  --radius: 18px;
}