Đặc tả Màn hình: Trạng thái Lắng nghe (Listening State)

Mã tài liệu:	EZD-DES-SCR-002	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 phản hồi trực quan, rõ ràng và ngay lập tức để người dùng biết rằng hệ thống đang tích cực lắng nghe câu lệnh của họ. Tạo ra một không gian tập trung, không xao lãng để khuyến khích người dùng nói một cách tự nhiên và thoải mái.

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

Bố cục tổng thể vẫn giữ nguyên cấu trúc "Phân vùng theo Chiều dọc" và tuân thủ Hệ thống Lưới 8-Point cũng như Vùng An toàn 48px. Tuy nhiên, các thành phần sẽ được đơn giản hóa để tập trung vào hành động chính là "lắng nghe".

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

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

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

Thành phần 2: Logo của Tenant (Branding - Vùng Trên)

• Vị trí: Giữ nguyên ở Vùng Trên, căn giữa theo chiều ngang.
• Hành vi: Độ mờ (opacity) của logo có thể giảm xuống còn 50% để giảm sự chú ý, nhường "sân khấu" cho tương tác chính.

Thành phần 3: Avatar 3D - Trạng thái Listening

Tên trạng thái: Lắng nghe (Listening) Màn hình liên quan: SCREEN-LISTEN-V1.0-PORTRAIT

1. Mục tiêu Chính

Truyền đạt một cách rõ ràng và phi ngôn ngữ rằng: "Tôi đang tập trung 100% vào bạn và sẵn sàng tiếp nhận thông tin". Mục tiêu là tạo ra một không gian tâm lý an toàn, thể hiện sự tôn trọng, để người dùng có thể nói một cách tự nhiên mà không cảm thấy bị gián đoạn hay phán xét.

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

• Chuyển vào (From Greeting to Listening): Ngay sau khi animation Greeting (vẫy tay) kết thúc, Avatar sẽ chuyển mượt mà sang tư thế Listening. Quá trình chuyển đổi phải nhanh và liền mạch, không có độ trễ.
• Chuyển ra (From Listening to Processing): Ngay khi hệ thống phát hiện người dùng đã ngừng nói (dựa trên tín hiệu từ micro), Avatar sẽ chuyển từ trạng thái Listening sang trạng thái Thinking/Processing.

3. Mô tả Animation Chi tiết

Hành vi Listening là một trạng thái tĩnh có chủ đích, thể hiện sự chăm chú lắng nghe, tương tự như cách một người lễ tân chuyên nghiệp sẽ làm.

• Tư thế Chính (Main Pose):

  • Đầu: Hơi nghiêng về một bên (khoảng 5-10 độ). Đây là một cử chỉ phi ngôn ngữ kinh điển trên toàn thế giới, thể hiện sự quan tâm và lắng nghe một cách tích cực.
  • Cơ thể: Giữ một tư thế cởi mở, thẳng người và hướng về phía người dùng.

• Mắt (Eyes):

  • Hướng nhìn: Mắt sẽ nhìn thẳng và ổn định vào phía người dùng, duy trì "giao tiếp bằng mắt" (simulated eye-contact) để xây dựng sự kết nối và tin tưởng. Hướng nhìn nên ở tầm ngang với khuôn mặt của một người có chiều cao trung bình đứng trước booth.
  • Chớp mắt: Tần suất chớp mắt hoàn toàn tự nhiên, không nhìn chằm chằm một cách vô hồn hay chớp mắt quá nhiều gây cảm giác bồn chồn.

• Hành vi vi mô (Micro-behaviors):

  • Gật đầu xác nhận: Khi người dùng bắt đầu nói những từ đầu tiên, Avatar có thể thực hiện một cái gật đầu rất nhẹ và chậm, như một tín hiệu phi ngôn ngữ để xác nhận: "Tôi đang nghe bạn đây, xin mời tiếp tục".
  • Sự tĩnh lặng: Trong suốt quá trình người dùng nói, Avatar gần như giữ nguyên tư thế tĩnh này. Việc tránh các cử động không cần thiết là cực kỳ quan trọng, vì nó thể hiện sự tập trung tuyệt đối và không làm người nói bị phân tâm. Đây là sự khác biệt chính so với trạng thái Idle (liên tục chuyển động) và Processing (có các cử chỉ suy nghĩ).

