안드로이드 가이드라인(3)

안드로이드 가이드라인(3)_앱바와 시트

jsBae 2024. 12. 3. 13:51

학습목표
앱 바와 시트의 주요 구성 요소(제목, 내비게이션 버튼, 액션 버튼 등)를 학습하고 디자인 가이드라인을 숙지한다.

앱 바App Bar는 자주 사용하는 여러 가지 액션 아이콘과 컨트롤을 모아
앱의 상단이나 하단에 배 치한 툴 바 형태의 UI이다.

1. 하단 앱바

https://m2.material.io/components/app-bars-bottom

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

m3.material.io

아래쪽 앱 바를 통해 아래쪽 네비게이션드로어와 플로팅 버튼을 포함한 최대 4개의 작업에 액세스할 수 있습니다.
FAB의 경우 앱바와 떨어져 배치하는 것은 금물
하단 앱 바에는 현재 화면에 적용되는 액션 아이콘과 내비게이션 드로어 컨트롤 등이 포함된다. 이때 오버플로 메뉴가 있다면 가장 오른쪽에 배치한다.
하단 앱 바는 모바일 전용 UI로, 태블릿이나 데스크톱에는 적용할 수 없다.

Principles

Actionable : 중요한 화면 작업을 강조하고 부동 작업 버튼에 대한 인식을 높입니다.
Flexible : 하단 앱 모음의 레이아웃과 작업은 화면의 필요에 따라 변경됩니다.
Ergonomic 인체공학적- 하단 앱 바는 모바일 장치의 핸드헬드 위치에서 쉽게 접근할 수 있다.

FAB (floating action button)

FAB(이동 작업 버튼)가 있는 경우 아래 앱 표시줄에 다음 두 가지 방법 중 하나로 표시됩니다.

겹침overlap: FAB는 하단 앱바보다 높은 고도에 있으며 바의 모양에 영향을 미치지 않습니다.
Inset: FAB은 하단 앱 바와 동일한 높이에 있으며, 막대 모양이 변형되어 하단 앱 바에 새겨진 노치에 FAB이 도킹할 수 있습니다.
겹쳐서 배치하거나 하단 앱 바에 삽입할 수 있지만, 앱 바와 떨어져 배치하는 것은 금하고 있다.
FAB layout :앱의 각 섹션별 의도를 지원하기 위해 하단 앱바의 레이아웃과 동작을 각 화면에 맞게 변경할 수 있습니다. 예를 들어 화면은 화면 콘텐츠에 가장 적합한 작업에 따라 더 많은 작업을 표시하거나 더 적은 작업을 표시할 수 있습니다.
FAB 스크롤링 : 스크롤 시 하단 앱바가 나타나고 사라질 수 있습니다.
elevation : 하단 앱 바는 8dp의 높이를 가지고 있습니다. FAB와 짝을 이루면 FAB의 휴식 및 상승 높이가 계속 유지되도록 증가해야 합니다.
머티리얼 디자인 페이지에서 가이드라인에 마우스 커서를 위치시킬 때 나타나는 스펙 버튼을 클릭하면, 새로운 창에서 각 가이드라인이나 색상 키라인 등을 확인할 수 있다.
FAB 앞에 배지나 다른 요소를 겹치지 마십시오.

2 상단 앱 바 : 액션 바는 상황에 맞게 변형될 수 있다.

https://m3.material.io/components/top-app-bar/guidelines

Top app bar – Material Design 3

Top app bars display information and actions at the top of a screen, such as the page headline and shortcuts to actions like search and the overflow menu.

m3.material.io

Anatomy

