Bỏ qua

TIÊU CHUẨN THIẾT KẾ UX/UI

Mã tài liệu: EZD-DSGN-STD Phiên bản: 1.1
Ngày hiệu lực: 13/09/2025 Người soạn: Stephen
Người phê duyệt: Stephen Trang: 1/3

1.0 MỤC ĐÍCH & PHẠM VI

Tài liệu này là nguồn tham chiếu duy nhất (Single Source of Truth) cho tất cả các quyết định về giao diện (UI) và trải nghiệm (UX) trên thiết bị EZD AI Booth. Nó đảm bảo tính nhất quán và chất lượng ở mức cao nhất, áp dụng cho cả đội ngũ thiết kế và kỹ thuật.

2.0 NGUYÊN TẮC NỀN TẢNG CHO BOOTH APP: THIẾT KẾ CHO MÀN HÌNH ĐỨNG 4K

  • Bối cảnh: Sản phẩm sẽ được triển khai trên màn hình TV 55-inch đặt đứng (portrait) có độ phân giải 4K (2160x3840 pixels). Mật độ điểm ảnh cao và khoảng cách xem từ 1-3 mét đòi hỏi chúng ta phải tư duy khác về kích thước và bố cục.
  • Quy tắc Vàng: Tất cả các giá trị kích thước được định nghĩa bằng px trong tài liệu này được hiểu là đơn vị logic trong một hệ tọa độ thiết kế chuẩn (ví dụ: 1080x1920).
  • Trách nhiệm của Đội ngũ Kỹ thuật: BẮT BUỘC phải triển khai một cơ chế co giãn (scaling mechanism). Có thể sử dụng các đơn vị tương đối (rem, vh) hoặc một hệ số nhân (scaling factor) để đảm bảo mọi yếu tố (chữ, icon, khoảng cách) khi hiển thị trên màn hình 4K vật lý đều có kích thước vật lý đúng như mong muốn, đảm bảo sự rõ ràng và dễ đọc từ xa.

2.1. Bảng màu (Color Palette)

Triết lý: Màu sắc tạo cảm giác công nghệ, thân thiện và đáng tin cậy. Nền tối được ưu tiên để giảm chói và làm nổi bật nội dung trên màn hình lớn.

  • Primary Color (Màu chủ đạo):
    • #0A74DA (EZD Blue): Dùng cho các nút kêu gọi hành động chính, các đường nhấn.
  • Secondary Colors (Màu thứ cấp):
    • #0D1117 (Background Black): Màu nền chính.
    • #161B22 (Surface Gray): Màu nền cho các thẻ (cards), modal.
  • Accent & Text Colors (Màu nhấn & Chữ):
    • #F0F6FC (Text White): Màu chữ chính, độ tương phản cao.
    • #8B949E (Text Gray): Màu chữ cho các đoạn mô tả phụ.
  • Semantic Colors (Màu theo ngữ nghĩa):
    • #2DA44E (Success Green), #D18A06 (Warning Yellow), #E5534B (Error Red).

2.2. Kiểu chữ (Typography)

Triết lý: Rõ ràng là ưu tiên số một. Mọi văn bản phải dễ đọc từ khoảng cách 2 mét.

  • Font Family: Be Vietnam Pro (Sans-serif, hiện đại, hỗ trợ đầy đủ tiếng Việt).
  • Thang bậc kiểu chữ (Typographic Scale - giá trị logic):
    • (Mới) Display: 96px, Bold - Chỉ dùng cho các thông điệp cực ngắn, gây ấn tượng mạnh trên màn hình chờ.
    • Heading 1 (H1): 48px, Bold - Dùng cho tiêu đề chính, lời chào lớn.
    • Heading 2 (H2): 32px, SemiBold - Dùng cho các tiêu đề phụ.
    • Body Large: 24px, Regular - Dùng cho các đoạn văn bản chính mà AI trả về.
    • Body Small: 18px, Regular - Dùng cho các đoạn mô tả nhỏ hơn, gợi ý.
    • Button Text: 20px, Medium - Chữ trên các nút bấm.

2.3. Bố cục và Lưới (Layout & Grid)