4. Yêu cầu Kỹ thuật (Technical Requirements)

• Engine 3D phải có một trạng thái Listening riêng biệt trong State Machine của Avatar.
• Trạng thái này phải được kích hoạt đồng thời với việc hệ thống bắt đầu ghi nhận âm thanh từ micro.

5. Triết lý Thiết kế & Liên kết với Nguyên tắc

• Hành vi này trực tiếp phục vụ nguyên tắc "Đối thoại hơn Bấm nút" bằng cách tạo ra một môi trường hội thoại chuyên nghiệp và tôn trọng.
• Nó là một phần không thể thiếu trong việc xây dựng "AI có tính cách thấu cảm". Sự im lặng và tập trung của Avatar trong lúc này thể hiện sự tôn trọng đối với người nói, một kỹ năng lắng nghe mà ngay cả con người đôi khi cũng bỏ qua.
• Nó giúp quản lý kỳ vọng của người dùng, cho họ biết rõ ràng rằng đây là lúc để họ nói và hệ thống đang dành toàn bộ sự chú ý cho họ.

Thành phần 4: Cụm Văn bản Chính (Thay thế bằng Vùng Phiên âm)

• Mô tả: Cụm văn bản "Xin chào!..." từ trạng thái Idle sẽ biến mất. Thay vào đó là một vùng hiển thị văn bản được phiên âm trực tiếp từ giọng nói của người dùng.
• Vị trí: Nằm ở Vùng Dưới, vị trí tương tự Cụm Văn bản Chính cũ.
• Nội dung: Hiển thị real-time những gì người dùng đang nói. Ví dụ: "cho tôi hỏi... đường đến...uniqlo..."
• Tiêu chuẩn áp dụng:
  • Kiểu chữ: H2 (32px, SemiBold), font Be Vietnam Pro để đảm bảo dễ đọc.
  • Màu sắc: #F0F6FC (Text White).

Thành phần 5: Hiệu ứng Sóng âm (Listening Visualizer)

• Mô tả: Thay thế cho "Vùng Gợi ý Tương tác". Đây là thành phần phản hồi trực quan cốt lõi của trạng thái này. Một hiệu ứng gợn sóng hoặc dải tần số (equalizer) sẽ chuyển động theo cường độ giọng nói của người dùng.
• Vị trí: Có thể đặt ở phía dưới cùng của màn hình, hoặc tỏa ra từ chân của Avatar.
• Mục đích: Cung cấp phản hồi tức thì và rõ ràng rằng "tôi đang nghe thấy bạn".
• Tiêu chuẩn áp dụng:
  • Đây là hiện thực hóa của yêu cầu "Phản hồi Trực quan: Đang lắng nghe".
  • Màu sắc: Sử dụng màu #0A74DA (EZD Blue) để tạo điểm nhấn công nghệ.

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

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

  • Màn hình này được kích hoạt ngay sau khi Avatar thực hiện xong hành động Greeting.
  • Cụm Văn bản Chính và Vùng Gợi ý của màn hình Idle sẽ mờ dần và biến mất (fade out).
  • Đồng thời, Vùng Phiên âm và Hiệu ứng Sóng âm sẽ xuất hiện một cách mượt mà (fade in).
  • Tiêu chuẩn áp dụng: Thời gian chuyển đổi Fast: 150ms.

• Chuyển ra (Transition Out):

  • Sau khi hệ thống phát hiện người dùng đã ngừng nói trong một khoảng thời gian ngắn (ví dụ: 1-2 giây), nó sẽ tự động chuyển sang Processing State.
  • Hiệu ứng Sóng âm sẽ biến mất và được thay thế bằng hiệu ứng "Đang suy nghĩ" (ví dụ: 3 chấm chuyển động).
  • Văn bản phiên âm sẽ giữ nguyên trên màn hình để người dùng xác nhận lại câu hỏi của mình.