Bỏ qua

Đặc tả Màn hình: Kết quả Danh sách (List View)

Mã tài liệu: EZD-DES-SCR-005 Phiên bản: 1.0
User Story liên quan: User Story 01, User Story 02 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

Khi yêu cầu của người dùng không đủ cụ thể để đưa ra một câu trả lời duy nhất (ví dụ: "Ở đây có quán cà phê nào?"), màn hình này có nhiệm vụ trình bày một danh sách các lựa chọn liên quan một cách rõ ràng, và mời gọi người dùng thực hiện bước tiếp theo để làm rõ ý định của họ.

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

Vẫn sử dụng mô hình "Phân vùng theo Chiều dọc" với 2 vùng chính:

  • Vùng Trên (~25%): Khu vực hiển thị câu hỏi của AI để hướng dẫn người dùng.
  • Vùng Chính (~75%): Khu vực dành cho danh sách các lựa chọn có thể cuộn đượ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ả: Nền tối, tĩnh.
  • Tiêu chuẩn áp dụng:
    • Màu sắc: #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: Đặt câu hỏi cho người dùng để họ biết cần phải làm gì tiếp theo.
  • Thành phần con:
    • a. Avatar (dạng nhỏ):
      • Vị trí: Góc trên bên trái của khối, đường kính 64px.
    • b. Tiêu đề:
      • Nội dung: Tên của danh mục được liệt kê. Ví dụ: "Các quán cà phê".
      • Tiêu chuẩn áp dụng: H2 (32px, SemiBold), màu #F0F6FC.
    • c. Nội dung Hướng dẫn:
      • Nội dung: Câu hỏi của AI. Ví dụ: "Tôi tìm thấy một vài địa điểm. Bạn muốn đến nơi nào ạ?"
      • Tiêu chuẩn áp dụng: Body Large (24px, Regular), màu #8B949E.

Thành phần 3: Danh sách Lựa chọn Tương tác (Chi tiết)

1. Mục tiêu Chính

Trình bày nhiều lựa chọn một cách rõ ràng, có cấu trúc, dễ quét (scannable) và dễ tương tác, giúp người dùng nhanh chóng xác định và chọn lựa phương án họ mong muốn để làm rõ yêu cầu của mình.

2. Mô tả Hành vi Tổng thể của Danh sách

  • Cuộn (Scrolling): Nếu danh sách có nhiều hơn số mục có thể hiển thị cùng lúc trên màn hình (ví dụ: nhiều hơn 4-5 mục), danh sách sẽ cho phép người dùng cuộn theo chiều dọc. Thanh cuộn (scrollbar) phải được thiết kế tinh tế, mỏng và tự động ẩn đi khi người dùng không tương tác để không làm ảnh hưởng đến thẩm mỹ.
  • Hiệu ứng Tải (Loading Animation): Khi màn hình được tải, các thẻ trong danh sách sẽ có hiệu ứng trượt vào lần lượt từ dưới lên (staggered slide-in). Mỗi thẻ sẽ xuất hiện sau thẻ trước đó một khoảng thời gian rất ngắn (ví dụ: 50ms), tạo ra một hiệu ứng gợn sóng mượt mà và sinh động.
  • Tiêu chuẩn áp dụng: Tuân thủ nguyên tắc về Motion & Animation.

3. Phân rã "Thẻ Lựa chọn" (List Item Card Breakdown)

Mỗi mục trong danh sách được thiết kế như một "Thẻ" (Card) độc lập, chứa đầy đủ thông tin cần thiết.

A. Bố cục & Kích thước (Layout & Size)

  • Bố cục: Thẻ có bố cục ngang (horizontal), các thành phần bên trong được sắp xếp từ trái qua phải.
  • Kích thước (giá trị logic):
    • Chiều cao cố định, ví dụ 80px, để tạo sự đồng nhất cho danh sách.
    • Chiều rộng 100% so với vùng chứa, trừ đi phần lề của Vùng An toàn.
  • Khoảng cách:
    • Khoảng cách giữa các thẻ là 16px.
    • Padding (vùng đệm bên trong) của mỗi thẻ là 16px.
  • Tiêu chuẩn áp dụng: Tuân thủ Hệ thống Lưới 8-Point.

