Danh sách sống động

Danh sách sống động là sự kết hợp giữa hàng nội dung và bản xem trước của mục đã chọn. Video này hiển thị nội dung trong một khung nhìn lớn hơn.

Tài nguyên

Loại	Đường liên kết	Trạng thái
Thiết kế	Nguồn thiết kế (Figma)	Có
Triển khai	Jetpack Compose	Có

Tiêu điểm

• Bản xem trước nội dung động. Khi người dùng di chuyển qua hàng nội dung, khu vực xem trước sẽ tự động cập nhật để cho thấy mục hiện được lấy làm tâm điểm.
• Thành phần Danh sách sống động có khung nhìn lớn hơn để hiển thị nội dung, giúp người dùng xem và đánh giá dễ dàng hơn các chi tiết hình ảnh của mục được đặt tiêu điểm.
• Danh sách sống động cung cấp thông tin liên quan và theo bối cảnh về mục được đặt tiêu điểm, giúp người dùng đưa ra quyết định sáng suốt mà không cần rời khỏi trải nghiệm duyệt web.
• Thành phần Danh sách sống động sử dụng thông tin công bố tăng dần để hiển thị thêm thông tin chi tiết về nội dung khi người dùng thao tác, giảm khối lượng nhận thức và duy trì mức độ tương tác của người dùng.
• Thành phần Danh sách sống động giúp đảm bảo các hoạt động tương tác nhất quán trên ứng dụng, mang lại cho người dùng trải nghiệm quen thuộc và dễ dự đoán.

Phân tích

1. Hình nền
2. Khối nội dung
3. Thẻ trên tiêu điểm
4. Lưới nội dung

1. Màn hình điện ảnh
2. Áp phích
3. Màu nền

Thông số

Hành vi

Khi di chuyển giữa các thẻ trong Danh sách sống động, thông tin chi tiết về thẻ đã chọn sẽ hiển thị dần dần trong nền.

Khi danh sách sống động được lấy tiêu điểm, chiều cao của danh sách sẽ tăng lên để hiển thị thêm thông tin, chẳng hạn như tiêu đề và nội dung mô tả nền, như minh hoạ trong video sau.

Cách sử dụng

Sử dụng băng chuyền sống động khi bạn muốn thu hút sự chú ý đến nội dung nổi bật hoặc nội dung được quảng bá, chẳng hạn như bản phát hành mới, chương trình phổ biến hoặc tiêu đề độc quyền. Khung nhìn lớn hơn và bản xem trước động là một cách hấp dẫn để hiển thị các mục có mức độ ưu tiên cao này.

Hiển thị hình ảnh

1. Tiêu điểm thẻ: Khi người dùng di chuyển qua băng chuyền, thẻ lấy tiêu điểm sẽ được nhấn mạnh về mặt hình ảnh, điều chỉnh tỷ lệ thẻ theo tỷ lệ 1.1, sử dụng đường viền và các tín hiệu hình ảnh khác dưới dạng độ cao để cho biết lựa chọn. Đảm bảo tiêu đề nội dung bên trong hình thu nhỏ của thẻ được lấy tiêu điểm rõ ràng và dễ đọc hơn.
2. Hình nền: Khi một thẻ được lấy tiêu điểm, hình nền tương ứng sẽ hiển thị trong khung nhìn lớn hơn. Hình nền này nên có chất lượng cao và bắt mắt, vì hình nền này cung cấp phông nền sống động và hấp dẫn cho nội dung.

Bản sáng tác

Để đảm bảo hình ảnh dùng làm nền trong thành phần Danh sách sống động hiển thị đẹp, hãy nhớ điều chỉnh tỷ lệ các hình ảnh một cách thích hợp để không bị mờ hoặc méo hình.

Tỷ lệ khung hình

Sử dụng tỷ lệ 16:9 cho hình nền bất cứ khi nào có thể để đảm bảo có bố cục nhất quán và hấp dẫn về mặt hình ảnh.