목록은 하나 이상의 관련 항목을 시각적으로 나타냅니다. 일반적으로 옵션 모음을 표시하는 데 사용됩니다.
리소스
유형 | 링크 | 상태 |
---|---|---|
디자인 | 디자인 소스 (Figma) | 사용 가능 |
구현 | Jetpack Compose | 사용 가능 |
하이라이트
- 목록은 텍스트 또는 이미지의 연속적인 모음입니다.
- 목록은 자연스럽고 한눈에 알아볼 수 있어야 합니다.
- 목록은 기본 및 보조 항목이 포함된 항목으로 구성됩니다. 다양한 동작을 할 수 있습니다.
변형
목록에는 한 줄 목록, 두 줄 목록, 두 줄 목록, 이렇게 세 가지 유형이 있습니다. 3선형 목록입니다.
- 한 줄 목록: 각 항목을 전달하는 한 줄입니다. 이 단순한 각 항목이 명확하게 구분되도록 디자인되어야 합니다.
- 두 줄 목록: 평행선 두 개를 사용하여 각 항목을 전달합니다. 이 체계적인 디자인은 자연스러운 가독성을 보장하고 인지를 방지합니다. 발생할 수 있습니다
- 3선형 목록: 평행선 3개를 사용하여 각 항목을 나타냅니다. 이러한 장식적인 디자인은 시각적 가시도를 높여줍니다.
분석
- 아이콘: 특정 사물 또는 동작을 나타내는 작은 그래픽으로, 주로 사용됩니다. 사용할 수도 있습니다.
- 오버라인: 제목 또는 부제목 위에 표시되는 짧은 텍스트 줄 추가 맥락을 제공하거나 강조하는 데 종종 사용됩니다.
- 제목: 굵은 글씨로, 기본 제목 역할을 하는 크고 굵은 글씨입니다. 디자인 요소 또는 페이지
- 부제목: 추가 정보를 제공하는 더 짧은 텍스트 줄 또는 맥락 정보가 표시됩니다.
- 컨트롤: 사용자가 결정을 입력할 수 있는 상호작용 요소입니다.
상태
사양
사용
목록은 세로로 구성된 텍스트와 이미지의 그룹입니다. 읽기를 이해하는 데 최적화된 목록은 하나의 연속된 항목 열입니다. 목록 항목에는 표시된 기본 작업과 보조 작업이 포함될 수 있습니다. 시각적으로 표현됩니다.
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/container-do.webp?authuser=0000&hl=ko)
권장사항
목록 항목은 버튼이 아닙니다. 항목에 컨테이너가 없습니다. 목록 항목은 기본적으로 선택 해제되어 있으며 포커스가 없습니다.
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/container-dont.webp?authuser=0000&hl=ko)
주의
필요한 경우에만 목록 항목에 컨테이너 배경을 사용합니다.
선택 컨트롤
컨트롤은 목록 항목의 정보와 작업을 표시합니다. 조정 가능 목록 항목의 앞 또는 뒤에 오도록 합니다.
![선택 체크박스](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-checkbox.webp?authuser=0000&hl=ko)
![선택 라디오](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-radio.webp?authuser=0000&hl=ko)
![선택 스위치](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-switch.webp?authuser=0000&hl=ko)
- 체크박스: 목록 항목을 하나 이상 선택합니다.
- 라디오 버튼: 정확히 1개만 선택하세요. 항목을 찾습니다.
- 스위치: 컨트롤을 사용 또는 사용 중지로 전환합니다.
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-do.webp?authuser=0000&hl=ko)
권장사항
아이콘 선택 표시기를 사용하여 목록에서 선택한 항목을 명확하게 표시합니다. 이렇게 하면 사용자가 선택한 항목을 쉽게 식별하고 전반적인 사용자 환경을 개선하는 데 도움이 됩니다.
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-dont.webp?authuser=0000&hl=ko)
금지사항
목록에서 선택을 나타낼 때 배경 색상에만 의존하지 마세요.
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/action-dont.webp?authuser=0000&hl=ko)
금지사항
목록 항목 내에 버튼을 배치하면 현재 포커스가 맞춰진 요소를 혼동할 수 있으므로 버튼을 배치하지 마세요.
아이콘
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/icon-do.webp?authuser=0000&hl=ko)
권장사항
목록에 동일한 유형의 콘텐츠를 표시하는 경우 아이콘을 생략하여 시각적 혼란을 줄이고 사용자 환경을 개선하세요. 쓸모가 없고 추가 정보를 제공하지 않는 경우 목록에서 아이콘을 사용하지 않습니다.
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/icon-dont.webp?authuser=0000&hl=ko)
금지사항
목록의 모든 항목에 동일한 아이콘을 사용하지 않습니다. 이러한 디자인은 사용자에게 시각적으로 부담스럽고 혼란스러울 수 있습니다. 대신, 가치를 더하거나 추가 정보를 제공할 때만 아이콘을 사용하세요.
아바타 및 이미지
목록 항목은 개인 또는 법인에 해당합니다