Bars - Navigation Bars

Navigation Bars

 

네비게이션 바는 앱 화면의 최 상단, 상태 바의 아래에 위치한다. 새로운 화면이 나오면 뒤로가기 버튼이 네비게이션 왼쪽에 보이게된다. 

해당 버튼에는 이전 화면 라벨이 달려있다. (예를 들어 1번 화면에서 2번 화면으로 갔을 때 '< 1번화면' 이런 식으로)

 

또한 때때로 네비게이션의 오른쪽 부분에는 수정, 완료와 같은 컨트롤이 포함되어 있으며, 이를 통해 현재 보고있는 화면의 컨텐츠를 관리할 수 있다. 

 

네비게이션 바는 반투명하고 배경 색상값을 조정할 수 있으며 키보드가 화면에 뜨거나 제스처 발생시, 혹은 뷰의 크키가 조정되었을 때 숨김처리 될 수 있다.

 

 

더 몰입감 높은 경험을 위해 일시적으로 네비게이션 숨겨보자. 

예를 들어, 사진 앱에서 풀스크린 사진 뷰에서 네비게이션 바와 다른 화면 요소를 숨기면 사용자가 탭과 같은 간단한 제스처로 네비게이션 바를 다시 보이게 할 수 있다.

 

 

 

Navigation Bar Titles

 

네비게이션 바에 현재 뷰의 타이틀을 보여주는 걸 고려해보자.

대부분의 경우 타이틀은 사용자들이 지금 자신이 뭘 보고있는지 이해하는데 도움을 준다. 그러나 네비게이션 바에 제목 붙이는게 불필요하다면, 타이틀 자리는 비워둘 수 있다. 예를 들어 메모 앱에선 현재 메모의 타이틀을 보여주지 않는다.. (타이틀을 굳이 보여주지 않아도) 메모의 첫번째 줄이 필요한 전부이기 때문이다.

 

현재 맥락를 강조하고 싶다면 큰 타이틀을 사용하자.

큰 타이틀은 콘텐츠를 절대 방해해선 안되지만, 몇몇 앱에선 크고 굵은 큰 사이즈의 타이틀이 사용자가 탐색하고 검색하는데 도움을 줄 수 있다. 예를 들어 탭이 되어있는 레이아웃이라면, 큰 타이틀을 사용했을 때 현재 활성화되어있는 탭을 확실하게 보여주고, 위로 스크롤 했을 때 바로 구분할 수 있도록 도움준다. 음악 앱이 큰 타이틀을 사용해 앨범, 아티스트, 플레이리스트, 라디오와 같은 콘텐츠 영역을 구분짓고 있다. iOS 13 포함 이후 버전에선 큰 타이틀의 네비게이션 바는 기본적으로 배경 요소나 그림자가 없다. 또한 큰 타이틀은 사용자들이 콘텐츠를 스크롤함과 동시에 기본 타이틀로 바뀐다.

 

 

큰 타이틀 네비게이션 바에선 선을 보여주지 마라.

iOS 13 포함 이후의 버전에선 네비게이션 바의 그림자를 지워 아래 선을 숨길 수 있다.(선은 사용자들이 컨텐츠 영역을 스크롤 할 때 자동으로 다시 나온다.) 선 없는 스타일은 큰 타이틀 네비게이션 바와 잘 어우러지고 타이틀과 콘텐츠간 연결감을 높인다. 그러나 이 스타일은 기본 타이틀 네비게이션 바와 잘 어울리진 않는다. 바의 타이틀과 버튼을 구분하기 어려울 수 있기 때문이다. 예외는 아이패드 스플릿 뷰의 경우인데, 타이틀의 두 버전(large, standard) 모두 선 없는 스타일을 사용하며 첫번째와 두번째 뷰의 지속성을 유지할 수 있다.

 

 

 

Navigation Bar Controls

 

네비게이션 바를 너무 많은 컨트롤로 채우지 마라.

일반적인 경우 네비게이션 바엔 현재 뷰의 타이틀, 돌아가기 버튼, 현재 콘텐츠를 관리하는 컨트롤 버튼, 이렇게 세개 이상을 포함시켜선 안된다. 만약 세그먼트 컨트롤을 사용한다면, 바엔 타이틀이나 다른 세그먼트 컨트롤을 포함시켜선 안된다.

 

기본 돌아가기 버튼을 사용해라

사용자들은 기본 돌아가기 버튼을 누르면 위계에 맞게 그들이 거쳐온 화면을 다시 돌아갈 수 있다는걸 안다. 그러나 직접 만든 돌아가기 버튼을 사용한다면, 그 버튼이 여전히 돌아가기 버튼처럼 생기도록, 사용자들이 기대하는 대로 작동하도록, 화면의 다른 요소들과 잘 어울리도록, 앱 전체를 통틀어 지속성을 유지하도록 해라.

 

다중 세그먼트로 구성된 이동경로를 보여주지 마라.

뒤로가기 버튼은 '한가지'의 액션만을 수행해야 한다. 그건 바로 이전 화면으로 돌아가는 것이다. 만약 사용자들이 현재 화면에서 거쳐온 화면을 다시 돌아가는데 길을 잃는다면, 앱 화면의 위계를 재고해봐야 한다.

 

텍스트 타이틀이 들어간 버튼엔 충분한 여백을 줘라

만약 네비게이션 바에 여러개의 텍스트 버튼들을 포함한다면, 이 버튼들의 텍스트는 한 덩어리로 보일 수 있으며, 이는 버튼을 서로 구분하기 어렵게 만든다. 버튼 사이에 고정된 여백을 넣어 구분하자.

 

앱의 정보 구조를 간단히 하기 위해 네비게이션 바에 세그먼트 컨트롤을 넣어봐라

만약 네비게이션 바에 세그먼트 컨트롤을 넣는다면, 위계의 제일 윗단계에만 사용하도록 하고, 그 아래단계에선 정확한 뒤로가기 버튼을 넣도록 하자.