본캠프 TIL 1일차 정리 (Button,FAB,Snackbar)

 

주요 컴포넌트 카테고리

• Actions /액션: 버튼(Button), 플로팅 액션 버튼(FAB)
• Communication /인포메이션: 스낵바(Snackbar), 토스트 메시지
• Containment /컨테이너: 카드(Card), 다이얼로그(Dialog)
• Navigation /내비게이션: 탭(Tab), 네비게이션 바(Navigation Bar)
• Selection /컨트롤: 체크박스(Checkbox), 라디오 버튼(Radio Button)
• Text inputs /인풋: 텍스트 필드(Text Field), 검색 바(Search Bar)

1. Actions

 1-1. Button(버튼)

• 두 가지 유형: 기본(Default)과 토글(Toggle)
• 선택적으로 아이콘 포함
• 5가지 색상 옵션 존재 (아래 사진 참고)

❶ 높이 있는 버튼 (Elevated)

❷ 채워진 버튼 (Filled) / 강조 효과가 커서 한 페이지에 한 개 권장

❸ 톤 버튼 (Tonal)

❹ 외곽선 버튼 (Outlined)

❺ 텍스트 버튼 (Text)

 

1.버튼에 쓰인 색상은 배경과 최소 3:1 이상의 대비를 가져야 함

2.강조 효과 순서

Filled> Elevated>Filled>Outlined> Text

A.기본 B.토글 미선택 C.토글 선택 상태 (+텍스트 버튼은 토글로 사용하지 않음)

 

다음은 버튼 상태에 따른 토글 모양 변화 사진!

A비활성화 B활성화

❶ 활성화(Enabled) 

❷ 비활성화(Disabled) : 사용자가 작업을 완료하기 전에 탭할 수 없는 상태 

❸ 호버(hovered) : 사용자가 버튼 위에 마우스나 손가락을 올린 상태

❹ 커스(Focused) : 사용자가 버튼을 탭하기 전 준비단계
❺ 프레스드(Pressed) : 사용자가 실행을 위해 버튼을 눌렀을 때의 상태

 

버튼 크기별 패딩 사이즈

❶ Extra small - 높이 32, 좌우 패딩 12

❷ Small - 높이 40, 좌우 패딩 16

❸ Medium -높이 56, 좌우 패딩 24

❹ Large -높이 96, 좌우 패딩 48

❺ Extra large -높이 136, 좌우 패딩 64

 

⭐접근성을 위해 터치 타겟이 최소 48×48dp 이상이어야 한다!

( Extra small / Small 아이콘 버튼은 패딩 영역 누르면 터치가 되게끔)

 

모서리값이 들어간 버튼 만들게되면 고민하게 되는 부분!!

A같은 라운드 버튼은 그냥 코너값 100주면 된다. 

	XS	S	M	L	XL
B. 정사각 버튼	12dp	12dp	16dp	28dp	28dp
C. 프레스드 상태	8dp	8dp	12dp	16dp	16dp

 

<유의사항>

버튼은 단일 행동에 사용해야하고, 너무 많은 버튼이 있으면 시각적 위계가 깨진다.

또한 토글 사용시 라벨 길이에 유의하자!(비슷하게) 또한 한 줄로 쓰되, 영어의 경우 3단어 내외로!

아이콘은 버튼 왼쪽에 두되(중앙정렬X) 한 개만!

 

1-2. FAB (플로팅 액션 버튼) / ① 확장 FAB, ② FAB 메뉴

① 확장 FAB

• 한 화면에서 가장 중요하거나 가장 자주 사용하는 액션에 사용(일반 FAB보다 두드러짐)
• 결제 화면과 같이 지속적인 작업 접근이 필요한 긴 스크롤 뷰 화면에 확장 FAB를 사용
• 액션의 의미를 이해하려면 라벨 텍스트가 필요한 경우, 일반 FAB 대신 사용 (아이콘 단독X, 아이콘 단독은 일반 FAB)
• 사이즈: small(56dp), medium(80dp), large(96dp)

❶small ❷medium ❸large

16dp 정도 마진 주기!!

한 화면에 하나의 확장FAB 사용하기

② FAB 메뉴

• 하나의 FAB에서 열리는 다중 액션 메뉴
• 화면 위에 2–6개의 관련 액션을 플로팅 형태로 표시
• 항상 라벨 텍스트가 있어야함

❶Close button ❷ Menu item(최대 6개)

클로즈 버튼과 메뉴 버튼의 높이를 동일하게 하고, 메뉴 간에 4dp정도의 간격을 준다.

 

⭐크기를 키운 경우 닫기 버튼의 위차를 메뉴 아이템의 하단에 맞춰서 위에 배치해야함을 주의하자!

     또한 PC의 경우 마진을 24dp로 늘리기

컨테이너와 아이콘, 아이콘과 텍스트, 텍스트와 컨테이너 사이의 패딩을 일정하게 유지, 컨테이너 크기 변경하지 말기

2.Communication

   2-1스낵바(Snackbar), 토스트 메시지

• 스낵바는 앱 프로세스에 대한 짧은 업데이트를 화면 하단에 표시
• 스낵바는 사용자 경험을 방해하지 않아야 함
• 자동으로 사라지거나(4~10초), 사용자가 동작을 취할 때까지 화면에 남아 있을 수 있음.
• 링크나 아이콘 요소는 지양, 스낵바 쌓기도 X

❶컨테이너 ❷서포팅 텍스트(최대 2줄) ❸액션(선택) ❹아이콘 (선택 사항, 닫기 기능 제공)

 

패딩값(좌우 다름, 아마 Action의 터치 영역 때문인듯...?)

텍스트 색상이 같으면 눈에 안띄고, 반대로 필 버튼은 너무 눈에 띔

플로팅 버튼이 있을때는 위에다가 배치하면 된다

 

패딩값과 코너값 따라서 만들어본 것! 내일 답안이랑 비교해볼 예정