두 번째, Material Design의 상단 App Bar 가이드 알아보기

1.용법

머티리얼 디자인 가이드에서 상단 앱바는 현재 화면에 관련된 정보와 액션 버튼들을 노출합니다. 상단 앱바는 브랜딩, 현재 화면 타이틀, 내비게이션 그리고 액션 버튼들로 사용됩니다. 그때그때 상황에 맞는 액션들로 바로 변경이 가능합니다.

상단 액션바의 유형

Regular

일반적인 상단 앱바

Contextual action bar

화면에 맞게 사용된 상단 앱바는 아이템이 선택되었을 때 제공됩니다. 액션이 취해지거나 해지될 때까지 활성화되어 남아있습니다.

2.구성

왼쪽에서 오른쪽으로 언어를 사용하는 상단 앱바에서 요소들의 위치는 다음과 같이 추천됩니다.

-맨 왼쪽에 내비게이션 바를 둡니다.
-내비게이션의 오른쪽에 모든 타이틀을 둡니다.
-내비게이션의 오른쪽에 상황별 액션 버튼들을 위치 시킵니다.
-사용 중이라면 맨 오른쪽에 오버플로 메뉴를 위치 시킵니다.

02.Navigation icon(optional)

내비게이션 아이콘은 선택 사항입니다. 앱바에서는 왼쪽에 위치시켜줍니다. 다음과 같은 형식을 취할 수 있습니다.

-Drawer 메뉴 아이콘
-App의 계층구조를 탐색하는 위로 가기 화살표
-이전 화면으로 돌아가는 뒤로 가기 화살표

03.제목(optional)

앱바의 제목은 다음을 설명하는데 사용할 수 있습니다.

-사용자가 현재 사용 중인 화면
-사용자가 현재 위치한 구역
-사용 중인 앱 이름

기본적으로 타이틀은 바탕화면으로 정렬됩니다. 모바일과 태블릿에서는 기본적으로 OS에 따라 다릅니다.
제목의 텍스트가 길경우 Prominent app bar를 사용하고 두 줄로 행을 만들어줍니다.

04.액션 아이템과 오버플로 메뉴(optional)

액션들은 아이콘 또는 오버플로 메뉴로 앱바 오른쪽에 배치합니다. 오버플로 메뉴는 OS에 따라 다릅니다.

아이콘 배치

가장 자주 또는 많이 사용하는 액션을 왼쪽에 두고 덜한 것을 순차적으로 배치합니다. 앱바에 적합하지 않은 나머지 액션들은 오버플로 메뉴에 넣을 수 있습니다.
디바이스가 가로 방향에서 세로 방향으로 회전하는 경우와 같이 앱바의 너비가 변경되면 오버플로 안의 메뉴들이 메뉴 안팎으로 이동합니다.

3.움직임

01.Scrolling

머티리얼 앱 디자인 가이드에서 상단 앱바는 스크롤링 시 그대로 유지되거나 다음과 같은 방식으로 변형될 수 있습니다.

-위로 스크롤 하면 앱바를 숨깁니다.
-아래로 스크롤 하면 앱바가 나타납니다.

상단 앱바가 스크롤 될 때, 다른 요소들 보다 상위에 있다는 것이 명확해집니다.

스크롤 시, 높이가 나타나고 콘텐츠가 뒤로 스크롤 됩니다.

위로 스크롤 시, 이미지를 사용하는 prominent top app bar는  기본 상단 앱바로 변형될 수 있습니다. 사용자가 페이지 맨 위로 스크롤 할 때까지 prominent mode로 돌아가지 않아야 합니다.

02.Nesting actions

화면의 크기를 조정하면 상단 앱바도 같이 조정됩니다. 액션들은 오버플로 메뉴로 합쳐집니다.

액션버튼들의 위치

액션 버튼들은 오른쪽에서 왼쪽 순서로, 가장 자주 사용되는 액션 버튼을 마지막으로 오버플로 메뉴로 이동합니다.

4.Contextual action bar

01.용법

상단 앱바는 선택된 아이템에 적용 가능한 액션들을 제공하기 위해서 Contextual action bar로 변환이 가능합니다. 예를 들어 사용자가 갤러리에서 사진을 선택하면 상단 앱바는 선택한 사진과 관련 있는 Contextual action bar로 변환됩니다.

상단 앱바가  Contextual action bar로 변형될 때 다음과 같은 변화가 일어납니다.

-바의 컬러가 변경됩니다.
-내비게이션 아이콘이 닫기 버튼으로 변경됩니다.
-상단 앱바 제목 텍스트가 Contextual action bar 텍스트로 변경됩니다.
-상단 앱바 액션들은 Contextual 액션들로 대체됩니다.

Contextual action bar를 닫을 때 상단 앱바로 복귀합니다.

02.구조

화면의 크기를 조정하면 상단 앱바도 같이 조정됩니다. 액션들은 오버플로 메뉴로 합쳐집니다.

Bar

상단 앱바가 Contextual action bar로 변형될 때 상태 변경을 나타내기 위해 컬러를 변경해야만 합니다.

5.스펙

Mobile

Regular top app bar

Extended top app bar