Material Design
マテリアルデザイン / 2014– / 양식 / 구글 UI
종이와 잉크라는 물리의 비유를 그림자와 겹침의 규칙으로 옮겨 놓은 설계 체계. 요소에 높이를 주고 그림자로 위계를 보이며 움직임에 물리적 인과를 담는다. 이후 UI 설계가 「체계로 배포된다」는 것의 본보기가 되었다.
한눈에 판단
시각적 특징
- 높이로 나타내는 위계와 그림자
- 종이처럼 겹치는 면
- 인과를 보여 주는 모션
- 규격화된 여백의 단위
적합한 용도
- 여러 플랫폼에 일관된 동작을 배포한다
- 위계의 깊이를 시각으로 전한다
이 양식 사용하기
짧은 지침을 프로젝트에 적용하거나 구조화된 사양을 AI 도구에 넘길 수 있습니다.
자세한 제작법과 출처제작 규칙, 실제 사례, 비교, 연구, 인용 형식
사전 항목
- 타이포그래피
- 하나의 서체 가족으로 위계를 짜고 굵기와 크기로 차이를 준다
- 구성
- 8의 배수 격자에 요소를 얹고 여백을 규격화한다
- 재료
- 면에 높이를 주고 그림자의 짙기로 앞뒤를 나타낸다
- 주의
- 그림자를 장식으로 덧붙이지 않는다. 높이의 규칙이 깨지는 순간 위계의 정보는 거짓이 된다.
- 더 읽을거리
- The first specification of 2014 / The table matching elevation to shadow / The change into Material You
관련 항목
- Holo (ホロ)같은 계열: 구글 UI.Material Design와 Holo 비교
- Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)공통 인상: Trust / Play.Material Design와 Flat Design / Vector Minimalism 비교
자주 혼동되는 것
구글 UI 더 보기
구글 UI에서 공통 인상이 많은 항목을 우선해 골랐습니다.
- Material You (Material You)공통 인상: Play / Technique.
이 항목을 인용하기
사전은 링크되기 위해 있다. 글을 쓰는 자리에 맞는 형식을 그대로 가져가면 된다.
- Link
- https://indexstyle.org/ko/styles/material-design
- Markdown
- [Material Design — IndexStyle](https://indexstyle.org/ko/styles/material-design)
- HTML
- <a href="https://indexstyle.org/ko/styles/material-design">Material Design — IndexStyle</a>