B. Các Thành phần con của Thẻ (Card Sub-components)

  • Icon/Logo (Bên trái):
    • Vị trí & Kích thước: Nằm ở cạnh trái của thẻ, kích thước vuông 48x48px.
    • Nội dung: Hiển thị logo của cửa hàng/thương hiệu (nếu có trong CMS). Nếu không có, sẽ hiển thị một icon chung cho danh mục đó (ví dụ: icon "cốc cà phê" cho quán cà phê, icon "áo thun" cho cửa hàng thời trang) từ bộ icon chuẩn của hệ thống.
  • Khối Văn bản (Text Block - Bên phải Icon):
    • Vị trí: Nằm bên phải của Icon, cách một khoảng 16px.
    • Tên địa điểm / Tiêu đề (Title):
      • Nội dung: Ví dụ: "The Coffee House".
      • Tiêu chuẩn áp dụng: Body Large (24px, Regular), màu #F0F6FC (Text White).
    • Mô tả phụ (Subtitle):
      • Nội dung: Cung cấp thông tin phụ để người dùng phân biệt. Ví dụ: "Tầng 3, Gần sảnh chính" hoặc "Giảm giá 20% toàn bộ sản phẩm".
      • Tiêu chuẩn áp dụng: Body Small (18px, Regular), màu #8B949E (Text Gray).

C. Trạng thái & Tương tác (States & Interaction)

  • Vùng chạm (Touch Target): Toàn bộ diện tích của thẻ là một vùng có thể tương tác, đảm bảo người dùng có thể dễ dàng chạm vào mà không cần phải nhắm chính xác.
  • Trạng thái Default:
    • Màu nền của thẻ là #161B22 (Surface Gray) để nổi bật trên nền chính.
  • Trạng thái Pressed:
    • Khi người dùng nhấn và giữ, thẻ sẽ có một phản hồi trực quan ngay lập tức. Có thể là màu nền của thẻ tối đi một chút hoặc xuất hiện một viền sáng màu #0A74DA (EZD Blue) bao quanh.
  • Tiêu chuẩn áp dụng: Tuân thủ yêu cầu về "Kích thước tối thiểu của Vùng tương tác" và phản hồi tương tác rõ ràng.

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

  • Để đảm bảo hiệu năng khi danh sách có thể rất dài, đội ngũ frontend nên xem xét việc triển khai danh sách dạng virtualized list (hoặc lazy loading), chỉ render những mục đang hiển thị trên màn hình.

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

  • Khả năng quét (Scannability): Thiết kế thẻ theo chiều ngang với sự phân cấp rõ ràng giữa Tên (màu trắng, lớn hơn) và Mô tả phụ (màu xám, nhỏ hơn) giúp người dùng quét mắt qua danh sách rất nhanh để tìm thông tin họ cần.
  • Rõ ràng hơn Dày đặc (Clarity over Density): Chúng ta không cố gắng nhồi nhét quá nhiều thông tin vào một thẻ. Sự đơn giản, đủ thông tin và một lời kêu gọi hành động rõ ràng ("chạm để xem chi tiết/chỉ đường") sẽ giúp người dùng đưa ra quyết định nhanh hơn.

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 sẽ xuất hiện mượt mà. Danh sách các thẻ có thể có hiệu ứng trượt vào lần lượt từ dưới lên (staggered slide-in) để tạo cảm giác sinh động.
    • Tiêu chuẩn áp dụng: Thời gian chuyển đổi Medium: 300ms.
  • Chuyển ra (Transition Out):
    • Khi người dùng chọn một mục: Khi người dùng chạm vào một thẻ trong danh sách (ví dụ: "The Coffee House"), hệ thống sẽ coi đây là một yêu cầu mới, rõ ràng. Màn hình sẽ chuyển sang trạng thái Processing State, và sau đó là Result State (Map View) cho địa điểm "The Coffee House".
    • Khi hết giờ: Nếu không có tương tác nào trong 15 giây, màn hình sẽ quay trở lại Idle State.