Статья о material design: Что такое Google Material Design

Разное 

Содержание

Что такое Google Material Design

Айше Джемилева

4K

Обсудить

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

Material Design – это…

Material Design – это дизайн-система, которую изобрели и представили в компании Google в 2014 году. Это не просто гайдлайн по единому визуальному оформлению – благодаря ему были унифицированы интерфейсы всех продуктов и сервисов корпорации, в частности ОС Android. В результате их совокупность воспринимается как единая цифровая система, создавая таким образом новый пользовательский опыт и обеспечивая проникновение сервисов корпорации во все сферы жизни человека.

До внедрения этой концепции не то, чтобы в разных продуктах, а даже в разных версиях одного сервиса (в мобильной и десктопной) дизайн значительно отличался. Из-за этого пользователям было сложно ориентироваться при переходе между ними. Даже попытка разработать единый стиль для приложений Android Holo не решила проблему – люди все равно путались в интерфейсах. Лишь с переходом к принципу Material Design пользовательский опыт удалось улучшить.

Зачем он нужен

Как уже было ранее сказано, Material Design предназначен для унификации интерфейсов в продуктах и сервисах компании. По мнению разработчиков Google, объекты интерфейса должны иметь аналог, некую метафору в реальном мире. И в качестве метафоры они взяли обычную бумагу и чернила. За счет этого была создана ассоциация с реальным миром и использованием знакомых тактильных характеристик, глубины.

Бумага в Material Design, в точности как в реальном мире, характеризуется тонкостью и плоскостью, также имеет тень. Помимо обычных физических свойств в ней также имеется некая доля «волшебства» – анимация. Благодаря такому решению пользователю легче понять принципы работы ПО и переходы от одного состояния к другому. Получается, что анимация и оживляет интерфейс, и показывает пользователю, как все работает.

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

Основные принципы Material Design

В основе концепции Material Design лежат 4 принципа:

  1. Тактильные поверхности. Основой формирования пространства служит «цифровая бумага». Отдельные ее листы располагаются на разной высоте и при этом отбрасывают тени друг на друга. Помимо прочего, они также могут растягиваться, менять форму и цвет, также соединяться друг с другом. За счет этого пользователи лучше понимают, как устроена система и какова ее иерархия.
  2. Полиграфический дизайн. Это означает, что при создании интерфейса для цифровых устройств используются традиционные средства и подходы из графического дизайна. Скажем так, на «цифровой бумаге» элементы выводятся с помощью «цифровых чернил».
  3. Осмысленная анимация. Здесь анимация не просто выскакивает из ниоткуда, а появляется в соответствии с логикой системы. То есть один объект, реагируя на действия пользователя, плавно переходит в другой.
  4. Адаптивный дизайн. Тут все просто – интерфейс должен быть оптимизирован на всех устройствах и экранах вне зависимости от того, какой продукт мы берем в качестве примера. При этом выглядеть, работать и реагировать все должно везде одинаково.

Другие особенности

Они вытекают из основных принципов Material Design и заключаются в следующем:

  • Наличие глубины теней. Оно придает объем обычному плоскому дизайну и тем самым задает некий функционал – обозначение структуры элементов. Например, чем выше подъем объекта, тем больше его тень.
  • Контрастная типографика. Сам по себе типографика задает стиль бренда и создает структуру контента. Во втором случае это хорошо видно на примере заголовков – они выделяются более крупным и темным шрифтом. Это позволяет создать контраст между заголовками и наборным текстом, что и функционально, и красиво.
  • Модульная сетка. Эта техника пришла из полиграфического дизайна. Детали располагаются в соответствии с ключевыми направляющими. Сетка создает отступы и лучше демонстрирует структурированность информации.
  • Яркие цвета. В этой концепции существуют основные и акцентные цвета. Цель основного цвета – обозначить большие области. Акцентный же чуть более яркий, используется точечно и в небольшом количестве для выделения элементов управления, таких как кнопки, индикаторы и так далее. Тем самым он позволяет привлекать внимание пользователя к ключевым деталям.
  • Реакция анимации. Любой объект должен реагировать исключительно на действия пользователя, будь то касание пальцем на мобильных устройства или наводка курсора на десктопных версиях.
  • От общего к частному. Этот принцип заключается в уменьшении количества подаваемой информации с уменьшением размера экрана. Соответственно, на больших дисплеях можно показать сразу и списки, и более детальные сведения. А вот на маленьких экранах для этого можно сделать раскрывающийся список или даже перевести подробности на новый экран.

