Navigation bar - HIG

Navigation bars

: 앱스크린의 상단에 위치해있고 현재 화면이 가지는 타이틀을 통해 사용자가 내 앱에서 어떤 화면에 있는지 알려준다.

1. 그러면 타이틀을 다 만들어주는 것이 좋을까? Nope!

 내비게이션 바의 제목이 중복된 것처럼 보인다면, 타이틀을 비워둔다. 예를 들어, 노트는 콘텐츠의 첫 번째 줄이 일반적으로 충분한 맥락을 제공하기 때문에 현재 노트의 제목을 지정하지 않는다!

 

2. 그러면 네비게이션 바는 모든 곳에 다 있는게 좋을까? Nope

더 몰입감 있는 경험을 주기 위해 가릴 수 있음. 예를 들어, 사진은 사람들이 전체 화면 사진을 볼 때 탐색 모음과 기타 인터페이스 요소를 숨김

화면탭이나 아래스크롤을 통해 다시 네비게이션바가 나온다.

 

3. Consider using a segmented control in a navigation bar to flatten the information hierarchy.

segmented control을 통해 상단에 배치함으로써 정보계층을 평평하게 보여줄수 있다. 

4. Use a large title to help people stay oriented as they navigate and scroll.

현재 맥락을 강조하고 싶으면 large title을 통해보여주고 만약 유저가 스크롤을 통해 내리게 된다면 그것은 기본타이틀로 바뀐다.

5.Consider hiding the border of a large-title navigation bar to enhance the sense of connection between title and content

테두리 없는 스타일은 제목과 내용간의 연결성을 높여서 테두리를 대부분 없애는 게 유용하다.

 

그렇다면 우리가 위에서 공부한 것을 피트니스 앱에 녹여보자.

1. 요약이라는 Navigation Title이 존재한다. 

아래에는 활동, 운동 등 많은 콘텐츠가 있다. 현재의 뷰가 어떤 뷰인지 물론 아래들을 보고 알 수 있으나 요약이라는 네비게이션타이틀을 보고 유저는 아! 이 뷰가 각종 콘텐츠들을 요약한 뷰구나? 라는 것을 알 수 있다.

2. 스크롤을 내리게 되면 타이틀이 사라지고 4에 의해 이것은 기본 타이틀로 바뀐다. 

3. 테두리 없는 스타일을 통해 제목과 내용간의 연결성을 높였다. 

4. 다음 뷰로 넘어가면 네비게이션에는 표준 뒤로가기 버튼이 있고 그 텍스트와는 충분한 거리를 주었다.

5. 왼쪽에는 뒤로가기가 있고 오른쪽에는 컨트롤할수있는 버튼들이 있다. 

여기서 특이한 것은 월화수목금토일 저 링들도 navigation으로 들어가 있어 상단에 고정된다.