HIG

Navigation

motosw3600 2022. 1. 30. 17:59

Navigation

사람들은 앱이 기대에 미치지 않을 때 까지 네비게이션 바를 인식하지 못하는 경향이 있다. 당신의 역할은 앱 자체에 주의를 기울이지 않고 앱의 구조와 목적을 지원하는 방식으로 네비게이션을 구현하는 것이다. 네비게이션은 자연스럽고 친숙하게 느껴져야 하며 인터페이스를 지배하거나 콘텐츠에서 초점을 멀어지게 하면 안된다. iOS에선 세가지 네비게이션 스타일이 있다.

 

1.Hierarchical Navigation

목적지에 도착할 때 까지 스크린 하나당 하나의 초이스만 제공해라. 다른 목적지로 가기위해 뒤로가거나 처음부터 다시 시작하거나 다른 결정을 선택해야 한다. Settings과 Mail이 Hireachical Navigaion 스타일을 사용한다.

 

2. Flat Navigation

여러 콘텐츠 카테고리간에 전환이 가능하다. Music 및 App Store가 Flat Navigation스타일을 사용한다.

 

 

3. Content-Driven or Experience-Driven Navigation

컨텐츠 사이에 자유롭게 움직이거나 컨텐츠 자체로 네비게이션을 정의한다. 게임과 books, 다른 몰입형 앱은 보통 이러한 네비게이션 스타일을 사용한다.

 

몇몇앱은 다양한 네비게이션 스타일을 조합해서 사용한다. 예를들어 flat navigation은 각각의 카테고리안에 hierarchical navigation을 사용할 수 있다.

 


 

Always provide a clear path

항상 명확한 path를 제공해라. 사람들은 그들의 앱에서 항상 그들이 어디에 위치하는지, 어떻게 다음 목적지에 도착할 수 있는지 알아야 한다. 네비게이션 스타일에 관계없이 컨텐츠를 통한 path가 논리적이고 예측가능하고 따라가기 쉽게 만드는 것은 필수적이다. 만약 여러 컨텍스트안에서 화면을 봐야할 경우 action sheet, alert, popover 또는 modal view를 사용해라.

 

Design an information structure that makes it fast and easy to get to content

빠르고 컨텐트에 쉽게 접근할 수 있게 구조를 설계해라. 구조를 최소의 탭과 스와이프와 화면을 요구하도록 구조화해라.

 

Use touch gestures to create fluidity

터치 제스처를 사용하여 유동성을 만들어라. 최소한의 마찰로 인터페이스를 쉽게 이동할 수 있다. 예를들어 사람들이 화면 측면에서 스와이프하여 이전 화면으로 돌아가도록 할 수 있다.

 

Use standard navigation components

표준 네비게이션 컴포넌트를 사용해라. 가능한 page control, tab bars, segmented control, tableview, collection view같은 표준 네비게이션 컨트롤을 사용해라. 

 

Use a navigation bar to traverse a hierarchy of data

데이터 계층 구조를 탐색하기위해 네비게이션 바를 사용해라. 네비게이션 바의 타이틀은 계층에서 현재 위치를 보여주고 이전 화면으로 돌아가기 쉬운 back button을 제공한다. Navigation Bars참고

 

Use a tab bar to present peer categories of content or functionality

탭바를 사용하여 콘텐츠 또는 기능의 피어 카테고리를 나타내라. 탭바는 현재 위치에 상관없이 카테고리 사이에 쉬운 이동을 가능하게 한다.

Tab Bars참고

 

On iPad, use a split view instead of a tab bar

아이패드에서 탭바대신 split view를 사용해라. split view는 탭바와 공일한 빠른 네비게이션을 제공하는 동시에 큰 디스플레이를 더 잘 활용한다. Split Views참고

 

Use a page control when you have multiple pages of the same type of content

콘텐츠 유형이 동일한 여러 페이지가 있는 경우 페이지 컨트롤을 사용해라. 페이지 컨트롤은 사용 가능한 페이지수와 현재 활성화된 페이지를 명확하게 전달한다. 날씨 앱은 페이지 컨트롤을 사용하여 위치별 날씨 페이지를 표시한다. Page Controls참고

 

Tip
Segmented control과 toolbar는 네비게이션을 제공하지 않는다. 세그먼티드 컨트롤을 다른 카테고리 안의 정보를 조정할 때 사용해라. toolbar를 현재 컨텍스트와 상호작용하기 위한 컨트롤을 제공하는데 사용해라. 이러한 유형의 요소에 대한 추가 정보는 Segmented ContrlToolbars참고

'HIG' 카테고리의 다른 글

Accessing User Data and Resources  (0) 2022.02.16
Modality  (0) 2022.01.30
Launching  (0) 2022.01.21
Progress Indicators  (0) 2022.01.20
Loading  (0) 2022.01.20