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 when displaying full-screen content. The navigation bar can be distracting when you want to focus on content. Temporarily hide the bar to provide a more immersive experience. Photos hides the navigation bar and other interface elements when viewing full-screen photos. If you implement this type of behavior, let users restore the navigation bar with a simple gesture, like a tap.

전체 화면 콘텐츠를 표시 할 때 네비게이션바를 일시적으로 숨길 것을 고려하십시오. 원하는 콘텐츠에 집중할 때 네비게이션바는 산만하게 할 수 있습니다. 일시적으로 바를 숨기면 보다 몰입한 경험을 할 수 있습니다. Photos는 전체 화면 사진을 볼 때 네비게이션바 및 기타 인터페이스 요소를 숨깁니다. 이러한 유형의 동작을 구현하면 사용자가 탭과 같은 간단한 제스처로 네비게이션바를 복원 할 수 있습니다.

For developer guidance, see UINavigationBar.

Tip Use a toolbar when navigation isn’t needed or you want multiple controls for managing content. See Toolbars.

탐색이 필요하지 않거나 콘텐를 관리하기 위한 여러 컨트롤을 원하면 툴바를 사용하십시오.

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.

네비게이션바에 현재뷰의 제목 표시를 고려하십시오. 대부분의 경우 제목은 사람들이 보고 있는 내용을 이해하도록 도와줍니다. 그러나 네비게이션바 제목이 장황된것처럼 보이면 제목을 비워 둘 수 있습니다. 예를 들어, Notes는 컨텐츠의 첫번째 줄이 필요한 모든 컨텍스트를 제공하므로 현재 노트의 제목을 지정하지 않습니다.

Use a large title when you need to provide extra emphasis on context. 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 inform the user when they've scrolled to the top. Phone uses this approach, while Music uses large titles to differentiate content areas like albums, artists, playlists, and radio. A large title transitions to a standard title as the user begins scrolling content. Large titles don't make sense in all apps and should never compete with content. Although the Clock app has a tabbed layout, large titles are unnecessary because each tab has a distinct, recognizable layout. For developer guidance, see prefersLargeTitles.

컨텍스트에 추가 강조를 제공할 필요가 있을 때 큰 제목을 사용하십시오. 일부 앱에서는 크고 진한 텍스트의 제목은 사람들이 탐색하고 검색하는데 익숙하도록 도울 수 있습니다. 예를 들어 탭 레이아웃에서는 큰 제목을 사용하면 활성 탭을 명확히하고, 상단으로 스크롤했을 때 사용자에게 알립니다. Phone은 이러한 접근 방식을 사용하는 반면, Music은 큰 제목을 사용하여 앨범, 음악가, 재생 목록 및 라디오 같은 콘텐츠 영역을 구분합니다. 사용자가 콘텐츠를 스크롤하기 시작하면 큰 제목이 표준 제목으로 전환됩니다. 큰 제목은 모든 앱에서는 의미가 없으며 결코 콘텐츠와 경쟁해서는 안됩니다. 시계 앱에는 탭 레이아웃이 있지만 각 탭마다 고유 한 인식 가능한 레이아웃이 있으므로 큰 제목은 필요하지 않습니다.

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.

컨트롤이 너무 많은 네비게이션 바는 피하십시오. 일반적으로 네비게이션바는 뷰의 현재 제목, 뒤로 버튼 및 뷰의 콘텐츠를 관리하는 컨트롤 하나 이상이 포함되면 안됩니다. 네비게이션바에서 세그먼트 컨트롤을 사용하는 경우 바에는 세그먼트 컨트롤 이외의 제목이나 컨트롤이 없어야합니다.

Use the standard back button. People know that the standard back button lets them retrace steps through a hierarchy of information. However, if you implement a custom back button, make sure it still looks like a back button, behaves intuitively, 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.

표준 뒤로 버튼을 사용하십시오. 사람들은 표준 뒤로 버튼이 정보 계층을 통해 단계를 다시 추적할 수 있다는 것을 알고 있습니다. 그러나 사용자 정의 뒤로 버튼을 구현하는 경우 버튼이 뒤로 버튼처럼 보이고 직관적으로 동작하며 나머지 인터페이스와 일치하며 앱 전체에 일관되게 구현되어야합니다. 시스템 제공 뒤로 버튼을 사용자 정의 이미지로 교체하는 경우, 사용자 정의 마스크 이미지도 제공하십시오. 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.

앱의 정보 계층을 평평하게 하기 위해 네비게이션바에 세그먼트 컨트롤을 사용하는 것을 고려해 보십시오. 네비게이션바에서 세그먼트 컨트롤을 사용하는 경우 계층의 최상위 수준에서만 사용하고 하위 수준에서는 정확한 뒤로 버튼 제목을 선택해야 합니다.

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