머티리얼 디자인가이드 분석: Cards

출처

Cards – Material Design 3

카드의 유형

Elevated

기본적으로 위계를 가진 카드, Z 값이 주는 그림자에 따라 높게, 낮게 측정된다.

Fill 카드보다는 더 배경과 분리가 되지만, Outline 카드보다는 덜 분리된다.

Elevated 버튼의 위계 (1) Container

Filled

색상이 채워져있되 위계를 가지지 않은 카드

배경과 미묘한 분리를 제공하나, Elavated와 Outline 보다는 덜 분리된다.

Outlined

옅은 배경컬러를 가지지만 아웃라인이 있는 카드

다른 카드보다 확실한 시각적 분리를 형성한다. 

머티리얼 디자인가이드_카드

카드의 특징

• 내용에 따라 유연한 레이아웃과 크기를 가짐
• 이미지, 헤드라인, 헬퍼 텍스트, 버튼, 리스트 등 거의 모든 것이 포함 가능함
• 안에 관련된 정보들을 포함하고 있음

State

Light

• Hovered: 더 높은 z값을 주어 유저가 마우스를 올려두었다는 사실을 인지시킨다.
• Focused: z값을 기본보다 낮게 설정하여 '여기에 시선이 꽂혀있다'는 느낌을 준다.
• Pressed: 위계는 Focused와 같이 설정하지만, 유저가 손가락이나 마우스로 클릭한 위치에서부터 퍼져나가는 인터렉션을 주어 누르고 있다는 사실을 인지시킨디.
• Dragged: 해당 카드를 눌러서 든다는 느낌을 주기 위해 가장 높은 z값을 가지며, 눌렀기 때문에 색상은 1단계 낮춘다.
• Disabled: 모든 색상을 2단계정도 빼준다.

Dark 

• Hovered: 백그라운드컬러보다 조금 더 밝은 컬러를 사용해 마우스를 올려두고 있다는 느낌을 준다.
• Focused: 호버보다 조금 더 밝은 색상을 사용하여 여기에 시선을 집중시킨다.
• Pressed: 색상은 호버와 동일하되 유저가 손가락이나 마우스로 클릭한 위치부터 퍼져나가는 인터렉션을 준다.
• Dragged: 해당 카드를 눌러서 든다는 느낌을 주기 위해 가장 밝은 색상을 가지며, 유일하게 쉐도우를 가진다.
• Disabled: 모든 색상을 2단계정도 빼준다.

 

용법

• 관련성 있고 실행 가능한 정보를 쉽게 스캔할 수 있어야 한다.
• 텍스트 및 이미지 같은 요소는 계층 구조를 명확하게 나타내는 방식으로 카드에 배치되어야 한다.
• 카드는 더 깊은 수준의 세부정보나 탐색에 대한 진입점 역할을 할 수 있다.

구성

1) Container

• 모든 카드요소에 들어가있는 형태
• 크기는 요소들이 차지하는 공간에 따라 결정
• 필수요소

2) Contents block

카드 내용은 블록으로 그룹화되고, 중요도에 따라 시각적 강조 기준이 다르게 측정됨

 

(1) Headline: 종종 사진 앨범이나 기사의 이름과 같은 카드의 주제를 전달

(2) Subhead: 기사 작성자 또는 태그가 지정된 위치와 같은 더 작은 텍스트 요소

(3) Supporting text : 기사 작성자 또는 태그가 지정된 위치와 같은 더 작은 텍스트 요소

(4) Media: 추가되는 동영상이나 이미지

• 썸네일: 카드에는 아바타, 로고의 썸네일이 포함될 수 있음
• 이미지: 카드에는 사진, 일러스트레이션 및 날씨 아이콘 같은 기타 그래픽이 포함될 수 있음
• 비디오: 카드에는 비디오가 포함될 수 있음

(5) Action: 버튼 등이 해당 

 

3) Divider

카드에서 영역을 분리하거나 확장할 수 있는 카드영역을 나타내는데 사용할 수 있음

 

액션

프라이머리 액션 영역: 풀 스크린 뷰로 확장하는 하나의 터치대상일 수 있음

버튼: 자세히 알아보기, 장바구니 추가 등의 작업 버튼이 포함될 수 있음

아이콘 버튼: 저장, 하트, 별 4개 리뷰 남기기와 같은 작업 아이콘 버튼이 포함될 수 있음

선택 컨트롤: 칩, 슬라이더, 체크박스 및 선택 컨트롤이 포함될 수 있음

링크된 텍스트: 서포팅 텍스트에 링크가 있을 수 있음

 

측정

 

Shape: 12dp 모서리 변경

왼쪽/오른쪽 패딩: 16dp

카드 사이의 패딩: 최대 8dp

라벨 텍스트 정렬: 왼쪽 정렬