관리 메뉴

cmos00

4. 구조구성 컴포넌트 본문

+ 정리하기/모바일 GUI 디자인

4. 구조구성 컴포넌트

cmos00 2017. 5. 3. 16:29
728x90

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 적용사례

728x90

'+ 정리하기 > 모바일 GUI 디자인' 카테고리의 다른 글

6-1. 콘텐츠 디자인 - iOS  (0) 2017.05.05
5. 컨트롤 컴포넌트  (0) 2017.05.05
3. 컴포넌트의 이해  (0) 2017.05.03
2. 모바일과 GUI 디자인  (0) 2017.05.03
1-2. 모바일과 UX/UI/GUI의 이해 2  (0) 2017.05.03