Bỏ qua

Đặc tả Màn hình: Trạng thái Xử lý (Processing State)

Mã tài liệu: EZD-DES-SCR-003 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

Thông báo một cách rõ ràng và trực quan cho người dùng rằng hệ thống đã tiếp nhận thành công yêu cầu của họ và đang trong quá trình xử lý để tìm ra câu trả lời. Mục tiêu chính là ngăn chặn cảm giác chờ đợi hoặc lo lắng rằng hệ thống bị treo hay không hiểu lệnh.

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

Bố cục tổng thể giữ nguyên cấu trúc "Phân vùng theo Chiều dọc" như các trạng thái trước để đảm bảo sự chuyển tiếp mượt mà, không gây xáo trộn thị giác.

  • 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ả: Không thay đổi.
  • Tiêu chuẩn áp dụng:
    • Màu sắc: #0D1117 (Background Black).

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

  • Vị trí & Hành vi: Giữ nguyên trạng thái như ở Listening State (ví dụ: độ mờ 50%) để duy trì sự tập trung vào tương tác chính.

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

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

Mục tiêu của Avatar trong trạng thái này là: 1. Nhân cách hóa quá trình xử lý kỹ thuật, biến nó thành một hành động "suy nghĩ" dễ liên tưởng. 2. Duy trì sự kết nối với người dùng, khiến họ cảm thấy rằng AI đang tích cực làm việc để giải quyết yêu cầu của chính họ. 3. Lấp đầy khoảng trống chờ đợi, ngăn người dùng cảm thấy sốt ruột hoặc nghĩ rằng hệ thống đã bị treo.

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

  • Chuyển vào (From Listening to Thinking):
    • Sự chuyển đổi phải mượt mà và tự nhiên, không có sự thay đổi đột ngột. Cử chỉ Listening (hơi nghiêng đầu, gật nhẹ) sẽ từ từ chuyển thành cử chỉ Thinking.
    • Tiêu chuẩn áp dụng: Tuân thủ thời gian chuyển đổi Fast: 150ms và đường cong ease-in-out.
  • Chuyển ra (From Thinking to Speaking):
    • Ngay khi backend trả về kết quả, Avatar phải ngay lập tức phá vỡ trạng thái suy nghĩ và chuyển sang animation Speaking. Ví dụ, nó có thể ngẩng đầu lên, nhìn thẳng vào người dùng và bắt đầu cử động miệng. Sự chuyển đổi nhanh chóng này tạo cảm giác "Aha, tôi nghĩ ra rồi!".

3. Mô tả Animation Chi tiết (Detailed Animation Description)

Animation Thinking không phải là một vòng lặp đơn điệu. Nó là một trạng thái động, bao gồm một chuỗi các cử chỉ vi mô (micro-gestures) được kết hợp một cách tinh tế để tạo ra vẻ ngoài tự nhiên.

  • Mắt (Eyes):

    • Mắt sẽ không nhìn chằm chằm vào người dùng một cách vô hồn. Thay vào đó, nó có thể liếc nhẹ lên trên hoặc sang một bên trong khoảng 1-2 giây, mô phỏng hành động "truy cập ký ức" hoặc "tìm kiếm thông tin". Sau đó, mắt sẽ quay lại nhìn người dùng.
    • Tần suất chớp mắt có thể giảm nhẹ so với trạng thái Idle để thể hiện sự tập trung.

  • Đầu (Head):

    • Đầu có thể hơi nghiêng về một bên, giữ nguyên trong vài giây.
    • Có thể có một cái gật gù rất nhẹ và chậm, như thể đang tự xác nhận một ý nghĩ nào đó.

  • Tay (Hands - nếu hiển thị):

    • Một tay có thể từ từ đưa lên cằm trong một cử chỉ suy tư kinh điển, giữ ở đó một lúc rồi từ từ hạ xuống.

  • Khuôn mặt (Facial Expression):

    • Lông mày có thể hơi nhíu lại một chút, không phải cau có, mà để thể hiện sự tập trung cao độ.
    • Khóe miệng có thể hơi mím lại.

