목록

목록은 하나 이상의 관련 항목을 시각적으로 나타냅니다. 일반적으로 옵션 모음을 표시하는 데 사용됩니다.

목록 커버

리소스

유형 링크 상태
디자인 디자인 소스 (Figma) 사용 가능
구현 Jetpack Compose 출시 예정

하이라이트

  • 목록은 텍스트나 이미지의 연속적인 모음입니다.
  • 목록은 자연스럽고 쉽게 살펴볼 수 있어야 합니다.
  • 목록은 아이콘과 텍스트로 표시되는 기본 및 보조 작업이 포함된 항목으로 구성됩니다.

변형

목록에는 한 줄 목록, 두 줄 목록, 세 줄 목록의 세 가지 유형이 있습니다.

목록 분석

  1. 한 줄 목록: 각 항목을 한 줄로 전달합니다. 이 단순한 디자인은 각 항목이 다른 항목과 명확하게 구분되도록 합니다.
  2. 두 줄 목록: 두 개의 평행선을 사용하여 각 항목을 전달합니다. 이 구조화된 디자인은 자연스러운 가독성을 보장하고 인지 과부하를 방지합니다.
  3. 세 선형 목록: 평행선 세 개를 사용하여 각 항목을 나타냅니다. 이러한 장식 디자인은 높은 수준의 시각적 가시도를 만듭니다.

분석

목록 분석

  1. 아이콘: 특정 객체나 동작을 나타내는 작은 그래픽으로, 아이디어나 개념을 시각적으로 전달하는 데 자주 사용됩니다.
  2. 오버라인: 제목이나 부제목 위에 표시되는 짧은 텍스트 줄로, 추가 컨텍스트나 강조를 제공하기 위해 자주 사용됩니다.
  3. 제목: 디자인 요소 또는 페이지의 기본 제목 역할을 하는 크고 굵은 텍스트 줄입니다.
  4. 부제목: 기본 제목 아래에 추가 정보나 맥락을 제공하는 짧은 텍스트 줄입니다.
  5. 컨트롤: 사용자가 결정을 입력할 수 있는 상호작용 요소입니다.

상태

상태 나열

사양

사양 나열

목록 높이 추천

목록 간격

사용

목록은 세로로 구성된 텍스트 및 이미지 그룹입니다. 독해에 최적화된 목록은 항목의 연속된 단일 열로 구성됩니다. 목록 항목에는 아이콘과 텍스트로 표시되는 기본 작업과 보조 작업이 포함될 수 있습니다.

목록 항목은 버튼이 아닙니다. 항목에 컨테이너가 없습니다. 목록 항목은 기본적으로 선택 해제되어 있으며 포커스가 없습니다.
필요한 경우에만 목록 항목에 컨테이너 배경을 사용합니다.

선택 컨트롤

목록 항목의 표시 정보와 작업을 제어합니다. 목록 항목의 앞이나 후행 가장자리에 맞춰 정렬할 수 있습니다.

선택 체크박스 라디오 선택 선택 스위치
  1. 체크박스: 하나 이상의 목록 항목을 선택합니다.
  2. 라디오 버튼: 목록에서 정확히 하나의 항목을 선택합니다.
  3. 스위치: 컨트롤을 사용 또는 사용 중지로 전환합니다.
아이콘 선택 표시기를 사용하여 선택한 항목을 목록에 명확하게 표시합니다. 이렇게 하면 사용자가 선택한 항목을 쉽게 파악하고 전반적인 사용자 경험을 개선할 수 있습니다.
목록에서 선택 항목을 나타낼 때 배경 색상에만 의존하지 마세요.
목록 항목 내부에는 버튼을 배치하지 마세요. 현재 포커스가 있는 요소에 대한 혼동을 일으킬 수 있습니다.

아이콘

목록에 동일한 유형의 콘텐츠를 표시하는 경우 시각적 혼란을 줄이고 사용자 환경을 개선하기 위해 아이콘을 생략합니다. 목록에 아무런 쓸모도 없고 추가 정보를 제공하지 않는 경우 아이콘을 사용하지 마세요.
목록의 모든 항목에 동일한 아이콘을 사용하지 않습니다. 이러한 기능은 사용자가 보기에 부담스럽고 혼란스러울 수 있습니다. 대신, 아이콘이 가치를 더하거나 추가 정보를 제공할 때만 아이콘을 사용하세요.

아바타 및 이미지

목록 항목은 사람 또는 개체를 나타내는 원형으로 잘린 이미지를 포함할 수 있습니다.

아바타 및 이미지