[HIG] Bars - Navigation Bars

💡 개인적인 공부를 목적으로 번역하여 간략하게 정리만 한 글입니다. 전문을 포함하고 있지 않으니 자세한 내용은 공식문서를 읽어보시길 권해드립니다!

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

Navigation Bars - Bars - iOS - Human Interface Guidelines - Apple Developer

Navigation Bars

내비게이션 바는 앱 스크린의 상단에 표시되며, 상태 표시 바(status bar)에 아래에 위치하여 화면 계층 간의 이동을 돕습니다. 새로운 스크린이 표시되면, 주로 이전 화면의 이름을 라벨로 가지는 뒤로 가기 버튼이 가장 왼쪽에 표시됩니다. 어떤 경우에는 내비게이션 바의 오른쪽 영역이 Edit이나 Done과 같은 Control을 포함하여 현재 뷰의 컨텐츠들을 조작하도록 하기도 합니다. Split View 내에서는 내비게이션 바가 하나의 분리된 화면(Pane)에만 나타날 수도 있습니다. 내비게이션 바는 투명하게 만들거나 배경 색상을 지정할 수 있고, 키보드가 화면에 나타나거나, 제스처가 발생했을 때, 또는 뷰의 크기가 변화할 때 숨기도록 설정할 수도 있습니다.

 

더 몰입감 있는 경험을 위해 임시적으로 네비게이션 바를 숨기는 것을 고려해보아야 합니다. 예를 들어, Photos 앱은 사용자가 풀 스크린으로 사진을 볼 때 내비게이션 바와 다른 인터페이스 요소들을 숨깁니다. 만약 이런 행동을 구현했다면, 내비게이션 바가 탭과 같은 간단한 제스처를 통해 복구될 수 있도록 해야 합니다.

 

개발자 가이드: UINavigationBar

Navigation Bar Titles

• 내비게이션 바에 현재 뷰의 제목을 보여주세요.
  • 하지만 만약 내비게이션 바에 제목을 추가하는 것이 중복되는 행동이라면 제목은 비워두어도 좋습니다.
  • 예를 들어, Notes 앱은 컨텐츠에 첫 라인에 현재 뷰에 대한 정보를 제공하므로 내비게이션 바에 제목을 비워둡니다.

• 현재 뷰의 정보를 더 강조하고 싶다면 큰 크기의 제목을 사용하세요.
  • 어떤 앱에서는 큰 볼드체의 텍스트로 작성된 제목이 사람들이 탐색을 하거나 검색을 할 때를 돕습니다.
  • 예를 들어, tabbed layout 에서는 큰 제목이 명료하게 탭이 활성화 되어있음을 알리고 사람들에게 가장 위로 스크롤 해야된다는 것을 알립니다. Phone 앱이 이런 접근을 사용합니다. Music 앱은 앨범, 아티스트, 플레이리스트, 라디오와 같은 컨텐츠 영역과 구분 짓는 용도로 큰 제목을 사용합니다.
  • iOS 13 이상에서는 큰 제목의 내비게이션 바는 배경 요소나 그림자효과를 기본값으로 가지지 않습니다. 또한, 사용자가 컨텐츠를 스크롤하기 시작하면 큰 제목에서의 일반 제목으로의 전환효과가 일어납니다.
  • 개발자 가이드: prefersLargeTitles
• 큰 제목의 네비게이션 바를 사용할 때는 테두리를 숨기세요.
  • iOS 13 이상에서는 내비게이션 바의 하단 테두리의 그림자효과를 없애는 것으로 숨길 수 있습니다(테두리는 사용자가 컨텐츠 영역을 스크롤 하면 자동으로 다시 나타납니다).
  • 테두리가 없는 스타일은 기존의 표준 네비게이션 바와는 잘 어울리지 않습니다. 네비게이션바의 제목과 버튼이 명확하게 보이지 않을 수 있습니다.
  • iPad에서의 Split View는 예외적인 상황으로 나누어진 두 뷰의 일관성을 유지하기 위해 두 뷰에 모두 테두리가 없는 스타일을 적용할 수 있습니다.

Navigation Bar Controls

• 네비게이션 바가 지나치게 많은 control로 복잡해지지 않도록 해야 합니다.
  • 일반적으로 내비게이션 바는 현재 뷰의 제목, 뒤로가기 버튼과 하나의 control 외의 요소들을 포함하지 않습니다.
  • 내비게이션 바에 segmented control을 사용하고자 한다면, 그 내비게이션 바는 segmented control 외의 제목이나 다른 control등의 요소들을 포함해서는 안됩니다.
• 표준 뒤로 가기 버튼을 사용하세요.
  • 만약 커스텀 버튼을 만든다고 하더라도 다른 인터페이스들과 일관성이 있도록 여전히 표준과 비슷한 모양을 유지해야 합니다.
• 여러 개의 Breadcrumb Path를 사용하면 안 됩니다.
  • 뒤로 가기 버튼은 항상 이전 화면으로 돌아가는 하나의 동작만을 수행해야 합니다. 만약 당신이 사용자들이 페이지의 모든 경로를 알아야 한다고 생각한다면, 앱의 계층구조를 단순하게 하는 것을 고려해야 합니다.
• 텍스트 버튼에게는 충분한 공간을 확보해주세요.
  • 만약 내비게이션 바에 여러 개의 텍스트 버튼을 추가한다면, 텍스트 버튼이 알아보기 힘들 수도 있습니다.
  • 버튼 사이에 고정된 공간을 부여해서 구분되도록 만들어주어야 합니다.
  • 개발자 가이드: UIBarButtonSystemItemFixedSpace / UIBarButtonItem
• 앱의 정보 계층을 단순화하기 위해 Segmented Control의 사용을 고려해야 합니다.
  • 만약 내비게이션 바에 Segmented Control을 사용한다면, 최상위 계층에서만 사용하세요.
  • 그리고 하위 계층에서는 적절한 뒤로 가기 버튼 제목을 선정해야 합니다.