UI 컴포넌트 오픈북을 읽고, UI 스터디 목적으로 기록합니다.
•
BOTTOM NAVIGATION
•
Bottom navigation : 서비스의 주요 화면 간 이동을 돕는 컴포넌트
•
ANATOMY, 컴포넌트 내부요소
•
Bottom navigation, 컴포넌트 내부요소 (출처 : 책 참고하여 본인 제작)
1) Container
2) Icon
3) Text label(Optinal)
4) Small badge(Optional)
5) Large badge(Optional)
•
사용 방법 팁
Bottom navigation에는 최소 세 개에서 최대 다섯 개의 메뉴를 배치할 수 있다. 서비스의 상황에 따라 판단하여 텍스트 라벨(Text label)을 제외한 아이콘만으로도 표기할 수 있다.
•
PLACEMENT, 배치
•
Bottom navigation 을 FAB(Floting Action Button)과 함께 사용할 경우 FAB 하단에 배치한다.
•
Dialog, Bottom sheet, Navigation drawer, 키보드 등 기능을 완료하는 데 필요한 요소로 인해 일시적으로 가려질 수 있으나, 어떤 화면에서도 영구적으로 접근이 차단되어선 안 된다.
•
STATES, 상태
•
Bottom navigation 은 아이콘, 텍스트 라벨, 컨테이너 색상 값 등을 변경하여 비활성화 상태(Inactive) 와 활성화 상태(Activated)를 표시한다.
1) Inactive
•
Default(Inactive)
•
Focused
•
Pressed
•
Hover
2) Activated
•
Activated
•
Focused
•
Pressed
•
Hover
•
SPEC, 제작 가이드
Bottom navigation, 제작 가이드 (출처 : 책 참고하여 본인 제작)
•
각 아이템의 너비 값은 디바이스의 넓이를 아이템 개수로 1/n 하여 계산한다.
•
안드로이드의 경우 각 아이템의 너비 값은 최소 72dp를 권장한다.
•
컨테이너 높이 값은 최소 56dp를 권장한다.
•
출처 : UI 컴포넌트 오픈북 For Android
•
나의 코멘트
•
레퍼런스를 찾아보면서, Text label 폰트 사이즈는 10, 12를 사용하는 케이스를 보았다.
Bottom navigation 제작 시 참고하려고 한다.
•
Gmarket Design System navigation 컴포넌트 케이스도 정리가 잘 되어있어 참고하기 좋은 사례이다.
•