모바일 앱에서 머티리얼 디자인의 아름다운 구현

오늘날 많은 사람들이 영감을 얻기 위해 모바일 앱에서 Material Design의 아름다운 구현을 찾습니다.

네, 머티리얼 디자인이 등장하여 디자인 역사를 바꿨습니다. 최근 2년 동안 모바일 앱 디자인에서 꽤 인기를 얻었고 모바일 앱에서 머티리얼 디자인을 멋지게 구현한 사례가 많이 있습니다.

그러나 그 전에 머티리얼 디자인이 무엇이며 왜 이것이 가장 인기 있고 성공적인 디자인 언어가 되었는지 이해합시다.

머티리얼 디자인이란?

머티리얼 디자인은 2014년 구글에서 개발한 디자인 언어입니다. Google Now에서 데뷔한 "카드" 모티브를 확장한 Material Design은 그리드 기반 레이아웃, 반응형 애니메이션 및 전환, 패딩, 조명 및 그림자와 같은 깊이 효과를 보다 자유롭게 사용합니다.

2015년 현재 대부분의 Android용 Google 모바일 애플리케이션은 Gmail, YouTube, Google 드라이브, Google 문서, 스프레드시트 및 슬라이드, Google 지도, 받은 편지함을 포함한 새로운 디자인 언어를 적용했습니다.

모든 Google Play 브랜드 애플리케이션, Chrome 브라우저 및 Google Keep. Google Drive, Docs, Sheets, Slides 및 Inbox의 데스크톱 웹 인터페이스에도 통합되었습니다.

웹 애플리케이션 사용자 인터페이스를 위한 Material Design의 정식 구현을 폴리머라고 합니다.

이것은 기본적으로 표준을 구현하지 않는 브라우저를 위한 Web Components API를 제공하는 shim인 Polymer 라이브러리와 Material Design의 시각적 요소를 특징으로 하는 "종이 요소 컬렉션"을 포함한 요소 카탈로그로 구성됩니다.

그리드 기반 레이아웃, 전환 효과 및 깊이에 중점을 둔 시스템은 곧 Android 앱에 적용되어 시스템을 iOS의 디자인 표준으로 끌어 올렸습니다.

머티리얼 디자인의 원리

영감을 받은 시각적 단서

머티리얼 디자인의 표면과 가장자리는 실제 종이와 잉크 연구에서 영감을 받았기 때문에 Google은 디자인 철학을 설명하기 위해 "촉각 현실"이라는 용어를 사용합니다.

이를 통해 사용자는 어려움 없이 화면에서 디지털 인터페이스를 시각적으로 이해할 수 있습니다. 현실에 기반한 디자인은 화면의 개체를 인식하고 상호 작용하기 쉽게 만듭니다.

대담한 미학

소재 디자인의 색상 선택은 대담하고 신중합니다. 시선을 사로잡는 색 구성표는 기본 인쇄 기반 디자인 기술과 함께 작동하여 사용자가 경험에 몰입할 수 있도록 합니다.

의도적 인 공백, 가장자리에서 가장자리까지의 이미지 및 큰 타이포그래피를 사용하여 사용자 행동을 강조합니다. 이러한 방식으로 사용자는 화면에서 인터페이스의 목적과 기능을 빠르게 이해할 수 있습니다.

관련 게시물: 모바일 앱 디자인에서 가장 흔히 발생하는 오류

움직임으로 만들어진 의미

인공적이고 기계적인 애니메이션 대신 머티리얼 디자인의 모션은 유동적이고 자연스러워 보입니다. Google에서는 다음과 같은 몇 가지 방법으로 이 작업을 수행할 것을 권장합니다.

• 자연스러운 가속 및 감속: 부자연스러운 움직임을 방지하려면 페이지의 요소가 부드럽게 가속 및 감속되어야 합니다. 갑작스러운 시작, 중지 및 방향 변경은 사용자에게 거슬리고 주의를 산만하게 합니다.
• 시각적 연속성: 두 시각적 상태 사이의 전환은 부드럽고 수월해야 사용자가 곁길로 빠지지 않습니다. 웹 사이트 또는 앱이 한 페이지에서 다음 페이지로 이동할 때 너무 많은 종소리와 휘파람이 필요하지 않습니다.
• 계층적 타이밍: 가장 중요한 내용을 포함하는 요소는 눈이 따르기 쉬운 경로에 배치하여 강조되어야 합니다. 즉, 중요한 요소에 주의를 기울이는 것이 중요합니다.
• 일관된 안무: 애니메이션 요소는 산만해질 수 있으므로 무작위로 전환되어서는 안 됩니다. 대신, 그들은 의미가 있는 질서 정연한 경로로 여행해야 합니다.

