[HIG] Navigation Bar 🧭

Human Interface Guidelines에 대한 해석과 주관적인 사례 분석을 추가한 글입니다.

Navigation Bar가 뭔데 ❓

Navigation Bars - Bars - iOS - Human Interface Guidelines - Apple Developer

네비게이션바는 스크린의 가장 위, status bar의 아래에 위치하며

계층적인 화면을 파악할 수 있게 하는 요소입니다.

새로운 화면이 나타났을 때는 back button과 종종 이전 화면의 제목이 왼쪽에 나타나고,

오른쪽에는 수정이나 종료 버튼 같은 해당 뷰에서 컨텐츠를 control 할 수 있는 것이 오게됩니다.

 

iCloud

아이클라우드를 예시로 보면,

왼쪽에는 back button과 함께 이전 뷰의 제목이 나타나고,

오른쪽에는 더보기와 같은 버튼이 있습니다.

그리고 앱을 사용하다보면 스크롤을 내렸을 때 네비바가 스을쩍 사라지거나 줄어드는 경우가 있는데, 이런 것들은 아래에서 찬찬히 보도록 하겠습니다

 

---

Navigation Bar Title

1. 제목은 사용자에게 현재 보고 있는 뷰를 이해할 수 있도록 도와주지만, 불필요할 경우는 제목을 비워둘 수 있다

 

메모📝

메모

메모앱의 경우 메모 작성으로 들어갔을 때,

네비게이션 바 타이틀은 없고 뒤로가기 버튼과 이전 뷰의 이름, 더보기와 완료 버튼이 존재합니다.

메모앱에서 메모 작성과 같은 경우는 타이틀이 없기 때문에 생략된 것 입니다.

 

 

앱스토어🛒

앱스토어

앱스토어도 네비게이션바 타이틀이 없습니다!

앱에 대한 상세 정보를 보여주는 뷰로, 앱의 이름이 타이틀과 마찬가지의 역할을 하는데앱스토어 네비바 타이틀은 뒤에서 보겠습니다아

앱아이콘 옆에 크게 이름이 존재하기 때문에 네비바 타이틀이 별도로 불필요한 경우에 속하는 것 같습니다..

 

 

 

2. 강조를 위해 큰 제목 사용한다

타이틀이 너무 커서 콘텐츠에 시선이 가지 않는 경우는 안되지만,

일부 앱에서는 큰 제목이 사용자가 탐색하고 검색할 때 도움을 줄 수 있다고 합니다..

큰 제목은 사용자가 스크롤하기 시작하면 표준 제목으로 전환됩니다.

 

 

3. 큰 제목일 때는 네비게이션바의 테두리를 없애고 표준 제목일 때는 보이기

테두리가 없는 스타일은 제목과 내용의 연결을 자연스럽게 하기 때문에 큰 제목의 탐색바에서 잘 작동합니다.

하지만 표준 제목 네비바에서는 테두리가 없으면 막대의 제목과 컨텐츠를 구분하기 어려울 수 있어서 표시해주는 것이 좋습니다.

 

메일✉️

메일

메일 앱을 보면 뒤로가기 버튼과 함께 메일상자라는 이전 뷰의 타이틀이 나오고, 오른쪽에는 편집이라는 control 버튼이 나옵니다.

임시저장이라는 타이틀을 강조하기 위해 크게 나타나있고,

스크롤을 했을 때 표준 크기로 줄어들어 네비게이션 바에 들어가는 것을 볼 수 있습니다!

그리고! 큰 제목에서 표준 크기 제목으로 줄어들 때,아래 컨텐츠와 구분짓기 위한 테두리가 나타나게 됩니다

 

건강❤️‍🩹

건강

기본 건강앱을 보면 요약이라는 타이틀을 강조하기 위해 크게 적은 것을 볼 수 있습니다

그리고 이 화면을 스크롤할 때 타이틀이 표준 제목 크기로 줄어듭니다!

여기서도 마찬가지로 스크롤해서 표준 크기의 제목으로 나타낼 때 테두리도 나타나서 컨텐츠와 네비게이션바를 구분해주고 있습니다.

 

 

4. 네비게이션 바 타이틀은 가운데 배치하는 것 권장

네비게이션 바를 사용할 때, back button 과 함께 이전 뷰의 제목이 나와있는 경우가 많습니다..

