[iOS / HIG] Navigation

Navigation

People tend to be unaware of an app’s navigation until it doesn’t meet their expectations. Your job is to implement navigation in a way that supports the structure and purpose of your app without calling attention to itself. Navigation should feel natural and familiar, and shouldn’t dominate the interface or draw focus away from content. In iOS, there are three main styles of navigation.

사람들은 앱이 자신의 기대에 미치지 못할 때까지 앱의 내비게이션에 대해 모르는 경향이 있습니다. 당신의 일은 주의를 환기시키지 않고 앱의 구조와 목적을 지원하는 방식으로 내비게이션을 구현하는 것입니다. 내비게이션은 자연스럽고 친숙해야 하며 인터페이스를 지배하거나 콘텐츠로부터 포커스를 빼앗아서는 안 됩니다. iOS에서는 크게 세 가지 스타일의 내비게이션이 있습니다.

 

Hierarchical Navigation

Make one choice per screen until you reach a destination. To go to another destination, you must retrace your steps or start over from the beginning and make different choices. Settings and Mail use this navigation style.

특정 화면에 도착할 때까지 화면당 하나의 화면을 선택하십시오. 다른 목적지로 가려면, 행선지를 다시 추적하거나 처음부터 다시 시작하고 다른 선택을 해야 합니다. 설정 및 메일은 이 네비게이션 스타일을 사용합니다.

 

 

Flat Navigation

Switch between multiple content categories. Music and App Store use this navigation style.

여러 내용 범주 간에 전환합니다. 음악 및 앱 스토어는 이 탐색 스타일을 사용합니다.

 

 

 

Content-Driven or Experience-Driven Navigation

Move freely through content, or the content itself defines the navigation. Games, books, and other immersive apps generally use this navigation style.

콘텐츠 내에서 자유롭게 이동하거나 콘텐츠 자체가 탐색을 정의합니다. 게임, 책, 그리고 다른 몰입형 앱들은 일반적으로 이 네비게이션 스타일을 사용합니다.

 

 

 

Always provide a clear path. People should always know where they are in your app and how to get to their next destination. Regardless of navigation style, it’s essential that the path through content is logical, predictable, and easy to follow. In general, give people one path to each screen. If they need to see a screen in multiple contexts, consider using an action sheet, alert, popover, or modal view. To learn more, see Action Sheets, Alerts, Popovers, and Modality.

항상 명확한 경로를 제공하십시오. 사람들은 항상 당신의 앱에서 그들이 어디에 있고 다음 목적지에 어떻게 도착하는지 알아야 합니다. 탐색 스타일에 상관없이 콘텐츠를 통과하는 경로는 논리적이고 예측 가능하며 쉽게 따라갈 수 있어야 합니다. 일반적으로 사람들에게 각 화면에 대한 하나의 경로를 제공합니다. 한 화면이 여러 맥락에서 볼 필요가 있는 경우 작업 시트, 경고, 팝업 또는 모달 뷰를 사용하는 것을 고려하십시오.

 

Design an information structure that makes it fast and easy to get to content. Organize your information structure in a way that requires a minimum number of taps, swipes, and screens.

콘텐츠에 빠르고 쉽게 접근할 수 있는 정보 구조를 설계합니다. 최소한의 탭, 스위프 및 화면이 필요한 방식으로 정보 구조를 구성합니다.

 

Use touch gestures to create fluidity. Make it easy to move through your interface with minimum friction. For example, you could let people swipe from the side of the screen to return to the previous screen.

터치 제스처를 사용하여 유동성을 만듭니다. 마찰을 최소화하면서 인터페이스를 쉽게 이동할 수 있습니다. 예를 들어, 사용자가 화면 측면에서 손가락을 밀어서 이전 화면으로 돌아가도록 할 수 있습니다.

 

Use standard navigation components. Whenever possible, use standard navigation controls such as page controls, tab bars, segmented controls, table views, collection views, and split views. Users are already familiar with these controls, and will intuitively know how to get around your app.

standard navigation components를 사용하십시오. 가능하면 page controls, tab bars, segmented controls, table views, collection views, and split views을 사용하십시오. 사용자는 이러한 컨트롤에 이미 익숙하며 앱 이동 방법을 직관적으로 알게 될 것입니다.

 

Use a navigation bar to traverse a hierarchy of data. The navigation bar’s title can show the current position in the hierarchy, and the back button makes it easy to return to the previous location. For specific guidance, see Navigation Bars.

데이터 계층을 순회하려면 navigation bar를 사용하십시오. 탐색 모음의 제목을 사용하여 계층에서 현재 위치를 표시할 수 있으며, 뒤로 버튼을 누르면 이전 위치로 쉽게 돌아갈 수 있습니다. 자세한 내용은 탐색 모음을 참조하십시오.

 

Use a tab bar to present peer categories of content or functionality. A tab bar lets people quickly and easily switch between categories, regardless of the current location. For specific guidance, see Tab Bars.

내용 또는 기능의 동일선상의 범주를 표시하려면 탭 바를 사용하십시오. 탭 표시줄을 사용하여 현재 위치에 관계없이 카테고리 간에 쉽고 빠르게 전환할 수 있습니다. 자세한 내용은 탭 막대를 참조하십시오.

 

On iPad, use a split view instead of a tab bar. Split views provide the same quick navigation as tab bars while making better use of the large display. For guidance, see Split Views.

iPad에서는 tab bar 대신 split view를 사용합니다. split view를 사용하면 tab bar와 동일한 빠른 탐색 기능을 제공하면서 대형 디스플레이를 보다 효율적으로 활용할 수 있습니다. 자세한 내용은 뷰 분할을 참조하십시오.

 

Use a page control when you have multiple pages of the same type of content. A page control clearly communicates the number of pages available and which one is currently active. The Weather app uses a page control to show location-specific weather pages. For specific guidance, see Page Controls.

동일한 유형의 내용을 가진 페이지가 여러 개인 경우 페이지 컨트롤을 사용합니다. 페이지 제어는 사용 가능한 페이지 수와 현재 활성 상태인 페이지를 명확하게 전달합니다. 날씨 앱은 페이지 컨트롤을 사용하여 위치별 날씨 페이지를 표시합니다. 자세한 내용은 페이지 컨트롤을 참조하십시오.

 

 

 

※ 참고 출처

애플 개발자 문서

Navigation - App Architecture - iOS - Human Interface Guidelines - Apple Developer