[Material Design 02] Components Action / Extended FAB

https://m3.material.io/components

Components – Material Design 3

Discover over 30 Material Design UI components and their functions. Understand how to use them to design intuitive and visually appealing user experiences.

m3.material.io

Action

Extended FAB 확장 플로팅 액션 버튼

Use an extended FAB for the most common or important action on a screen

가장 일반적이나 중요한 작업에 사용

Contains both an icon and label text

아이콘과 라벨 텍스트를 모두 포함

The most prominent type of button

가장 눈에 띄는 버튼 유형

Ues when a regular FAB (with just an icon) may not be clear

일반(아이콘만 포함)에 명확하지 않을 때 사용

Usage

1. 긴 스크롤이 있는 화면에서 사용. 스크롤할 수 없는 화면에서 확장FAB 사용 금지

(좌) Don't (우) Do 스크롤하지 않는 보기에서 기본 액션이 필요한 경우 대신 버튼 사용

Additional emphasis

2. 더 많은 강조와 명확성 제공

3. 기본 FAB와 마찬가지로, 화면당 Extended FAB 하나만 사용

추가 작업을 표시해야 하는 경우 Extended FAB, 작은 FAB 페어링

4. 일련의 작업에서 옵션으로 사용해선 안됨. 일반 button이 더 적절함

Container

·Extended FAB는 둥근 직사각형 모양

· 넓이는 고정되거나 유동적일 수 있음

· Fixed-width는 icon, text label, and padding에 따라 정의

· Fluid-width는 screen width 또는 layout grid 같은 화면 크기와의 관계에 의해 정의

Icon

·해당 동작을 직관적으로 나타내야 함

(좌) LTR 언어 경우 text label의 왼쪽에 배치 (우) RTL 언어 경우 text label의 오른쪽에 배치

·표준 FAB와 달리 Extended FAB에는 Icon이 필요하지 않지만 Text label이 없는 아이콘만 쓸 수 없음

Label text

·해당 작업을 설명해야 함

(좌) 짧은 텍스트가 옵션이 아닌 경우에만 텍스트 자르기 (우) Don't 텍스트 줄 바꿈 방지

Placement

·Extended FAB는 UI 읽기를 방해하므로 화면 위쪽 절반 배치 금지

·카드나 다른 컨테이너 안에 넣기 금지

·app bar와 같은 요소에서 벗어나 UI 나머지 부분 위에 배치

오버레이 금지

Responsive layout

·공간이 제한된 경우 Extended FAB > 기본 FAB로 변환

Window size to a compact or medium widow size or navigation drawer

Compact & medium window size 에서는

Extended FAB를 가운데 정렬하거나 화면의 끝 가장자리에 정렬하여 화면 하단에 배치해야함 (RTL> 오른쪽정렬, LTR > 왼쪽 정렬)

아래쪽 앱 바 위에 Extended FAB을 사용하면 화면 공간을 많이 차지하므로 사용 금지

Expanded window size 에서는

화면 오른쪽 하단 또는 탐색 창 내에 표시되어야 함

·Larger window에서는 LTR RTL 언어 모두에서 Extended FAB 오른쪽 정렬 가능

·Extended FAB가 navigation drawer의 맨 위에 있을 수 있음