Chuyển tới nội dung chính

Tiêu chuẩn UI

Tổng quan​

AI App là trải nghiệm do developer xây dựng, chạy bên trong giao diện Chat của V-App. App mở rộng khả năng hội thoại mà không phá vỡ flow — hiển thị qua card nhẹ, carousel, fullscreen view, và các display mode tích hợp liền mạch.

Trước khi thiết kế UI, hãy đảm bảo bạn đã đọc Tiêu chuẩn UX để nắm nguyên tắc trải nghiệm.

Display Modes​

Inline Card​

Widget nhỏ gọn, nằm trực tiếp trong luồng hội thoại. Xuất hiện trước model response.

Khi nào dùng:

  • Widget self-contained (audio player, score card)
  • Dữ liệu structured đơn giản (bản đồ, order summary, trạng thái)
  • Một action hoặc quyết định (xác nhận booking)

Quy tắc:

  • ❌ Không duplicate input của Chat (không tạo text field giống composer)
  • ❌ Không nested scrolling — card tự fit nội dung
  • ❌ Không deep navigation trong card — tách thành nhiều cards hoặc tools
  • Tối đa 2 actions per card: 1 primary CTA + 1 secondary CTA

Nhiều cards xếp ngang, cho phép user quét nhanh và chọn.

Khi nào dùng:

  • Items có visual content và metadata nhiều hơn simple rows
  • Danh sách items tương tự (nhà hàng, playlist, sự kiện)

Quy tắc:

  • Visual hierarchy nhất quán giữa các cards
  • Mỗi card tối đa 1 CTA ("Đặt bàn", "Phát nhạc")
  • Metadata tối đa 3 dòng
  • 3–8 items per carousel cho dễ quét

Fullscreen (coming soon)​

Toàn màn hình, dành cho workflow phức tạp. Composer vẫn hiển thị overlay — user tiếp tục "nói chuyện với app" trong fullscreen.

Khi nào dùng:

  • Duyệt nội dung chi tiết (bất động sản, menu)
  • Task phức tạp không gói gọn trong 1 card (bản đồ interactive, editor, diagram)

Quy tắc:

  • Dùng fullscreen để đào sâu, không để sao chép native app
  • Thiết kế UX tương thích với system composer (luôn hiện)

Picture-in-Picture (PiP) (coming soon)​

Cửa sổ nổi persistent, tối ưu cho session liên tục (game, video). PiP vẫn hiển thị khi user tiếp tục chat, và có thể update động theo prompts.

Khi nào dùng:

  • Hoạt động chạy song song với hội thoại (game, quiz, collab, video)
  • Widget cần phản ứng với chat input

Quy tắc:

  • ❌ Không overload PiP với controls hay static content
  • Tự đóng PiP khi session kết thúc
  • PiP state phải update/respond khi user tương tác qua composer

Visual Design Guidelines​

Color​

✅ Nên❌ Không nên
Brand accent color cho primary buttonsCustom gradients phá vỡ giao diện Chat
System colors cho text, icons, dividersThay đổi text colors mặc định
Brand color cho accents và badgesBao phủ toàn bộ widget bằng brand color

Typography​

  • Hạn chế variation font size — ưu tiên body và body-small
  • Luôn kế thừa system font stack — không dùng custom fonts, kể cả trong fullscreen

Spacing & Layout​

  • Giữ visual hierarchy: headline → supporting text → CTA theo thứ tự rõ ràng
  • Tôn trọng system corner radius
  • Padding nhất quán, tránh nhét sát lề
  • Dùng system grid spacing cho cards, collections

Icons & Imagery​

  • Ảnh phải tuân thủ enforced aspect ratios — không bóp méo
  • KHÔNG nhúng logo trong response — V-App tự thêm logo + app name trước widget
  • Dùng system icons hoặc custom icons đơn sắc, kiểu outline

Accessibility​

Yêu cầuMô tả
Text resizingLayout không vỡ khi user tăng cỡ chữ
Alt textTất cả images phải có alt text
ContrastText và background tối thiểu WCAG AA contrast ratio
Focus statesKeyboard navigation phải có focus indicators

Responsive Design​

Widget chạy trong iframe trên cả desktop và mobile:

  • Adaptive breakpoints — Set max-width, layout collapse gracefully trên màn hình nhỏ
  • No hover-only actions — Mobile không có hover, cần fallback cho touch
  • Launcher transitions — Khi expand sang fullscreen, navigation elements phải giữ visible
  • Dark mode — Tôn trọng system dark mode (match color-scheme)