Bỏ qua

Đặc tả Màn hình: Kết quả Chỉ đường (Map View)

Mã tài liệu: EZD-DES-SCR-004 Phiên bản: 1.0
User Story liên quan: User Story 01 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 câu trả lời rõ ràng, trực quan và ngay lập tức cho câu hỏi chỉ đường của người dùng, kết hợp giữa chỉ dẫn bằng giọng nói, văn bản và một bản đồ 3D tương tác để tạo ra một trải nghiệm vượt trội và dễ hiểu.

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

Màn hình sẽ được chia thành 2 vùng chính theo chiều dọc để tối ưu cho việc hiển thị thông tin phức hợp trên TV 55-inch:

  • Vùng Trên (Top Zone - ~25%): Khu vực hiển thị thông tin văn bản và nhận diện.
  • Vùng Chính (Main Zone - ~75%): Khu vực dành cho bản đồ 3D tương tác.

Toàn bộ bố cục vẫn 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.
  • Tiêu chuẩn áp dụng:
    • Màu sắc: Sử dụng màu #0D1117 (Background Black).

Thành phần 2: Khối Thông tin Phản hồi (Response Info Block - Vùng Trên)

  • Vị trí: Chiếm trọn Vùng Trên của màn hình.
  • Mục đích: Cung cấp bản tóm tắt bằng văn bản cho câu trả lời của AI, giúp người dùng xác nhận lại thông tin trong khi xem bản đồ.
  • Thành phần con:
    • a. Avatar (dạng nhỏ):
      • Vị trí: Một hình tròn nhỏ ở góc trên bên trái của khối này, chứa hình ảnh bán thân của Avatar. Điều này duy trì sự hiện diện của nhân vật mà không chiếm diện tích.
      • Kích thước: Đường kính 64px.
    • b. Tiêu đề Điểm đến:
      • Nội dung: Tên của địa điểm được chỉ đường. Ví dụ: "Đường đến Uniqlo".
      • Tiêu chuẩn áp dụng:
        • Kiểu chữ: H2 (32px, SemiBold), font Be Vietnam Pro.
        • Màu sắc: #F0F6FC (Text White).
    • c. Nội dung Chỉ dẫn:
      • Nội dung: Câu trả lời bằng văn bản của AI. Ví dụ: "Dạ, Uniqlo ở Tầng 2, Khu B. Bạn vui lòng đi thẳng về phía trước và rẽ trái tại ngã rẽ đầu tiên nhé."
      • 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).

Làm rõ Thành phần 3: Bản đồ Tương tác 3D (Chi tiết)

1. Mục tiêu Chính

Không chỉ hiển thị đường đi, mà phải dẫn dắt người dùng một cách trực quan, giảm thiểu gánh nặng nhận thức (cognitive load) và biến việc tìm đường từ một công việc căng thẳng thành một trải nghiệm thú vị và rõ ràng.

2. Mô tả Giao diện & Đồ họa Chi tiết

