[HIG] App Architecture - 5.Navigation

Alimleon·2021년 1월 26일

HIG 읽기

목록 보기

1/7

우선 왜 2-5 부터 있는지부터 얘기하면 그 전까지의 내용은
https://macaronpark.github.io/hig-1/
이 분이 아주 잘 설명해 놓으셔서 나도 이거 보고 하다가 navigation 부터는 없길래
내가 직접 번역하고 읽어보려고 한다. 그 전 내용도 정리하긴 했지만 위의 글과 다를 바가 없기 때문에 그 전 내용이 궁금하면 위에서 보세요 😊

원문을 제가 이해한 대로 번역(?)한거라 의역, 오역이 있을 수 있습니다. 피드백 많이 해주세요 ㅎㅎ

사람들은 그것이 그들의 기대를 충족시키기 전까지 앱의 네비게이션을 알아차리지 못한다. 개발자는 네비게이션에 주의를 끌지 않으면서 앱의 구조와 목적을 도와주는 방식으로 네비게이션을 구현해야한다.

목적 화면에 도닥할 때 까지 한 화면 당 하나의 선택만 있도록 해라. 다른 목적지로 가기 위해서는 단계를 되돌리거나 처음부터 다시 시작하여 다른 선택을 해야한다.

설정 앱과 메일 앱은 계층적 네비게이션 스타일을 사용한다.

여러 콘텐츠 범위 사이에서 전환한다. 뮤직, 앱 스토어가 플랫 네비게이션 스타일을 이용한다.

컨텐츠 중심 혹은 경험 중심 네비게이션

컨텐츠 사이에서 자유롭게 움직이거나 컨텐츠 자체가 네비게이션을 결정한다. 게임, 북 또는 다른 몰입감 있는 앱이 보통 이 방식의 네비게이션을 사용한다.

몇몇 앱은 여러 스타일의 네비게이션을 혼합하기도 한다. 플랫 네비게이션 스타일을 사용하는 앱에서 각 카테고리 마다 계층형 네비게이션을 사용할 수도 있다.

명확한 경로를 제공해라.

사용자는 항상 현재 위치가 앱 내에서 어디에 있는지 알고 있어야 하며, 다음 목적지로 어떻게 가야하는지 알아야한다. 네비게이션 스타일에 관계없이, 컨텐츠로 가는 경로는 논리적이고, 예측 가능하며, 따르기 쉬워야 한다.

일반적으로 각 화면 당 하나의 경로를 제공해라. 만약 다양한 컨텍스트에서 화면을 보여야 한다면 action sheet, alert, popover 나 modal view를 고려하자.

빠르고 쉽게 컨텐츠에 접근할 수 있도록 데이터 구조를 설계해라

최소 탭, 스와이프, 스크린 수를 요구하도록 정보 구조(information structure)를 구성할 것.

유동성을 만들기 위해 터치 제스처를 활용할 것

최소한의 마찰(터치)로 인터페이스를 움직일 수 있도록 해라. 예) 화면의 사이드를 스와이프하여 그 전 화면으로 돌아가는 것.

기본 네비게이션 요소를 사용해라

page control, tab bar, segmented control, table view, collection view, split view과 같은 기본 요소를 사용해라. 사용자들은 이미 이러한 요소에 친숙해져 있으며, 앱의 사용법을 직관적으로 알 수 있다.

데이터의 계층을 탐색하기 위해 네비게이션 바를 사용해라

네비게이션 바의 타이들은 현재 계층의 위치를 표시해준다. back 버튼으로 쉽게 그 전 위치로 돌아갈 수 있다. 더 자세한 내용은 Navigation Bars.

컨텐츠 혹은 기능의 모음을 표시하려면 탭바를 사용해라.

~~peer categories라고 쓰여있는데 뭐라고 해야할지,,~~

탭바는 현재 위치와 관계없이 빠르고 쉽게 카테고리를 스위치 할 수 있다. 더 자세한 내용은 Tab Bars.

아이패드에서는 탭바 대신 스플릿 뷰를

스플릿 뷰는 큰 화면에서 효과적으로 탭바와 같이 빠른 전환을 제공해 준다.

더 자세한 내용은 Split Views.

같은 타입의 컨텐츠를 가진 다량의 페이지를 표시할 때는 페이지 컨트롤을 이용해라

페이지 컨트롤은 현재 페이지와 사용 가능한 페이지 수를 명확하게 전달한다. 예를 들어, 날씨 앱에서 지역 별 날씨 페이지를 보여주기 위해 페이지 컨트롤을 사용한다. 더 자세한 내용은 Page Controls.

Tip)

segmented control 과 toolbar는 전환을 하지 않는다. (don't enable navigation) - 즉, 현재 화면을 벗어나지 않는다. 세그먼트 컨트롤은 다른 카테고리의 정보를 표시할 때, 툴바는 현재 컨텍스트와 상호작용을 제공할 때 사용해라. 더 자세한 내용은 Segmented Controls, Toolbars.