재료 테마 : 자료를 나만으로 만들어!

웹의 끊임없이 진화하는 풍경은 창의적인 감각과 효율적이고 확장 가능한 디자인을 요구합니다. 최고의 제품은 이제 강력한 설계 시스템에 의존하여 접근성 및 사용자 경험을 우선시하면서 브랜드 일관성을 유지합니다. Google 디자인 시스템 인 Material Design은 창의적인 표현과 체계적인 개발 사이의 격차를 해소합니다.

처음에, 재료 설계는 개별 브랜드 아이덴티티를 완전히 표현할 수있는 유연성이 부족했습니다. 피드백은 개선을위한 두 가지 주요 영역을 강조했습니다. 제한된 문체 적응성과 체계적인 브랜드 구현을위한 도구가 불충분했습니다.

Google I/O 2018에서 소개 된 Material Design의 테마 기능은 이러한 문제를 해결합니다. 테마는 디자이너와 개발자가 자료의 강점을 활용하면서 외관을 사용자 정의 할 수 있도록합니다. 여기에는 고유 한 브랜드 경험을 만들기 위해 색상, 타이포그래피 및 모양을 조정하는 것이 포함됩니다.

이 게시물은 CSS (특히 SCSS)를 사용한 웹 테마에 중점을 둡니다. 재료 웹 구성 요소로 구축 된 기본 로그인 템플릿으로 설명하겠습니다.

테마가 설명되었습니다

재료 설계 테마를 사용하면 모든 구성 요소에 영향을 미치는 색상, 타이포그래피 및 모양에 전 세계적으로 조정할 수 있습니다. 겉보기에는 제한적이지만 이러한 조정은 디자인의 전반적인 느낌을 크게 바꿉니다.

색상 사용자 정의

Material.io는 색상 선택 및 대비 점검을 지원하는 컬러 피커를 제공합니다. SCSS를 사용하면 로그인 화면의 모양을 쉽게 수정할 수 있습니다.

 $ MDC-THEME-PRIMARY : #26418F;
$ MDC-THEME-SECONDARY : #D1C4E9;
$ MDC-Theme-Background : #fdf6f9;

재료는 접근성을 위해 $mdc-theme-on-primary 로 자동으로 설정합니다. $mdc-theme-on-primary 및 $mdc-theme-on-secondary 로 텍스트 색상을 무시할 수 있습니다.

타이포그래피 조정

자료는 테마를 통해 사용자 정의 할 수있는 기본 타이포그래피 스케일을 제공합니다. CSS 클래스 또는 믹스 인을 사용하여 각 헤드 라인 레벨에 대해 타이포그래피를 조정할 수 있습니다. 쉽게 Google 글꼴을 사용하겠습니다.

 @import url ( 'https://fonts.googleapis.com/css?family=josefin sans');
$ MDC- 유형의 공모-가족 : unquote ( "Josefin Sans, Sans-Serif");

$ MDC- 유형의 스타일-버튼 : (
 글꼴 크기 : 14px,
 글꼴 중량 : 600,
 문자 스페이스 : 0.05em,
);

모양 수정

모양 사용자 정의는 구성 요소 코너 반경 (버튼, 카드, 시트)을 변경합니다. 재료는 다양한 모서리와 구성 요소 크기에 다른 모양을 허용합니다. 예를 들어:

 $ mdc-shape small-component-radius : 12px 4px;
$ mdc-shape-large component-radius : 8px;

몇 줄의 코드만으로 응용 프로그램을 극적으로 변환했습니다.

창의성을 발휘하십시오

독특한 브랜드 아이덴티티를 만들기 위해 수많은 색상, 타이포그래피 및 모양의 조합이 존재합니다. 아래의 예는 재료 구성 요소를 사용하여 이러한 요소의 다양한 응용 프로그램을 보여줍니다.

실제 사례

Google 자체는 Gmail, Google News 및 Google Play와 같은 제품에서 맞춤형 자료 구성 요소 (Google 자재 테마)를 사용합니다. Lyft 및 Anchor와 같은 다른 회사들도 Material Design의 유연성을 활용하여 고유 한 브랜드 경험을 창출합니다.

시작하기

재료 스타터 키트와 "재료 테마 빌드"글리치 프로젝트를 사용하여 재료 테마 구축을 시작하십시오. 구성 요소를 사용자 정의하기 위해 SCSS 변수를 실험하십시오. 이 변수를 my-theme.scss 파일에 붙여 넣고 구축을 시작하기 만하면됩니다.

요컨대 : Material Design의 테마 기능은 전례없는 유연성을 제공합니다. 오늘 탐험을 시작하십시오!

위 내용은 재료 테마 : 자료를 나만으로 만들어!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!