[iOS] HIG Navigation 공식문서 정리 - Lawn

Lawn·2022년 6월 2일

🌱 iOS HIG Study

목록 보기

7/13

안녕하세요 🌱 Lawn입니다 HIG 스터디 모임을 통해 공부한 내용을 정리했습니다.

🍀 Comments 네비게이션은 공기와 같아야한다. 사용자가 원하는 곳까지 도달하는데 도움만 주어야한다.

앱에서 네비게이션이 잘 적용이 됬다면, 사용자들은 네비게이션의 존재에 대해 잘 눈치채지 못할 것이다. 네비게이션 바가 그 자체로 사용자의 주의를 끌지 않으면서, 앱의 목적과 구조를 잘 나타내도록 해야한다. 사용자에게 자연스럽고 친숙하게 느껴져야 하되, 화면에서 사용자의 시선을 뺐으면 안된다. iOS에는 주된 3가지 스타일의 네비게이션이 있다.

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

Navigagtion2

플랫(평면) 네비게이션, 다수의 카테고리를 번갈아 전환한다. 음악과 앱스토어에서 이 스타일의 네비게이션을 사용한다. 탭이라고 생각하면 된다.

Navigation

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

Navigation3

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

🍀 Comments 항공사 앱이나 쇼핑몰 앱들을 보면 보통 좋지않다. 실력이 없다기보다 여러가지 비즈니스적 이유때문에 그럴수 있는데 특히 하나의 뷰를 여러 곳에서 들어가게 만들어 놓았다. 별로 좋지않다.

Always provide a clear path.

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

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

내용을 빠르고 쉽게 얻을 수 있는 정보 구조를 설계하자. 탭, 스와이프, 스크린의 갯수가 최소한으로 요구되도록 정보 구조를 체계화하자. 최소한의 탭으로 사용자가 원하는 정보까지 어떻게 가는지 세보아야 한다.

Use touch gestures to create fluidity.

부드러움을 위한 터치 제스처를 사용하자. 사옹자가 부드럽게 화면을 이동할 수 있도록 하자. 예를 들어, 이전 화면으로 돌아가기 위해 (별다른 버튼을 누르지 않아도) 화면 한쪽을 스와이프 하게 만들 수 있다.

🍀 Comments 실력이 된다면 커스텀 해도된다. 하지만 그게 아니라면 낭비일 수 있다. 툴바가 IOS가 업데이트 되면서 좀 작아졌는데, 가로 세로모드가 자동으로 변경되도록 업데이트가 됬다. 커스텀을 하면 이쁘긴 하지만 시간과 자원이 없다면 그냥 기본을 사용하자.

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

데이터의 계층을 가로지르도록 네비게이션 바를 사용하자. 네비게이션 바의 제목은 계층 안의 현재 위치를 보여줄 수 있으며, 뒤로가기 버튼은 이전 위치로 돌아가기 쉽게 한다. 좀 더 자세한 가이드는 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 Views에서 가이드를 참고하자.

🍀 Comments 페이지 컨트롤로 페이징이 가능한데 이것도 10개를 넘는다 싶으면 차라리 테이블 뷰로 리스트로 해서 넘어가게 만드는것이 좋다. 사용자들이 지루해 할 수 있다. 하지만 책이나 만화같은 경우는 상관없다.

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

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

🍀 Comments 탭바는 여러 카테고리를 연결하는 4~5개의 버튼으로 이루어진 네비게이션 이고, 툴바는 네비게이션 바의 확장이다. 보통 네비게이션 바에 제목과 백 버튼이 들어가니까 툴 바를 사용한다. 툴바는 독립적인 어떤 역할을 하는게 아니라 그냥 네비게이션의 멀티로 보자.