Польза Material Design

В Google при создании Material Design ориентировались на пользовательский опыт и функциональность деталей системы. В итоге интерфейс становится более простым и выразительным. Именно анимация является основным элементом системы, благодаря которому делаются следующие акценты:

  1. Демонстрация взаимосвязей. Благодаря анимации становится простой и понятной иерархия, человек без труда сможет понять, что произойдет при нажатии на конкретную деталь.
  2. Фокусировка внимания. Анимация ни в коем случае не отвлекает от основного действия, что соответствует третьему принципу – ее осознанности.
  3. Выразительность. Каждый продукт компании имеет свой особый характер, стиль, и все это четко отражено в анимированных деталях.
  4. Обучение. Люди без особого труда могут понять, как выполнять те или иные действия.
  5. Привлекательность. Даже если исключить практическую составляющую, то вся анимация сама по себе выглядит достаточно интересно. В итоге пользователь проявляет интерес и хочет взаимодействовать с продуктом.

Material Design 3 для Android 12

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

Дизайн

Подборки, инструкции и советы от дизайнеров для дизайнеров.

Рекомендуем

Material Design на русском. Часть 1 — Принципы | by Ruslan Sharipov | Дизайн-кабак

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь

Material — это дизайн-система, которая была создана Google, чтобы помочь всем, кто заинтересован создавать высококачественные интерфейсы для Android, iOS, Flutter и веба.

Источник: https://material.io/design/introduction#principles

Понятие «Материал» — это метафора

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

Смелый, графический, сознательный

Источник: https://material.io/design/introduction#principles

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

Анимации со смыслом

Источник: https://material.io/design/introduction#principles

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

На картинке отражены примеры некоторых компонентов, которые предлагает Material Design для проектирования и разработки интерфейсов.

Компоненты — это интерактивные строительные блоки для создания пользовательского интерфейса. Они имеют встроенную (по умолчанию) систему состояний, чтобы пользователь понимал когда элемент в фокусе, выбран, активирован или когда произошла ошибка. Также, компоненты передают состояния наведения, нажатия, перетаскивания и отключения. Библиотеки компонентов доступны для Android, iOS, Flutter и интернета.

Компоненты охватывают и закрывают широкий спектр интерфейсных потребностей, например:

  • Отображение: размещение и организация контента с использованием таких компонентов, как карточки (cards), список (list) и набор действий (sheets).
  • Навигация: позволяет пользователям перемещаться по продукту с помощью таких компонентов, как боковая панель навигации (navigation drawers) и вкладки (tabs).
  • Действия: позволяет пользователям выполнять задачи с помощью таких компонентов, как плавающая кнопка (floating action button сокращенно FAB).
  • Ввод: позволяет пользователям вводить информацию или делать выбор с помощью таких компонентов, как текстовые поля, chips (не знаю как перевести) и элементы выбора (чекбоксы, радио-кнопки и свитчеры).
  • Коммуникация: оповещение пользователей о важной информации и сообщениях с помощью таких компонентов, как snackbars (не знаю как перевести), баннеры и диалоговые окна.
Цвет, типографика и форма компонентов, таких как кнопки, могут быть легко изменены в соответствии с вашим брендом.

Цвет

Если в качестве цвета у контейнера используется ”colorPrimary / основной“ цвет (1), то для внутреннего содержимого можно использовать цвет ”colorOnPrimary / на основном” (2).

Пояснения к картинке
colorPrimary — это переменная, наиболее часто отображаемый на экране и в компонентах приложения. Этот цвет должен проходить рекомендации по доступности текста / иконок при рисовании поверх цвета поверхности или фона.

colorOnPrimary — это цвет, который передает рекомендации по доступности для текста/иконографии при рисовании поверх основного цвета.

Цветовая система материал— это подход к применению цвета к пользовательскому интерфейсу. В ней все глобальные цветовые стили имеют семантические названия и определенное использование в компонентах — primary (основной цвет), secondary (второстепенный цвет) — допустим это могут быть цвета вашего бренда, а также цвета для surface (поверхность), background (фон) и error (ошибка).

Каждый цвет также имеет дополнительный цвет, который используется для элементов, размещенных «сверху», чтобы предоставить согласованность и достаточный контраст (например colorOnPrimary, colorOnSecondary, colorPrimaryVariant, colorSecondaryVariant и т.д.).

Типографика

Вся типографика в компонентах использует один из 13 глобальных стилей.

