Bỏ qua

Đặc tả Màn hình: Trạng thái Thông báo Hệ thống (General Message State)

Mã tài liệu: EZD-DES-SCR-006 Phiên bản: 1.0
User Story liên quan: User Story 01, User Story 02, User Story 03 Ngày hiệu lực: 13/09/2025
Người soạn: Stephen Người phê duyệt: Stephen

1. Mục tiêu của Màn hình

Cung cấp một khuôn mẫu (template) nhất quán, lịch sự và hữu ích để xử lý các kịch bản mà hệ thống không thể trả về một kết quả cụ thể (ví dụ: không tìm thấy thông tin, câu hỏi ngoài phạm vi). Màn hình này phải có khả năng quản lý kỳ vọng của người dùng và nhẹ nhàng hướng họ quay trở lại luồng tương tác thành công.

2. Bố cục Tổng thể (Overall Layout)

Bố cục tổng thể vẫn tuân thủ nghiêm ngặt mô hình "Phân vùng theo Chiều dọc" và các tiêu chuẩn đã định nghĩa để đảm bảo tính nhất quán trong toàn bộ trải nghiệm.

  • Toàn bộ bố cục tuân thủ Hệ thống Lưới 8-Point và Vùng An toàn 48px.

3. Phân rã các Thành phần (Component Breakdown)

Thành phần 1: Nền (Background)

  • Mô tả: Nền tối, tĩnh, không thay đổi.
  • Tiêu chuẩn áp dụng:
    • Màu sắc: Sử dụng màu #0D1117 (Background Black).

Thành phần 2: Avatar 3D - Trạng thái Apologetic/Guiding

  • Vị trí: Vẫn ở vùng giữa, là trung tâm của sự chú ý.
  • Hành vi: Avatar sẽ không biến mất. Thay vào đó, nó sẽ chuyển sang một trạng thái biểu cảm phù hợp với thông báo. Ví dụ:
    • Cử chỉ: Hơi nhún vai, xòe tay ra một cách nhẹ nhàng, hoặc hơi nghiêng đầu với biểu cảm thông cảm.
    • Mục đích: Thể hiện sự thấu cảm, làm cho lời từ chối bớt máy móc và mang tính người hơn, trực tiếp phục vụ nguyên tắc "Delight in Every Interaction" ngay cả trong kịch bản thất bại.

Thành phần 3: Khối Thông báo Chính (Message Block)

  • Vị trí: Nằm ở Vùng Dưới, thay thế cho vùng phiên âm hoặc các nút bấm.
  • Mục đích: Hiển thị thông điệp cốt lõi một cách rõ ràng và có cấu trúc.
  • Thành phần con:
    • a. Icon Ngữ cảnh (Contextual Icon):
      • Vị trí: Phía trên cùng của khối, căn giữa.
      • Mô tả: Một icon lớn, đơn giản để truyền đạt nhanh ngữ cảnh của thông báo. Ví dụ: icon kính lúp có dấu chéo cho "không tìm thấy", icon la bàn cho "hướng dẫn lại phạm vi".
      • Tiêu chuẩn áp dụng: Kích thước 48px, sử dụng bộ icon chuẩn (Material Symbols hoặc Phosphor Icons), màu #8B949E (Text Gray).
    • b. Tiêu đề Thông báo (Message Title):
      • Vị trí: Dưới Icon, khoảng cách 16px.
      • Nội dung: Một cụm từ ngắn gọn. Ví dụ: "Rất tiếc, tôi chưa có thông tin này."
      • Tiêu chuẩn áp dụng: Kiểu chữ H2 (32px, SemiBold), màu #F0F6FC (Text White).
    • c. Nội dung Hướng dẫn (Guiding Text):
      • Vị trí: Dưới Tiêu đề, khoảng cách 8px.
      • Nội dung: Đây là phần văn bản động, cung cấp giải thích và gợi ý. Ví dụ: "Hiện tại tôi chỉ có thể giúp bạn về vị trí và khuyến mãi tại Tầng 1. Bạn có muốn thử lại không ạ?" (kịch bản ngoài phạm vi).
      • Tiêu chuẩn áp dụng: Kiểu chữ Body Large (24px, Regular), màu #8B949E (Text Gray).

4. Hành vi Chuyển tiếp (Transition Behavior)

  • Chuyển vào (Transition In):

    • Từ màn hình Processing State, các thành phần của màn hình này sẽ xuất hiện một cách mượt mà. Khối Thông báo có thể trượt lên từ dưới hoặc mờ dần hiện ra.
    • Tiêu chuẩn áp dụng: Thời gian chuyển đổi Medium: 300ms với ease-in-out.

  • Chuyển ra (Transition Out):

    • Khi người dùng nói lại: Nếu người dùng nói một câu lệnh mới, màn hình sẽ ngay lập tức chuyển sang Listening State.
    • Khi hết giờ: Nếu không có tương tác nào trong 15 giây, màn hình sẽ mờ dần và quay trở lại Idle State.