그렇기 때문에 네비게이션 바의 타이틀이 왼쪽에 위치할 경우, 뒤로가기 버튼과의 경계가 애매할 수 있기 때문에 가운데에 위치하는 것이 적합하답니다.

혹은 네비게이션 바 타이틀을 왼쪽에 배치하고 싶은 경우는 이전 뷰의 제목 없이 뒤로가기 버튼만 있는 경우가 많습니다.

 

CGV🍿

CGV

CGV는 이전 화면의 타이틀은 비교적 중요하지 않았던 것 같습니다.

그래서 깔끔하게 이전 타이틀은 없애고, 영화 상세 뷰의 제목이라고 할 수 있는 영화제목만을 가운데가 아닌 왼쪽에 배치해뒀습니다.

 

---

Navigation Bar Controls

1. 네비게이션바 안에 너무 많은 control은 피하기

일반적으로 네비게이션 바 안에는 뷰의 현재 제목, 뒤로가기 버튼, 이 외의 control 하나가 포함되는 것을 권장합니다.

하지만 많은 것을 넣고 싶다면 어쩔 수 없겠죠.. 잘 사이좋게 배치하는 것도..

 

 

알바몬👨‍🍳

알바몬

알바몬에서는 오른쪽에 총 3개의 control 버튼을 제공합니다. (캡쳐 / 즐겨찾기 / 공유)

사실 알바몬을 사용하면서 위의 3개 버튼을 전부 다 사용해본 적은.. 저는 없습니다...

항상 그냥 캡쳐를 해왔어서 캡쳐 버튼은 방금 처음 사용해봤는데, 전체 화면이 저장되더라구요!

또 공유버튼은 탭했을 때 Activity Views의 형태로 올라옵니다!

이런 형태로 올라올거면 더보기같은 버튼 하나로 캡쳐와 공유버튼을 합친 기능을 제공하는 것이

사용자가 보기에 깔끔하게 한눈에 보이지 않을까 하는 생각도 들었습니다.

 

 

 

2. 뒤로가기 표준 버튼 사용 권장

사용자들은 표준 뒤로가기 버튼을 누르면 계층 구조를 통해 자신이 들어온 뷰를 되돌아가볼 수 있다는 것을 알고 있습니다.

뒤로가기 버튼을 custom하는 경우, 앱 전체에서 일관되게 표준과 비슷하게 구성해야 합니다.

 

뒤로가기 버튼 모음전 🔙

왼쪽부터 Instagram, Slack, 사진

Back Button 다들 정말 비슷하게 생겼져

 

3. 여러 계층을 이동하는 경로 X

네비게이션바의 back button은 항상 이전 화면으로 돌아가는 단일 작업만을 수행합니다.

 

4. 텍스트 제목으로 된 버튼에 충분한 공간 제공

네비게이션바에 여러 개의 텍스트 버튼이 있는 경우, 구분하기 어려울 수 있기 때문에

그 사이에 고정 공백을 넣어서 분리합시다.

 

기본 네비바

왼쪽의 경우는 너무 가깝져

저렇게 되버리면 EditDelete 하나인지 Edit이랑 Delete 각각인지 헷갈리는 지경이 될 수 있습니다

또 터치영역도 애매해지기 때문에 사용자가 정확하게 본인이 원하는 액션을 하기 어려울 수 있습니다.

 

5. Segmented control로 계층을 단순하게

네비게이션바에서 segmented control을 사용하는 경우, 계층의 최상위 수준에서만 컨트롤을 사용해야 합니다!

하위 수준에서는 적절한 뒤로가기 제목을 선택해야 합니다.

지그재그

가장 최상위 계층인 홈화면에 위치한 Segment Control 입니다

 

---

ToolBar vs Tab Bar vs Navigation Bar

헷갈려서 살짝쿵 찾아봤슴다

 

ToolBar

Safari

앱 화면 하단에 표시(상단도 간혹...)

현재 뷰 또는 해당 내용과 관련된 작업을 수행하기 위한 버튼 포함

 

 

Tab Bar

Github

앱 화면 하단에 표시앱의 여러 섹션을 쇽샥 전환

같은 계층의 뷰들로 구성

 

Navigation Bar

status 아래,계층적 화면 정보 제공

앱 화면 상단에 위치