머티리얼 디자인은 단순히 질서를 만드는 것이 아니라 목적과 의미가 있는 질서를 만듭니다. Google 브랜드의 감각적 표현입니다.

구매를 발견하면 숭고한 사용자 경험에 대한 Apple의 명백한 독점에 대한 첫 번째 심각한 위협이 될 수 있습니다. iPhone을 사랑하는 사람으로서 저는 처음으로 Android의 방식으로 옆으로 흘끗 쳐다보기 시작했음을 고백해야 합니다.

머티리얼 디자인의 정신을 마비시키는 특수성은 다음 두 가지 사실에 대한 응답입니다.

• 개발자가 UI를 망칠 수 있다면 그렇게 할 것입니다.
• 좋은 디자인의 대안은 디자인이 없는 것이 아니라 나쁜 디자인입니다.

이제 모바일 앱에서 가장 아름다운 머티리얼 디자인 구현을 소개합니다.

머티리얼 디자인을 만든 사람보다 누가 머티리얼 디자인을 더 잘 구현할 수 있습니까? Google 캘린더는 모바일 앱에서 가장 아름다운 머티리얼 디자인 구현 중 하나입니다. 1.000.000 이상의 다운로드로 파티를 흔듭니다.

구글 캘린더

우선 Google 앱은 마침내 실제 플래너의 레이아웃을 모방하는 대부분의 캘린더 앱에서 사용하는 기존 스큐어모픽 디자인을 없앴습니다.

종이에 일정을 적어야 하는 번거로움은 더 이상 없습니다. Google 캘린더는 세로 레이아웃을 제공하며 페이지 상단에 현재 날짜를 표시합니다.

이렇게 하면 다가오는 날짜와 이벤트만 볼 수 있습니다. 아무 일도 일어나지 않는 날은 압축되어 실제로 유용한 것만 보여주기 위해 경험을 더욱 간소화합니다.

인터페이스에 대한 이 단일 변경은 동시에 사용자가 경험의 중심에 머물 수 있도록 하여 UI가 주변에서 움직이도록 합니다. 시차 스크롤링을 사용하면 결합된 정말 멋진 앱을 갖게 됩니다.

에버노트

Evernote는 머티리얼 디자인을 채택한 것으로 종종 찬사를 받으며 모바일 앱에서 머티리얼 디자인을 아름답게 구현한 예입니다.

이 앱은 전체적으로 강력하고 일관된 색 구성표를 가지고 있으며 기능적일 뿐만 아니라 잘 디자인되어 있습니다. 아이콘은 텍스트 메모인지, 손으로 쓴 메모인지, 사진을 찍을 것인지 명확하고 효율적으로 나타냅니다.

Elephant 아이콘은 단순하고 우아하며 웹 사이트, iOS 및 Windows 10 앱도 신중하게 디자인되고 배치되었습니다.

마이크로소프트 헬스

Microsoft Health는 실제로 Play 스토어에서 가장 좋은 예 중 하나입니다.

이 앱은 Band 피트니스 트래커와 함께 작동하도록 설계되었으며 평면 흰색 아이콘과 함께 간단한 수직 레이아웃으로 모든 통계를 표시합니다. 이 제목 중 하나를 클릭하면 패널이 '열려' 통계가 표시됩니다.

UI는 필요한 경우 더 깊이 들어갈 수 있는 옵션이 있는 동시에 개요를 한 눈에 볼 수 있도록 하는 데 좋습니다. 이는 훌륭한 앱 디자인의 특징입니다.

멋진: 나에게 동기를 부여

많은 사람들은 Fabulous: Motivate Me가 모바일 앱에서 가장 정확하고 깊이 생각한 머티리얼 디자인 구현이라고 생각합니다.

이 앱은 선명하고 평평한 이미지와 대담한 색상으로 모든 일반적인 방식으로 새로운 머티리얼 디자인 원칙을 탐구하지만 Play 스토어에서 가장 매력적인 애니메이션도 있습니다.

목록은 Facebook Live의 모바일 애플리케이션 없이는 완전하지 않을 것입니다.

이 앱은 매우 작지만 효과적인 Material Design의 예입니다. 일반적으로 볼 수 없는 방식으로 그림자를 사용합니다. 어두운 대신 밝은 그림자를 사용하여 깊이를 제공합니다.

Material의 주요 측면인 도상학, 애니메이션 및 상호 작용 디자인을 흥미롭게 사용합니다.