내비게이션 바
내비게이션 바 (Navigation bar)
내비게이션 바는 현재 화면과 관련된 정보와 동작을 보여주는 요소예요. 앱이나 페이지 제목을 표시하고, 현재 페이지를 기준으로 이동하면서 흐름을 앞뒤로 오갈 수 있게 해주죠. 내비게이션 바의 왼쪽에는 그 페이지의 콘텐츠와 직접 관련된 동작, 가령 편집이나 완료 버튼 같은 걸 배치할 수 있어요.
앱의 주요 섹션 사이를 이동하는 길찾기(wayfinding)를 보여줘야 한다면, 사용자가 이동해도 바뀌지 않는 그런 영역이라면 탭 바를 쓰는 게 좋아요.
출처: 문서
본문
레이아웃 (Layout)
직관적인 계층 구조 (Intuitive hierarchies)
네비게이션이 복잡한 환경이라면 내비게이션 바에 세그먼트 컨트롤을 넣어 계층 구조를 평평하게 만들고 이동을 더 단순하게 해주세요.
접근성 (Accessibility)
내비게이션 바는 그라데이션 배경을 지원해요. 배경의 가장 밝은 부분에서 흰 텍스트의 대비가 충분한지 꼭 확인해야 해요.
콘텐츠 (Content)
내비게이션 바에 페이지 제목을 넣으면 유용한 맥락을 더해줄 수 있지만, 때로는 중복이 되기도 해요. 페이지 제목이 충분한 맥락을 주지 못한다면 그 공간을 비워두거나 다른 제목을 선택하세요.
예를 들어 Outlook 모바일의 캘린더 보기에서는 페이지를 "Calendar"라고 제목을 다는 게 도움이 되지 않아요. 대신 작은 화면에서는 현재 월을 페이지 제목으로 넣는 편이 사용자가 보고 있는 정보를 맥락화하는 데 도움이 되고요.
제목은 최대 한두 단어로 짧게 유지해야 해요. 사용할 수 있는 동작을 명확히 보여주려고 버튼 라벨을 넣는 것도 도움이 돼요. 버튼 라벨을 넣을 때는 내비게이션 바에 충분한 공간이 있는지 꼭 확인하세요.