애플 휴먼 인터페이스 가이드라인(4) App Architecture -3 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.

 

위계 질서형 네비게이션

목적지 (화면)에 도달하기 위해 단 하나의 선택권을 만듭니다. 다른 목적지로 가기 위해선, 이전 단계를 되짚어 가야하거나 처음부터 다시 시작해 다른 선택을 해야만 합니다. 설정(Settings)이나 메일에서 이 스타일의 네비게이션을 사용합니다.

Hierarchical Navigation (위계 질서형 네비게이션)

 

Flat Navigation

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

 

평면형 네비게이션

다수의 카테고리를 번갈아 전환합니다. 음악과 앱스토어에서 이 스타일의 네비게이션을 사용합니다.

 

Flat Navigation (평면형 네비게이션)

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.

 

내용 혹은 경험 중심의 네비게이션

내용 사이를 자유롭게 오가거나, 내용 그 자체가 네비게이션을 정의합니다. 게임, 책, 다른 몰입도 높은 앱들이 대개 이 네비게이션 스타일을 사용합니다. 

 

 

Content-Driven of Experience-Driven Navigation

Some apps combine multiple navigation styles. For example, an app that uses flat navigation may implement hierarchical navigation within each category.

몇몇 앱들은 여러개의 네비게이션 스타일을 혼합하기도 합니다. 예를 들어, 평면형 네비게이션을 사용하는 앱은 각 카테고리 안에 위계 질서형 네비게이션을 사용할 수도 있습니다.

 

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, seeAction Sheets,Alerts,Popovers, andModality.

 

언제나 명확한 길을 제공하세요. 사용자들은 언제나 자신이 앱 안 어디에 있는지, 다음 목적지를 어떻게 갈지 알아야 합니다. 네비게이션 스타일에 관계없이, 콘텐츠로 이동하는 길은 논리적이고, 예측가능해야하며, 따라가기 쉬워야 합니다. 대개의 경우, 사용자들에게 각 화면으로 가는 선택지를 한개씩 주세요. 만약 여러 맥락에서 한 화면을 보여줘야 한다면, 액션시트나 알람, 팝오버나 모달 화면을 사용하는 것을 고려해보세요. Action Sheets,Alerts,Popovers,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.

 

일반적인 네비게이션 컴포넌트를 사용하세요. 가능하다면, 페이지 컨트롤이나 탭바, 부분조작 컨트롤, 표 화면, 모아보기, 스플릿 뷰와 같은 일반적인 네비게이션 조작방식(컨트롤)을 사용하세요. 사용자들은 이미 이 조작방식(컨트롤)에 익숙하고, 당신의 앱에서도 어떻게 해야할지 직감적으로 알 것입니다.

 

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, seeNavigation Bars.

 

데이터의 위계를 가로지르도록 네비게이션 바를 사용하세요. 네비게이션 바의 제목은 위계 안의 현재 위치를 보여줄 수 있으며, 뒤로가기 버튼은 이전 위치로 돌아가기 쉽게 합니다. 좀 더 자세한 가이드는 Navigation Bars 에서 확인하세요.

 

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.

 

같은 위계의 카테고리나 기능을 보여주기 위해 탭바를 사용하세요. 탭바는 현제 위치에 상관없이 사용자들이 더 빠르고 쉽게 카테고리 간을 이동할 수 있도록 해줍니다. 좀 더 자세한 가이드는 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, seeSplit Views.

 

아이패드에선, 탭바 대신 스플릿 뷰를 사용하세요. 스플릿 뷰는 탭바와 같이 빠른 네비게이션을 제공하면서, 동시에 큰 화면을 더 잘 활용할 수 있게 합니다. Split Views에서 가이드를 참고하세요.

 

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.

 

페이지 조작방식(컨트롤)은 같은 형태의 내용 페이지가 많은 경우 사용하세요. 페이지 컨트롤은 페이지의 수가 몇갠지, 현재 사용중인 페이지는 어디인지를 명확히 보여줍니다. 날씨 앱은 페이지 컨트롤을 위치 맞춤 날씨 페이지를 보여주는데 사용합니다. 좀 더 자세한 가이드는 Page Controls 에서 확인하세요.

TIP

Segmented controls and toolbars don’t enable navigation. Use a segmented control to organize information into different categories. Use a toolbar to provide controls for interacting with the current context. For additional information on these types of elements, seeSegmented ControlsandToolbars.

 

알아두기

부분 조작 컨트롤과 툴바는 네비게이션의 기능을 할 수 없습니다. 부분 조작 컨트롤은 정보를 다른 카테고리에 정리할 때 사용하세요. 툴바는 현재 맥락에서 상호작용하기 위한 제어기능을 제공할 때 사용하세요. 이 종류의 요소들에 대한 더 자세한 정보는 Segmented Controls 와 Toolbars 에서 확인하세요.