Bỏ qua

Đặc tả Màn hình: Trạng thái Chờ (Idle State)

Mã tài liệu: EZD-DES-SCR-001 Phiên bản: 1.1
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

Tạo ra một điểm nhấn thị giác ấn tượng trong không gian công cộng, có khả năng thu hút sự chú ý của khách hàng từ xa, đồng thời thiết lập ngay từ đầu một không khí thân thiện, dễ gần và đáng tin cậy, thể hiện "tính cách thấu cảm" của AI.

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

Kiến trúc giao diện được xây dựng theo mô hình "Phân vùng theo Chiều dọc" để tối ưu cho màn hình 55 inch dạng đứng, bao gồm 3 vùng chính: Trên (Branding), Giữa (Tương tác chính), và Dưới (Kêu gọi hành động).

  • 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ả: Một lớp nền tĩnh, tối màu, không có chi tiết gây xao lãng để tập trung sự chú ý vào các yếu tố chí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í: Đặt ở Vùng Trên, căn giữa theo chiều ngang, cách lề trên 48px (tuân thủ Vùng An toàn).
  • Mục đích: Khẳng định vai trò "Lễ tân Kỹ thuật số" dành riêng cho Tenant đó, đúng theo định hướng trong PRD.
  • Kích thước: Chiều cao 64px.

Thành phần 3: Avatar 3D - Trạng thái Idle (Chi tiết)

1. Mục tiêu Chính (Primary Goal)

Biến chiếc Booth từ một màn hình tĩnh thành một "thực thể" sống động, có khả năng nhận biết và tương tác tinh tế với môi trường xung quanh, nhằm phá vỡ rào cản ban đầu, khơi gợi sự tò mò và mời gọi người dùng bước vào một cuộc hội thoại.

2. Mô tả Animation Chi tiết: Vòng lặp Thu hút & Thấu cảm

Hành vi của Avatar trong trạng thái Idle được chia thành hai lớp: Animation Nền (khi không có ai ở gần) và Hành vi Tương tác (khi phát hiện có người).

A. Animation Nền (Base Idle Loop)

Đây là trạng thái mặc định, được thiết kế để tiết kiệm tài nguyên nhưng vẫn duy trì cảm giác "sống".

  • Nhịp thở (Breathing): Avatar phải có một animation nhịp thở rất nhẹ nhàng và tự nhiên. Phần vai và ngực sẽ chuyển động lên xuống một cách tinh tế. Đây là yếu tố nền tảng nhất tạo ra sự sống.
  • Chớp mắt (Blinking): Mắt của Avatar sẽ chớp một cách ngẫu nhiên, không theo chu kỳ cố định, mô phỏng đúng như mắt người.
  • Chuyển động vi mô (Micro-movements): Đầu và thân trên sẽ có những chuyển động rất nhỏ, gần như không nhận thấy, để tránh việc bị "đóng băng" như một bức tượng.

B. Hành vi Thu hút & Tương tác (The "Awareness & Empathy" Loop)

