버튼

버튼을 사용하면 사용자가 작업이나 흐름을 시작할 수 있습니다. 다양한 유형의 버튼 중에서 선택하여 강조할 수 있습니다.

커버 버튼

리소스

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

하이라이트

  • 작업의 중요도에 따라 버튼 유형을 선택합니다. 작업의 중요도가 높을수록 버튼을 강조합니다.
  • 버튼에는 실행되는 작업을 나타내는 명확한 라벨이 있어야 합니다.
  • 사용자가 버튼을 찾을 가능성이 높은 위치에 버튼을 논리적으로 배치합니다.
  • 버튼을 너무 많이 사용하지 마세요. 화면에 버튼이 너무 많으면 시각적 계층 구조가 방해됩니다.

변형

버튼에는 6가지 유형이 있습니다.

  1. 채워진 버튼
  2. Outline 버튼
  3. 아이콘 버튼
  4. 윤곽선 아이콘 버튼
  5. 긴 버튼
  6. 이미지 버튼
채워진 버튼 Outline 버튼 아이콘 버튼 윤곽선 아이콘 버튼
긴 버튼 이미지 버튼

작업의 중요도에 따라 버튼 유형을 선택합니다. 작업이 중요할수록 버튼이 더 강조되어야 합니다.

버튼 강조

채우기 및 윤곽선 버튼

채워진 버튼은 시각적 효과가 가장 크며 저장, 지금 참여하기, 확인 또는 다운로드와 같이 흐름을 완료하는 중요한 최종 작업에 사용해야 합니다.

윤곽선이 있는 버튼은 중간 강조 버튼입니다. 여기에는 중요하지만 앱의 기본 작업은 아닌 작업이 포함됩니다. 윤곽선이 있는 버튼은 채워진 버튼과 잘 연결되어 대체나 보조 작업을 나타냅니다.

분석

채워진 버튼 및 윤곽선 버튼 구성

  1. 컨테이너
  2. 라벨 텍스트
  3. 아이콘(선택사항)

상태

구성요소의 상태를 시각적으로 표현

채워진 버튼 및 윤곽선 버튼 상태

  1. 기본 계정
  2. 집중력이 높아진
  3. 누름

사양

채워진 버튼 및 윤곽선 버튼 사양

아이콘 및 윤곽선 아이콘 버튼

아이콘 버튼을 사용하여 작업을 간단한 레이아웃으로 표시합니다. 아이콘 버튼은 더보기 메뉴 열기나 검색 열기와 같은 열기 작업을 나타내거나 즐겨찾기 또는 북마크와 같이 켜고 끌 수 있는 바이너리 작업을 나타낼 수 있습니다. 미디어를 재생하거나 일시중지하는 데도 사용됩니다.

아이콘 버튼은 소형, 중형, 대형의 세 가지 크기로 정의할 수 있습니다.

분석

아이콘 및 윤곽선 아이콘 버튼 분석

  1. 컨테이너
  2. 아이콘

상태

아이콘 및 윤곽선 아이콘 버튼 상태

  1. 기본 계정
  2. 집중력이 높아진
  3. 누름

상태는 구성요소 또는 상호작용 요소의 상태를 전달하는 데 사용되는 시각적 표현입니다.

사양

아이콘 및 윤곽선 아이콘 버튼 사양

넓은 버튼

넓은 버튼은 일반 버튼보다 강조하는 데 사용됩니다. 여기에는 중요한 작업이 포함되어 있습니다. 관련 옵션을 나타내는 버튼은 함께 그룹화됩니다. 그룹은 공통의 영역을 공유해야 합니다.

분석

넓은 버튼 구성

  1. 컨테이너
  2. 선행 아이콘
  3. 제목
  4. 부제

상태

넓은 버튼 상태

  1. 기본 계정
  2. 집중력이 높아진
  3. 누름

상태는 구성요소 또는 상호작용 요소의 상태를 전달하는 데 사용되는 시각적 표현입니다.

사양

넓은 버튼 사양

이미지 버튼

이미지 버튼은 일반적으로 다음 수준의 탐색에서 사용할 수 있는 콘텐츠의 썸네일을 표시하는 데 사용됩니다. 일반적으로 관련 작업과 함께 그룹화되며 그룹은 공통의 노출 영역을 공유해야 합니다.

분석

이미지 버튼 사양

  1. 컨테이너
  2. 선행 아이콘
  3. 제목
  4. 부제
  5. 이미지 레이어: 다음으로 구성됩니다.
    1. 스크림 (상태 오버레이)
    2. 그라데이션 (표면 색상 기준)
    3. 이미지

상태

이미지 버튼 상태

  1. 기본 계정
  2. 집중력이 높아진
  3. 누름

상태는 구성요소 또는 상호작용 요소의 상태를 전달하는 데 사용되는 시각적 표현입니다.

사양

이미지 버튼 사양

사용

버튼은 일반적으로 사용자가 실행할 수 있는 작업을 전달하는 데 사용됩니다. 일반적으로 대화상자, 모달 창, 양식, 카드, 툴바와 같은 UI 요소에 표시됩니다.

