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