Material design update 2: Bottom app bar

1. Material Design
Update 2: Bottom App Bar
2018/06/15
UX팀

2. Bottom App Bar
사용방법

3. 원리
하단의 앱 표시 줄(Bottom App Bar)은 플로팅 액션 버튼을 포함하여 내비게이션 드로어 등을 포함한 최대 4개의 액션기능을 제공합니다.
유연핚
하단의 앱 표시 줄의 레이아웃과 동작은
화면의 필요에 따라 다르게 제공될 수
있습니다.
실행 가능핚
하단의 앱 표시 줄은 중요한 화면 동작을
강조하고 플로팅 액션 버튼을 직관적으로
인지할 수 있도록 제공합니다.
인간공학적
하단의 앱 표시 줄은 스마트폰과 같은
휴대기기에서 쉽게 조작할 수 있는 위치에서
제공됩니다.

4. 사용처
이럴 때 사용핛 수 있습니다. 이럴 때는 사용하지 말아주세요.
모바일 디바이스
Only
하단
내비게이션 드로어
접근
2~5개의
동작이 있는 화면
하단에
탐색 메뉴가 있는
서비스
1개 이하의
동작이 있는 화면

5. 유의사항
1
2
3 1
하단의 앱 표시줄은 플로팅 액션 버튼을
제외한 추가 기능이 하나 이하인 경우
제공하지 마십시오.
하단의 앱 표시줄을 사용하면 사용자가
쉽게 편하게 접근할 수 있습니다.

6. 구조 해부

7. 기본 구조
하단 앱 표시 줄에는 현재 화면에서 적용 및 사용할 수 있는 기능이 포함됩니다.
왼쪽에 내비게이션 드로어가 있고 중앙에는 플로팅 액션 버튼이 배치될 수 있습니다. 하단의 앱 표시 줄에 포함된 부가 기능들은
다른 액션 기능들의 우측 끝에 배치됩니다.
컨테이너
(Container)
내비게이션 드로어
(Navigation drawer control)
플로팅 액션 버튼
(Floating action button)
액션 아이콘
(Action icon)
부가기능 메뉴
(Overflow menu control)

8. 위치
하단의 앱 표시줄은 플로팅 액션 버튼 제공여부와 위치에 따라 3가지 레이아웃으로 제공될 수 있습니다.
막대의 반대쪽에 최소 1 개 및 최대 2 개의 추가 동작을 배치 할 수 있습니다.
플로팅 버튼과 3~4 개의 추가 작업이 필요한 서브화면에서 FAB을 사용하십시오.
플로팅 액션 버튼이 필요없는 경우 하단의 앱 표시 줄은 탐색 메뉴 아이콘과
반대편 가장자리에 정렬 된 최대 네 가지 동작을 수용 할 수 있습니다.
가로 방향에서는 작업을 화면 모서리에 맞춰 손쉽게 액세스 할 수 있습니다.

9. 플로팅 액션 버튼(Floating Action Button, FAB)
FAB가 하단 앱 표시줄보다 높은 고도에 위치해 있으며 하단 앱 바의 모양에 영향을 주지 않습니다.
FAB는 앱 표시줄과 동일 높이에 있으며 앱 바는 FAB를 감싸듯한 Dock 형태로 제공합니다.
FAB를 하단 앱 바 외부에 두지 마십시오.

10. 동작

11. 형태의 변화: 뎁스 진입
리스트를 선택합니다. 뒤로 가기를 선택합니다.
Tap Tap

12. 형태의 변화: 스크롤
위로 스크롤하면 하단 앱 표시줄이 숨겨지며 FAB가 있으면
앱 표시줄과 분리되어 화면에 남아있습니다.
아래로 스크롤하면 숨겨졌던 하단 앱 표시줄
이 나타나고 FAB와 다시 합쳐집니다.

13. 컴퍼넌트 높낮이
콘텐츠
스낵바
하단 앱 표시줄
FAB
하단 내비게이션
드로어
0dp 6dp
8dp
12dp
16dp

14. 컴퍼넌트 높낮이: 사례 1
Tap Scroll

15. 컴퍼넌트 높낮이: 사례 2
하단 앱 표시줄은 키패드 호출 시
가려집니다.
키패드 위로 앱 표시줄이 올라가지
않습니다.

16. 내비게이션 기능은 앱 표시줄 이외의
영역에서 제공합니다.
배치: 내비게이션
내비게이션 기능은 하단 앱 표시줄에서
제공하지 않습니다.

17. 배치: 상단 앱 표시줄과의 결합
서브화면에서 상단 앱 표시줄 영역은
내비게이션을 위한 용도로 사용됩니다.
홈 화면의 상단/하단 앱 표시줄 영역에
내비게이션 드로어를 배치하지 마세요.
오직 하나의 앱 표시줄 영역에서맊
제공해야합니다.
부가기능 메뉴 버튼은 앱 표시줄의
가장자리 영역에 배치하세요.
하단 앱 표시줄에는 검색 등과 같은
공통 기능을 제공할 수 있으며, 상단
앱 표시줄에는 화면별 맥락에 맞는
기능을 제공할 수 있습니다.

18. 배치: 스낵바
스냅바(Snackbar) 및 토스트 팝업은
앱 표시줄 상단에서 제공됩니다.
스낵바(Snackbar) 및 토스트 팝업은 앱
표시줄을 가리지 않아야 합니다.

19. 디자인 가이드

20. 디자인 가이드: 커스터마이징 예시

21. 감사합니다.
*자세한 내용은 공식 사이트(Android Developer)에서 확인 할 수 있습니다.