Типографика представлена в виде шкалы из 13 стилей: от заголовков до основного текста и мелких подписей. Каждый стиль имеет четкое значение и применение в интерфейсе.

Важные атрибуты, такие как шрифт, начертание шрифта и регистр букв, могут быть изменены в соответствии с вашим брендом и дизайном.

Форма

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

Если делать разные формы для компонентов, то это может помочь усилить внимание пользователя или более явно выделить/отделить компоненты, а также передать их состояние и выразить ваш бренд.

Все компоненты сгруппированы по категориям в зависимости от их размера (маленький, средний, большой). Эти глобальные стили позволяют быстро изменять форму компонентов одинакового размера.

Вы можете создавать свои собственные стили с помощью инструмента настройки фигур.

Что такое материальный дизайн? Определение, использование и примеры

Material Design — это стандарт проектирования и создания веб-сайтов и приложений. Это был ответ на старые, неудобные и хаотичные стили дизайна, и его цель — внести порядок и единство в веб-дизайн. Узнайте, как его использовать.

С момента своего создания внешний вид сети претерпел множество изменений. То, что по сути начиналось как Дикий Запад дизайна в 1990-х и начале 2000-х годов, в конечном итоге уступило место более простым, чистым и предсказуемым веб-сайтам.

Затем в бой вступили смартфоны, и потребовались огромные изменения. Следовательно, произошел сейсмический сдвиг, который претерпели приложения и, в конечном итоге, веб-сайты благодаря системе дизайна и языку Google — Material Design.

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

Но что это на самом деле?

В этой статье мы обсудим Material Design, покажем вам несколько примеров веб-сайтов, которые сегодня используют Material Design, и предоставим вам ресурсы, которые помогут вам использовать Material Design в вашем собственном дизайне и разработке веб-сайтов. Итак, приступим.

Содержание

  • Что такое материальный дизайн?
  • Каковы основные принципы материального дизайна?
  • Как веб-дизайнеры используют материальный дизайн сегодня?
  • Примеры материального дизайна
  • Плюсы и минусы материального дизайна
  • Ресурсы для обучения реализации материального дизайна
  • Комплект пользовательского интерфейса для дизайна материалов

Что такое материальный дизайн?

Material Design — это система дизайна, разработанная Google в 2014 году. Вся система дизайна, ее язык дизайна и вся документация теперь находятся на сайте material.io:

Как и другие системы дизайна, Material Design включает в себя следующее:

Объяснение основных принципов системы дизайна:

Рекомендации по использованию нового языка дизайна и созданию продуктов с его помощью:

Компоненты многократного использования, которые позволяют дизайнерам легко создавать пользовательские интерфейсы материалов:

Но Материальный дизайн гораздо более всеобъемлющий, чем большинство дизайн-систем. Это потому, что он не был построен только для одного бренда или проекта.

Material Design под кодовым названием «Quantum Paper» был выпущен как язык дизайна, который дизайнеры Android могли использовать для создания лучших приложений с помощью хорошего дизайна. Google также использовала Material Design для пересмотра дизайна своих приложений.

Общая цель Material Design заключалась в том, чтобы позволить разработчикам быстро создавать приложения, которые были бы отзывчивыми, удобными и масштабируемыми.

В 2014 году выпуск Material Design произвел фурор в дизайнерском сообществе — не только для Android, но и для iOS-приложений и веб-сайтов.

Для чего был создан дизайн материалов?

Чтобы понять, как появился Material Design, нам нужно взглянуть на то, что было до него.

Скевоморфизм

Примерно в 2010 году популярность скевоморфизма возросла. Это был стиль дизайна, в котором элементы пользовательского интерфейса выглядели как настоящие объекты, на которых они основаны. Мы часто видели это, когда дело касалось фона и значков веб-сайтов.

Это снимок экрана с домашней страницы Apple в 2012 году:

Многие значки приложений, которые вы видите на iPad, скевоморфны. Например, посмотрите на те, которые выделены желтым цветом: 

  • Значок приложения «Камера» напоминает объектив камеры.
  • Значок приложения «Часы» выглядит как старые аналоговые настенные часы.
  • Значок приложения «Календарь» выглядит как переворачиваемая карточка календаря.

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

Плоский дизайн

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

Вот как эти ранее скевоморфные значки выглядят на устройстве iOS в 2020 году:

Эти значки (а также значки многих давних приложений) стали плоскими, и из них убрали большую часть реалистичных качеств.

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

