몰입형 목록은 콘텐츠 행과 선택한 항목의 미리보기의 조합입니다. 더 큰 표시 영역에 콘텐츠를 표시합니다.
리소스
| 유형 | 링크 | 상태 |
|---|---|---|
| 디자인 | 디자인 소스 (Figma) | 사용 가능 |
| 구현 | Jetpack Compose | 사용 가능 |
하이라이트
- 동적 콘텐츠 미리보기 사용자가 콘텐츠 행을 탐색하면 미리보기 영역이 자동으로 업데이트되어 현재 포커스가 설정된 항목을 표시합니다.
- 몰입형 목록 구성요소는 콘텐츠 표시를 위한 더 큰 표시 영역을 제공하므로 사용자가 포커스가 맞춰진 항목의 시각적 세부정보를 더 쉽게 보고 이해할 수 있습니다.
- 몰입형 목록은 포커스가 지정된 항목과 관련된 문맥 정보를 제공하여 사용자가 탐색 환경을 떠나지 않고도 정보에 입각한 결정을 내릴 수 있도록 도와줍니다.
- 몰입형 목록 구성요소는 점진적인 공개를 사용하여 사용자가 탐색할 때 콘텐츠에 관한 세부정보를 더 많이 공개하여 인지 부하를 줄이고 사용자 참여를 유지합니다.
- 몰입형 목록 구성요소는 앱 전체에서 일관된 상호작용을 보장하여 사용자에게 익숙하고 예측 가능한 환경을 제공합니다.
분석
- 이미지 배경
- 콘텐츠 블록
- 포커스가 있는 카드
- 콘텐츠 그리드
- 시네마틱 스크림
- 포스터
- 배경 색상
사양
동작
몰입형 목록에서 카드 간에 이동할 때 선택한 카드의 세부정보가 배경에 점진적으로 표시됩니다.
몰입형 목록에 포커스가 있으면 높이가 증가하여 다음 동영상과 같이 배경 제목 및 설명과 같은 추가 정보가 표시됩니다.
사용
신작, 인기 프로그램, 독점 제목과 같은 추천 콘텐츠 또는 프로모션 콘텐츠로 관심을 유도하려면 몰입형 캐러셀을 사용하세요. 더 큰 표시 영역과 동적 미리보기를 사용하면 이러한 우선순위가 높은 항목을 효과적으로 보여줄 수 있습니다.
이미지 표시
- 카드 포커스: 사용자가 캐러셀을 탐색할 때 포커스가 맞춰진 카드가 시각적으로 강조되어 테두리를 사용하여 카드의 크기를 1.1로 조정하고 다른 시각적 신호를 고도로 표시하여 선택 항목을 나타냅니다. 포커스가 맞춰진 카드의 썸네일 내의 콘텐츠 제목이 명확하게 표시되고 읽기 쉬워야 합니다.
- 배경 이미지: 카드에 포커스가 있으면 상응하는 배경 이미지가 더 큰 표시 영역에 표시됩니다. 이 배경 이미지는 콘텐츠에 몰입도 높고 눈길을 끄는 배경을 제공하므로 고품질이고 시각적으로 매력적인 배경 이미지를 사용하는 것이 좋습니다.
음악작품
의견을 제시하지
피사체를 오른쪽 상단에 맞게 조정하고 정렬하여 영화 같은 경험을 제공합니다.
부적절한 예
콘텐츠 아래의 피사체를 자르는 전체 화면 자르기를 사용하지 않습니다.
몰입형 목록 구성요소의 배경으로 사용된 이미지가 제대로 표시되도록 하려면 이미지가 흐리거나 왜곡되지 않도록 적절한 크기로 조정해야 합니다.
가로세로 비율
가능한 경우 백그라운드 이미지에 16:9 비율을 사용하여 시각적으로 매력적이고 일관된 레이아웃을 보장합니다.
