칩

히어로

개요

칩은 사용자가 아래 콘텐츠를 필터링하거나 빠른 작업을 트리거할 수 있는 대화형의 작은 요소입니다. 작은 구성요소는 콘텐츠와 관련된 상황별 옵션을 제공하고 탐색 시간을 단축하여 이동 중 작업을 간소화하는 데 도움이 됩니다.

시각적 명확성을 유지하려면 레이아웃을 행당 최대 7개의 칩으로 제한해야 합니다. 칩은 브랜드의 시각적 언어에 맞게 매우 유연하게 사용할 수 있습니다. 선택한 UI 테마에 따라 모양, 배경 색상, 테두리 색상을 맞춤설정할 수 있습니다.

칩에는 다음이 포함될 수 있습니다.

  • 아이콘만
  • 텍스트 라벨만
  • 아이콘과 라벨 (양방향)

음악작품

히어로

1. 선행 아이콘 또는 이미지

2. 라벨 텍스트


UX 요구사항

모든 앱에서 안전하고 일관된 환경을 보장하려면 다음 디자인 요구사항을 따르세요.

요구사항 수준

콘텐츠

필수(MUST)

아이콘 또는 라벨을 포함합니다.

해야 하는 작업(SHOULD)

고유한 색상이나 모양과 같은 고유한 시각적 스타일을 사용하여 다양한 칩 상태를 전달합니다.

해야 하는 작업(SHOULD)

앱 전체의 모든 칩에 일관된 스타일을 구현합니다.

해야 하는 작업(SHOULD)

동일한 구성요소 그룹 내에서 상태 칩과 상태 비저장 칩을 혼합하지 않습니다.

해야 하는 작업(SHOULD)

중요하거나 권장되는 칩을 컨테이너의 선행 가장자리에 배치합니다.

해야 하는 작업(SHOULD)

라벨 텍스트를 간결하고 설명적으로 유지합니다. 잘림을 트리거하고 인지 부하를 증가시키는 긴 텍스트는 피합니다.