Как объясняет Nielsen Norman Group: 

«[Плоский дизайн] часто приводит к неуверенности при нажатии и снижает эффективность работы пользователя. Когда дизайнеры уплощают пользовательский интерфейс, они, как правило, удаляют многие знаки, которые обычно указывают пользователям, куда нажимать».

Материальный дизайн

Материальный дизайн был вдохновлен физическим миром. Но это не было попыткой вернуть дизайн во времена скевоморфии. Это метафора (которую мы вскоре рассмотрим, когда будем исследовать ее принципы).

На самом деле, Material Design перешел от разработки полностью плоских пользовательских интерфейсов к разработке поверхностей, вдохновленных бумагой и чернилами. Подумайте об этом так:

Если смотреть прямо, лист бумаги кажется плоским и двухмерным. Однако в реальном мире это на самом деле не так.

Бумага существует в трех измерениях. Листы бумаги создают тени, швы и складки, и их можно разрезать и изменять размер в соответствии с нашими потребностями — то, что Google стремился воссоздать в цифровом пространстве с помощью Material Design.

Этот пример с веб-сайта Material Design является одним из фирменных стилей Material:

Обратите внимание на тень, расположенную под плоской верхней панелью приложения.

Итак, Material Design по-прежнему использует плоские элементы. Однако эти элементы располагаются на разных плоскостях и могут вести себя как бумага и другие объекты в реальном мире, придавая цифровому опыту более реалистичное «ощущение».

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

Матиас Дуарте, вице-президент по дизайну в Google, объяснил, почему это изменение было важным для Интернета: Материал имеет физические поверхности и края. Швы и тени придают смысл тому, к чему можно прикоснуться».

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

В дизайн были внесены и другие, более значимые изменения.

Каковы основные принципы материального дизайна?

Material Design — это больше, чем просто добавление слоев или теней в дизайн. Это сверхкомплексный ресурс, который устанавливает правила для нового языка дизайна.

Подобно тому, как у нас есть основные принципы, которым мы должны следовать в веб-дизайне, у Material Design есть три собственных принципа:

Принцип №1: Материал — это метафора

Думайте о материальном дизайне как оцифровке физического мира.

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

Возьмем, к примеру, идею причинно-следственной связи. Когда кто-то совершает определенное действие, он ожидает предсказуемого результата.

Взгляните на это параллельное сравнение в объяснении взаимодействия Material Design:

Оба интерфейса имеют горизонтальную прокрутку.

Тот, что слева, перемещается только тогда, когда пользователь щелкает и перетаскивает содержимое. Вот как это работает в реальном мире.

Однако тот, что справа, имеет анимацию прокрутки, активируемую щелчком мыши. Наши объекты реального мира так не двигаются.

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

Принцип № 2: Жирный, Графический, Преднамеренный

Посмотрите на этот пример из раздела Material Foundation веб-типографики:

All Material Foundation является всеобъемлющим. В каждом разделе рассказывается, как работает компонент и почему он должен работать именно так. По сути, за каждым выбором дизайна есть смысл и логика.

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