Triết lý: Trật tự và nhất quán tạo ra cảm giác quen thuộc và dễ sử dụng.

  • Hệ thống Lưới 8-Point: Mọi kích thước và khoảng cách là bội số của 8.
  • Vùng An toàn (Safe Area): Duy trì vùng đệm tối thiểu là 48px (giá trị logic) từ các cạnh màn hình.

2.4. Hệ thống Icon (Iconography)

Triết lý: Icon phải được hiểu ngay lập tức mà không cần nhãn.

  • Bộ Icon: Sử dụng duy nhất bộ Material Symbols hoặc Phosphor Icons.
  • Yêu cầu Kỹ thuật: Tất cả các icon BẮT BUỘC phải được sử dụng dưới dạng vector (SVG) để đảm bảo sự sắc nét tuyệt đối ở độ phân giải 4K.
  • Kích thước chuẩn (giá trị logic): 24px, 32px, 48px.

2.5. Các Thành phần Tương tác (Interactive Components)

Triết lý: Mọi tương tác phải có phản hồi tức thì và rõ ràng.

  • Nút bấm (Buttons): Phải có 4 trạng thái (Default, Hover, Pressed, Disabled). Bán kính góc: 12px.
  • Kích thước Tương tác Tối thiểu (Minimum Touch Target): Mọi yếu tố có thể chạm (nút bấm, thẻ bài...) phải có vùng chạm tối thiểu là 48x48px (giá trị logic) để đảm bảo dễ dàng tương tác.
  • Phản hồi Trực quan:
    • Đang lắng nghe: Biểu tượng micro có hiệu ứng sóng âm lan tỏa.
    • Đang suy nghĩ/xử lý: Hiệu ứng 3 chấm ... chuyển động nhẹ nhàng.

2.6. Chuyển động và Hoạt ảnh (Motion & Animation)

Triết lý: Chuyển động phải có mục đích, mượt mà và tinh tế.

  • Thời lượng: Fast: 150ms, Medium: 300ms.
  • Easing: Sử dụng ease-in-out cho hầu hết các chuyển động.

2.7. Avatar 3D - Tiêu chuẩn Tương tác

Triết lý: Avatar là linh hồn của sản phẩm, phải thể hiện được sự sống động và thấu cảm.

  • Thư viện Cử chỉ Chuẩn:
    • Cử chỉ Cơ bản:
      • Idle: Trạng thái chờ (nhìn quanh, chớp mắt, mỉm cười nhẹ với người qua lại).
      • Greeting: Vẫy tay chào khi có người đến gần.
      • Listening: Hơi nghiêng đầu, gật nhẹ.
      • Speaking: Cử chỉ miệng (lip-sync) và tay phụ họa.
      • Pointing: Đưa tay chỉ về một hướng khi chỉ dẫn.
    • Cử chỉ Thể hiện sự Thấu cảm:
      • Confirming (Xác nhận đã hiểu): Một cái gật đầu nhẹ và nhanh sau khi người dùng nói xong, thể hiện "tôi đã hiểu và đang xử lý".
      • Apologizing (Bày tỏ sự xin lỗi): Khi AI không hiểu, có thể có biểu cảm hơi bối rối, tay làm cử chỉ "xin lỗi".
      • Encouraging (Khuyến khích): Khi người dùng im lặng suy nghĩ, avatar có thể có một nụ cười nhẹ nhàng, kiên nhẫn.

2.8. Khả năng Tiếp cận (Accessibility)

Triết lý: Một thiết kế tốt là một thiết kế cho tất cả mọi người.

  • Độ tương phản: Mọi văn bản phải đạt chuẩn tối thiểu WCAG AA (tỷ lệ 4.5:1).
  • Kích thước Chữ: Kích thước tối thiểu 24px (giá trị logic) phải được đảm bảo hiển thị đủ lớn trên thiết bị thật để người có thị lực kém có thể đọc được.

