Đặc tả Màn hình: Trạng thái Hệ thống Ngoại tuyến (System Offline State)
| Mã tài liệu: | EZD-DES-SCR-007 | Phiên bản: | 1.0 |
|---|---|---|---|
| Tài liệu liên quan: | EZD-PJT-FLW, EZD-MVP-SPEC | Ngày hiệu lực: | 14/09/2025 |
| Người soạn: | Stephen | Người phê duyệt: | Stephen |
1. Mục tiêu của Màn hình
Thông báo một cách rõ ràng, trung thực và lịch sự tới người dùng rằng dịch vụ đang tạm thời không khả dụng do sự cố kỹ thuật. Màn hình này có nhiệm vụ ngăn chặn sự hoang mang, giảm thiểu trải nghiệm tiêu cực và bảo vệ hình ảnh thương hiệu ngay cả trong tình huống lỗi hệ thống.
2. Bố cục Tổng thể (Overall Layout)
Màn hình này phá vỡ bố cục "Phân vùng theo Chiều dọc" tiêu chuẩn một cách có chủ đích.
- Bố cục: Toàn bộ nội dung được gom lại thành một khối duy nhất và căn giữa tuyệt đối (cả chiều ngang và chiều dọc) trên màn hình.
- Mục đích: Sự thay đổi đột ngột về bố cục này ngay lập tức báo hiệu cho người dùng rằng đây là một trạng thái bất thường, không phải là một phần của luồng tương tác thông thường.
3. Phân rã các Thành phần
Màn hình này cực kỳ tối giản, chỉ bao gồm một khối thông báo trung tâm. Hoàn toàn không có Avatar, Header hay Footer.
-
Thành phần 1: Nền (Background)
- Mô tả: Nền tối, tĩnh.
- Tiêu chuẩn áp dụng: Màu
#0D1117(Background Black).
-
Thành phần 2: Khối Thông báo Trung tâm (Central Message Block)
- Vị trí: Căn giữa màn hình.
- Thành phần con:
- a. Icon Hệ thống (System Icon):
- Vị trí: Trên cùng của khối.
- Mô tả: Một icon lớn, dễ nhận biết để truyền tải ngay lập tức tình trạng lỗi. Ví dụ: icon "đám mây có dấu gạch chéo" (cloud_off) hoặc "cảnh báo hình tam giác" (warning).
- Tiêu chuẩn áp dụng: Kích thước lớn, ví dụ
96px. Sử dụng bộ icon chuẩn, màu#E5534B(Error Red) để nhấn mạnh tính nghiêm trọng.
- b. Tiêu đề Lỗi (Error Title):
- Vị trí: Dưới Icon, khoảng cách
32px. - Nội dung: "Hệ thống tạm thời gián đoạn"
- Tiêu chuẩn áp dụng: Kiểu chữ
H1 (48px, Bold), căn giữa, màu#F0F6FC(Text White).
- Vị trí: Dưới Icon, khoảng cách
- c. Nội dung Giải thích (Explanatory Text):
- Vị trí: Dưới Tiêu đề, khoảng cách
16px. - Nội dung: Một đoạn văn bản ngắn gọn, lịch sự, không dùng thuật ngữ kỹ thuật. Ví dụ: "Đã có một sự cố xảy ra và đội ngũ kỹ thuật của chúng tôi đang xử lý. Mong bạn thông cảm và vui lòng quay lại sau ít phút."
- Tiêu chuẩn áp dụng: Kiểu chữ
Body Large (24px, Regular), căn giữa, màu#8B949E(Text Gray).
- Vị trí: Dưới Tiêu đề, khoảng cách
- a. Icon Hệ thống (System Icon):
4. Hành vi Hệ thống
Đây là một trạng thái cuối (terminal state), do đó hành vi của nó được định nghĩa ở cấp hệ thống thay vì chỉ là chuyển tiếp giao diện.
- Điều kiện Kích hoạt: Màn hình này sẽ được hiển thị khi ứng dụng trên booth không thể kết nối tới máy chủ backend sau một số lần thử lại (ví dụ: 3 lần trong vòng 15 giây).
- Cơ chế Cảnh báo: Ngay khi trạng thái này được kích hoạt, ứng dụng BẮT BUỘC phải ghi log lỗi tại chỗ và kích hoạt một cơ chế cảnh báo tới hệ thống giám sát của đội ngũ kỹ thuật. Đây là yêu cầu vận hành cốt lõi.
- Cơ chế Phục hồi:
- Ứng dụng sẽ tiếp tục âm thầm cố gắng kết nối lại với máy chủ theo một chu kỳ dài hơn (ví dụ: mỗi 60 giây).
- Ngay khi kết nối được khôi phục thành công, màn hình này sẽ tự động biến mất và hệ thống chuyển về
Idle State. Người dùng không cần thực hiện bất kỳ hành động nào.
5. Triết lý Thiết kế
- Trung thực và Bình tĩnh: Thừa nhận sự cố một cách trực tiếp nhưng với một giọng điệu bình tĩnh, chuyên nghiệp, giúp trấn an người dùng.
- Thiết kế để Phục hồi (Design for Recovery): Hệ thống được thiết kế để có khả năng tự phục hồi một cách lặng lẽ. Trải nghiệm tốt nhất là khi người dùng rời đi lúc booth đang lỗi và quay lại thấy nó đã hoạt động bình thường.