Эта система четко разобрала, какие элементы пользовательского интерфейса являются жизненно важными и должны учитываться: относится к приложениям)

  • Иконография
  • Форма
  • Движение
  • Взаимодействие
  • Коммуникация (включая изображения, письмо и визуализацию данных)

    • пользовательский опыт.

    Теперь понятно, почему «преднамеренный» был частью этого принципа. А как же «жирный» и «графический»?

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

    Чтобы дать вам представление о том, как это выглядело, вот инструмент под названием Генератор цветовой палитры Material Design:

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

    Принцип № 3: Движение придает значение

    Моушн-дизайн не имеет ничего общего с анимацией ради анимации. Как и все остальное в Material Design, он предназначен для того, чтобы сделать дизайн более преднамеренным, а взаимодействие с пользователем — более интуитивно понятным.

    Существует три причины, по которым Material Design требовал (незаметного) движения в дизайне:  ​​

    • Чтобы быть информативным и сообщать пользователям, где и когда можно выполнить действие.
    • Чтобы сфокусировать внимание и направить пользователей к наиболее важным частям страницы.
    • Чтобы быть выразительным и добавить немного индивидуальности и радости в интерфейс.

    Можно анимировать такие маленькие элементы, как значки:

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

    На самом деле все зависит от того, требуется ли движение для информирования, фокусировки или самовыражения на данном этапе пути пользователя.

    Как веб-дизайнеры используют материальный дизайн сегодня?

    Как и его предшественники, в Material Design обнаружился довольно большой недостаток, который необходимо было исправить.

    Слишком черно-белое. Буквально все было прописано для дизайнеров, так что это было похоже на то, как вы делаете хороший дизайн. Следовать моему примеру.»

    Для ясности: нет ничего плохого в работе с шаблоном или компонентами. Однако проблема с Material Design заключалась в том, что все работали по одной и той же системе дизайна и правилам.

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

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

    Material Design 2.0 спешит на помощь

    В ответ на негативную реакцию дизайнерского сообщества (и, косвенно, пользователей, которые больше не могли отличать приложения от веб-сайтов), Google неофициально выпустила Material Design 2.0 в 2018 году. 

    Что касается того, как сегодня выглядит Material Design, то большая часть исходной системы осталась нетронутой. Были внесены некоторые обновления в Material Design ради современности.

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

    Кроме того, большое внимание уделяется веб-доступности и интернационализации.

    Таким образом, Material Design определенно меняет свои принципы вместе со временем.

    В наши дни Material Design 2.0 лучше всего использовать в качестве набора инструментов.

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

    Набор материалов

    Благодаря обновлению Material Design система дизайна больше не несет ответственности за ограничение творчества и индивидуализма в Интернете.

    Раздел «Ресурсы» является основной причиной того, почему:

    Дизайнеры имеют доступ к начальным наборам и инструментам, таким как:

    Они также найдут здесь инструменты для настройки дизайна, которые позволят им придерживаться лучших практик дизайна, добавляя свой собственный творческий фирменный стиль в пользовательский интерфейс: 

    • Цвет
    • Форма
    • Typography

    Дизайнеры также имеют доступ к новому инструменту, который позволяет им создавать свои собственные темы материалов: 

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

    Это то, что позволяет Material Design сохраняться сегодня.

    Примеры дизайна материалов

    По правде говоря, в наши дни Material Design не так легко распознать в веб-дизайне по ряду причин.

    Во-первых, это всегда было более очевидным подходом, когда это делалось в мобильных или веб-приложениях. Это Reply, Material Study (по сути, фальшивый кейс), представленный на веб-сайте material.io:

    . За доли секунды вы можете сказать, что это Material Design.

    Затем следует тот факт, что Material Design 2.0 позволил веб-дизайнерам делать больше настроек, поэтому соблюдение лучших практик Material Design — это то, что вам нужно действительно искать, чтобы заметить это.

    Итак, давайте посмотрим на некоторые веб-сайты, которые сегодня используют лучшие стороны Material Design:

    Elementor

    Если вы еще не заметили, веб-сайт Elementor основан на многих из тех хороших принципов дизайна, которые дал нам Material Design: посетителям: «Да, вам следует нажать здесь».

  • Другие важные компоненты (например, поля «Макет», «Типографика» и «Цвета») размещаются на более высоком уровне, чтобы посетители обращали на них внимание, прежде чем двигаться дальше.
  • Анимация реалистична, поэтому посетители видят только графику, которая движется ожидаемым образом. Они по-прежнему привлекают внимание, но не будут отвлекать от остального контента.

    • Думай с Google

    Неудивительно, что веб-сайт, управляемый Google, находится среди приведенных здесь примеров. Есть ряд элементов, которые Think with Google использует из своей системы дизайна:

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

    Клеевой замок

    Glue Lock — отличный пример того, как применить суперсовременный и индивидуальный подход к Material Design:

    • Кнопки ярко окрашены, а также анимированы при наведении, чтобы посетители знали, куда нажимать.
    • Темная тема по-прежнему придерживается принципов минимализма, используя ярко-белый шрифт и стиль красных кнопок, чтобы компенсировать темный фон.
    • На этой странице существует четкая иерархия и организация текста, а заголовки набраны гораздо более крупным шрифтом, чем основной текст.

    Мокплюс

    Mockplus — еще один веб-сайт, который берет основные принципы удобства использования из Material Design и придает им индивидуальность: страница.

  • Затенение важных элементов (таких как примеры макетов и отзывы) выдвигает важные слои на передний план поля зрения посетителей.
  • На этой странице нет анимации, которая происходит без прямого взаимодействия посетителей с определенными компонентами, что позволяет им контролировать, на что направлено их внимание.

    • Hotels.com

    Хотя настольный веб-сайт Hotels.com не полностью соответствует принципам Material Design, его мобильный сайт: 

    • Между каждым компонентом на странице результатов поиска есть четкие разделительные линии, что позволяет посетителям легко просматривать совпадения отелей по одному.
    • Переход от представления списка к представлению карты демонстрирует, как Material Design помогает веб-дизайнерам создавать более удобные для мобильных устройств возможности для посетителей.
    • Кнопки в представлении «Карта» для «Просмотреть дополнительные свойства», «Список» и кнопки масштабирования легко различимы, поскольку они расположены на слое над картой.

    Плюсы и минусы материального дизайна

    Итак, мы уже много коснулись плюсов и минусов Material Design. Но давайте суммируем хорошее и плохое, а затем заполним некоторые из недостающих частей, чтобы у нас было все в одном месте:

    Плюсы Material Design:

    • Веб-дизайнеры на всех этапах получают пользу от Material Design , будь то основа, на которой они строят всю свою работу, или надежный ресурс, к которому они время от времени обращаются.
    • Предоставляет всесторонний обзор каждого из ключевых компонентов и поведений пользовательского интерфейса, их значение в дизайне и способы их использования.
    • Из-за того, что она начиналась как система дизайна для приложений Android, она адаптирована для мобильных устройств подход к дизайну и отвечает за дальнейшее продвижение веб-сайтов в этом направлении.
    • Это — ориентированный на пользователя подход к дизайну , в котором устранены многие недостатки его предшественников, когда проблематичными были удобство использования, удобочитаемость и доступность.
    • Он заставляет дизайнеров смотреть дальше эстетики и делать дизайн более преднамеренным. В результате интерфейсы становятся более интуитивными , а взаимодействие с пользователем улучшается.
    • Google предоставляет обширную документацию и поддержку для разработчиков и дизайнеров, желающих получить больше от Material Design.
    • В наши дни система проектирования стала гораздо более гибкой и более мощной, так что дизайнеры могут брать то хорошее, что есть в Material Design, и делать это по-своему.

    Минусы материального дизайна:

    • При слишком строгом соблюдении веб-сайты (и приложения) рискуют выглядеть похожими друг на друга .
    • Некоторым дизайнерам может показаться, что Material Design сильно препятствует любой свободе или творчеству в дизайне , поскольку в нем для них все разъяснено.
    • Некоторые люди могут быть слишком напуганы, чтобы даже попробовать использовать Material Design (или даже любой из его готовых компонентов) из-за акцент на кодировке .
    • Дизайн-система изначально предназначалась для дизайнеров приложений, поэтому некоторые ее части на самом деле не имеют отношения к веб-дизайну . И если дизайнер не может использовать всю систему целиком, в получившемся интерфейсе может показаться, что в нем чего-то не хватает.
    • Некоторые рекомендации по дизайну (например, красочные интерфейсы, широкое использование значков и анимации) могут создать проблемы для скорости веб-сайта .

    Ресурсы для обучения реализации материального дизайна

    Если вы заинтересованы в использовании Material Design в своих дизайнерских работах, следующим шагом будет добавление в закладки следующих ресурсов: 

    • Material.io : необходимо начать работу, включая предварительно разработанные компоненты, генераторы образов брендов и многое другое.
    • Material Design документация , видеоуроки и содержимое блога : Когда вы будете готовы к практическим занятиям, обратитесь к учебным материалам Google по материальному дизайну.
    • Global Systems How-to: Как только вы освоите Material Design, вам понадобится простой способ применить ваши универсальные стили к вашему веб-сайту Elementor. Эта страница покажет вам, как это сделать.

    Если вы разработчик и хотите больше узнать о кодировании в Material Design, вам следует воспользоваться следующими ресурсами: 

    • Материальный дизайн для Интернета : Если вы разработчик и хотите научиться использовать Материальный дизайн для веб-сайтов, этот ресурс научит вас создавать компоненты Материала и разрабатывать собственную тему.
    • The Polymer Project : Используйте и перепрофилируйте эти компоненты Material Design, разработанные Chrome, в своих веб-проектах.
    • Material-UI : Создайте свою собственную систему дизайна или веб-сайт, вдохновленную материалами, с помощью этих библиотек Material Design React.

    Комплект пользовательского интерфейса для материального дизайна

    Наборы пользовательского интерфейса могут быть ценным инструментом дизайна при работе с плоским дизайном, и у Envato есть несколько отличных примеров для вдохновения, например, этот от DigitalHeaps:

    Комплект пользовательского интерфейса для материального дизайна от DigitalHeaps