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

Material Design Theming(머터리얼 디자인 테마) 본문

Android Material Design

Material Design Theming(머터리얼 디자인 테마)

hik14 2022. 10. 28. 15:41

머티리얼 테마를 사용하면 색상, 타이포그래피 스타일 및 모서리 모양을 사용자 지정하기 위한 기본 제공 지원 및 지침을 통하여,  제품의 브랜드의 모양과 느낌에 맞게 머티리얼 디자인을 쉽게 사용자 지정할 수 있습니다.

 

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

 

Color

머티리얼의 색상 시스템은 UI에 색상을 적용하는 체계적인 접근 방식입니다.

전역 색상 스타일에는 primary(brand colors), secondary (brand colors), surface, background, and error 같은 구성 요소에서 semantic names과 정의된 용도가 있습니다.

 

 모든 색상에는 일관성과 접근 가능한 대비를 증진하기 위해 "On" semantic name 에 사용되는 보색이 있습니다.

 

Primary(보라색) 색상 스타일(1)을 컨테이너 색상으로 사용하는 경우 "On Primary(흰색) " 색상(2)을 내부 내용에 사용할 수 있습니다.

Typography

머티리얼 디자인  Type Scale은 헤드라인에서 본문 및 캡션에 이르기까지 모든 것에 대해 13가지 타이포그래피 스타일을 제공합니다.

각 스타일은 인터페이스 내에서 명확한 의미와 의도된 적용을 가지고 있습니다.

서체, 글꼴 두께 및 대소문자와 같은 중요한 속성은 브랜드 및 디자인에 맞게 수정할 수 있습니다.

 

Shape

모양 스타일을 적용하면 주의를 집중시키거나 component를 식별하고 state를 전달하고 브랜드를 표현하는 데 도움이 될 수 있습니다

 

모든 재료 Components는 크기(소, 중, 대)에 따라 모양 범주로 그룹화됩니다.

이러한 Global Style은 비슷한 크기의 구성 요소 모양을 빠르게 변경할 수 있는 방법을 제공합니다.

 

모양 사용자 정의 도구를 사용하여 고유한 모양 스타일을 생성할 수 있습니다.

shape 생성기.

https://m2.material.io/design/shape/about-shape.html#shape-customization-tool

 

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