Actions - 행동 구성요소는 사람들이 목표를 달성하는 데 도움이 됩니다.
내가만든 컴포넌트 Actions - Common Buttons버튼은 사용자가 수행할 수 있는 작업을 전달한다.
버튼은 제품의 작업을 나타내는 하나의 옵션일 뿐이므로 과도하게 사용해서는 안된다. 화면에 버튼이 너무 많으면 시각적 계층 구조가 혼란스러워진다.
일반적으로 UI 전반에 걸쳐 Dialogs ,Modal windows, Forms, Cards, Toolbars같은 위치에 배치된다.
가장 중요한 작업에는 시각적으로 눈에 띄는 Elevated button을 사용하는 것이 좋다.
- 개별 작업에 버튼 사용
- 버튼 컨테이너의 너비는 라벨 텍스트에 맞게 설정
- 반응형 레이아웃 그리드에 따라 버튼 컨테이너 너비를 설정할 수 있음
- 너무 많은 버튼으로 UI를 어수선해짐
- 오버플로우 메뉴나 아이콘 버튼에 우선순위가 낮은 작업을 표시하는 것을 고려
- 버튼 컨테이너의 너비는 라벨 텍스트보다 좁아서는 안 됨
Label text
라벨 텍스트는 버튼의 가장 중요한 요소다. 사용자가 버튼을 누르면 발생하는 동작을 설명한다.
버튼 라벨 텍스트을 영어로 쓸 경우 첫 단어와 고유명사의 첫 글자는 대문자로 표기합니다. 이를 통해 텍스트는 고유 명사를 구별할 수 있다. (예: Book with Flights 및 BOOK WITH FLIGHTS)
텍스트 버튼에서 라벨 텍스트는 다른 텍스트와 다른 색상, 스타일 또는 레이아웃을 사용한다.
- 버튼 라벨 텍스트에 문장 대소문자를 사용하고 첫 번째 단어와 고유명사는 대문자로 표기
- 가독성을 최대화하려면 라벨 텍스트를 한 줄로
Container
버튼 컨테이너에는 라벨 텍스트와 선택적 아이콘이 포함된다. 텍스트 버튼에는 마우스를 올리거나 초점을 맞추거나 누를 때만 표시되는 컨테이너가 있다.
버튼 컨테이너는 모서리가 완전히 둥글게 처리되어 있다.
- 버튼의 너비는 라벨 텍스트를 포함하도록 오토레이어로 설정할 수 있음
- 버튼의 너비는 버튼의 라벨 텍스트보다 작아서는 안됨
Icon (optional)
아이콘은 버튼의 동작을 시각적으로 전달하고 관심을 끄는 데 도움이 된다. 라벨 텍스트 앞 또는 버튼 앞쪽에 배치되어야 한다.
- 왼쪽에서 오른쪽으로 쓰는 언어로 된 텍스트가 있는 버튼의 라벨 왼쪽에 아이콘을 배치
- 오른쪽에서 왼쪽으로 쓰는 언어의 텍스트가 있는 버튼의 라벨 오른쪽에 아이콘을 배치
- 의미를 명확하게 전달하는 아이콘을 사용
- 버튼 중앙에 아이콘과 텍스트를 두 줄로 정렬하면 안됨
- 같은 버튼에 두 개의 아이콘을 사용하면 안됨
Elevated button - 시각적으로 배경과 분리가 필요한 경우 사용하는 그림자가 적용된 버튼
높은 버튼은 본질적으로 그림자로 채워진 톤 버튼이다. 버튼이 패턴이 있는 배경과 시각적으로 분리되어야 하는 경우와 같이 꼭 필요한 경우에만 사용한다.
일반적으로 Elevated button은 버튼은 디자인에서 자주 사용된다.
Filled button - FAB(플로팅 액션 버튼) 다음으로 눈에 띄이는 버튼
채워진 버튼은 FAB 다음으로 가장 시각적인 영향을 미치며 저장, 지금 참여 또는 확인과 같은 흐름을 완료하는 중요한 최종 작업에 사용해야 한다.
Filled button은 중요한 작업에 사용될 때 시각적 효과가 높다.
- 컨테이너 크기는 다양한 방식으로 설명할 수 있음
- 채워진 버튼에는 단색의 컨테이너가 있어야 함
- Filled tonal button - Filled button 보다 시각적으로 덜 돋보이는 버튼으로 주로 온보딩 플- - 로우에서 다음(Next)와 같은 경우에 사용
- Filled tonal button은 Filled button과Outlined button 사이의 대안적인 중간 지점이다.
Filled tonal button은 보조 색상 매핑을 사용
Filled tonal button은 Filled button보다 덜 강조됨
Outlined button - 주요 동작이 아닌 경우 사용
Outlined button은 중간 강조 버튼이다. 여기에는 중요한 작업이 포함되어 있지만 앱의 기본 작업은 아니다.
윤곽선 버튼은 버튼 컨테이너 주위에 획을 표시하며 기본적으로 채우기가 없습니다.
개요 버튼에는 덜 중요한 지원 작업이 포함되어 있습니다.
- Outlined button은 Filled button과 잘 어울리며 대체 보조 작업을 나타냄
- 윤곽선이 있는 버튼은 다양한 배경에 배치할 수 있음 (그라데이션이 있는 배경)
- 이미지 위에 Outlined button을 배치할 때는 주의가 필요하다. 레이블 텍스트의 가독성을 떨어트릴 수 있다.
Text button - 문자 형태의 버튼으로 '옵션'과 같은 낮은 강도의 동작에 사용
Text button은 특히 여러 옵션을 표시할 때 우선순위가 가장 낮은 작업에 사용된다.
Text button은 다양한 배경에 배치될 수 있다. 버튼과 상호작용할 때까지 해당 컨테이너는 표시되지 않는다.
텍스트 버튼은 cards, dialogs, and snackbar와 같은 구성요소에 포함되는 경우가 많다. Text button에는 기본 상태에서 눈에 띄는 컨테이너가 없기 때문에 근처 콘텐츠에 방해가 되지 않다.
라벨 텍스트의 색상과 스타일은 버튼이 아닌 텍스트와 요소에서 항상 인식 가능해야 한다.
컨테이너가 없으면 대화 상자 텍스트와 작업을 통합하는 데 도움이 되기 때문에 대화 상자는 텍스트 버튼을 사용한다.
- Text button을 Text Box의 끝 가장자리에 정렬한다. 왼쪽에서 오른쪽으로 쓰는 언어는 오른쪽에, 오른쪽에서 왼쪽으로 쓰는 언어는 왼쪽에 정렬.
+ Responsive layout 반응형 레이아웃
대형 화면 장치의 레이아웃 크기를 조정할 때 버튼은 다양한 상황과 사용자 요구에 맞게 시각적 표현, 정렬 및 배열을 조정할 수 있다.
버튼은 상위 컨테이너에 따라 크기가 조정된다.
버튼은 일반적으로 Card나 Text Box와 같은 컨테이너에 배치된다. 상위 컨테이너의 크기가 다양한 화면 크기에 맞게 조정됨에 따라 컨테이너 내 버튼의 너비, 위치 및 정렬도 변경될 수 있다.
버튼의 위치와 크기는 컨테이너에 따라 달라진다.
상위 컨테이너의 크기가 조정됨에 따라 버튼을 왼쪽, 오른쪽 또는 가운데로 정렬할 수 있다. 버튼의 위치와 크기는 컨테이너에 따라 달라진다.
- 함께 확장되도록 내부 요소를 그룹화
- 버튼 너비가 늘어나도 아이콘과 레이블 텍스트는 중앙에 유지
- 버튼 컨테이너 내부의 요소를 그룹 해제 X
