topappbar

머티리얼 디자인(Material Design) 가이드_ 02. App bars : top

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

1.용법

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

상단 액션바의 유형

Regular

일반적인 상단 앱바

02.topappbars-regular

Contextual action bar

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

03.topappbars-contextual

2.구성

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

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

04.topappbars-layout-elements-1
1.Container
2.Navigation icon (optional)
3.Title (optional)
4.Action items (optional)
5.Overflow menu (optional)

01.Bar

상단 앱바는 상단 앱바의 콘텐츠를 담습니다. 다양한 바 높이를 사용할 수도 있습니다.
Regular top app bar, Prominent top app bar, 데스크톱에서만 사용하는 Dense top app barProminent dense top app bar로 나뉩니다.

Prominent top app bar

Prominent top app bar는 긴 타이틀을 사용하거나, 이미지를 사용할 때 또는 더 강한 존재감을 보여주고 싶을 때 사용할 수 있습니다.

05.topappbars-customization-height-prominent-mobile-1
1.Regular top app bar on mobile
2.Prominent top app bar on mobile

Dense top app bar(오직 데스크탑에서만 사용)

2번이 데스크톱에서 사용하는 Dense top app bar입니다.

06.topappbars-customization-height-dense-desktop-1
1.Regular top app bar on desktop
2.Dense top app bar on desktop

Prominent dense top app bar(오직 데스크탑에서만 사용)

2번이 데스크톱에서 사용하는 Prominent dense top app bar입니다.

07.topappbars-customization-height-prominentdense-desktop
1.Prominent top app bar on desktop
2.Prominent dense top app bar on desktop

바에 이미지 삽입

바에 이미지 사용이 가능합니다. Prominent top app bar는 넓은 공간으로 인해 이미지 사용이 권장됩니다. 가독성이 떨어지는 텍스트와 아이콘을 사용하면 안 됩니다.

08.topappbars-images
09.topappbars-images-dont

02.Navigation icon(optional)

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

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

10.topappbars-navigation-icon

03.제목(optional)

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

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

기본적으로 타이틀은 바탕화면으로 정렬됩니다. 모바일과 태블릿에서는 기본적으로 OS에 따라 다릅니다.
제목의 텍스트가 길경우 Prominent app bar를 사용하고 두 줄로 행을 만들어줍니다.
11.topappbars-title-long
일반 상단 앱바에서는 줄바꿈을 하지 않습니다.
12.topappbars-layout-title-dont-wrapped
텍스트 길이를 줄이지 않습니다. 전체 제목을 숨기는 것은 오해를 야기할 수 있습니다.
13.topappbars-layout-title-dont-truncated
한 줄에 맞도록 텍스트 사이즈를 축소하지 않습니다.
14.topappbars-layout-title-dont-shrink

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

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

아이콘 배치

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

15.topappbars-layout-actionoverflow

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로 변형될 때 상태 변경을 나타내기 위해 컬러를 변경해야만 합니다.

21.topappbars-contextualactionbar-elements
1.Close button (instead of a navigation icon)
2.Contextual title
3.Contextual actions
4.Overflow menu (optional)

5.스펙

Mobile

Regular top app bar

22.topappbars-spec01

Extended top app bar

23.topappbars-spec02

Recent Posts

UI/UX 수업을 통해 진행했던 프로젝트들을 소개합니다. 2018년도 4학년 1학기 충남대 디자인창의학과 학생들의 수업 내용입니다. 사용자 리서치를 토대로 사용자 모델링, UX컨셉도출, 정보구조설계, 와이어프레임 및 프로토타이핑, App 디자인까지 전반에 걸쳐 진행된 수업이었습니다. 모든 저작물은 Adobe XD를 기반으로 작업하였으며, 저작권은 학생들에게 있습니다....

현재 우리는 스마트폰을 사용하면서 카카오톡, 페이스북, 인스타그램과 같은 수많은 앱을 사용하는데, 이런 앱들을 개발하기 위해 어떠한 과정이 필요하고 비용은 어떻게 산출되는지 알아봅니다....

VR(Virtual Reality)이 무엇인지 알아보고 이를 잘 활용하기 위하여 어떠한 준비를 해야하는지 알아봅니다....

No Comments

Post A Comment