[Material Design 01] Components Action / Common Buttons

https://m3.material.io/components

Components – Material Design 3

 

Action

 

버튼 (Button) & 플로팅 액션 버튼 (FAB)

 

 

1. Elevated button

2. Filled button

3. Filled tonal button

4. Outlined button

5. Text button

6. Icon button

7. Segmented button

8. Floating action button (FAB)

9. Extended FAB

 

 

Common Buttons 일반 버튼

Can contain an optional leading icon

아이콘을 포함할 수 있음

Five types: elevated, filled, filled tonal, outlined and text

Keep labels concise and in sentence-case

라벨을 간결하게 유지

Containers have fully rounded corners and are wide enough to fit label text

모서리가 완전히 둥글고 라벨 텍스트에 맞게 충분히 넓음

 

Usage

1. 버튼 위치

Dialogs 대화 상자

Modal windows 모달 창 

Forms

Cards

Toolbars

가장 중요한 곳에 filled button 사용

 

2. 화면에 버튼을 과도하게 사용해서는 안됨

(좌) Do (우) Don't

 

3. 컨테이너 넓이는 라벨 텍스트의 크기나 레이아웃 그리드에 맞춰야 함

(1, 2) Do (3) Don't

Label text

버튼의 가장 중요한 요소. 사용자가 버튼을 탭할 때 발생하는 작업 설명

 

1. 첫 글자는 대문자로 표시

줄 바꿈X 가독성을 최대화하려면 라벨 텍스트를 한 줄로 유지

(좌) Do (우) Don't

 

2. 텍스트 버튼은 라벨 텍스트의 색상과 스타일에 따라 달라짐

Reserve 작업은 text button 대신 filled button이 더 잘보일 것

Icon (optional)

시각적으로 전달하고 주의를 끄는데 도움이 됨.

 

1. 버튼의 앞쪽, 라벨 텍스트 앞에 배치해야 됨

(좌) 왼쪽에서 오른쪽 언어> 라벨 왼쪽에 배치 (우) 오른쪽에서 왼쪽 언어> 라벨 오른쪽에 배치

 

2. 의미를 명확하게 전달하는 아이콘 사용

 

3. 아이콘과 텍스트를 가운데에 세로 정렬하면 안됨

Don't

 

4. 같은 버튼에 두 개의 아이콘 사용 금지

Don't

 

Elevated buttons

 

·기본적으로 그림자가 있는 색조 버튼

·패턴이 있는 배경과 시각적으로 분리되어야 하는 경우

Filled buttons

·저장, 지금 가입, 확인 등 중요한 작업에 사용될 때 시각적 효과가 높음

·Filled button에는 단색의 컨테이너가 있어야 함

Filled tonal buttons

·Filled & Outlined button 사이의 중간 버튼

·우선 순위가 낮은 버튼에서 약간 더 강조하는 상황

·Secondary color 매핑

Fiiled button보다 강조가 적음

Outlined buttons

·중간 강조 버튼 (중요하지만 가장 중요한 작업이 아닐때)

·Filled button과 짝을 이루어 나타남

·색상 그라데이션 배경에 사용 가능

Do

이미지 위에 대비되는 컨테이너를 채워지도록 하면 Label text의 가독성을 높일 수 있음. Filled button을 대신 사용해도 됨

Text buttons

·우선 순위가 가장 낮은 작업에 사용되며, 특히 여러 옵션을 제공할 때 사용

·다양한 배경에 배치 가능

·버튼 상호 작용할 때까지 컨테이너는 표시되지 않음

·Cards, Dialogs, Snackbars 등에 포함되는 경우가 많음 (주의를 분산시키지 않음)

·Label text의 색상과 스타일은 버튼이 아닌 일반 텍스트와 요소 구분 가능해야 함 

(2) Text button은 카드 내용 강조하는 데 도움 (3) Text button 대화 상자의 끝 가장자리에 정렬. 왼쪽에서 오른쪽 언어> 오른쪽에, 오른쪽에서 왼쪽 언어> 왼쪽에 맞게 정렬

Don't 이미지 배경에 Text button 사용 금지

 

Responsive layout

 

·대형 화면 레이아웃을 확장할 때 button을 사용자 요구에 맞게 시각적 표시, 정렬 및 배열 조정 가능

 

·Button은 Parent Container 부모 컨테이너에 따라 크기가 조정됨

 

·버튼 내의 Icon과 Label text는 버튼 넓이가 조정됨에 따라 중앙에 유지되고 서로 고정됨

·함께 확장되도록 내부 요소 그룹화

(좌) Do (우) Don't

 

·Button의 크기와 배치는 카드와 같은 부모 컨테이너가 더 큰 화면에 맞게 조정됨에 따라 변경될 수 있음