애플 휴먼 인터페이스 가이드라인(35) Bars -1 Navigation Bars

Navigation Bars
네비게이션 바

A navigation bar appears at the top of an app screen, below the status bar, and enables navigation through a series of hierarchical screens. When a new screen is displayed, a back button, often labeled with the title of the previous screen, appears on the left side of the bar. Sometimes, the right side of a navigation bar contains a control, like an Edit or a Done button, for managing the content within the active view. In a split view, a navigation bar may appear in a single pane of the split view. Navigation bars are translucent, may have a background tint, and can be configured to hide when the keyboard is onscreen, a gesture occurs, or a view resizes.
네비게이션 바는 앱 화면의 최상단, 상태 바의 아래에 위치하며, 체계에 따른 일련의 화면들을 탐색할 수 있게 합니다. 새 화면이 나오면 뒤로가기 버튼이 네비게이션 바의 왼쪽에 보입니다. 이 버튼엔 종종 '이전 화면' 라벨이 달려있습니다. 때때로 네비게이션의 오른쪽 부분엔 수정, 완료와 같은 컨트롤이 포함되어 있으며, 이를 통해 현재 보고있는 화면의 컨텐츠를 관리할 수 있습니다. 스플릿 뷰에서는 네비게이션 바가 한쪽 화면에만 나타날 수 있습니다. 네비게이션 바는 반투명하고 배경 색상값을 가질 수 있으며, 키보드가 화면에 뜨거나 제스처 발생시, 혹은 뷰 크기가 조정되었을 때 숨김처리 될 수 있습니다.

Consider temporarily hiding the navigation bar to provide a more immersive experience. For example, Photos hides the navigation bar and other interface elements when people view full-screen photos. If you implement this type of behavior, let people restore the navigation bar with a simple gesture, like a tap.

For developer guidance, see UINavigationBar.

더 몰입감 높은 경험을 위해 일시적으로 네비게이션 바를 숨겨보세요. 예를 들어, 사진 앱에선 풀스크린 사진 뷰에서 네비게이션 바와 다른 화면 요소를 숨깁니다. 이런 행동이 포함된다면, 사용자들이 탭과 같은 간단한 제스처로 네비게이션 바를 다시 보이게 할 수 있습니다.

Navigation Bar Titles
네비게이션 바 타이틀

Consider showing the title of the current view in the navigation bar. In most cases, a title helps people understand what they’re looking at. However, if titling a navigation bar seems redundant, you can leave the title empty. For example, Notes doesn’t title the current note because the first line of content supplies all the context needed.

네비게이션 바에 현재 뷰의 타이틀을 보여주는걸 고려해보세요. 대부분의 경우 타이틀은 사용자들이 지금 자신이 뭘 보고있는지 이해하는데 도움을 줍니다. 그러나 네비게이션 바에 제목 붙이는게 불필요하다면, 타이틀 자리는 비워둘 수 있습니다. 예를 들어 메모 앱에선 현재 메모의 타이틀을 보여주지 않죠. (타이틀을 굳이 보여주지 않아도) 메모의 첫번째 줄이 필요한 전부니까요.

 

Use a large title when you want to provide extra emphasis on context. Large titles should never compete with content, but in some apps, the big, bold text of a large title can help orient people as they browse and search. In a tabbed layout, for example, large titles can help clarify the active tab and indicate when people have scrolled to the top. Phone uses this approach, while Music uses large titles to differentiate content areas like albums, artists, playlists, and radio. In iOS 13 and later, a large title navigation bar doesn’t include a background material or shadow by default. Also, a large title transitions to a standard title as people begin scrolling the content. For developer guidance, see prefersLargeTitles.

현재 맥락를 강조하고 싶다면 큰 타이틀을 사용하세요. 큰 타이틀은 콘텐츠를 절대 방해해선 안되지만, 몇몇 앱에선 크고 굵은 큰 사이즈의 타이틀이 사용자가 탐색하고 검색하는데 도움을 줄 수 있습니다. 예를 들어 탭이 되어있는 레이아웃이라면, 큰 타이틀을 사용했을 때 현재 활성화되어있는 탭을 확실하게 보여주고, 위로 스크롤 했을 때 바로 구분할 수 있도록 도움을 주겠죠. 음악 앱이 큰 타이틀을 사용해 앨범, 아티스트, 플레이리스트, 라이도와 같은 콘텐츠 영역을 구분짓고 있습니다. iOS 13 포함 이후 버전에선 큰 타이틀의 네비게이션 바는 기본적으로 배경 요소나 그림자가 없습니다. 또한 큰 타이틀은 사용자들이 콘텐츠를 스크롤함과 동시에 기본 타이틀로 바뀝니다.

Standard title(좌) Large title(우)

 

Consider hiding the border of a large-title navigation bar. In iOS 13 and later, you can hide the bottom border of a navigation bar by removing the bar’s shadow (the border automatically reappears when people scroll the content area). The borderless style works well in large-title navigation bars because it enhances the sense of connection between title and content. The borderless style may not work as well in standard-title navigation bars, though, because the bar’s title and buttons might be harder to distinguish. An exception to this is in a split view on iPad where you might want to maintain consistency between the primary and secondary views by using the borderless style in both.

