ระบบ
ดีไซน์ระบบ
สี ฟอนต์ และชิ้นส่วนหน้าจอทั้งหมดที่ ChatCart ใช้ หน้านี้เป็นแหล่งอ้างอิงเวลาทำหน้าจอใหม่ ทุกชิ้นในหน้านี้คือของจริงจาก assets/app.css
ชุดสี
ค่าเริ่มต้นคือ Clay (ดินเผา) เปลี่ยนได้จากปุ่มจานสีมุมขวาบน แล้วทั้งระบบเปลี่ยนตามทันที
Clay
ดินเผา · ค่าเริ่มต้น
Navy
กรมท่า
Amber
ส้มอำพัน
Forest
เขียวป่า
Teal
เขียวฟ้า
Mono
ดำ-ขาว
accent
ใช้น้อยมาก · แถบ/ลิงก์/active
ink
ตัวหนังสือหลัก
surface
พื้นหลังหน้า
card
พื้นการ์ด/ตาราง
ตัวอักษร
สองฟอนต์เท่านั้น — หัวข้อกับตัวเลขใช้ Bai Jamjuree เนื้อความใช้ Anuphan
Bai Jamjuree · หัวข้อ & ตัวเลข
รอบพรีออเดอร์ที่ 43
สรุปสินค้าที่ต้องสั่งเข้า
฿94,250
น้ำหนัก 500 / 600 / 700 · ตัวเลขเปิด tabular-nums ให้หลักตรงกันทุกแถว
Anuphan · เนื้อความ
ลูกค้าทักเข้ามาที่ฮานะมิ พรีออเดอร์ แอดมินคีย์ออเดอร์จากในห้องแชทได้เลย
ข้อความรองใช้สี muted ขนาด 14 px และเว้นบรรทัดกว้างขึ้นเพื่อให้อ่านภาษาไทยยาว ๆ ได้สบายตา
ข้อความประกอบเล็กสุดใช้สี faint ขนาด 12 px
ปุ่ม
ปุ่มหลักสีเข้มมีได้หน้าละ 1 ปุ่มเท่านั้น ที่เหลือเป็นปุ่มเส้นบาง
ป้ายสถานะ & ชิป
ป้ายทุกใบใส่ whitespace-nowrap เสมอ เพราะภาษาไทยไม่มีเว้นวรรค เบราว์เซอร์จะตัดกลางคำ
การ์ดตัวเลข (KPI)
แถบสีบางบนหัวการ์ดบอกว่าเรื่องนี้ปกติ ต้องระวัง หรือแย่ — วางแถวละไม่เกิน 5 ใบ
ตาราง
หัวคอลัมน์ตัวเลขต้อง text-right ให้ตรงกับช่องข้อมูล และครอบด้วย overflow-x-auto เสมอเพื่อไม่ให้ล้นบนมือถือ
| รหัส | สินค้า | หมวด | ราคาขาย | คงเหลือ | สถานะ |
|---|---|---|---|---|---|
| SK-001 | เซรั่ม COSRX Snail 96 | สกินแคร์ | ฿490 | 34 | พอขาย |
| SK-002 | มาส์กแผ่น Mediheal N.M.F | สกินแคร์ | ฿290 | 12 | ใกล้หมด |
| SN-001 | ขนม Honey Butter Chip | ขนม | ฿89 | 5 | ต่ำกว่าจุดสั่งซื้อ |
ช่องกรอกข้อมูล
ฟอร์มทุกตัวเป็นหน้าเต็มที่มี URL ของตัวเอง ไม่ใช้กล่องเด้ง
แถบความคืบหน้า & กล่องข้อความ
แถบใช้บอกสัดส่วน กล่องใช้บอกเรื่องที่ต้องรู้ทันที
ไอคอน อวาตาร์ และขั้นตอน
ไอคอนใช้ lucide ทั้งหมด ไม่มี emoji ที่ไหนในระบบ
เปิดรอบ
ตั้งวันเปิด-ปิด เลือกสินค้า ตั้งมัดจำ
รับจองในแชท
คีย์ออเดอร์จากห้องแชท เก็บมัดจำ
กรอบหน้าจอจำลอง
ใช้แทนภาพสกรีนช็อตในหน้าเล่าเรื่อง ไม่ใช้รูปจากอินเทอร์เน็ตเลย
ที่ว่างรูปภาพใช้พื้นเทาอ่อนกับไอคอน ไม่ลิงก์รูปจากข้างนอก
กติกาที่ยึดทุกหน้า
ทำตามนี้แล้วหน้าใหม่จะกลืนกับของเดิมโดยไม่ต้องมาไล่แก้ทีหลัง
ไม่มี emoji ในหน้าจอ
ใช้ไอคอน lucide อย่างเดียว เพราะ emoji แสดงผลไม่เหมือนกันในแต่ละเครื่องและดูไม่เป็นระบบงาน
ฟอร์มเป็นหน้าเต็มมี URL
กล่องเด้งเก็บไว้ใช้แค่ยืนยันปุ่มเดียว เพราะฟอร์มในกล่องเด้งกรอกยากบนมือถือและกดแชร์ลิงก์ไม่ได้
ป้ายสถานะห้ามตกบรรทัด
ใส่ whitespace-nowrap ทุกใบ ไม่งั้นคำไทยจะโดนตัดกลางคำเวลาจอแคบ
ตัวเลขชิดขวาและหลักตรงกัน
ทุกจำนวนและจำนวนเงินใส่ class num หัวคอลัมน์ใส่ text-right ให้ตรงกับช่องข้อมูล ไล่สายตาลงมาแล้วเทียบยอดได้ทันที
ปุ่มหลักหน้าละหนึ่ง
หน้าหนึ่งควรบอกได้ว่า "สิ่งที่ต้องทำต่อคืออะไร" ถ้ามีปุ่มเข้มหลายปุ่มก็ไม่มีปุ่มไหนเด่น
พื้นขาว เส้นบาง สีน้อย
สี accent เก็บไว้ใช้เฉพาะจุดที่ต้องการให้มอง ที่เหลือปล่อยให้เนื้อหาเป็นพระเอก