[iOS - HIG] 33. Tab bar (탭바)

Tab bar

• 모든 화면 방향에서 동일한 높이를 유지
• 키보드 등장 시 자동으로 숨김처리

TabBar vs ToolBar

• TabBar: 현재 컨텍츠와 전혀 다른 섹션간의 전환 (ex 알람, 스톱워치, 타이머 탭)
• ToolBar: 현재 컨텐츠와 연관된 작업 (ex 항목 생성, 삭제, 사진 촬영)

TabBar Guide

• 탭 막대에 들어가는 아이템 배치에는 독립적이고 정보 계층 구조 평평화
• 탐색용으로만 TabBar를 표시하고 현재 화면의 요소에 대해 작동하는 컨트롤은 ToolBar 사용
• iPhone에는 탭 아이템을 3~ 5개만 사용: 너무 많으면 탭할 수 있는 영역이 줄어들고 앱의 복잡성이 증가하여 정보를 찾기가 어려워지는 현상
• 사용자가 앱의 다른 영역으로 이동할 때 탭 표시줄을 숨기지 말고 언제나 표출: 탭 바는 앱에 대한 전역 탐색을 가능하게 하므로 어디에서나 볼 수 있어야하는 특성
• 사용자가 탭을 눌렀을때 항상 이동되도록 설정: '음악'앱의 경우, 노래가 없는 경우라도 지금 듣기 탭에 노래 다운로드 방법이 설명
• bedge 색상은 눈에 잘 띄지 않는 흰색 텍스트와 숫자 or 느낌표가 포함된 빨간색 타원형
• 탭바에 들어가는 아이콘은 SF Symbol or tabBar 전용 icon or 직접 커스텀 하는 Glphs 사용

Glphs 사이즈 규격

• Circular glyphs

• Square glyphs

• Wide glyphs

• Tall glyphs

* 참고

https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/