Giao diện
Nguyên tắc thiết kế
Khu UI/UX dành cho designer, BA và dev: quy tắc giao diện chung của các app nội bộ Tasco. Mọi quy tắc ở đây đã có sẵn trong design token và component C* — màn hình thiết kế đúng quy tắc thì dev dựng lại bằng component có sẵn, không phải viết CSS riêng.
Người dùng là ai
App dựng trên framework là công cụ làm việc: nhân viên mở hằng ngày, xử lý nhiều bản ghi, lặp lại cùng thao tác hàng chục lần. Giao diện tốt là giao diện giúp làm xong việc nhanh và ít sai — không phải giao diện gây ấn tượng ở lần mở đầu tiên. Mọi nguyên tắc dưới đây xuất phát từ đó.
Sáu nguyên tắc
1. Dữ liệu trước, trang trí sau
- Mật độ gọn hơn mặc định của Ant Design: ô bảng cách 8px, thân card 12–16px, ô nhập cao 36px. Một màn hình chứa được nhiều dữ liệu hơn mà vẫn đọc được — xem Chữ, khoảng cách & mật độ.
- Góc vuông, ít đổ bóng. Điểm nhấn là màu thương hiệu ở chỗ có ý nghĩa (header bảng, hành động chính, mục menu đang chọn), không phải hiệu ứng.
2. Nhất quán hơn khác biệt
- Mỗi loại màn hình theo một mẫu: danh sách, form, chi tiết, tổng quan. Người dùng học một lần, dùng được ở mọi sản phẩm.
- Cùng hành động thì cùng nhãn, cùng icon, cùng vị trí — xem Câu chữ và Icon.
- Thiết kế bằng component có sẵn. Cần một khối giao diện chưa có thì đề xuất đưa vào core thay vì vẽ biến thể riêng cho một sản phẩm.
3. Mỗi khu vực một hành động chính
Một khu vực (toolbar, cuối form, hộp thoại) chỉ có một nút primary. Hành động phá huỷ dùng kiểu danger, đứng tách khỏi nhóm và luôn hỏi lại trước khi chạy. Xem CButton.
4. Luôn cho biết chuyện gì đang xảy ra
- Mọi vùng dữ liệu có đủ bốn trạng thái: đang tải, rỗng, lỗi, không có quyền — xem Rỗng, đang tải, lỗi, không có quyền.
- Thao tác xong báo kết quả ngắn gọn; thao tác lỗi nói rõ lỗi gì và làm gì tiếp.
5. Quyền là một phần của thiết kế
Người dùng khác nhau thấy màn hình khác nhau. Thiết kế luôn trả lời: người không có quyền thấy gì? Quy ước chung: ẩn thứ họ không bao giờ được dùng, khoá thứ có thể được cấp quyền sau. Giao diện chặn quyền chỉ để trải nghiệm tốt — backend vẫn tự kiểm tra.
6. Ai cũng dùng được
Chữ đạt tương phản WCAG AA ở cả chế độ sáng và tối, mọi thao tác làm được bằng bàn phím, không dùng màu làm tín hiệu duy nhất — xem Khả năng tiếp cận.
Nhận diện Tasco
| Yếu tố | Quy ước | Token |
|---|---|---|
| Màu chính | Navy, cho hành động chính và header bảng | --tasco-color-primary |
| Màu nhấn | Cam, cho mục menu đang chọn và điểm nhấn phụ — chỉ làm nền, không làm chữ | --tasco-color-accent |
| Chữ thân | Quicksand | --tasco-font-family |
| Tiêu đề | Montserrat — tiêu đề trang, tiêu đề card, số liệu thống kê | --tasco-font-family-heading |
| Bo góc | Vuông | --tasco-radius, --tasco-radius-lg |
| Sidebar | Nền gradient navy, chữ trắng viết hoa; mục đang chọn là pill cam chữ navy | --tasco-color-sidebar-* |
| Bảng | Header nền navy chữ trắng, hàng đang chọn nền xanh nhạt | --tasco-color-primary, --tasco-color-info-soft |
Giá trị cụ thể nằm trong Màu & tương phản và được sinh từ @tasco/theme. Thiết kế tham chiếu tên token thay vì chép mã màu: đổi token là mọi app đổi theo, còn mã màu chép tay thì không.
Checklist một màn hình mới
- Chọn mẫu trang gần nhất trong bốn mẫu; màn hình không khớp mẫu nào thì trao đổi với core trước khi vẽ.
- Dựng bằng component trong danh mục; ghi rõ biến thể đang dùng (vd
CButton variant="outline"). - Chỉ dùng màu, cỡ chữ, khoảng cách có trong token.
- Vẽ đủ trạng thái: đang tải, rỗng, rỗng do bộ lọc, lỗi, không có quyền.
- Viết nhãn và thông báo theo Câu chữ.
- Xem lại ở chế độ tối và ở màn hình hẹp.
- Duyệt thao tác bằng bàn phím và kiểm tra tương phản các cặp màu tự đặt.
Khi framework chưa có thứ cần dùng
| Cần | Làm gì |
|---|---|
| Màu hoặc kích thước mới | Đề xuất token mới cho core — xem Đổi design token |
| Component mới | Mở issue Feature Request — xem RFC Process |
| Biến thể chỉ một sản phẩm dùng | Để ở repo sản phẩm, dựng từ component có sẵn |
Ảnh giao diện mẫu chỉ minh hoạ khung và hành vi. Khi đưa vào core, component giữ phần dùng chung — cột, dữ liệu và câu chữ nghiệp vụ trong ảnh mẫu thuộc về sản phẩm.
Trong khu này
| Trang | Trả lời câu hỏi |
|---|---|
| Màu & tương phản | Màu nào dùng cho việc gì, cặp chữ/nền nào đủ tương phản |
| Chữ, khoảng cách & mật độ | Font, cỡ chữ, khoảng cách, chiều cao control |
| Icon | Bộ icon, cỡ, icon quy ước cho từng hành động |
| Bố cục trang chuẩn | Khung app và cấu trúc một trang |
| Rỗng, đang tải, lỗi, không có quyền | Mỗi trạng thái hiển thị thế nào |
| Câu chữ | Nhãn nút, thông báo, định dạng ngày, tiền, số |
| Khả năng tiếp cận | Bàn phím, tương phản, trình đọc màn hình |