안드로이드가이드라인(4)_탭과버튼

학습목표
탭과 버튼의 주요 구성 요소을 학습하고 디자인 가이드라인을 숙지한다.

1. tab

https://m3.material.io/components/tabs/overview

Tabs – Material Design 3

• 탭Tab 메뉴는 화면 상단에 배치되며, 탭하는 동작만으로 화면을 쉽게 전환하고 탐색할 수 있다.
• 안드로이드에서는 보기, 데이터 세트, 앱 기능 간 전환 등의 상위 콘텐츠로 탭을 구성할 것을 권장한다.
• 안드로이드에서는 탭이 상단에 고정되며, 스크롤 가능한 아이콘과 텍스트가 포함될 수 있고, 탭에 관련된 다양한 옵션이 제시된다.
• 내용을 간결하게 표현한 레이블링을 사용하고, 화면과 관련된 탭에는 선으로 현재 페이지를 나타내야 한다.
• 탭을 전환할 때 스와이프 동작을 이용할 수 있으므로 탭으로 분류된 화면 안에는 스와이프를 지원하는 내용이 있으면 안 된다.
• 고정 탭은 모든 탭이 한 화면에 표시된다. 한 번에 네 개 이상의 탭은 사용하지 않고 각 탭의 너비는 화면 너비를 탭 수로 나누어 결정하며, 더 많은 탭을 표시하기 위해 스크롤하지 않는다.
• 고정 탭은 텍스트 레이블을 사용하거나 아이콘을 사용해 내용을 전달할 수 있다.
• 탭은 서로 다른 정보 그룹과 관련된 정보 그룹의 보기를 전환하는 데 유용합니다. 탭에는 기본 탭과 보조 탭의 두 가지 유형이 있습니다.

Principle

• Scalable : 탭은 가로로 스크롤할 수 있으므로 UI에는 필요한 만큼의 탭이 있을 수 있습니다.
• 정보 제공(informative) : 탭이 콘텐츠를 카테고리로 구성하여 사용자가 다양한 유형의 정보를 쉽게 찾을 수 있도록 지원합니다.
• 동급 이동:피어스(peers) : 탭은 동일한 중요도의 범주에서 피어로 서로 옆에 표시됩니다.

주의사항

• 문자 레이블을 한 줄에 맞도록 크기를 조정하지 마십시오. 레이블이 너무 긴 경우 텍스트를 두 번째 줄로 넘기거나 스크롤 가능한 탭 사용
• 필요하지 않은 한 레이블을 잘라내지 마십시오. 텍스트를 잘라내면 이해에 방해가 될 수 있습니다.
• 텍스트만 포함된 탭과 아이콘만 포함된 탭을 혼용하지 마십시오. 모든 레이블에 대해 모든 텍스트 레이블, 모든 아이콘 레이블 또는 둘 다 사용합니다.
• 탭이 있는 UI의 내용 영역에 스와이프 가능한 항목을 배치하지 마십시오. 사용자가 실수로 잘못된 구성 요소를 스와이프할 수 있습니다.
• 상단 앱 모음 뒤로 탭을 스크롤하지 마십시오. 구성요소에 탭을 부착하면 탭이 나타나 단일 단위로 이동해야 합니다.

---

2. 버튼

There are five types of common buttons: elevated, filled, filled tonal, outlined, and text.

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

• Dialogs
• Modal windows
• Forms
• Cards
• Toolbars

버튼의 종류에는 중요도가 낮은 동작에 사용하는 텍스트 버튼, 중간 강조를 위해 사용하는 윤곽선 버튼, 높은 강조를 위해 그림자나 색을 사용한 채우기 버튼, 토글 버튼 등이 있다. 버튼을 여러 개 사용하는 경우, 채우기 버튼 옆에 텍스트 버튼이나 윤곽선 버튼을 사용하면 채우기 버튼을 더 강조하는 효과가 있다.

---

Principle

• identifiable: 버튼은 동작을 트리거할 수 있음을 나타내야 한다.
• findable : 버튼은 다른 버튼을 포함한 다른 요소 중에서 쉽게 찾을 수 있어야 한다.
• 분명한 clear: 버튼의 동작과 상태는 명확해야 합니다.

---

주의사항

• 텍스트 줄 바꿈하지 마세요. 판독성을 최대화하기 위해 텍스트 라벨은 한 줄
• 같은 채우기 버튼이 아니면 나란히 놓지 않는다.
• 나란히 놓을 공간이 있으면 다른 버튼 아래에 버튼을 두지 마십시오.
• 스트레칭이나 나이패치같은 반은형 버튼일 경우, 그룹을 해제하지 않는다.
• 텍스트 버튼일 경우 텍스트 레이블이 너무 길지 않도록 합니다. 간결해야 합니다.

---

4-3. floating Action button

플로팅 액션 버튼Floating Action Button, 이하 FAB은 화면의 내용 위에 표시되어 기본적인 동작이나 일반적인 동작을 수행한다.

• 일반적으로 중앙에 아이콘이 있는 원형 형태이며,
• 배지나 텍스트는 넣을 수 없고, 3개 미만 또는 6개 이상의 옵션은 사용할 수 없다.
• 일반, 소형, 확장의 세 가지 유형 중에서 화면의 기본 작업을 표시하기에 가장 적합한 유형을 사용한다. 확장 FAB의 너비는 고정 될 수도 있고 유동적일 수도 있다.

윈칙

• 1차적으로 : FAB는 화면의 기본 동작을 나타냅니다.
• Constructive : 건설적 - FAB는 생성, 공유 또는 탐색과 같은 건설적인 작업을 수행해야 합니다.
• Contextable : 상황별 FAB는 표시되는 화면과 관련이 있어야 합니다.

구조

• FAB는 일반적으로 원형 용기에 표시됩니다. 앱의 색 배합은 앱의 색 채우기를 결정하는데, 이는 FAB 뒤의 영역과 대조되어야 한다.
• FAB containers come in two sizes:
  • 1. Default (56 x 56dp)
  • 2. Mini (40 x 40dp)

주의사항

• 애매한 아이콘과 기본적으로 텍스트는 사용하지 않는다.
• 카드와 같은 개별 구성 요소는 각각 고유한 FAB를 가질 수 없습니다.
• 사소한 작업, 오버플로 작업, 불분명한 작업에 FAB를 사용하지 마십시오.
• 탭 간 전환 시 팹이 화면 콘텐츠에 맞춰 움직이지 않는다.

 

FAB를 누르면 3개에서 6개의 관련 동작을 단축 다이얼 형태로 표시할 수 있습니다.
이러한 전환은 다음 방법 중 하나로 이루어질 수 있습니다.

• - FAB는 누르면 관련 동작을 내보낼 수 있습니다.
• - 누르면 FAB가 관련 작업을 포함하는 메뉴로 변환될 수 있습니다(안드로이드만 해당).
• - 6개 이상의 조치가 필요한 경우 FAB 이외의 다른 조치를 사용하여 제시해야 합니다.

Transform into a menu with the related actions관련 작업이 포함된 메뉴로 변환

• 안드로이드에서 누르면 FAB가 관련 동작이 포함된 메뉴로 변환될 수 있다.
  스크림은 작업 메뉴 외부의 기능이 일시적으로 비활성화되었음을 나타냅니다. 동작 또는 스크림을 누를 때까지 메뉴는 화면에 남아 있습니다.

---