[Material Desigh 03] Components Communication / Sanckbar

https://m3.material.io/components

Components – Material Design 3

 

 

Comunication

Snackbar 스낵바, 토스트 메시지

Snackbars shouldn't interrupt the user's experience

스낵바는 사용자의 환경을 방해해서는 안됨

Usually appear at the bottom of the UI

일반적으로 UI 아래쪽에 나타남

Can disappear on their own or remain on screen until the user takes action

스스로 사라지거나 사용자가 조취를 취할 때까지 화면에 남아 있을 수 있음

 

Usage

1. 화면 아래쪽에 일시적으로 나타나, 앱이 수행했거나 수행할 프로세스를 사용자에게 알려줌. 

 

Frequency

한 번에 하나의 스낵바만 표시 가능

Actions

single action 포함될 수 있음. "해제" 또는 "취소" 작업은 선택 사항

 

Similar components

1. Dialogs은 중요한 메시지 표시

·메시지 중요도에 따라 올바른 구성 요소 선택

Dialogs 에는 즉각적인 조치가 필요함

 

When to use snackbars

·스낵바는 중단을 최소화하고 사용자 작업이 필요하지 않은 메시지를 전달함

Component	Priority	User action
Snackbar	Low priority 낮은 우선 순위	Optional: 스낵바가 자동으로 사라짐
Dialog	High priority 높은 우선 순위	Required 필수: 사용자가 대화 상자 작업을 수행하거나, 종료할 때까지(사용 가능한 경우) 앱 사용을 차단함

 

Accessibillity requirements for web

웹에서 auto-dismissing 스낵바는 시력이 약하거나 정보를 인식하는 데 추가 시간이 필요한 사용자가 액세스할 수 없음

1. Add inline feedback

·auto-dismissing 스낵바의 정보는 스낵바를 트리거한 작업 인라인이나 근처에 있는 다른 액세스 가능한 방법을 사용하여 전달되어야 함.

ex) "저장" 버튼의 레이블을 업데이트하면 "저장됨"으로 설정하고 동일한 메시지를 전달하는 자동 해제 스낵바를 트리거

 

2. Make the snackbar actionable

·스낵바에 작업을 추가하여 작업이 수행될 때까지 해제되지 않도록 함

 

Text label

 

·compact window size에서는 최대 두 줄 텍스트 가능

수행된 프로세스에 대한 짧고 명확한 update

Do

 

·Icon 추가 금지

메시지에 아이콘이 필요한 경우 Dialog와 같은 다른 구성 요소를 사용하는 것이 좋음

·stylized text 또는 inline link 사용 금지

메시지에 링크가 필요한 경우 대신 버튼을 추가하거나 다른 구성 요소를 사용

Don't

 

Container

 

·회색 배경의 직사각형 용기에 표시됨. text label를 읽을 수 있도록 완전히 불투명해야 함

그림자가 있는 단색 배경색을 사용하여 눈에 띄게 함

 

·Text label은 Text button과 같은 색상 금지

·filled 또는 elevated button을 사용하면 너무 많은 관심을 끌 수 있으므로 금지

Don't

 

·Wide layout에서는 더 긴 text label를 수용할수 있도록 container 넓이 확장

Do

(좌) 앱은 약간의 투명도 적용 가능 (우) Don't container 모양 크게 변경 금지

 

Container

·single text button 표시할 수 있음

앱을 사용할 수 있도록 핵심 사용 사례에 액세스하는 유일한 방법이 되어서는 안 됨

작업을 text label과 구별하려면 text button에 색상이 지정된 텍스트가 표시되어야 함

 

·작업이 길면 세번째 줄에 표시 가능

·사용자가 선택 항목을 수정할 수 있도록 하려면 "Undo" 실행 취소 작업 표시

Do

스낵바는 기본적으로 저절로 사라지므로 해제 작업은 필요하지 않음

 

Placement

At the bottom of a UI

·스낵바는 UI 하단의 기본 콘텐츠 앞에 배치해야 함. 경우에 따라 스낵바를 위쪽으로 밀어 아래쪽에 있는 다른 UI요소와 겹치지 않도록 할 수 있음

·자주 사용하는 터치 대상이나 탐색 앞에 배치 금지

(좌) Do (우) Don't

 

·Web에서 실행 가능한 요소를 완전히 가리지 말 것

(좌) Do (우) Don't

 

·UI가 앱 바 또는 탐색 모음과 같은 영구 탐색 구성 요소를 사용하지 않는 경우에만 화면의 전체 넓이에 걸쳐 있을 수 있음

 

Snackbars and floating action buttons (FABs)

·스낵바는 FAB 위에 표시되어야 함

Don't

 

Responsive layout

Compact window size

·한 줄 또는 두 줄의 텍스트가 들어갈 수 있도록 48dp에서 64dp까지 세로로 확장되어야하며

화면의 선행, 후행 및 하단 가장자리에서 고정된 거리를 유지해야 함

 

Medium & expanded window sizes

·더 긴 텍스트가 들어갈 수 있도록 가로로 크기를 조정해야하며, 텍스트의 이상적인 줄 길이는 일반적으로 40-60자 사이

·중형 및 대형 디스플레이의 스낵바는 optional button이 있는 한 줄의 텍스트를 목표로 해야 함

·더 넓은 레이아웃에서, 화면 하단 왼쪽 정렬 또는 가운데 정렬할 수 있음

Do

Don't

 

Behavior

Appearing and disappearing

·스낵바는 경고 없이 표시되지만 사용자가 페이지 콘텐츠와 상호 작용하는 것을 차단하지 않음

·action이 없는 스낵바는 플랫폼에 따라 4-10초 후에 자동으로 닫힐 수 있음. inline feedback이 없는 한 웹에서는 자동 해제 사용금지

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

·action이 있는 스낵바는 사용자가 작업을 수행하거나 해제할 때까지 화면에 남아 있어야 함

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

Consecutive snackbars

·연속된 스낵바는 한 번에 하나씩 나타나야 함

·action이 없는 스낵바는 자동으로 나타나고 사라지며, 있는 스낵바는 닫을 때까지 화면에 남아 있음

업데이트된 정보가 있는 스낵바는 오래된 스낵바를 즉시 대체할 수 있음

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.