Windows 8이 나온 후에는 "Metro UI"에 대해 이야기하고 나중에 "Flat design"에 대해 이야기했습니다. 이제 Android Lollipop이 나온 후 "Material design"에 대해 이야기했습니다. 누군가 "재료 디자인"과 "플랫 스타일"의 차이점을 설명 할 수 있습니까?
"플랫 스타일"과 "소재 디자인"의 차이점은 무엇입니까?
답변:
머티리얼 디자인은 원칙적으로 플랫 디자인과 관련이 없습니다. 머티리얼 디자인은 웹 디자인이 레이어와 애니메이션을 사용하여 브라우저 외부에서 이해할 수있는 방식으로 요소를 묘사하는 방식에서 웹 디자인을보다 사실적으로 만들려는 시도라는 점에서 엄숙한 형태입니다. 시각적으로 평평한 디자인과 머티리얼 디자인은 현재 비슷하지만 머티리얼 디자인은 평평한 디자인 이외의 디자인에 적용될 수 있습니다.
그것은 3 가지 원칙을 따른다
- 물질은 은유입니다
- 대담하고 그래픽 적이며 의도적으로
- 모션으로 의미를 제공
재료 설계에서 레이어링은 z 축을 따라 요소를 앞뒤로 이동하고 사용자와주고받는 요소를 통해 현실적인 그림자를 추가하여 더 많은 의미를 전달합니다. 목록 항목을 제거 할 때 위치에 영향을주는 애니메이션이있는 것과 같은 애니메이션 요소는 사용자 흐름을 개선하고 경험을보다 매끄럽게 만드는 것을 의미합니다. 그렇게함으로써 평면 디자인보다 재료 디자인을 통해 더 많은 의미를 묘사 할 수 있습니다
Google 디자이너는 재료 모델의 레이어와 그림자를 알아 내기 위해 종이 모델을 만들었습니다.
간격, 색상, 사용성 및 위치 및 애니메이션에 대한 자세한 내용을 다루는 다른 디자인 지침이 있으며 Google 웹 페이지에서 주제에 대해 확인할 수 있습니다 .
좋은 방법은 재료 설계 방법과 구현하는 그것이 사용하려면 구글 재료 설계를 사용하여 생성하고 할 앱에 대한 자세한 배울 디자인의 세부 사항에 대해 읽어 이 하나입니다, 브라이언 로빈 받은 편지함 응용 프로그램에.
사람들은 머티리얼 디자인이 플랫 디자인의 일종의 확장이라고 가정 할 수 있지만 실제로는 원리가 다릅니다. 현재 트렌드는 Google이 현재 사용하는 깨끗하고 평평한 디자인을 만드는 것이지만 머티리얼 디자인의 원칙은 그 한계를 넘어 다른 디자인 방법에도 적용될 수 있습니다.
그 머티리얼 디자인은 시각적으로 많은 평면 디자인 아이콘과 스타일을 사용하는데, 그런 의미에서 확실히 관련이 있다고 말할 수 있습니다. 머티리얼 디자인은 물론 시각적 인 시각보다 더 중요합니다.
—
DA01
@ DA01 감사합니다, 나는 가장 최근의 편집에서 내 요점을 더 명확하게 만들려고 노력했다
—
Zach Saucier
이와 관련 하여이 기사 는 iOS를 소재 디자인과 비교하고 각각에 대해 더 많이 배우는 데 유용합니다.
—
Zach Saucier
평평한 디자인 = 고르지 않은 평평한 아이콘과 색상 블록의 현대적인 UI 미학을 가리키는 일반적인 용어입니다.
Metro Design = 평면 디자인 시각적 미학 을 사용하는 Windows 8 용 Microsoft의 새로운 UI 디자인 (현재 Microsoft 디자인 언어 ) .
머티리얼 디자인 = 플랫 디자인 시각적 미학 을 사용하는 Android 용 Google의 새로운 UI 디자인 .
Metro와 Material은 단순한 플랫 디자인 미학이 아니라 상호 작용 디자인, 흐름, 패턴 라이브러리 등에 대해서도 이야기합니다.
Microsoft UI의 이름 변경에 대해 Johannes에게 감사드립니다.
나는 이것이 실제로 무엇의 세부 사항으로 충분히 간다 생각하지 않는다 있습니다 . 그들이 사용
—
Zach Saucier
@ZachSaucier 맞습니다. 영업 이익은 주로 차이점에 대해 묻고있었습니다. 차이점은 하나는 비주얼 스타일의 일반적인 용어이고 다른 하나는 브랜드 UI 지침에 대한 특정 용어입니다.
—
DA01
@Johannes 네, 좋은 메모입니다.
—
DA01
머티리얼 디자인은 안드로이드뿐만 아니라 웹 디자인 및 데스크탑 앱 디자인에서도 사용할 수 있습니다.
—
vovahost
머티리얼 디자인은 평평하지 않습니다. Z 축에 약간 떨어져있는 "머티리얼"의 평평한 층들이 있습니다. 이것은이 물체들이 그림자를 가지고 있으며, 화면에 나타날 때 어딘가에서 와서 더 이상 필요하지 않을 때 떠나야한다는 것을 의미합니다. 즉, 그들은 단지 페이드 인 및 페이드 아웃하지 않습니다.
색상, 간격 및 레이아웃의 다른 많은 측면을 지정하는 많은 디자인 지침이 있습니다.
다음은 그중 일부이지만 몇 가지 Google 검색으로 더 많은 것을 찾을 수 있습니다.
http://www.google.com/design/spec/material-design/introduction.html#
사실, 평평한 디자인은 재료의 배경에서 더 단순 해 보일뿐만 아니라 이러한 모든 애니메이션은 사이트가 아닌 모바일 장치와의 사용자 상호 작용에 더 중점을 둡니다. 또한 디자인에 대한 작업을보다 의식적이고 철학적으로 접근 할 경우 단일 제품에이 두 가지 접근 방식을 사용하는 것을 금지하지 않습니다. Skeuomorphism에 관해서는 인터페이스의 요소를보다 친숙하고 사용자 친화적 인 방식으로 가져 오려고 시도했습니다. 이러한 접근 방식의 스타일은 거의 불가능했습니다… 추가 할 약간의 정보 차이점 : 플랫 디자인과 머티리얼 디자인