Human Interface Guidelines - Bars - Navigation Bars

NavigationBars

 

 

Navigation bar 는 status bar 바로 아래, app screen 의 가장 윗부분에 있는 bar 입니다. Series of hierarchical screens 를  이동할 때 사용되죠. 새로운 화면으로 이동하게되면 'back' button, 또는 전 화면의 이름으로 된 뒤로가기 버튼이 navigation bar 의 좌측에 나타납니다. 반드시 있어야 하는건 아니지만, Navigation bar 의 우측에는 해당 화면에서 이용할 수 있는 controls 이 있을 수 있습니다. Edit, Done, Add 기능을 하는 버튼 등이 있을 수 있습니다. 

Split View 에서는 한쪽 pane 에만 있을수도 있어요. (Split View 에 대해서는 또 포스팅하도록 하겠습니다. ) 

Navigation bars 는 투명해서, background tint color 를 띌 수 있습니다. keyboard 입력이 필요하거나, gesture 가 인식되거나, view 사이즈가 바뀔 때 잠시 숨겨질 수 있습니다. 

 

 

More immersive experience 를 위해 잠시 navigation bar 를 숨기는 것도 고려해보세요. 예를 들어, Photos 에서는 유저가 full-screen photos 를 보고싶을 때 navigation bar 와 다른 interface elements 를 보이지 않게 하고 있습니다. 만약 이러한 형식의 기능을 수행하고 싶을 때는, tap 과 같은 간단한 gesture 로 navigation bar 를 가리도록 해보세요!

(개발자 관련 문서: UINavigationBar. )

 

 

 

 

 

 

 

Navigation Bar Titles

현재 화면의 title 을 navigation bar 에 보여주도록 해보세요. 대부분의 경우, title 을 통해 본인이 어떤 것을 보고 있는지 쉽게 알 수 있습니다. 만약 굳이 또다시 명시할 필요가 없다면 빈 채로 놔두셔도 됩니다. 예를 들면 Memo 앱 등을 사용할 때, content 화면에서 바로 해당 Memo 의 제목을 알 수 있기 때문에 Navigation bar 의 title 로 보여주지 않아도 될겁니다. 

 

 

만약 더 더 강조하고 싶다면, large title 를 이용하세요. 경우에 따라서, 크고 굵은 title 을 통해 유저들이 스스로 어떤 행동을 하는지에 대해 도움을 줄 수 있습니다. 예시로 tabbed layout 에서는 현재 active tab 이 어떤것인지 알기 쉽게 할 수 있고, 그리고 맨 위에까지 scroll 되었을 때 이를 알려줄 수도 있겠지요. Phone 에서는 이와 같이 접근하면 됩니다. Apple 의 Music App 에서도 다음과 같이 tabbar 에서 뿐만 아니라 navigation bar 에서도 현재 우리가 어디있는지 알려주고 있네요. 

 

 

 

Music App 에서 또 볼 수 있는 특징으로는 처음엔 Navigation Title 이 컸었는데 조금 아래로 드래그 하면 바로 우측 사진과 같이 작게 되는 것을 볼 수 있습니다. 

 

iOS 13+ 에서 large title navigation bar 는 background material , shadow 를 기본값으로 갖고있지 않습니다. 

(관련 개발자 guidance:  prefersLargeTitles )

 

 

 

 

 

 

 

 

 

large-title navigation bar 의 경계선을 숨기는 것도 고려해보세요.  iOS 13+ 에서 bar 의 shadow 를 제거함으로써 하단 경계선을 가려줄 수 있습니다. (경계는 사용자가 content 를 scroll 할 때 자동으로 다시 나타나게 됩니다.) Large-title navigation bars 에 borderless style 을 사용하면 title 과 content 사이를 연결하는 느낌을 줄 수 있습니다. Bar's title 과 buttons 을 구분하기 힘들 수 있기때문에 borderless style 을 standard-title navigation bars 에 적용하는 것은  잘 어울리지 않을 수 있습니다. iPad 에서의 split view 에서는 예외가 될 수 있겠지요. (첫번째 View 와 두번째 View 사이 Consistency 를 위해 통일성을 줄 수 있으니까요. )

 

 

 

 

 

 

Navigation Bar Controls 

Navigation bar 에 너무 많은 controls 를 넣지는 말아주세요. 일반적으로, navigation bar 는 현재 view 의 title, back button, 그리고 control button 하나 까지만 포함하는게 좋습니다. Segmented control 을 navigation bar 에 넣을 때 bar 는 그 외(title, or any controls) 것들은 넣지 말아주세요. 

 

Custom 글씨체를 navigation bar 에 넣을 때는 아래 사이즈 규격을 지켜주세요. 

 

 

 

Standard back button 을 이용하세요. 우리는 standard back button 을 통해 한 층씩 뒤로 갈 수 있음을 인지하고있습니다. 만약 custom back button 을 넣을 때는, 여전히 back button 과 비슷해보이는지, 예상대로 화면을 이동시키는지, 다른 interface 와는 맞는지, 다른 화면들에서도 일관성있게 사용되는지 다시 한번 확인해보세요. 또한 system-provided back button chevron ( < ) 을 custom image 로 사용할 때에는 custom mask image 또한 넣어주세요. iOS 에서는 mask 를 이용해 화면이 이동할 때 button title 에 animation 을 줍니다. 

 

 

Multisegment breadcrumb paths 를 사용하지 말아주세요.  

 

Back button 은 항상 한가지 action 만을 행해야 합니다. 아시다시피 바로 전 화면으로 가는거죠. 만약 유저가 path 를 헷갈려할지도 모른다고 생각이 든다면, app's hierarchy 를 좀 더 flat 하게 바꾸는 것을 고려해보세요. 

 

 

Text-titled buttons 에게 충분한 공간을 제공해주세요. navigation bar 가 여러개의 text buttons 을 가지고있다면, 경계를 분명히 해주시는게 좋습니다. Fixed space item 을 버튼 사이에 삽입함으로써 분리시켜주세요. 

Developer guidance:  UIBarButtonSystemItemFixedSpace 에서 UIBarButtonItem 내 constant value 를 보아주세요!  )

 

 

App 의 information hierarchy 를 flat 하게 만들기 위해 Navigation bar 내에서 segmented control 을 쓰는걸 고려해보세요. 만약 segmeneted control 을 navigation bar 내부에 사용할 경우, hierarchy 의 top level 에 대해서만 해주세요. 또한, lower levels views 에서는 '맞는' back-button' title 을 주세요. 

Developer guidance:  Segmented Controls.