버튼은 사용자의 작업에 대한 기본 시각적 표시기입니다.
원칙
행동 중심: 버튼은 행동을 트리거한다는 것을 명확하게 전달해야 합니다.
명확한 피드백: 즉각적인 피드백을 제공하기 위해 다양한 상호작용 상태 (마우스 오버, 누르기, 포커스)에서 버튼의 모양이 명확하게 변경되어야 합니다.
일관성: 모든 버튼은 즉시 인식할 수 있도록 핵심 시각적 언어를 공유해야 합니다.
유연성: 버튼 구성요소는 일관성을 유지하면서 아이콘 포함, 다양한 크기 등 일반적인 변형을 수용해야 합니다.
사용 및 배치
버튼은 관련 콘텐츠와 가까운 곳에 배치해야 합니다. 단독으로 배치하거나 카드, 목록과 같은 다른 구성요소와 함께 배치할 수 있습니다.
권장사항
점진적 공개를 사용하여 관련성이 낮은 작업을 표시합니다.
금지사항
너무 많은 버튼으로 사용자의 뷰에 부담을 줍니다.
권장사항
버튼을 사용하여 작업을 요청합니다. 또는 정적 요소에 제목 칩을 사용합니다.
금지사항
버튼을 정적 장식 요소로 사용합니다.
분석
기본
1. 사용 설정됨: 기본 상태입니다.
2. 마우스 오버
3. 탭
크게
1. 사용 설정됨: 기본 상태입니다.
2. 마우스 오버
3. 탭
맞춤설정
버튼에는 기본 및 큰 변형이 포함되며 각 변형에는 기본, 포커스, 눌림 상태가 있습니다. 아이콘을 사용하면 버튼을 더 강조하고 명확하게 설명하며 인식하기 쉽게 만들 수 있습니다. 버튼 크기는 중요성을 강조하는 데 도움이 됩니다.
기본
| 속성 | 맞춤설정 | 기본값 |
|---|---|---|
| 도형 | 예 | Large, Circle(대형, 원형) |
| 패딩 | 예 | 16 dp, 8 dp |
| 테두리 | 예 | 2 dp, #606460 |
| 텍스트 | 예 | Body Small |
| 앞부분 아이콘 | 예 | 40 dp |
| 후행 아이콘 | 예 | 40 dp |
| 크기 | 예 | 최소 높이 56dp |
| 깊이 | 예 | 0 |
크게
| 속성 | 맞춤설정 | 기본값 |
|---|---|---|
| 도형 | 예 | Large, Circle(대형, 원형) |
| 패딩 | 예 | 20 dp, 8 dp |
| 테두리 | 예 | 2 dp, #606460 |
| 텍스트 | 예 | Body Small |
| 앞부분 아이콘 | 예 | 56 dp |
| 후행 아이콘 | 예 | 56 dp |
| 크기 | 예 | 최소 높이 72dp |
| 깊이 | 예 | 0 |
| Surface | 아니요 |