버튼
- 동일한 화면에서 다양한 버튼 유형을 사용하여 사용자의 주의를 끌 수 있음
- 총 9가지 유형
- 각각의 버튼에 high, medium, low emphasis가 있음
- 각 버튼마다 집중도가 다르다
High emphasis
- 페이지의 목적에 맞는 주요 기능들에 부여한다.
9. Extended FAB
-작성, 새 스레드, 새 파일 만들기 등
8. FAB
-작성하기
2. Filled button
-저장, 확인, 완료
Medium emphasis
- 페이지의 주요 기능은 아니지만 눈에 띄어야하는 요소
3. Filled tonal button
-저장, 확인, 완료
1. Elevated button
-답변, 전체보기, 장바구니 담기, 휴지통에서 꺼내기
4. Outlined button
-답변, 전체보기, 장바구니 담기, 휴지통에서 꺼내기
Low emphasis
- 추가적으로 필요한 정보, 기능
5. Text button
-자세히 알아보기, 모두 보기, 계정 변경, 켜기
7. Segmented button
-왼쪽 정렬/ 가운데 정렬/ 오른쪽 정렬
6. Icon button
즐겨찾기에 추가, 인쇄
버튼 계층
-
기본 작업 버튼
각 화면에는 주요 동작을 위한 눈에 띄는 버튼이 하나 있어야 한다. 다른 버튼보다 가장 많은 주의를 끌어야 함. -
기타 버튼
레이아웃 내에서 한 번에 두 개 이상의 버튼을 나타낼 수 있다.
여러 버튼을 사용할 때, 한 버튼의 사용 가능 상태가 다른 버튼의 비활성화 상태와 유사하지 않도록 디자인해야한다.
배치
1 - Filled button / High emphasis
2 - Text Button / Low emphasis
3 - Extended floating action button / High emphasis
1. 동시에 두 작업을 해야할 시
- 버튼의 위계를 고려하여 주요 작업 버튼에 강조를 주고, 옆에 있는 버튼은 낮은 위계 처리를 하여 덜 강조한다.
2. 동시에 두 작업 (2) + 한 페이지 내에서의 액션
- 어떤 버튼을 사용하는가는 상관 없다. 다만 버튼 사이의 위계가 있어야한다
- 한 페이지에서의 주요 액션 시, Filled button을 사용할 것
3. (Don't) 여백이 충분할 시
- 가로로 배치 할 수 있는 여백이 충분할 시, 버튼을 세로로 배치하는 것을 지양할 것
- 공간이 충분하면 가로로 배치해도 된다.
Product Design