큰 타이틀 네비게이션 바에선 선을 보여주지 마세요. iOS 13 포함 이후의 버전에선 네비게이션 바의 그림자를 지워 아래 선을 숨길 수 있습니다.(선은 사용자들이 컨텐츠 영역을 스크롤 할 때 자동으로 다시 나옵니다.) 선 없는 스타일은 큰 타이틀 네비게이션 바와 잘 어우러지고 타이틀과 콘텐츠간 연결감을 높입니다. 그러나 이 스타일은 기본 타이틀 네비게이션 바와 잘 어울리진 않습니다. 바의 타이틀과 버튼을 구분하기 어려울 수 있기 때문입니다. 예외는 아이패드 스플릿 뷰의 경우인데, 타이틀의 두 버전(large, standard) 모두 선 없는 스타일을 사용하며 첫번째와 두번째 뷰의 지속성을 유지할 수 있습니다. 

Navigation Bar Controls
네비게이션 바 컨트롤

Avoid crowding a navigation bar with too many controls. In general, a navigation bar should contain no more than the view’s current title, a back button, and one control that manages the view’s contents. If you use a segmented control in the navigation bar, the bar shouldn’t include a title or any controls other than the segmented control.

If you create a custom glyph for a navigation bar control, use the following sizes, adjusting as needed for balance.

네비게이션 바를 너무 많은 컨트롤로 채우지 마세요. 일반적인 경우 네비게이션 바엔 현재 뷰의 타이틀, 돌아가기 버튼, 현재 콘텐츠를 관리하는 컨트롤 버튼, 이렇게 세개 이상을 포함시켜선 안됩니다. 만약 세그먼트 컨트롤을 사용한다면, 바엔 타이틀이나 다른 세그먼트 컨트롤을 포함시켜선 안됩니다.

Target sizes	Maximum sizes
24x24 pt (72x72 px @3x)	28x28 pt (84x84 px @3x)
24x24 pt (48x48 px @2x)	28x28 pt (56x56 px @2x)

Use the standard back button. People know that the standard back button lets them retrace their steps through a hierarchy of information. However, if you implement a custom back button, make sure it still looks like a back button, behaves as people expect, matches the rest of your interface, and is consistently implemented throughout your app. If you replace the system-provided back button chevron with a custom image, supply a custom mask image too. iOS uses this mask to animate the button title during transitions.

기본 돌아가기 버튼을 사용하세요. 사용자들은 기본 돌아가기 버튼을 누르면 위계에 맞게 그들이 거쳐온 화면을 다시 돌아갈 수 있다는걸 압니다. 그러나 직접 만든 돌아가기 버튼을 사용한다면, 그 버튼이 여전히 돌아가기 버튼처럼 생기도록, 사용자들이 기대하는 대로 작동하도록, 화면의 다른 요소들과 잘 어울리도록, 앱 전체를 통틀어 지속성을 유지하도록 하세요. 만약 시스템에서 제공되는 (기본) 돌아가기 V자 버튼 대신 직접 만든 이미지를 사용한다면, 마스크된 이미지 또한 제공하세요. iOS는 이 마스크 이미지를 전환 과정의 애니메이션에 사용할 것입니다.

 

Don’t include multisegment breadcrumb paths. The back button always performs a single action — returning to the previous screen. If you think people might get lost without the full path to the current screen, consider flattening your app’s hierarchy.

다중 세그먼트로 구성된 이동경로*를 보여주지 마세요. 뒤로가기 버튼은 '한가지'의 액션만을 수행해야 합니다. 그건 바로 이전 화면으로 돌아가는 것이죠. 만약 사용자들이 현재 화면에서 거쳐온 화면을 다시 돌아가는데 길을 잃는다면, 앱 화면의 위계를 재고해봐야 합니다.

 

*Multisegment breadcrumb paths 예시

 

Give text-titled buttons enough room. If your navigation bar includes multiple text buttons, the text of those buttons may appear to run together, making the buttons indistinguishable. Add separation by inserting a fixed space item between the buttons. For developer guidance, see the UIBarButtonSystemItemFixedSpace constant value in UIBarButtonItem.

텍스트 타이틀이 들어간 버튼엔 충분한 여백을 주세요. 만약 네비게이션 바에 여러개의 텍스트 버튼들을 포함한다면, 이 버튼들의 텍스트는 한 덩어리로 보일 수 있으며, 이는 버튼을 서로 구분하기 어렵게 만듭니다. 버튼 사이에 고정된 여백을 넣어 구분하세요.

 

Consider using a segmented control in a navigation bar to flatten your app’s information hierarchy. If you use a segmented control in a navigation bar, do so only at the top level of your hierarchy and be sure to choose accurate back-button titles at lower levels. For additional guidance, see Segmented Controls.

앱의 정보 구조를 간단히 하기 위해 네비게이션 바에 세그먼트 컨트롤을 넣어보세요. 만약 네비게이션 바에 세그먼트 컨트롤을 넣는다면, 위계의 제일 윗단계에만 사용하도록 하고, 그 아래단계에선 정확한 뒤로가기 버튼을 넣도록 하세요. 추가 내용은 Segmented Controls 에서 확인하세요.

 

---

iOS 13 이후 제일 큰 변화중 하나였던 라지타이틀! iOS 느낌 팍팍 나고 세련돼서 좋다. 네비게이션 바의 세그먼트 컨트롤은 위계의 최상단 (더 위로 올라갈 수 없는 위계) 에만 사용하는 지점이 인상깊었다. 

 

원문_

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

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