4. 구조구성 컴포넌트

1. iOS 컴포넌트

 

 1) Status Bar

 2) Navigation Bar

  - 일반적으로 투명하게 적용되며 Status Bar 바로 아래에 보여짐

  - 가운데는 현재 위치, 좌측은 이전 위치, 우측에는 추가기능 배치

  - Navigation Bar의 디자인은 모든 페이지에서 동일하게 표현되어야 함

  - 현재 위치에 대한 고지가 될 필요가 없는 페이지의 경우 현재 위치를 나타내지 않음

  - 필요에 따라서는 기존 페이지를 덮고 특정 행동을 취하게 표시 가능 

  - 사용자가 콘텐츠에 집중해야 하는 경우 Navigation Bar를 숨김

 3) Tool bar

  - Navigation Bar 우측, 혹은 최하단에 액션을 수행하는 아이콘 형태로 위치 

 4) Tab bar 

  - 쉽게 다른 페이지로 이동하거나 별도의 액션을 실행

  - 6개 이상의 아이콘이 배치 되는 경우 more 아이콘으로 대체 (최대 아이콘 5개 배치)

  - 일관된 사용성 제공을 위해 가로/세로 모두 동일한 갯수의 Tab bar 아이콘 제공

 5) Search Bar

  - 필요에 따라서 Clear버튼 배치, 별도 입력 텍스트 정보를 제공할 수 있음

 6) Scope Bar 

  - 일반적으로 Search Bar와 함께 사용되며, 검색결과의 범주를 결정하는 데 사용

2. Android 컴포넌트

 

 1) 기본구조

 2) Status Bar

  - 기본적으로  App Bar 컬러보다 어두운 컬러를 적용

 3) App Bar 

  - 기존 Action Bar가 Material Design으로 들어오면서 App Bar로 명칭 변경

  - Tool Bar의 한 종류로 브랜딩, 네비게이션, 검색, 액션 관련 요소들이 배치되는 영역

  - Nav Icon: Side Nav 노출, 화살표로 나타나는 경우에는 상위 항목 이동 역할 수행

  - Title: 현재 위치

  - Action Icon: 앱의 구체적인 기능과 연관되는 액션 아이콘이 위치, 검색/좋아요 표시 등이 위치

 4) Tool Bar

  - 기본 높이, 확장 높이로 사용가능

  - 칼럼 너비로 사용 가능

  - 카드보드 형식

  - 플로팅 툴바 

  - 분리형 툴바 

 5) Bottom Tool Bar

  - 화면 하단에 배치되는 Tool Bar로 키보드가 나타날 경우 키보드 위에 배치 가능

  - 필요 정보가 하단에서 올라오는 Shelf형 Tool Bar 

 6) Side Navigation

  - Left: 네비게이션, 제공하는 서비스/콘텐츠의 identity와 관련된 내용 배치

  - Right: 해당 페이지에서 필요로 하는 부가적인 정보 배치

 7) Tab Bar

  - 콘텐츠 카테고리 이동 네비게이션

Default App Bar + Tab Bar	Extended App Bar + Tab Bar

화면 스크롤 시 상단에 남아 있는 Tab Bar	App Bar의 Search가 활성화된 경우

  - Scrollable Tab Bar: 메뉴 시작지점이 좌측에서 일정거리를 둔 상태로 노출

  - Tab Bar의 컬러 적용 사례

  - Tab Bar 적용사례