버튼은 UI에서 작업을 나타내는 한 가지 옵션일 뿐입니다. 과도하게 사용하지 마세요. 화면에 버튼이 너무 많으면 시각적 계층구조를 방해합니다.

버튼 구성

  1. 컨테이너
  2. 아이콘
  3. 라벨 텍스트
  4. 제목
  5. 부제
  6. 이미지

컨테이너

버튼은 콘텐츠 주위에 컨테이너를 표시합니다. 컨테이너는 내부 패딩을 유지하면서 초점에 따라 1.1배로 조정됩니다. 컨테이너에 관한 고려사항은 다음과 같습니다.

  • 일관된 패딩이 있는 콘텐츠를 기반으로 컨테이너 너비를 설정합니다.
  • 반응형 레이아웃 그리드에 대한 컨테이너의 상대적 위치를 설정합니다.
  • 채워진 버튼에는 단색 컨테이너를 사용합니다.
  • 윤곽선이 있는 버튼에는 포커스에 획 및 채우기 색상을 사용합니다. 포커스가 맞춰지면 컨테이너에는 윤곽선과 함께 채우기 색상이 적용됩니다.
  • 넓은 버튼과 이미지 버튼의 경우 컨테이너 너비는 레이아웃 그리드에 따라 설정됩니다.
  • 컨테이너 크기, 위치, 정렬은 상위 컨테이너의 확장에 따라 변경될 수 있습니다.

버튼 컨테이너

텍스트 및 아이콘 버튼 컨테이너는 완전히 둥근 모서리를 사용합니다. 넓은 이미지 버튼 컨테이너에는 12dp의 둥근 컨테이너가 있습니다.

채워진 버튼 너비는 레이아웃 그리드에 반응할 수 있습니다. 버튼 너비가 커져도 아이콘과 라벨 텍스트가 중앙에 유지됩니다.
넓은 버튼과 이미지 버튼의 경우 컨테이너 너비는 상위 컨테이너에 의해 정의됩니다. 콘텐츠가 왼쪽에 고정됩니다.

아이콘

아이콘은 버튼의 작업을 시각적으로 전달하여 관심을 끄는 데 도움이 됩니다. 버튼은 버튼의 앞쪽에 배치해야 합니다. 아이콘은 항상 컨테이너 내에서 세로로 가운데에 배치됩니다.

크기가 다른 아이콘 버튼을 그룹화할 수 있습니다.
아이콘과 텍스트를 버튼 중앙에 세로로 정렬하지 마세요.
같은 버튼에 두 개의 아이콘을 사용하지 마세요.

라벨 텍스트

라벨 텍스트는 버튼에서 가장 중요한 요소입니다. 사용자가 버튼을 탭하면 발생하는 작업을 설명합니다.

버튼 라벨 텍스트에는 첫 단어와 고유 명사를 대문자로 표기하여 문장 첫 글자를 대문자로 표기합니다. 텍스트 줄바꿈을 피하세요. 가독성을 최대화하려면 라벨 텍스트는 한 줄로 유지해야 합니다.

버튼 라벨 텍스트에는 첫 단어와 고유 명사를 대문자로 표기하여 문장 첫 글자를 대문자로 표기합니다.
윤곽선이 있는 버튼을 이미지 위에 배치할 때 라벨 텍스트를 쉽게 읽을 수 있도록 하세요. 스크림을 사용하여 대비를 유지합니다.

이미지

이미지 버튼에는 항상 배경의 이미지 위에 그라데이션 오버레이와 스크림이 있습니다. 그래디언트 오버레이는 컨테이너 색상에 따라 설정됩니다. 스크림은 상태에 따라 변경됩니다.

버튼 그룹

버튼은 작업 간에 일관된 탐색을 유지하기 위해 행 또는 열에 함께 표시됩니다. 다음 섹션에서는 고려사항을 설명합니다.

계층 구조에 알림

각 화면에는 눈에 잘 띄는(일반적으로 넓은) 버튼으로 표시되는 기본 작업이 하나씩 있어야 합니다. 버튼은 쉽게 확인하고 이해할 수 있어야 합니다. 다른 버튼은 눈에 잘 띄지 않아야 하고 사용자의 기본 작업에 방해가 되지 않아야 합니다.

그룹의 첫 번째 버튼은 포커스가 먼저 버튼에 배치되므로 기본 작업 역할을 합니다.

선형 레이아웃 유지

버튼 행 버튼 열
  1. 행 레이아웃
  2. 열 레이아웃

대안을 논리적으로 사용

열 레이아웃에서는 단일 버튼 변형을 유지해야 합니다. 행 레이아웃에서는 여러 변형을 버튼 그룹에 함께 클러스터링할 수 있지만 로직은 명확해야 합니다. 채워진 버튼과 윤곽선 버튼은 동일한 그룹에서 사용할 수 있지만, 작업의 계층 구조가 명확해야 합니다.

버튼 그룹에 동일한 버튼 변형을 사용하세요.
버튼 그룹에 긴 버튼과 이미지 버튼을 함께 사용합니다.
행 레이아웃에서는 텍스트 버튼과 아이콘 버튼을 함께 배치할 수 있습니다. 기본 버튼이 더 강조되도록 합니다.
열 레이아웃에서는 버튼 변형을 하나만 사용합니다.