1. Nguyên tắc
Bảng điều độ, không phải trang tiếp thị. Giao diện được đọc lướt và thao tác nhanh, nên số liệu và trạng thái phải đọc được trong một cái nhìn; trang trí chỉ còn một chỗ: tem vé màu vàng biển số.
Một nguồn token. Thành phần React và Ant Design chỉ dùng biến ngữ nghĩa (--ink, --accent, --ok…), không viết hex thô; đổi theme là đổi token, không sửa thành phần.
Điện thoại là chính với đại lý. Nút cao 44 px trở lên, chữ 16 px trở lên trong ô nhập (không bị iOS phóng to), bảng đổi thành thẻ, thanh điều hướng dưới tối đa 5 mục, có chế độ chữ to.
Màu không đứng một mình. Trạng thái luôn có chữ (và chấm/biểu tượng), số liệu luôn có nhãn; người mù màu và màn hình ngoài nắng vẫn đọc được.
Không cắt chữ. Dòng vé, ghi chú, tên khách được phép xuống dòng; không dùng dấu ba chấm cho nội dung nghiệp vụ (bài học từ app Vé247, mục 13).
2. Màu và trạng thái
Nền xám lạnh, chữ than, một màu nhấn là vàng biển số (biển xe kinh doanh vận tải), một màu xanh tuyến cho liên kết và lựa chọn. Số trong ngoặc là tỉ lệ tương phản đã tính cho chế độ sáng / tối.
Trạng thái vé (lõi) — chữ hiển thị, không hiện mã
Trạng thái gửi theo kênh
3. Chữ
Barlow Condensed cho tiêu đề, đầu bảng, nhãn viết hoa: đọc như bảng giờ ở bến xe, tiết kiệm chỗ trên điện thoại. Be Vietnam Pro cho toàn bộ chữ đọc và điều khiển: dấu tiếng Việt chuẩn, nét đều ở cỡ nhỏ. JetBrains Mono cho mã vé, số điện thoại, biển số, tiền: số thẳng cột, không nhầm 0 với O. Cả ba đều có subset tiếng Việt trên Google Fonts (đã kiểm tra).
Đại lý Hoàng Su Phì gửi 3 vé cho khách Nguyễn Thị Hương, đi chuyến 17h30 ngày mai, cần tầng dưới vì có người già. Hệ thống đã giữ chỗ trên VeXeRe, giá đại lý 380.000 đ, gửi vé qua Zalo lúc 16:05.
Thang chữ
| Vai trò | Phông | Cỡ / dòng / đậm | Dùng cho |
|---|---|---|---|
| Tiêu đề trang | Barlow Condensed | 38 / 1,1 / 700 | Tên màn hình trên PC (điện thoại: 26) |
| Tiêu đề mục | Barlow Condensed | 30 / 1,15 / 700 | Khối lớn trong trang |
| Tiêu đề thẻ | Barlow Condensed | 20–22 / 1,2 / 600 | Tuyến, giờ trên thẻ vé; đầu cột bàn xếp |
| Nhãn viết hoa | Barlow Condensed | 12,5 / 1,2 / 600 · +6 % giãn | Đầu bảng, nhãn ô số liệu, nhóm chuyến |
| Chữ đọc | Be Vietnam Pro | 15 (PC) · 16 (điện thoại) / 1,55 / 400 | Nội dung, ô nhập, thẻ vé |
| Chữ nhỏ | Be Vietnam Pro | 13,5 / 1,45 / 400–500 | Bảng dày, cảnh báo |
| Chú thích | Be Vietnam Pro | 12,5 / 1,35 / 400 | Trợ giúp dưới ô nhập, giờ gửi |
| Dữ liệu | JetBrains Mono | 13,5 / 1,5 / 500 · tabular | Mã vé, SĐT, biển số, tiền (căn phải) |
| Chế độ chữ to | — | ×1,13 · nút 44–52 | Bật trong mục Tôi, lưu theo máy |
4. Nút
Mỗi màn hình một nút vàng (hành động chính), còn lại xanh viền hoặc xám. Nút huỷ/xoá màu đỏ chỉ hiện trong hộp thoại xác nhận. Trên điện thoại nút chính cao 48 px, kéo hết chiều ngang ở thanh hành động dính đáy.
5. Chip và tem vé
Tem vé là điểm nhận diện duy nhất của hệ thống: mã vé in trên nền vàng viền than như biển số xe. Nó xuất hiện ở bảng, thẻ vé, tin nhắn gửi khách (dạng chữ) và trang tra cứu; bấm biểu tượng để sao chép. Vé huỷ thì tem chuyển xám và gạch ngang, vẫn giữ mã để tra được.
6. Bảng trên PC, thẻ vé trên điện thoại
Bảng dày 40 px/dòng cho điều hành; đầu bảng dính, chữ viết hoa hẹp; tiền và số căn phải, phông mono; bảng rộng cuộn trong khung của nó, trang không bao giờ cuộn ngang. Dưới 768 px cùng dữ liệu đó hiện thành thẻ vé, không thu nhỏ bảng.
| Tem vé | Khách | Chuyến | Chỗ | Đại lý | Giá bán | Trạng thái | Gửi khách | |
|---|---|---|---|---|---|---|---|---|
| NO97T9 | Nguyễn Thị Hương0912 345 678 | 17h30 · 03/09Hà Giang → Mỹ Đình | A5, A6 | Hoàng Su Phì | 800.000 | Đã gửi khách | Zalo SMS | |
| VX-0142 | Lý Seo Páo0388 210 456 | 17h30 · 03/09Hà Giang → Mỹ Đình | — | Quản Bạ | 400.000 | Chờ xếp | chưa gửi | |
| SM3M1J | Trần Văn Bình0977 888 123 | 21h00 · 03/09Hà Giang → Mỹ Đình | B12 | Web | 380.000 | Đã xếp | Email lỗi | |
| Q7E6J4 | Hoàng Mai Anh0356 777 001 | 05h00 · 04/09Mỹ Đình → Hà Giang | C1, C2, C3 | Đồng Văn | 1.140.000 | Đang xếp | chưa gửi | |
| G5A768 | Vàng A Sùng0705 978 390 | 17h30 · 03/09Hà Giang → Mỹ Đình | A1 | Mèo Vạc | 400.000 | Đã huỷ · phí 0 | SMS huỷ | |
| 4HLPH0 | Công ty Du lịch Cao nguyên đá0243 222 999 · 6 khách | 09h00 · 05/09Hà Giang → Mỹ Đình | Xếp tay | Đại lý Hà Nội 1 | 2.280.000 | Đã xuất vé |
Trên điện thoại: thẻ vé và thanh điều hướng dưới
Thẻ vé luôn theo một thứ tự: tem + trạng thái → tên và SĐT → chuyến (chữ hẹp, đậm) → chỗ, điểm đón, tiền → ghi chú → kết quả gửi → hai nút tối đa.
Vé huỷ gạch tên và chuyến, giữ nguyên tem và lý do; không ẩn khỏi danh sách trong ngày.
Ngoại tuyến có dải vàng nói rõ điều gì sẽ xảy ra; vé nhập lúc mất mạng xếp hàng và tự gửi.
Vé mới là nút tròn vàng giữa thanh dưới, ngón cái với tới; bốn mục còn lại là danh từ ngắn.
7. Biểu mẫu
Nhãn nằm trên ô, luôn hiện (không chỉ có gợi ý trong ô); ô số điện thoại mở bàn phím số; ngày và giờ chọn bằng chip thay vì gõ; lỗi hiện ngay dưới ô kèm biểu tượng; thanh hành động dính đáy trên điện thoại. Ô nhập trên điện thoại 16 px, cao 44 px.
Ba cách nhập cùng một biểu mẫu: gõ tay, dán tin Zalo (hệ thống tách thành các ô), chụp ảnh sổ (AI đọc, đại lý xác nhận từng dòng trong bảng xem trước).
8. Bàn xếp vé (PC)
Hai cột: trái là hàng đợi nhóm theo chuyến với số vé chờ; phải là vé đang chọn, đề xuất ghế và một nút vàng. Đồng hồ hết hạn giữ chỗ hiện thành chip vàng, đổi đỏ khi còn dưới 10 phút. Phím tắt: J/K chuyển vé, Enter xác nhận, X từ chối.
Chờ xếp · 7
Vé VX-0142 · Lý Seo Páo
- Khách
- Lý Seo Páo · 0388 210 456
- Chuyến
- 17h30 · Thứ Tư 03/09 · Hà Giang → Mỹ Đình
- Yêu cầu
- 1 giường · đón Quản Bạ · thu tại xe
- Đại lý
- Quản Bạ (Vàng Thị Dín) · hoa hồng 10 %
9. Ô số liệu và biểu đồ
Ô số liệu: nhãn viết hoa hẹp, số lớn phông hẹp, chênh lệch so với kỳ trước có mũi tên và màu theo hướng tốt/xấu; ô cần chú ý mang chip chứ không tô cả ô. Biểu đồ: thanh mỏng, nhãn số trực tiếp, lưới mờ, một trục; màu theo kênh cố định (đã qua kiểm tra mù màu), luôn kèm bảng số.
Tin đã gửi theo kênh, 7 ngày qua dữ liệu ví dụ
Số tin gửi thành công; SMS là kênh dự phòng nên có mặt ở hầu hết vé.
10. Thông báo, trống, đang tải
Thông báo nói việc gì đã xảy ra và làm gì tiếp, không xin lỗi, không mơ hồ. Toast dưới cùng 4 giây, có nút hoàn tác khi hoàn tác được. Tải quá 300 ms thì hiện khung xám giữ chỗ (không nhảy bố cục). Màn trống là lời mời hành động.
11. Chuyển động
150–250 ms, chỉ opacity và transform (không animate chiều cao); vé mới trượt vào đầu danh sách mà không làm dòng khác nhấp nháy; đang đọc giữa danh sách thì giữ nguyên vị trí cuộn; mọi hiệu ứng tắt khi máy bật "giảm chuyển động". Không có hiệu ứng trang trí.
12. Điều hướng
PC: thanh bên 240 px, mục đang chọn nền vàng nhạt với vạch vàng, số việc chờ hiện dưới dạng huy hiệu vàng. Điện thoại: thanh dưới 5 mục (mục 6). Nút quay lại của trình duyệt luôn hoạt động; mọi màn hình có đường dẫn riêng để chia sẻ.
13. Kế thừa từ nền tảng cũ
Những lỗi đã trả giá ở Vé247, OSZalo và web xekhachhagiang.com được đổi thành quy tắc ở đây (chi tiết kèm nguồn trong tài liệu 02, mục 10).
1fr chứa hàng chip cuộn ngang; thanh phân trang thiếu flex-wrap). Quy tắc: minmax(0,1fr), min-width:0, overflow-x:clip, và phép kiểm tự động "chiều rộng cuộn ≤ chiều rộng màn" cho mọi màn.14. Kiểm tra trước bàn giao
- Chữ chính ≥ 4,5:1, chữ phụ ≥ 3:1 ở cả hai chế độ (đã tính, mục 2).
- Mọi điểm chạm ≥ 44 px; nút chính điện thoại 48 px; khoảng cách ≥ 8 px.
- Ô nhập trên điện thoại ≥ 16 px; bàn phím đúng loại (tel, numeric).
- Không cuộn ngang toàn trang; bảng cuộn trong khung hoặc thành thẻ.
- Trạng thái có chữ và biểu tượng, không chỉ màu.
- Không cắt chữ nghiệp vụ; tên dài xuống dòng.
- Focus nhìn thấy được khi dùng bàn phím; thứ tự đọc màn hình khớp thứ tự nhìn.
- Giảm chuyển động: mọi hiệu ứng tắt; khung xám không chớp.
- Tải > 300 ms có khung giữ chỗ; gửi biểu mẫu có trạng thái đang xử lý → xong/lỗi.
- Thanh dính (đầu/dưới) không che nội dung; chừa vùng an toàn của máy.
- Không emoji làm biểu tượng; một bộ SVG, một nét.
- Thử ở 375 px, 768 px, 1024 px, 1440 px và chế độ chữ to.
- Không có hex thô trong thành phần (chạy kiểm tra token trước khi gộp).
- Chữ nút là động từ đúng việc; thông báo nói rõ việc gì và làm gì tiếp.