Đây là lớp hành vi thông minh hơn, được kích hoạt khi có người dùng trong phạm vi cảm biến.

  • Điều kiện kích hoạt: Khi cảm biến tiệm cận phát hiện có người trong vùng tương tác (ví dụ: trong vòng 3-4 mét), Avatar sẽ chuyển từ Base Idle Loop sang trạng thái "nhận biết" này.

  • Logic hoạt động: Hệ thống sẽ chạy một "bộ não" hành vi đơn giản, lựa chọn ngẫu nhiên một trong các hành động dưới đây để thực hiện, tránh sự lặp lại nhàm chán.

    • Hành động 1: Dõi theo Người qua lại (LookAtPasserby)

      • Mô tả: Avatar sẽ nhẹ nhàng quay đầu và hướng mắt về phía người đang di chuyển trong vùng cảm biến, dõi theo họ trong một khoảng ngắn (1-2 giây) rồi từ từ quay lại vị trí trung tâm.
      • Mục đích: Tạo ra một cảm giác kinh ngạc và được chú ý cho người qua lại. "Cái máy đó đang nhìn mình!".

    • Hành động 2: Gật đầu Chào (GentleNod)

      • Mô tả: Nếu một người đi chậm lại hoặc dừng lại nhìn vào booth, avatar có thể thực hiện một cử chỉ gật đầu nhẹ và nhanh, kèm theo một nụ cười tinh tế.
      • Mục đích: Đây là một lời chào không lời, thể hiện sự công nhận và thân thiện, như thể nói "Tôi thấy bạn rồi, tôi sẵn sàng giúp đỡ".

    • Hành động 3: Thể hiện sự Tò mò (CuriousTilt)

      • Mô tả: Avatar có thể hơi nghiêng đầu về một bên, mắt mở to hơn một chút, thể hiện sự tò mò và hứng thú với người đang đứng trước mặt.
      • Mục đích: Hành động này mang tính mời gọi và khiến Avatar trông dễ gần, đáng yêu hơn.

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

  • Chuyển vào Trạng thái Tương tác chính: Khi người dùng đi vào vùng tương tác gần (ví dụ: < 1.5 mét) và đứng yên, vòng lặp thu hút này sẽ kết thúc. Avatar sẽ quay lại nhìn thẳng vào người dùng, thực hiện animation Greeting (vẫy tay) một cách dứt khoát và màn hình chuyển sang Listening State. Đây là tín hiệu rõ ràng: "OK, giờ chúng ta sẽ nói chuyện."
  • Chuyển ra Trạng thái Nền: Nếu người dùng rời khỏi vùng cảm biến, Avatar sẽ quay trở lại Base Idle Loop (chỉ thở và chớp mắt) để tiết kiệm tài nguyên.

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

  • Cần có một cảm biến tiệm cận (proximity sensor) đáng tin cậy để cung cấp dữ liệu đầu vào cho việc kích hoạt các hành vi.
  • Engine 3D phải hỗ trợ một State Machine cho các animation, cho phép chuyển đổi mượt mà giữa các trạng thái (Base Idle, Aware Idle, Greeting, Listening...).
  • Logic của vòng lặp hành vi thu hút cần có yếu tố ngẫu nhiên (về loại hành động và thời gian chờ giữa các hành động) để tránh bị máy móc.

5. Triết lý Thiết kế (Design Philosophy)

  • Những hành vi này không phải là "tính năng". Chúng là hiện thực hóa của "tính cách thấu cảm" mà chúng ta muốn xây dựng.
  • Mục tiêu là phá vỡ rào cản tâm lý giữa người và máy, tạo ra một ảo giác rằng người dùng đang tương tác với một thực thể có nhận thức, chứ không phải một màn hình vô tri. Điều này trực tiếp phục vụ nguyên tắc "Thú vị trong từng Tương tác".

Thành phần 4: Cụm Văn bản Chính (Call to Action - Vùng Dưới)

  • Vị trí: Nằm ở Vùng Dưới, phía dưới Avatar. Khoảng cách từ chân Vùng Giữa đến dòng Tiêu đề là 40px.
  • a. Tiêu đề (Heading):
    • Nội dung: "Xin chào!"
    • Tiêu chuẩn áp dụng:
      • Kiểu chữ: H1 (48px, Bold), font Be Vietnam Pro.
      • Màu sắc: #F0F6FC (Text White).
  • b. Phụ đề / Hướng dẫn (Sub-heading / Instruction):
    • Vị trí: Nằm dưới Tiêu đề, khoảng cách 16px.
    • Nội dung: "Tôi có thể giúp gì cho bạn?"
    • Tiêu chuẩn áp dụng:
      • Kiểu chữ: Body Large (24px, Regular), font Be Vietnam Pro.
      • Màu sắc: #8B949E (Text Gray).

Thành phần 5: Vùng Gợi ý Tương tác (Interaction Hint)

  • Vị trí: Nằm ở cuối cùng của Vùng Dưới.
  • Mục đích: Hỗ trợ tuyệt đối cho nguyên tắc "Zero Learning Curve" bằng cách chỉ dẫn rõ ràng cách bắt đầu.
  • Nội dung: Một biểu tượng micro đi kèm dòng chữ "Hãy nói để bắt đầu".
  • Tiêu chuẩn áp dụng:
    • Icon: Sử dụng icon micro từ bộ icon đã chọn, kích thước 24px.
    • Kiểu chữ: Body Small (18px, Regular), màu #8B949E (Text Gray).

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

  • Khi cảm biến tiệm cận phát hiện người dùng, hệ thống sẽ thực hiện một chuỗi chuyển đổi mượt mà, tuân thủ tiêu chuẩn về Motion & Animation.
  • Avatar sẽ chuyển từ animation Idle sang animation Greeting (vẫy tay).
  • Sau lời chào, màn hình sẽ chuyển sang Listening State, bắt đầu luồng tương tác như mô tả trong User Story 01.