3.0 NGUYÊN TẮC NỀN TẢNG CHO ADMIN WEBAPP: THIẾT KẾ ĐÁP ỨNG (RESPONSIVE)

  • Bối cảnh: Sản phẩm là một ứng dụng web (web application) hoạt động trên trình duyệt máy tính desktop/laptop. Giao diện phải được thiết kế để tối ưu cho việc hiển thị nhiều thông tin và tương tác dày đặc (data-dense). Yêu cầu cốt lõi là thiết kế đáp ứng (responsive design), đảm bảo trải nghiệm tốt trên nhiều kích thước màn hình khác nhau, từ laptop 13-inch đến màn hình lớn 27-inch.
  • Quy tắc Vàng: Tất cả các giá trị kích thước được định nghĩa bằng px trong tài liệu này được hiểu là đơn vị logic trong một hệ tọa độ thiết kế chuẩn cho desktop (ví dụ: 1440px chiều rộng).
  • Trách nhiệm của Đội ngũ Kỹ thuật: BẮT BUỘC phải triển khai một bố cục đáp ứng (responsive layout). Phải sử dụng các kỹ thuật CSS hiện đại (Flexbox, Grid, Media Queries) để đảm bảo các thành phần giao diện tự động sắp xếp lại một cách hợp lý khi chiều rộng của trình duyệt thay đổi, tránh việc bị vỡ layout hoặc xuất hiện thanh cuộn ngang không mong muốn.

Triết lý: Giao diện Admin Webapp phải sạch sẽ, ưu tiên tính hiệu quả, dễ dàng quét thông tin và thực hiện các tác vụ quản trị một cách nhanh chóng. Các tiêu chuẩn dưới đây kế thừa và mở rộng từ Phần 2.

3.1. Bố cục, Điều hướng & Thương hiệu (Layout, Navigation & Branding)

  • Cấu trúc Tổng thể:
    • Sidebar (Thanh bên): Một thanh điều hướng chính, cố định ở bên trái, rộng 240px. Màu nền #161B22 (Surface Gray).
      • Logo Đối tác (Tenant Logo): Nằm ở vị trí trên cùng của Sidebar. Đây là logo của đối tác (tenant) đang sử dụng hệ thống. Hệ thống CMS phải cho phép tải lên và thay đổi logo này.
      • Menu Điều hướng: Nằm dưới Logo Đối tác. Mục được chọn (Active Item) có dải màu #0A74DA (EZD Blue) bên cạnh và chữ màu trắng.
      • Logo Nền tảng (Platform Logo): Nằm ở vị trí dưới cùng của Sidebar, đi kèm dòng chữ nhỏ "Powered by EZDesign". Logo này là cố định và không thể thay đổi.
    • Header (Tiêu đề trên): Một thanh header cố định phía trên, cao 64px.
    • Content Area (Vùng Nội dung): Toàn bộ không gian còn lại, có padding 32px, nền #0D1117 (Background Black).

3.2. Bảng Dữ liệu (Data Tables)

  • Cấu trúc:
    • Header Row (Dòng tiêu đề): Chữ Body Small (18px, Medium), màu #8B949E (Text Gray).
    • Body Rows (Các dòng dữ liệu): Chữ Body Small (18px, Regular), màu #F0F6FC (Text White).
    • Trạng thái Hover: Khi di chuột qua một dòng, toàn bộ dòng sẽ có màu nền #161B22 (Surface Gray).
  • Actions: Các hành động (Sửa, Xóa) sẽ được biểu thị bằng icon, đặt ở cột cuối cùng.

3.3. Form Nhập liệu (Forms)

  • Ô Nhập liệu (Input Fields):
    • Nền: #0D1117 (Background Black).
    • Viền: 1px solid #30363d.
    • Trạng thái Focus: Khi được chọn, viền sẽ đổi sang màu #0A74DA (EZD Blue).
    • Nhãn (Label): Sử dụng Body Small (18px, Regular), đặt phía trên ô nhập liệu.
  • Nút bấm (Buttons):
    • Nút Chính (Primary): Nền màu #0A74DA (EZD Blue), chữ trắng. Dùng cho các hành động chính (Lưu, Thêm mới).
    • Nút Phụ (Secondary): Viền 1px solid #30363d, nền trong suốt, chữ #F0F6FC (Text White).

3.4. Modal & Thông báo (Modals & Notifications)

  • Modal (Hộp thoại xác nhận):
    • Nền: #161B22 (Surface Gray).
    • Lớp phủ (Overlay): Một lớp phủ màu đen có độ mờ 70% bao phủ toàn bộ trang phía sau.
  • Thông báo (Notifications/Alerts):
    • Các dải băng thông báo nhỏ, xuất hiện ở góc trên bên phải.
    • Màu nền: Sử dụng các màu ngữ nghĩa (Success Green, Error Red, Warning Yellow).