소피it블로그

[iOS HIG] Human Interface Guidelines - App Architecture (5) Navigation 정리 본문

기획, 디자인/디자인

[iOS HIG] Human Interface Guidelines - App Architecture (5) Navigation 정리

sophie_l 2022. 5. 13. 12:35

https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/navigation/

 

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

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 shoul

developer.apple.com

앱의 구조와 목적에 잘 맞으면서 스스로 지나친 주목을 끌지 않는 네비게이션을 고안해내야 한다. 네비게이션은 자연스럽고 친숙해야 하며 내용의 존재감을 빼앗아와서는 안 된다. 대표적인  네비게이션 형태는 다음과 같다.

 

1. Hierarchical Navigation: 목적지에 도착할 때까지 스크린 당 하나의 선택을 주는 것. 다른 목적지에 가기 위해서는 왔던 길을 되돌아가거나 처음부터 다시 시작하여 다른 선택을 해야 한다. 설정과 메일이 이 네비게이션의 대표적 예시이다.

 

2. Flat Navigation: 다양한 내용 카테고리들 사이를 옮겨다닐 수 있는 것. 뮤직과 앱 스토어가 대표적 예시이다.

 

3. Content-Driven or Experience Driven Navigation: 컨텐츠를 자유롭게 누비거나 컨텐츠 자체에서 네비게이션을 정의한다. 게임, 책 등의 앱이 대표적인 예시이다. 

 

일부 앱은 여러 가지 네비게이션 스타일을 혼용하기도 한다.

 

네비게이션에 관해 고려해야 할 사항들

  • 늘 뚜렷한 길을 제시하라: 사용자들이 항상 앱에서 자신이 어디쯤에 있는지, 다음 목적지로 가려면 어떻게 해야하는지 알게 해야 한다. 내용을 관통하는 길이 논리적이고 예측 가능하며 따라가기 쉽도록 하는 것은 네비게이션 스타일과 상관 없이 중요하다. 보통 사용자에게 각 뷰로 향하는 길을 하나씩 주면 좋다. 만약 한 스크린을 여러 맥락에서 보아야 한다면 액션 시트나 알러트, 팝오버 혹은 모달 뷰를 사용하는 것도 좋다.
  • 내용에 다다를 수 있는 빠르고 쉬운 정보 구조를 디자인하라: 최소한의 탭과 스와이프, 스크린을 거치는 방식으로 정보 구조를 설계하라.
  • 자연스러운 흐름을 위해 터치 제스쳐를 사용하라: 인터페이스를 통과하는 과정에서 마찰을 최소화하라. 예를 들면 이전 화면으로 돌아가게 하기 위해 사용자에게 화면의 사이드를 스와이프하게 할 수도 있다.
  • 표준 네비게이션 컴포넌트를 사용하라: 가능한 한 페이지 컨트롤이나 탭 바, 시그멘티드 컨트롤, 테이블 뷰, 컬렉션 뷰, 스플릿 뷰와 같은 표준 네비게이션 컨트롤을 사용하는 게 좋다. 사용자들이 이런 컨트롤에 익숙하고 직관적으로 이해할 수 있기 때문이다.
  • 데이터의 위계질서를 가로지르기 위한 네비게이션 바를 생성하라: 네비게이션 바의 타이틀이 위계질서에서의 현재의 위치를 보여줄 수 있고, back 버튼은 이전 위치로 가기 쉬운 길을 제공해준다.
  • 내용이나 기능의 카테고리를 동등하게 제시하기 위해 탭 바를 사용하라: 탭바는 사용자들이 현재의 위치와는 상관 없이 쉽고 빠르게 카테고리 사이를 옮겨다닐 수 있게 해준다. 
  • 아이패드에서는 탭 바 대신에 스플릿 뷰를 사용하라: 스플릿 뷰는 아이패드의 큰 디스플레이를 더 효율적으로 사용하는 동시에 탭 바와 같은 빠른 네비게이션을 제공한다.
  • 같은 타입의 내용에 대한 페이지가 여러 개 있다면 페이지 컨트롤을 사용하라: 페이지 컨트롤은 가능한 페이지의 수를 명확하게 보여줄 수 있고 그 중 어느 것이 현재 액티브한지 또한 보여준다. 날씨 앱이 대표적이다.