HIG - Tab bars

[ffalswo2]

Tab Bar

Tab bars use bar items to navigate between mutually exclusive panes of content in the same view.

💡 탭 바는 바 아이템을 사용하여 동일한 화면에서 상호 배제적인 콘텐츠 패널 간을 탐색하는 데 사용됩니다

Tab bar는 뷰가 제공하는 다양한 유형의 정보 또는 기능을 이해하는 데 도움이 됩니다. (추가로 탭바를 보면 앱의 성격을 알 수 있어야한다고 30기 앱잼 피드백 때 들었었습니다)

또한 탭 막대를 사용하면 각 섹션 내의 현재 탐색 상태를 유지하면서 뷰의 섹션 간에 빠르게 전환할 수 있습니다.

Best practices

Use a tab bar only to enable navigation, not to help people perform actions.

Tab bar는 탐색을 활성화하는 용도로만 사용해야 하며, 사람들이 작업을 수행하는 데 도움이 되는 용도로는 사용하지 말아라. (이런 경우에는 Toolbar를 써라)

Make sure the tab bar is visible when people navigate to different areas in your app.

Tab bar는 항상 보여야 한다. 단! modal view를 제외하고. modal뷰는 사용자가 완료하면 dimiss하는 별도의 경험을 제공하므로 Tab bar를 숨겨도 app navigation에는 어떠한 영향도 끼치지 않는다.

Use the minimum number of tabs required to help people navigate your app.

사람들이 앱을 탐색하는 데 필요한 최소한의 tab를 사용하자.

Tab이 추가될 때 마다 앱의 복잡성이 증가해서 사람들이 정보를 찾기가 더 어려워진다. 짧은 제목이나 아이콘이 있는 탭을 몇 개만 사용해서 탭바를 최대한 간결하게 유지하자.

일반적으로 iOS에서는 3-5개의 탭을 사용. (Tab수는 최근 들어 더 줄어드는 추세인듯)

Keep tabs visible even when their content is unavailable.

콘텐츠를 사용할 수 없을 때에도 Tab은 계속 보여야한다.

탭이 어떤 경우에는 활성화되지만 다른 경우에는 활성화되지 않는 경우 앱의 인터페이스가 불안정하고 예측할 수 없게끔 보여질 수 있다. 필요한 경우 탭의 콘텐츠를 사용할 수 없는 이유를 설명하자. 예를 들어, iOS 디바이스에 음악이 없는 경우에도 음악 앱의 지금 듣기 탭은 계속 사용할 수 있으며 음악 다운로드에 대한 제안을 제공한다.

Use concrete nouns or verbs as tab titles.

탭 제목으로 구체적인 명사 또는 동사를 사용하자.

좋은 탭 제목은 사람들이 탭을 선택할 때 찾을 수 있는 콘텐츠의 유형을 명확하게 설명하여 탐색하는 데 도움이 된다. 음악, 영화, TV 프로그램, 스포츠와 같은 카테고리 제목에는 명사를 사용하고, 시간이나 콘텐츠에 대한 사람들의 관점과 관련된 것(예: 지금 보기 또는 당신을 위해)에는 동사 또는 짧은 동사 구문을 사용하는 것이 좋습니다.

Be cautious of overcrowding tabs with functionality.

탭에 기능이 너무 많지 않도록 주의해라.

탭은 앱의 옵션 메뉴를 나타냅니다. '홈'이라는 제목의 탭은 범위가 너무 큰 경향이 있다. 각 탭에 콘텐츠 또는 기능의 구체적이고 설명적인 범주를 표시하여 집중도를 높이는 것을 목표로 하자. (헉)

Platform consideration only iOS

• 기본적으로 Tab bar는 반투명.
• 콘텐츠가 뒤에 표시될 때만 background material을 사용하고, 뷰가 아래로 스크롤되면 material을 제거한다.
• 키보드가 화면에 표시되면 Tab bar는 숨겨진다.
• 장치 크기와 방향에 따라 표시되는 탭의 수가 전체 탭 수보다 적을 수 있습니다. 가로 공간으로 인해 표시되는 탭의 수가 제한되는 경우 뒤쪽 탭이 더보기 탭이 되어 목록의 나머지 항목이 별도의 화면에 표시된다. 더보기 탭은 사용자가 숨겨진 탭의 콘텐츠에 접근하여 알아차리기 어렵게 만들 수 있으므로 앱에서 이러한 상황이 발생할 수 있는 시나리오를 제한하자. (?)
• 배지를 사용하여 눈에 띄지 않게 소통하라.
  흰색 텍스트와 숫자 또는 느낌표가 포함된 빨간색 타원형 배지를 탭에 표시하여 해당 보기 또는 모드와 관련된 새 정보를 사용할 수 있음을 나타낼 수 있다. 자세한 내용은 [Notifications](https://developer.apple.com/design/human-interface-guidelines/components/system-experiences/notifications) 참조.

• bitmap으로 커스텀 탭 바 아이콘을 만든다면 아래 사진을 참고하면 될 것 같습니다.
  자세한 내용은 [Icons](https://developer.apple.com/design/human-interface-guidelines/foundations/icons)참조.