A. Góc nhìn & Phong cách (View & Style)

  • Góc nhìn: Bản đồ sẽ được hiển thị dưới dạng góc nhìn 3D xiên (isometric). Góc nhìn này phải được tính toán cẩn thận để người dùng có thể thấy rõ các lối đi, các tầng (nếu có) và không gian tổng thể mà không bị các bức tường che khuất.
  • Phong cách Đồ họa: Tối giản và sạch sẽ. Chúng ta không xây dựng một bản sao 3D thực tế của TTTM. Thay vào đó, các bức tường sẽ là các khối màu đặc, bán trong suốt. Sàn nhà sẽ có màu trung tính. Mục đích là để làm nổi bật các yếu tố quan trọng như đường đi và các điểm đến.
  • Tiêu chuẩn áp dụng: Bảng màu của bản đồ (màu tường, sàn) sẽ sử dụng các màu trong nhóm Secondary Colors (ví dụ: #161B22 Surface Gray) để tạo nền cho các yếu tố chính.

B. Pin Vị trí (Location Pins)

  • Pin "Bạn ở đây" (You Are Here Pin):
    • Mô tả: Đây không phải là một chấm tròn đơn giản. Nó phải là một đối tượng 3D nổi bật, ví dụ như một hình trụ phát sáng nhẹ từ bên trong, có các vòng tròn năng lượng lan tỏa ra từ chân pin theo một nhịp điệu chậm rãi. Điều này thu hút mắt người dùng ngay lập tức đến vị trí của họ.
    • Nhãn: Luôn đi kèm nhãn văn bản "Bạn ở đây".
  • Pin "Điểm đến" (Destination Pin):
    • Mô tả: Phải khác biệt hoàn toàn với pin "Bạn ở đây". Nó có thể là một biểu tượng dạng lá cờ 3D, hoặc nếu có thể, là logo 3D của chính cửa hàng đó đang nổi lên từ vị trí của nó.
    • Nhãn: Đi kèm nhãn tên địa điểm (ví dụ: "Uniqlo").

C. Đường đi được Highlight (Highlighted Path)

  • Mô tả: Đây là yếu tố "ma thuật" của bản đồ.
    • Hình dáng: Không phải là một đường kẻ 2D. Đây là một dải băng (ribbon) 3D, có thể hơi trong suốt, nằm trên mặt sàn của bản đồ, uốn lượn theo các lối đi.
    • Animation: Hiệu ứng ánh sáng sẽ chạy dọc theo dải băng này, theo hướng từ "Bạn ở đây" đến "Điểm đến", với tốc độ vừa phải và lặp lại liên tục. Chuyển động này hoạt động như một dòng chảy, dẫn dắt ánh mắt của người dùng một cách tự nhiên.
  • Tiêu chuẩn áp dụng:
    • Đây là hiện thực hóa chi tiết của AC3 trong User Story 01.
    • Màu sắc của dải băng và hiệu ứng ánh sáng sẽ sử dụng màu #0A74DA (EZD Blue).

3. Mô tả Hành vi Tương tác Chi tiết

  • Hành vi Mặc định khi Tải (Initial Load Behavior):
    • Khi màn hình vừa hiển thị, bản đồ sẽ tự động thực hiện một animation nhẹ: bắt đầu từ góc nhìn tổng quan, sau đó nhanh chóng zoom và xoay đến một góc nhìn tối ưu, đóng khung toàn bộ đường đi từ điểm đầu đến điểm cuối.
  • Cử chỉ Cảm ứng (Touch Gestures):
    • Pinch-to-Zoom: Người dùng có thể dùng hai ngón tay để phóng to và thu nhỏ bản đồ. Việc zoom sẽ có giới hạn tối đa và tối thiểu để tránh người dùng bị "lạc" hoặc zoom quá sâu vào các chi tiết không cần thiết.
    • Pan: Người dùng có thể dùng một ngón tay để kéo và di chuyển bản đồ, khám phá các khu vực xung quanh.
    • (Đề xuất) Double-Tap to Re-center: Chạm hai lần vào bất kỳ đâu trên bản đồ sẽ reset góc nhìn và mức zoom về trạng thái mặc định ban đầu (trạng thái sau khi tải xong). Đây là một tính năng nhỏ nhưng giúp cải thiện trải nghiệm đáng kể.
  • Tiêu chuẩn áp dụng: Toàn bộ hành vi phải đáp ứng AC4 của User Story 01 và quy định về "Kích thước tối thiểu của Vùng tương tác".

4. Yêu cầu Kỹ thuật

  • Engine render bản đồ (dù là thư viện web như Mapbox GL JS, Deck.gl hay một view custom từ Unity/Unreal) phải hỗ trợ tốt việc hiển thị các đối tượng 3D, custom marker, và các shader để tạo hiệu ứng ánh sáng trên đường đi.
  • Logic tìm đường (pathfinding) sẽ được xử lý ở backend. Frontend chỉ nhận một mảng các tọa độ và có nhiệm vụ vẽ lại đường đi đó một cách mượt mà.

5. Triết lý Thiết kế

  • Zero Learning Curve: Mọi yếu tố, từ pin vị trí đến đường đi chuyển động, đều được thiết kế để người dùng có thể hiểu ngay lập tức mà không cần giải thích.
  • Delight in Every Interaction: Hiệu ứng ánh sáng chạy dọc đường đi không chỉ để chỉ dẫn, nó còn tạo ra một chi tiết nhỏ đầy thú vị, biến một bản đồ tĩnh thành một hướng dẫn viên sống động.

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 tin và bản đồ có thể trượt vào từ trên và dưới (hoặc mờ dần hiện ra).
    • Tiêu chuẩn áp dụng: Thời gian chuyển đổi là Medium: 300ms với ease-in-out.
  • Chuyển ra (Transition Out):
    • 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
    • Tiêu chuẩn áp dụng: Phải đáp ứng AC6 của User Story 01.