[iOS-HIG] Navigation

Navigation

사람들은 앱의 내비게이션을 잘 알지 못하는 경향이 있다.

내비게이션은 주의를 환기시키지 않고 앱의 구조와 목적을 지원하는 방식으로 내비게이션을 구현해야 한다.

내비게이션은 공기처럼 자연스러워야 한다. 내비게이션이 focus를 가져가면 안된다.

 

iOS에서는 크게 세 가지 스타일의 네비게이션이 있다.

Hierarchical Navigation

목적지에 도착할 때까지 화면당 하나씩 선택한다. 다른 목적지로 가기 위해서는 선택한 길을 다시 되돌아가거나 처음부터 다시 시작해야 한다. (설정, 메일 등 계층적으로 선택지가 나오는 경우 이 스타일의 내비게이션을 활용한다.)

 

 

Flat Navigation

여러 내용 범주 간에 전환을 한다. 서로 다른 카테고리를 묶기 위해 사용한다. 흔히 앱의 아랫쪽에 정사각형 4개로 표시하기도 한다.

(음악, 앱스토어 등 이 스타일의 내비게이션을 활용한다.)

 

 

Content-Driven or Experience-Driven Navigation

켄텐츠를 통해 자유롭게 이동하거나 콘텐츠 자체가 탐색을 정의한다.

(게임, 책, 몰입형 앱들이 이 스타일의 내비게이션을 활용한다.)

 

 

 

Always provide a clear path.

항상 명확한 경로를 제공해야 한다.

탐색 스타일에 상관없이 콘텐츠를 통한 경로가 논리적이고 예측 가능하며 쉽게 따라갈 수 있는 것이 중요하다.

일반적으로 사람들에게 각 화면에 대한 하나의 경로를 제공한다.

multiple contexts를 봐야 하면 alert, popover, modal view등을 사용하는 것을 고려해라.

자세한 내용은  Action Sheets, Alerts, Popovers, and Modality.을 참조

 

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

최소한의 탭으로 사용자가 원하는 정보를 얻을 수 있게 해야 한다.

(요즘은 slide menu를 잘 안쓰고 한번의 탭을 더 해야하기 때문에 비효율적이다.)

 

Use touch gestures to create fluidity.

터치 제스처를 사용해서 부드러움을 만들어라. 마찰을 최소화하면서 인터페이스를 쉽게 이동할 수 있다.

예를 들어, 사용자가 화면 측면에서 손가락을 밀어서 이전 화면으로 돌아가도록 하는 것.

 

Use standard navigation components.

표준 내비게이션을 써라. 최대한 내비게이션말고도 표즌 components를 써야 한다.

사용자는 이러한 컨트롤에 이미 익숙하며 앱 이동 방법을 직관적으로 알고 있다.

(iOS 업데이트의 혜택도 못본다.. 이쁘게 애플이 UI를 업데이트 해준다..)

 

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

내용, 기능의 peer category를 표시하려면 tap bar가 좋다.

slide menu보다 tap bar가 좋다.

 

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

페이지 컨트롤은 사용 가능한 페이지 수와 현재 활성 상태인 페이지를 명확하게 전달한다.

날씨 앱은 페이지 컨트롤을 사용하여 위치별 날씨 페이지를 표시한다. page가 너무 많은 10개 넘으면 페이징은 지루하다..

자세한 내용은 Page Controls.참조

 

TIP

Segmented controls과 toolbars는 내비게이션을 할 수 없다. 카테고리를 나누는 용도이다.

toolbar를 사용해서 현재 context와 상호 작용하기 위한 컨트롤을 제공한다.

자세한 내용은  Segmented ControlsandToolbars참조

 

*이해가 잘 안된다면 자세한 내용은 참조하라는 링크를 보면 앗 저거였구나 하고 생각이 나게 됩니다!

 

 

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

 

※ 문서를 번역한 것이 아닌 문서를 읽고 제 생각을 정리한 글 입니다.

잘못된 설명이나 이해가 있다면 댓글로 달아주시면 감사하겠습니다!!☺️