[UI/UX] 1. 디자인 공통 요소 (4)

9. 네비게이션

사용자가 목적에 이르기까지 페이지 간 자연스러운 이동을 안내하는 시스템.

UI 내 사용자의 이동을 돕는 컴포넌트의 종류는 여러가지가 있음.

• 네비게이션 바
• 탭바
• 툴바
• 탭
• 세그먼트 컨트롤
• 드로월 메뉴(햄버거 메뉴)

네비게이션 설계가 잘못되면, 엉뚱한 페이지로 연결되거나, 페이지에 들어간 후 돌아갈 수 없어 갇히는 등의 문제가 발생할 수 있음. 예를 들어, 상세 페이지에서 뒤로 가기 버튼은 반드시 있어야 함.

 

9.1. 네비게이션 바

상단에 페이지 이름과 뒤로가기, 액션 버튼 등이 함께 있는 바 형식의 컴포넌트.

iOS는 < 이전페이지 이름 텍스트 버튼 / 현재 페이지 이름 / 텍스트로된 액션 버튼 > 순서대로 구성되어 있음.

안드로이드는 < 뒤로가기 아이콘 버튼 / 현재 페이지 이름 / 아이콘 액션 버튼 > 순서대로 구성되어 있음.

 

9.2. 세그먼트 컨트롤

상단에 배치되어, 현재 페이지의 하위 리스트들(메뉴들) 간에 빠르게 이동할때 사용되는 컴포넌트.

탭끼리는 같은 레벨의 메뉴(ex. 앱스토어 내 유료앱/무료앱 카테고리)여야 함.

iOS는 회색의 가로로 긴 직사각형 바 위에 선택된 탭에만 흰색 작은 직사각형이 올라가 있는 형태로 구성되어 있음.

안드로이드는 알약 모양의 긴 바 형태에 선택된 탭만 색이 칠해진 형태로 구성되어 있으며, 스와이프로 탭 이동이 가능함.

OS마다 제공되는 컴포넌트 외에도 다양한 스타일로 제공됨. 알약 모양 칩 타입, 하단에 바가 탭 이름 아래에 따라 다니는 형식 등.

 

9.3. 탭바

하단에 배치되어, 앱 서비스 내에 가장 상위 목록으로 비슷한 레벨 여러 개를 배치한 컴포넌트.

2~5개 정도 탭이 있고, 직관적인 아이콘과 라벨을 사용함.

 

✓ 탭바 사용시 주의 사항

활성화 된 탭과 아닌 탭의 명확한 구분이 필요함.

아이콘이 모호한 경우 라벨 필수.

탭이 5개를 넘어가지 않게 하고, 넘어가면 '더보기' 메뉴로 대체함.

레이블이 너무 길지 않게 직관적으로 작성.

 

9.4. 뒤로가기

뒤로가기 방법에는 안드로이드 방식인 History Back과 iOS 방식인 Hierarchy Back이 있음. (안드로이드에서도 상황에 따라 Hierarchy Back으로 개발하기도 함.)

History Back은 바로 직전/이전 페이지로 뒤로 가는 방식이고,

Hierarchy Back은 계층 구조를 따라 이전 계층으로 가는 방식임. 계층 구조를 따르기 때문에 뒤로 가기를 눌렀을 때 직전 화면이 아닌 더 전의 화면으로 넘어가는 경우가 생김. 예를 들어, "홈 > 뉴스 > 기사1 > 관련기사2 > 관련기사3"가 있고, 기사들끼리 모두 같은 계층이라고 하면, "관련기사3"에서 뒤로가기를 눌렀을 때 "뉴스" 페이지로 가게됨.

 

10. 상태

사용자가 상호작용하는 과정에서 갖는 다양한 상태를 나타내는 것. (버튼 누를 수 활성화 됨/안됨 등)

컴포넌트별로 조금씩 다른 다양한 상태를 가짐.

• Enabled - 활성화됨 (ex. 버튼)
• Disabled - 비활성화됨 (ex. 버튼)
• Pressed - 눌림 (ex. 버튼)
• Selected - 선택됨 (ex. 체크박스)
• On/Off - 켜짐/꺼짐 (ex. 스위치)

10.1. 버튼의 상태

- 활성화: 클릭 가능한 상태.

- 비활성화: 클릭 불가능한 상태.

- 누름: 누르고 있는 상태. 손을 떼면 동작.

 

10.2. 토글(스위치)의 상태

- 켜짐: 기능이 켜짐.

- 꺼짐: 기능이 꺼짐.

 

10.3. 체크박스, 라디오 버튼의 상태

- 셀렉티드: 선택됨.

- 언셀렉티드: 선택되지 않음.

(체크 박스는 여러 개를 선택가능하므로 박스별로 상태를 가짐.)

 

10.4. 페이지 단위의 상태

✓ 빈 상태(Empty State)

목록, 검색 페이지에서 컨텐츠 혹은 검색 결과 여부에 따라 비어 있으면 안내가 필요함. (ex. 검색결과 없음. 장바구니 빔. 알림 없음 등)

 

✓ 문제가 있는 상태

인터넷 연결에 문제가 있는 등 앱의 문제가 아닌 경우, 사용자가 조치를 취할 수 있게 안내를 해야 함. (ex. 인터넷 연결 안됨, 서버 오류, 업데이트 필요 등)