오늘도 더 나은 코드를 작성하였습니까?

Android Material Design(안드로이드 머터리얼 디자인) 본문

Android Material Design

Android Material Design(안드로이드 머터리얼 디자인)

hik14 2022. 10. 28. 14:51

Material은 팀이 Android, iOS, Flutter 및 웹을 위한 고품질 디지털 경험을 구축할 수 있도록 돕기 위해 Google에서 만든 디자인 시스템입니다.

 

Principles

Material is the metaphor

머티리얼 디자인은 빛을 반사하고 그림자를 드리우는 방식을 포함하여 물리적 세계와 그 질감에서 영감을 받았습니다.

재료 표면은 종이와 잉크의 매체를 재해석합니다.

 

Bold, graphic, intentional

머티리얼 디자인은 print design method(타이포그래피, 그리드, 공간, 크기, 색상 및 이미지)을 사용하여 시청자가 경험에 몰입할 수 있도록 계층 구조, 의미 및 초점을 만듭니다.

 

Motion provides meaning

모션은 미묘한 피드백과 일관된 전환을 통해 주의를 집중시키고 연속성을 유지합니다.
component가 화면에 나타나면 상호 작용으로 환경을 변형하고 재구성하여 새로운 변형을 생성합니다.

 

Components

Material Components는 사용자 인터페이스를 만들기 위한 대화형 빌딩 블록이다.

focus, selection, activation, error, hover, press, drag, and disabled states를 전달하는 기본 제공 상태 시스템을 포함된다.

 

Components 라이브러리는 Android, iOS, Flutter 및 웹에서 사용할 수 있습니다.

Components는 다음을 포함하여 다양한 인터페이스 요구 사항을 충족해야 한다.

 

display:  card, list 및 sheet와 같은 구성 요소를 사용하여 콘텐츠를 배치하고 구성합니다.


navigation: drawer(서랍) 및 tab과 같은 구성 요소를 사용하여 사용자가 제품을 이동할 수 있습니다.


Actions:  사용자가  floating action button과 같은 구성 요소를 사용하여 작업을 수행할 수 있도록 합니다.

 

input: 사용자가 텍스트 필드, 칩 및 선택 컨트롤과 같은 구성 요소를 사용하여 정보를 입력하거나 선택할 수 있도록 합니다.

 

Communication: 스낵바, 배너 및 대화 상자와 같은 구성 요소를 사용하여 주요 정보 및 메시지에 대해 사용자에게 경고합니다.

Resources

- 사용법, 동작 및 사양을 다루는 구성 요소 지침
- Android, iOS, 웹, Flutter용 개발자 문서 및 코드
- resource page에서 Figma에 대한 다운로드 가능한 디자인 파일

https://m2.material.io/resources

 

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

m3.material.io