상단 앱 바에는 현재 화면과 관련된 브랜딩, 화면 제목, 탐색 항목, 액션 항목 등이 표시된다.
햄 버거 메뉴 아이콘과 같은 내비게이션 컨트롤은 왼쪽에 배치하고, 바로 옆에 제목을 배치한다.
오른쪽에는 상황에 따른 액션 항목을 배치하고, 오버플로 메뉴가 있다면 가장 오른쪽에 배치한다. 상단 앱 바의 구성 요소와 명칭은 [그림 6-44]와 같다
상단 앱 바의 높이는 제목의 길이에 따라 조절할 수 있으며, 제목에는 사용자가 현재 머물고 있는 화면의 제목이나 사용 중인 앱 이름을 표시할 수 있다.
표준 앱 바에서는 제목을 두 줄로 쓸 수 없 고 텍스트의 길이가 길어서 앱 바를 넘어갈 수도 없다
액션 바는 상황에 맞게 변형될 수 있다. 예를 들어 갤러리에서 사진을 하나 선택하면 상단 앱 바의 제목은 선택한 사진과 관련된 문맥으로 변경된다. 이때는 앱 바의 색상이 바뀌고 햄버거 메뉴 아이콘이 닫기 아이콘으로 변경된다.

3 하단 시트

하단 시트는 기본 콘텐츠를 보완하는 보조 콘텐츠가 표시되는 화면 하단의 고정 공간으로,
주로 모바일에서 사용된다.

https://m3.material.io/components/bottom-sheets/overview

Bottom sheets – Material Design 3

Bottom sheets are surfaces containing supplementary content, anchored to the bottom of the screen.

m3.material.io

Principle

지원(supporting) : 아래쪽 시트에는 화면의 주 UI 영역을 보완하는 내용이 포함되어 있습니다.
유연한(flexible) : 맨 아래 시트는 다양한 내용과 레이아웃을 표시할 수 있습니다.
인체공학적(Ergonomic) : 하단 시트는 모바일 기기에서 쉽게 접근할 수 있습니다.
하단 시트는 사용자가 기본 콘텐츠와 상호작용하는 동안 계속 표시되며, 표준 하단 시트, 모달 하단 시트, 하단 확장 시트 등의 형태로 구현된다.

표준하단시트

표준 하단 시트는 화면의 기본 UI 영역에 함께 배치되며, 두 영역을 동시에 보면서 상호작용할 수 있다. 기본 UI 영역의 내용을 자주 스크롤하거나 팬할 때, 또는 보조 콘텐츠를 화면에 표시할 때 주로 사용된다. 기본 높이는 8dp이며, 기본 UI 영역의 내용을 스크롤하거나 이동할 때 일시적으 로 확장되어 기본 UI 영역을 덮을 수 있다.
설계시 (큰 화면일 때 설명) - 큰 화면 레이아웃에 전체 너비의 하단 시트를 사용하지 마십시오.
더 큰 화면에 적응할 때 하단 시트는 상황에 맞는 메뉴가 될 수 있습니다.
맨 아래 시트를 가로 배치의 사이드 시트로 바꿉니다.

모달 하단 시트는

인라인 메뉴와 모바일 상에 열리는 간단한 대화상자의 대안으로, 나머지 화면과 의 상호작용을 차단하고 추가 공간에 일련의 선택 항목을 제공한다.
모달 하단 시트의 기본 높이 는 16dp이며, 대부분의 UI 요소 위에 나타날 수 있고, 더 많은 옵션을 표시하기 위해 UI 전체를 덮을 수도 있다.
+ 모달 하단 시트의 경우 – 스크림을 투명하게 처리하지 말아야 함 (나머지 화면과의 상호작용 차단을 위해)

- 하단 확장시트는 하단에 고정된 상태로 배치되며, 장바구니와 같은 앱 기능을 지속적으로 표시해 사용자가 작업을 수행할 수 있도록 지원한다. 또한, 채팅이나 댓글 기능, 재생 목록과 동영상 항 목 간의 간접 탐색 등을 지원한다

이때 플로팅 액션 버튼을 사용하지 말 것 – FAB는 오직 액션 전용
화면의 맨 앞 가장자리를 따라 아래쪽 시트를 펼치지 마십시오. 이 레이아웃에서 접힌 시트의 배치는 머리글 및 작업을 방해합니다..

728x90