목록은 하나 이상의 관련 항목을 시각적으로 나타냅니다. 일반적으로 옵션 모음을 표시하는 데 사용됩니다.
리소스
유형 | 링크 | 상태 |
---|---|---|
디자인 | 디자인 소스 (Figma) | 사용 가능 |
구현 | Jetpack Compose | 출시 예정 |
하이라이트
- 목록은 텍스트나 이미지의 연속적인 모음입니다.
- 목록은 자연스럽고 쉽게 살펴볼 수 있어야 합니다.
- 목록은 아이콘과 텍스트로 표시되는 기본 및 보조 작업이 포함된 항목으로 구성됩니다.
변형
목록에는 한 줄 목록, 두 줄 목록, 세 줄 목록 등 세 가지 유형이 있습니다.
- 한 줄 목록: 각 항목을 한 줄로 전달합니다. 이 단순한 디자인은 각 항목이 서로 명확하게 구분되도록 합니다.
- 두 줄 목록: 두 개의 평행선을 사용하여 각 항목을 전달합니다. 이 구조화된 디자인은 자연스러운 가독성을 보장하고 인지 과부하를 방지합니다.
- 3선형 목록: 평행선 3개를 사용하여 각 항목을 나타냅니다. 이 장식 디자인은 높은 수준의 시각적 가시도를 만듭니다.
분석
- 아이콘: 특정 사물이나 동작을 나타내는 작은 그래픽으로 아이디어나 개념을 시각적으로 전달하는 데 자주 사용됩니다.
- 오버라인: 제목이나 부제목 위에 표시되는 짧은 텍스트 줄로, 종종 추가 컨텍스트나 강조를 제공하는 데 사용됩니다.
- 제목: 디자인 요소 또는 페이지의 기본 제목 역할을 하는 크고 굵은 텍스트 줄입니다.
- 부제목: 기본 제목 아래에 추가 정보 또는 맥락을 제공하는 더 작은 텍스트 줄입니다.
- 컨트롤: 사용자가 결정을 입력할 수 있는 상호작용 요소입니다.
상태
사양
사용
목록은 세로로 구성된 텍스트와 이미지의 그룹입니다. 독해에 최적화된 목록은 항목으로 이루어진 연속된 단일 열로 구성됩니다. 목록 항목에는 아이콘과 텍스트로 표시되는 기본 작업과 보조 작업이 포함될 수 있습니다.
선택 컨트롤
목록 항목의 표시 정보와 작업을 제어합니다. 목록 항목의 앞이나 후행 가장자리에 맞춰 정렬할 수 있습니다.
- 체크박스: 하나 이상의 목록 항목을 선택합니다.
- 라디오 버튼: 목록에서 정확히 하나의 항목을 선택합니다.
- 스위치: 컨트롤을 사용 또는 사용 중지로 전환합니다.
아이콘
아바타 및 이미지
목록 항목에는 사람 또는 개체를 나타내는 원형으로 잘린 이미지가 포함될 수 있습니다.