Google Material Design: Все, что нужно знать

Вы, наверное, часто слышали фразу «Дизайн Материал». Это довольно новая концепция и ссылается на новый язык дизайна от Google.

Но идея конструкции материал проста. Это, вероятно, заставит дизайнеров полностью переосмыслить процессы веб-приложений и дизайна. Сайты уже создаются из расчетных схем с использованием проектной документации Материал Google. Теперь, настало время узнать все о материал конструкции для использования ее в будущем.

Что такое Материал Дизайн?

material design

Материал конструкции представляют собой визуальный язык, созданный командой дизайнеров в Google, чтобы помочь дизайнерам создавать веб-сайты и приложения, которые доступны, практичны и удобны для использования. Концепция базируется на документе, который находится в открытом доступе. Документация постоянно обновляется, отражая изменения технологий.

Материал дизайн основан на множестве целей и принципов, которые помогают понять то, что именно нужно сделать. Смысл заключается в том, чтобы как можно больше улучшить дизайн.

Цели проекта:

Создать визуальный язык, который синтезирует классические принципы хорошего дизайна с инновациями, возможностями технологий и науки.

Создать единую базовую систему, которая позволяет одновременно работать на разных платформах и разных размерах устройств. Мобильные разработки являются фундаментальными.  

Принципы подбора Материала:

Визуальные подсказки должны быть основаны на реальности

Жирная графика используется намеренно. Основы теории дизайна такие как использование типа сетки, пространства, масштаба, цвета и изображения дают визуальные эффекты.

Motion означает, что все перемещения объектов и их действия должны быть согласованы, чтобы не нарушать работу пользователей.

Основополагающих факторов для Материал конструкции много. Документация его весьма внушительна. Он распадается на множество конкретных понятий и различных процедур. Google создал несколько правил для того, чтобы было удобнее использовать анимацию, стили, макеты, компоненты и шаблоны.

Все эти руководящие принципы начинаются с понимания основных физических преобразований и способов движения материальной конструкции. Основополагающая теория состоит в том, что Материал создан как бы в реальности, где объекты расположены почти в 3D пространстве. 

Цвет и типографика:

material design

Цветовые концепции Материал дизайн занимают совсем небольшую часть плоского дизайна. Палитры смелые и яркие. Типографика следует плоской теме, а также использует шрифты без засечек.

Используются смелые и яркие цветовые гаммы наложенные друг на друга с приглушенными тонами, в зависимости от Материал проектной документации, подчеркиваются смелые тени и блики.

Успешным в цветовых концепциях является использование отдельного контраста. Google предоставляет полную цветовую палитру. Понятие цвета является настолько основополагающим, что возникает вопрос, будто Google считает, что дизайнеры забыли теорию цвета.

Основные принципы типографики одинаковы. Шрифт по умолчанию для всех приложений — Roboto, а шрифт по умолчанию для Android приложений снабжен ссылкой для загрузки, а также  поступенчатым использованием шрифта.

Макет и дизайн

material design

Базовая схема и конструкция структуры Материал проектов происходит от понятия дизайна печати. Дизайнерам рекомендуется создавать и использовать базовую сетку и математическую структуру для размещения элементов.

Общие элементы

material design

Каждый элемент в дизайне описан подробно с целью создать его таким образом, чтобы он появился на экране именно там где нужно.

Список включает в себя 19 компонентов!

Можете загрузить Adobe Photoshop, Illustrator файл, содержащий все элементы и иконки системы Android. 

Удобство и взаимодействие

Продукт доступен, когда все люди, независимо от их способностей, могут ориентироваться в нем, понимать его, и использовать для достижения своих целей. По-настоящему успешный продукт доступен для максимально широкой аудитории.

Материал проектной документации показывает нам модели для взаимодействия доступные и удобные в использовании, что является весьма полезным. В то время, как многие из реальных эстетических свойств являются основными для опытных дизайнеров, некоторые проекты еще нуждаются в рассмотрении из-за недостатка в них простоты, удобства использования и взаимодействия понятий.

Раздел шаблонов взаимодействия является особенно полезным. В нем имеется целый набор идей для того, чтобы сделать некоторые элементы универсальными по конструкции. (Подумайте о таких вещах, как обозначить время или дату или как должен работать поиск.) Вот некоторые из самых основных инструментов, которые могут определенным образом функционировать для всех пользователей, что является для них большим преимуществом.

Доступность является еще одной реальной проблемой. Думая о пользователях, которые могут взаимодействовать с веб-дизайном, не включающим в себя звук или цвет, имеющим высокую контрастность, с увеличенным экраном, без видимого экрана или только с голосовым управлением и даже сочетанием всех этих элементов может составлять значительное число пользователей.

10 Материал Ресурса для проекта

material design

Материал дизайн имеется повсюду. Есть много способов, чтобы скачать его прямо из Google, а также разработаны другие способы его использования. Вот несколько ресурсов, которые помогут вам изучить концепции дизайна материал:

  1. Google layout templates для мобильных устройств, планшетов и ПК
  2. Material design for Bootstrap
  3. Angular.js Material Project
  4. Polymer Designer
  5. Materialize Front-End Framework
  6. Material color palette
  7. Material Interaction
  8. Material design on Android checklist
  9. Material design Sketch template
  10. Free material UI kit

Как и все тенденции и концепции, существует множество веб-сайтов и мобильных приложений, которые уже используют понятия, изложенные в Материал дизайн. Вот пять примеров, которые наглядно демонстрируют принципы того, как дизайнеры могут работать и экспериментировать с понятиями материал дизайн:

Runtastic Running and Fitness

material design

Google Settings

material design

WhatsApp

material design

Evil Rabbit

material design

Weather Timeline

material design
Автор: Carrie Cousins

30.07.2016


Предыдущий пост

Следующий пост