![Shraddha Sharma의 페이스 북 페이지 [웃기는]](https://gadget-info.com/img/social-media/787/some-hilarious-comments-from-shraddha-sharma-s-facebook-page.JPG)
지난 2014 년 I / O 이벤트에서 Google은 새로운 놀라움으로 다시 돌아 왔습니다. 코드 명 Lollipop으로 공식적으로 새로운 Android 업데이트를 출시 한 외에 Google은 새로운 디자인 언어 인 Material Design을 선보였습니다. 새로운 Lollipop 사용자 인터페이스 개선뿐만 아니라 다양한 기기 및 환경을위한 디자인 시스템입니다.
머티리얼 디자인은 고유 한 방식으로 다른 디자인 트렌드와 차별화되는 주요 기능을 가지고 있습니다. 이름과 마찬가지로 실제 소재 에 영감을 받아 하나의 디자인 시스템에 결합하여 매끄럽고 직관적이며 아름답고 대화 형 사용자 경험을 제공합니다. 이 글에서는 Material Design의 내용을 살펴보고 구현 방법에 대한 빠른 가이드를 제공합니다. Google의 블로그를 인용하여 "This is Material Design"이라고 말하려고합니다.
소개
머티리얼 디자인은 통일 된 디자인 시스템으로, 오늘날의 모든 장치와 플랫폼에서 작동하도록 만들어졌습니다. 태블릿, 스마트 폰에서 데스크톱, Android, iOs, Windows에서 웹 플랫폼에 이르기까지. 모든 디자인과 느낌은 어디에 있든 동일해야합니다.
주요 원칙
Material Design을 구성하는 세 가지 주요 원칙이 있습니다. 이들은 재료가 일반적으로 제공하는 것의 가장 기본적인 부분입니다.
- 물질은 은유 입니다. Material의 개발은 우리가 일상적으로 사용하는 촉각 요소, 종이 및 잉크 의 연구에 영감을 받았습니다. 서로 상호 작용할 때 물체의 빛, 표면 및 움직임이 더 좋게 만듭니다.
- 대담하고 그래픽 적이며 고의적 입니다. 인쇄 기반 디자인에서 기본으로 사용되는 인쇄물, 격자, 공간, 크기, 색상 및 이미지 사용은 재료의 내용을 더 잘 만듭니다.
- Motion은 의미를 제공합니다 . 이것은 가장 유명한 것 중 하나입니다. 머티리얼에서 의미 있고 적절한 모션, 미묘한 & 명확한 피드백과 효율적이고 일관된 전환이 있어야합니다.
구성 요소
머티리얼 디자인은 구성 요소의 모든 세부 사항에주의를 기울여 보편적으로 사용할 수 있습니다. 이러한 구성 요소는 놀라운 앱과 사이트를 구축하는 데 도움이됩니다. 버튼, 스위치, 카드, 텍스트 입력, fab (플로팅 액션 버튼), 대화 상자, 토스트, 하위 메뉴, 탭 등과 같은 많은 요소가 재질별로 제공됩니다. 그들 각각은 그들 자신의 규칙을 가지고 있으며, 당신이 어떤 사소한 요소도 가지지 않도록 그것들을 만드는 법을 안내합니다.
패턴
구성 요소 외에도 Material은 추가 UI를위한 기본 패턴을 제공합니다. 이 패턴은 머티리얼의 구성 요소로 만든 UI를 개선합니다. 데이터 형식, 탐색 창, 오류, 제스처, 스크롤링 기술, 검색, 설정, 이미지로드, 새로 고침 등의 패턴.
재질 디자인 색상
머티리얼의 색상은 당신이 불편하고 이상하고 편평하게 느껴지지 않도록 디자인되었습니다. 도로 표지판, 현대 건축물, 포장 마킹 테이프 및 스포츠 코트와 같은 일상 환경에서 영감을 얻은 Material Design은 예상치 못한 높은 색상을 선사합니다. 선택할 수있는 색상 팔레트가 너무 많아 앱이나 사이트를 개발할 때 더 편리하게 사용할 수 있습니다. Photoshop 컬렉션과 같이 현지에서 사용하기 위해 색상 견본을 다운로드 할 수도 있습니다.
재료 아이콘
Android 개발자 인 경우 Google에서 제공하는 무료 아이콘 팩에 익숙해야합니다. 보통 주 요소 및 작업 표시 줄에만 사용됩니다. 다른 리소스의 경우 폴더, 파일, 복사 및 붙여 넣기 등의 다른 아이콘을 수동으로 검색해야합니다. 머티리얼 디자인에서 Google은 사용할 수있는 수많은 아이콘 팩으로 문제를 해결했습니다.
각 아이콘은 촉각 재료 연구를 사용하는 디자인 접근법을 거쳤습니다. 그들은 일관성있는 물질적 원리를 유지하고 있습니다. GitHub에서이 아이콘을 다운로드 할 수 있습니다. iOs, 웹, Android 또는 svg와 같은 다양한 사용법에 대한 옵션이 있습니다. 쉬운 사용자 정의를위한 더 넓은 옵션이 필요한 경우 FlatIcon에 Material Design 아이콘 팩이 표시되는 것이 좋습니다. 팩 안에는 아이콘 벡터 (SVG & EPS), PSD 및 PNG 버전이 있습니다.
소재의 애니메이션
이것이 제가 가장 좋아하는 소재의 특징입니다. Material의 애니메이션은 매우 현실적이고 직관적입니다. 모든 애니메이션에는 의미 있고 일관되며 올바른 타이밍 전환이 있습니다. 아래에 표시된 gif 데모는 아름다운 소재 애니메이션 중 하나입니다. 흥미롭고 반응이 좋은 상호 작용을 제공하기 위해 Google 팀에서는 사용자 입력 효과를 위해 워터 리플 애니메이션을 만듭니다. 버튼과 카드에 주로 사용됩니다.
내가 설명한 기능은 머티리얼 디자인이 제공하는 것의 일부에 지나지 않습니다. Material world에 대해 더 자세히 알고 싶으면 문서 페이지로 넘어 가자.
이행
기본적으로 머티리얼 디자인은 Android Lollipop의 새로운 UI 업데이트로 제공됩니다. Material이 내부에 적용된 모든 지침. Material은 모든 종류의 환경을 목표로하므로 다른 시스템에 Material을 구현하는 것이 어렵지 않습니다. 또한 커뮤니티 덕분에 자신이 만든 도구로 훨씬 쉽게 작업을 수행 할 수 있습니다.
이것은 안드로이드 (예 : 웹) 외부에서 Material Design을 얻기 위해 얻을 수있는 몇 가지 방법입니다.
CSS 프레임 워크 사용하기
이것은 웹 플랫폼에서 머티리얼 디자인을 구현하려는 경우 가장 쉬운 방법입니다. 프레임 워크를 사용하여 초기화해야만 필요한 요소를 작성할 수 있습니다. Materialize, Material UI 또는 Polymer와 같이 여러 프레임 워크를 사용할 수 있습니다. 내 개인적인 선택이 Materialise로 떨어집니다. 사용하기 쉽고 이해하기 쉽고 좋은 데모가있는 훌륭한 문서가 있습니다.
가이드 라인을 따른다.
프레임 워크의 도움없이 Material을 구현하고 코드를 가장 많이 사용하는 것을 선호한다면 Material 지침을 따라야합니다. 거기에서 당신은 물질적 인 원칙을 성취하기 위해 알아야 할 모든 것과하지 말아야 할 것을 발견 할 것입니다. 구성 요소, 레이아웃, 애니메이션, 색상, 패턴 등을 만드는 데 필요한 기본 가이드가 모두 표시됩니다. 보다 쉽게 개발할 수 있도록 Material Checklist를보고 싶을 수도 있습니다.
결론
머티리얼 디자인은 훌륭한 디자인 시스템이며 올해 가장 기대되는 트렌드 중 하나가되었습니다. 다음 몇 달 안에, 우리는 어디서나 그것을 볼 수 있습니다. 이 새로운 Google의 디자인 업데이트로 더 많은 앱과 사이트가 세련되게됩니다.
그리고 Material Design을 통해 Google은 가장 큰 기술 회사 중 하나로서의 우월성을 입증했습니다. Google은 검색 엔진 및 모바일 OS 영역뿐만 아니라 디자인 분야에서도 선두 주자가되었습니다. 지금까지 Google과 같이 큰 발전을 이룩한 회사는 없습니다. 그러나 경험에 의하면 오래 가지 않을 것이라고합니다. 다른 회사가 Google의 Material Design에 응답하기를 기다립니다.