Quy trình lặp (Looping Logic): Các cử chỉ vi mô này sẽ được kết hợp một cách ngẫu nhiên và không theo một chu kỳ cố định. Ví dụ: [nhìn lên -> gật gù nhẹ -> quay lại nhìn thẳng -> tay đưa lên cằm -> ...]. Điều này đảm bảo rằng trong 2-3 giây chờ đợi, người dùng luôn thấy avatar có những biểu hiện khác nhau, tạo cảm giác nó đang thực sự "suy nghĩ".

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

  • State Machine: Engine 3D (Unity/Unreal) cần triển khai một state machine cho Avatar, với Thinking là một trong các trạng thái chính.
  • API đơn giản: Ứng dụng chính chỉ cần gọi một lệnh đơn giản như avatar.setState('thinking') để kích hoạt toàn bộ chuỗi animation phức tạp này.

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

  • Tại sao lại chi tiết như vậy? Vì hành vi này trực tiếp phục vụ nguyên tắc "Thú vị trong từng Tương tác" (Delight in Every Interaction). Nó biến một thứ nhàm chán (chờ đợi) thành một phần của trải nghiệm.
  • Quản lý nhận thức: Nó thay đổi nhận thức của người dùng từ "Tôi đang phải chờ cái máy này" thành "Tôi đang chờ người bạn này nghĩ ra câu trả lời". Điều này làm cho thời gian chờ đợi cảm giác ngắn hơn và dễ chịu hơn.
  • Xây dựng tính cách: Đây là cách chúng ta xây dựng "AI có tính cách thấu cảm". Nó cho thấy AI không phải là một cỗ máy toàn năng trả về kết quả ngay lập tức, mà là một "thực thể" cần thời gian để tư duy, làm cho nó trở nên gần gũi và đáng tin cậy hơn.

Thành phần 4: Vùng Phiên âm (Transcription Area)

  • Vị trí: Nằm ở Vùng Dưới.
  • Nội dung: Giữ nguyên không đổi văn bản đã được phiên âm từ Listening State.
  • Mục đích: Để người dùng có thể đọc lại và xác nhận câu hỏi của mình trong khi chờ hệ thống xử lý.

Thành phần 5: Hiệu ứng Xử lý (Processing Visualizer)

  • Mô tả: Thay thế cho "Hiệu ứng Sóng âm" của Listening State. Đây là yếu tố phản hồi trực quan cốt lõi của trạng thái này.
  • Vị trí: Nằm ở dưới cùng màn hình, thay thế vị trí của Hiệu ứng Sóng âm.
  • Hành vi: Một hiệu ứng 3 chấm ... chuyển động nhẹ nhàng (pulsing hoặc loading animation) xuất hiệ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 suy nghĩ/xử lý".
    • Màu sắc: Có thể dùng màu #8B949E (Text Gray) để tạo cảm giác tinh tế, không quá gây chú ý.

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

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

    • Được kích hoạt ngay sau khi hệ thống phát hiện người dùng đã ngừng nói (kết thúc Listening State).
    • Hiệu ứng Sóng âm sẽ mờ dần và biến mất, đồng thời Hiệu ứng Xử lý (3 chấm) sẽ mờ dần và xuất hiện.
    • Cùng lúc đó, Avatar 3D chuyển từ cử chỉ Listening sang Thinking.
    • Tiêu chuẩn áp dụng: Thời gian chuyển đổi Fast: 150ms.

  • Chuyển ra (Transition Out):

    • Ngay sau khi Backend trả về gói dữ liệu phản hồi (thành công hoặc thất bại), hệ thống sẽ ngay lập tức chuyển sang màn hình hiển thị kết quả tương ứng (Result Map hoặc Result List).
    • Yêu cầu về hiệu năng: Trạng thái này chỉ nên kéo dài tối đa 2-3 giây. Nếu backend xử lý lâu hơn, frontend cần có cơ chế xử lý timeout để thông báo cho người dùng, tránh việc màn hình bị "đơ" vô thời hạn.