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