Material design что такое: Material Design: гениальный ход Google

Material Design: гениальный ход Google

Что это? Material Design – направление в дизайне, разработанное компанией Google. Концепция создавалась и развивалась с целью приведения всех продуктов корпорации к единому стилю. На сегодняшний день Material Design является одним из наиболее востребованных дизайнов в IT-сфере.

Почему популярен? Секрет прост – сочетание простоты, понятности, адаптивности делает пользовательский опыт приятным и запоминающимся. Не нужно отвлекаться на яркие кульбиты анимации, вспоминать что и как работает – всё создается на интуитивном уровне.

В статье рассказывается: 

1. История создания Material Design
2. Разница между Flat и Material Design
3. Роль анимации в Material Design
4. Принцип тактильных поверхностей в Material Design
5. Принцип полиграфического дизайна
6. Принцип адаптивности
7. Секрет популярности Material Design

8. Пройди тест и узнай, какая сфера тебе подходит:
   айти, дизайн или маркетинг.

   Бесплатно от Geekbrains

История создания Material Design

В прежние времена все изобретения корпорации Google выглядели, можно сказать, ужасно. Стоило поместить один и тот же продукт в разные виды платформ, как он просто туда не вписывался. Однако в 2011 году произошли перемены: в компании поняли, что пришла пора кардинально все поменять, и приступили к интенсивной работе над созданием общего фундамента для внешнего вида экосистемы продуктов. Данный процесс назвали проектом Кеннеди.

Сначала изменилось интернет-пространство, а вслед за ним — и некоторые мобильные устройства. Также было уделено отдельное внимание разработке дизайна Андроида – Holo. Инструменты программы получили обновленный вид и своим появлением вытеснили уже порядком поднадоевшую старую систему Андроида.

История создания Material Design

Без проблем, к сожалению, не обошлось: проект Кеннеди и Holo все еще различались между собой. Людям такой расклад пришелся не по вкусу. Им было трудно изменить свое отношение к переменам. Они вынуждены были приспосабливаться к обновленному внешнему виду начинки своего мобильного телефона, планшета или компьютера, также к взаиморасположению элементов управления и так далее.

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

Что в итоге получилось? В 2014 году состоялась седьмая ежегодная конференция для разработчиков от Google — I/O. На ней был продемонстрирован новый дизайн и подход под названием Material Design. В чем его особенность? Все заметили, что у телефона, планшета, компьютера, часов и автомобиля визуальная часть и начинка получили некую общую составляющую, да и пользоваться такими разными по назначению девайсами стало в разы удобнее.

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

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

Разница между Flat и Material Design

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

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

Роль анимации в Material Design

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

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

При разработке Material Design компания Google поставила во главу угла взаимодействие пользователей с системой и технические характеристики деталей. В конечном счете интерфейс стал еще проще и ярче.

Анимация — главный элемент системы. Упор делается на следующие моменты:

• Союз девайса и пользователя. Благодаря анимации становится понятно, что за чем идет. Человек сможет понять, что произойдет при нажатии на конкретную деталь.
• Концентрация внимания. Двигающиеся картинки и значки фокусируют взгляд только на одном действии. Человек не рассеивает свое внимание, отвлекаясь на посторонние вещи, и совершает операции осознанно.
• Выразительность. В анимированных составляющих девайса отчетливо видно, что каждое изобретение компании Google хорошо по-своему.
• Обучение. Не нужно обладать высоким IQ, чтобы управлять, например, компьютером или смартфоном.
• Привлекательность. Встречают, как правило, по одежке, а провожают по качественной начинке, удобству пользования и надежности. Даже если убрать все три последние составляющие, то ничего страшного вначале не произойдет, так как анимация уже делает свое дело. Человек в первую очередь обращает внимание на форму девайса, его внешний вид и красивую (именно такую!) начинку. Он заинтересовывается тем или иным продуктом, берет его в руки и начинает взаимодействовать с ним.

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

Принцип тактильных поверхностей в Material Design

Первое и главное условие — слои, расположенные на цифровой «бумаге», можно потрогать. Все без исключения элементы являются частью единого целого. Ничто не выбивается из строя. Система подобна человеческому организму, где каждый орган взаимодействует друг с другом и находится на своем месте.

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

Уникальность заключается в следующем:

• минимальное количество эффектов;
• объекты, расположенные сверху, бросают тень на те, что внизу;
• фигуры прикреплены к одному положению с координатами по оси Z.

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

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

Подборка 50+ ресурсов об IT-сфере

Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT

ТОП 50+ сервисов и приложений от Geekbrains

Безопасные и надежные программы для работы в наши дни

pdf 3,7mb

doc 1,7mb

Уже скачали 20575

В Flat Design вы не найдете теней или иных явлений, делающих изображение объемным. Что касается Material, то у него все рассчитано на глубину. С его помощью вы заостряете внимание на главном и инстинктивно чувствуете, как работать с кнопками, полосой прокрутки или фигурами. Глубина должна работать корректно на 100 % и сочетаться с объектами взаимодействия. Если этого не происходит, следует приступить к поиску более эффективного решения.

Принцип тактильных поверхностей в Material Design

Несомненно, нужно принять во внимание, что любой физический объект имеет начало и конец. Виджеты не должны касаться края экрана. Главный слоган и философия оформления интерфейса в Material Design — «UI — живой организм».

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

Принцип полиграфического дизайна

Взаимосвязь компонентов придерживается определенных правил. Если, предположим, интерфейс мы назовем бумагой, то каждый «кирпичик» внутри него написан чернилами. Всевозможные виды шрифтов, сетки, цветовые схемы, иконки и прочие мультимедиа создаются в Google при помощи полиграфических стандартов. Философия идеи Google предполагает использование прописных истин полиграфии в сфере проектирования UI.

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

Второй принцип Material Design делится на 7 блоков. Уделим внимание каждому из них.

Первое место занимает типографика. В печатной продукции она выполняет следующие функции:

• Определяет внешний вид издания.
• Решает, на чем будет строиться контент.

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

Только до 1.05

Скачай подборку тестов, чтобы определить свои самые конкурентные скиллы

Список документов:

Тест на определение компетенций

Чек-лист «Как избежать обмана при трудоустройстве»

Инструкция по выходу из выгорания

Чтобы получить файл, укажите e-mail:

Подтвердите, что вы не робот,
указав номер телефона:

Уже скачали 7503

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

Игра на контрасте со шрифтами в книгах и СМИ гармонично смотрится и в электронном виде. Текст в разных местах делают одинаковым по стилю, но отличия должны быть все равно видны.

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

Принцип полиграфического дизайна

В бумажных СМИ и книгах действует следующий принцип: в каком цвете напечатаешь текст, так и будут его воспринимать читатели. Электронный формат предполагает, естественно, то же самое. Material Design colors – это микс главного и второстепенного цветов. Главный цвет получили элементы управления, а важные детали выделяются особым цветом.

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

Если в двух словах описать свойства полиграфии нового типа, то это будут:

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

Принцип адаптивности

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

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

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

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

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

Графическому дизайнеру неплохо быть не только искусным художником, но ещё и тестировщиком. Перед его мысленным взором должна появиться четкая картинка того, как будет изображаться пользовательский интерфейс на разных видах техники — от большого монитора до часов. Известно, что в небольших по размеру устройствах есть вертикальная и горизонтальная ориентация. Чтобы воплотить в жизнь определенную модель со всеми техническими характеристиками, мастер будет трудиться не одни сутки.

Секрет популярности Material Design

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

Секрет популярности Material Design

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

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

Продвижение блога — Генератор продаж

Рейтинг: 5

( голосов 2 )

Поделиться статьей

введение в анимацию и взаимодействие

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

Material Design UI от Google — одна из самых популярных дизайн-библиотек в мире. Если вы пользуетесь продуктами Google (Gmail, Meet, Docs и т.д.) или устройством Android, вы, скорее всего, ежедневно взаимодействуете с Material Design UI.

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

Что такое Material Design?

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

Google представил Material Design в 2014 году на конференции Google I/O. Цель компании состояла в том, чтобы создать “осязаемую” библиотеку на основе цифровых чернил и бумаги. “В отличие от настоящей бумаги, наш цифровой материал может расширяться и менять форму. У материала есть физические поверхности и края. Благодаря швам и теням компоненты выглядят так, будто их можно потрогать”. Матиас Дуарте — вице-президент Google по дизайну.

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

Преимущества Material Design

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

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

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

Наконец, Material Design имеет открытый исходный код, то есть вы можете настроить библиотеку таким образом, чтобы она соответствовала вашему бренду или продукту. Дизайн-система доступна для Android и iOS, что позволяет использовать одну библиотеку для обеих операционных систем.

Особенности Material Design

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

Компоненты

Material Design имеет огромную библиотеку компонентов и UI-паттернов (всего 17 категорий), включая кнопки, панели навигации, меню, элементы выбора даты, карточки, списки изображений и многое другое!

Google продумал все возможные компоненты, которые могут понадобиться дизайнеру, а вы можете настроить их в соответствии с вашими потребностями. Например, в разделе “Нижняя панель навигации” (Bottom Navigation) вы узнаете о принципах использования, анатомии, поведении, правилах размещения, состояниях и особенностях стилизации компонента, что поможет реализовать его наиболее эффективно.

Кроме того, Google предлагает разработчикам базовый HTML и CSS-код для внедрения каждого компонента: инженеры могут скопировать/вставить его в свои файлы, чтобы не начинать работу с нуля.

Эти компоненты Material были разработаны специально для веб-сайтов и веб-приложений. Разработчики также могут найти библиотеки Material для React, Vue, Angular и других. Однако важно отметить, что команда Material Design не занимается поддержкой этих неофициальных библиотек.

Иконки

Коллекция Material Icons включает более 2 000 иконок в пяти стилях:

• Линейные
• С заливкой
• Со скругленными углами
• С острыми углами
• Двухцветные

Вы можете скачать Material Icons для веб в формате SVG или PNG или использовать фрагменты кода для Android, iOS и Flutter. Вы также можете подключить стили с GitHub, разместив соответствующий код внутри тега <head> в HTML-файле.

Типографика

Типографика — важнейший элемент UI-дизайна и брендинга. Стандартные гарнитуры Material Design для Android: Roboto и Noto Sans. Последняя включает более 150 шрифтов и поддерживает более 800 языков, поэтому вы при необходимости легко переведете свой продукт, сохранив эстетику и целостность — огромный плюс для компаний с международной пользовательской базой.

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

Material Design: анимация и взаимодействие

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

Проектирование микровзаимодействий на основе Material Design поможет вам понять, как и зачем создавать то, с чем ваши пользователи захотят взаимодействовать.

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

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

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

Material Design включает подробное руководство по анимации и взаимодействию.

Анимация

Речь идет об анимационных эффектах, которые, по словам представителей Google, «помогают сделать интерфейс выразительным и простым в использовании«.

В Material Design обозначено 3 принципа анимации:

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

Руководство по анимации (Motion) от Material — это настоящий мастер-класс для UX-дизайнеров. Здесь вы найдете следующие разделы:

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

Взаимодействие

Взаимодействие в Material Design — движения и анимации, которые запускаются в результате взаимодействия пользователя с интерфейсом.

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

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

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

Material Design 3

В мае 2021 года Google анонсировал новый усовершенствованный Material Design 3, который компания называет «самой выразительной и адаптируемой дизайн-системой«. Material Design 3 был впервые выпущен на Android 12 и Google Pixel и появился на других устройствах в 2021 году.

Вот 3 нововведения Material Design 3.

Динамический цвет

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

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

Складные устройства

Еще один раздел Material Design 3 — особенности UI для складных устройств. Важное дополнение — Postures. Это уникальная для складных телефонов конфигурация экрана, показывающая, когда устройство сложено или раскрыто. Postures могут распространяться на развернутый альбомный и развернутый портретный режимы, каждый из которых имеет свой размер экрана и соотношение сторон.

Другие аспекты Material Design для складных устройств:

• Досягаемость: Что происходит, когда пользователи не могут дотянуться до тех или иных областей экрана раскрытого устройства.
• Центральный шарнир: Шарниры, которые образуют пространство между сгибом экрана и контентом.
• Разделение экрана: Лейауты для раскрытых складных устройств.

Дизайн-токены

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

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

Google Material Design: шпаргалка для профессионалов

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

Впервые анонсированный на конференции Google I/O в 2014 году, а затем совершивший свое первое путешествие с Android 5.0 Lollipop, материальный дизайн Google представляет собой ориентированный на мобильные устройства сдвиг в подходе компании к дизайну. Взяв за основу бумагу и чернила, Material Design — это визуальный язык, использующий тени и края для создания минимального опыта, который можно масштабировать на всех основных платформах и устройствах.

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

ПОСМОТРЕТЬ: Все шпаргалки TechRepublic и руководства для умных людей

Резюме (TL;DR)

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

Почему Material Design имеет значение? Material Design обеспечивает единообразие опыта, которого не хватало продуктам Google. Ориентация на мобильные устройства также представляет собой важный сдвиг в подходе компании к дизайну.

На кого влияет Material Design? Конечные пользователи, скорее всего, заметят изменения в пользовательском интерфейсе многих продуктов Google. Разработчикам и дизайнерам придется немного изменить свой подход, чтобы в полной мере воспользоваться преимуществами Material Design.

Когда был выпущен Material Design? Исходный код Material Design стал общедоступным 3 ноября 2014 г., а обновления по беспроводной сети (OTA) начались 12 ноября 2014 г.

Как использовать Material Design? Компания Google предоставила рекомендации и рекомендации по материальному дизайну для правильной реализации.

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

Первоначально анонсированный 25 июня 2014 года на конференции разработчиков Google I/O, Google Material Design представляет собой язык дизайна, который стремится унифицировать взаимодействие с пользователем в продуктах Google и на разных платформах.

Material Design изначально был известен под кодовым названием Quantum Paper. Одна из первых реализаций дизайна присутствовала в «карточках», связанных с Google Now. Согласно веб-сайту Google по материальному дизайну, его цель состоит в том, чтобы объединить многие принципы классического дизайна с инновациями, которые мы привыкли ожидать от науки и техники.

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

По данным Google, действуют три основных принципа:

1. Материал — это метафора
2. Жирный, графический, преднамеренный
3. Движение придает смысл

В то время как его основа уходит корнями в так называемый плоский дизайн, Material Design представляет собой скорее гибрид с добавлением теней и градиентов для передачи физического пространства. Плоский дизайн существует в основном в 2D-среде, в то время как Material Design использует 3D-среду, где каждый объект имеет размеры по осям X, Y и Z.

Material Design использует смелые цвета и шрифты Roboto и Noto. Наконец, определенные правила для движения и анимации элементов дизайна являются ключом к поддержанию правильных отношений между элементами и функциональностью.

Подробнее:

• Material Design: 10 приложений, демонстрирующих новый язык пользовательского интерфейса Google (TechRepublic)
• Материальный дизайн Google объединяет пользовательский интерфейс для Android, Интернета (CNET)
• Google обновляет Android, вводя «материальный дизайн» (ZDNet)

Почему важен материальный дизайн?

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

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

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

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

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

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

Подробнее:

• Чем на самом деле является Material Design Google (Wired)
• Материальный дизайн Android распространяется на Linux (TechRepublic)
• Поиск Google новой корпоративной структуры заканчивается на Alphabet (TechRepublic)

На кого влияет Material Design?

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

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

Подробнее:

• У дизайнеров Google случился «почти галлюцинаторный момент», когда Ларри Пейдж наконец сказал, что продукты должны выглядеть красиво (Business Insider)
• Ведущие дизайнеры реагируют на новый язык дизайна Google Material (VentureBeat)

Когда был выпущен Material Design?

После того, как о нем было объявлено в основном докладе на конференции Google I/O 2014, Material Design был впервые доступен в предварительной версии Android L на той же неделе. 3 ноября 2014 г. исходный код был доступен до того, как 12 ноября 2014 г. для некоторых устройств были впервые разосланы официальные обновления OTA.

Каждый месяц добавляются новые спецификации дизайна, которые можно просмотреть на веб-сайте Material Design. Например, в мае 2017 года Google представила библиотеку компонентов материалов для создания приложений, а также новый инструмент цвета для дизайна материалов. Во время конференции разработчиков Google I/O 2018 года команда Material Design представила Material Theming для нового брендинга, редактора тем и многого другого.

К этому моменту большинство основных приложений Google должны были измениться в стиле Material Design.

Подробнее:

• Материальный дизайн: что нового (Google)
• Google Hangouts 4.0 для Android выпущен с улучшенным интерфейсом и производительностью в стиле Material Design (ZDNet)

Как использовать Material Design?

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

Материальные элементы могут различаться по высоте и ширине (X и Y), но они всегда имеют одинаковую толщину в 1 dp (пиксели, не зависящие от плотности). В то время как элементы Материала могут расти и сдвигаться по своим осям X и Y, но они никогда не могут проходить через другой элемент Материала.

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

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

Подробнее:

• Практическое знакомство с материальным дизайном Android: создание тем для приложений (TechRepublic)
• Google запускает веб-библиотеку, чтобы изменить материальный дизайн сайтов (ZDNet)
• Трюк с дизайном материалов Android Lollipop предлагает более совершенный UX (TechRepublic)
• Как создать веб-сайт с помощью Google Material Design Lite (PC Advisor)
• Больше проблем с тенью при разработке материалов для Android (TechRepublic)
• Материальный дизайн для разработчиков Android (курс Udacity)
• Руководство по спецификациям Google Material Design (Google)

Материальный дизайн для Android | Android Developers

Материальный дизайн — это исчерпывающее руководство по визуальному, динамическому и дизайн взаимодействия между платформами и устройствами. Чтобы использовать материальный дизайн в своих приложениях для Android, следуйте рекомендациям, определенным в спецификации дизайна материалов и использовании новые компоненты и стили, доступные в поддержке дизайна материалов библиотека. На этой странице представлен обзор шаблонов и API, которые вы должны использовать.

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

• Тема приложения для дизайна материалов для оформления всех ваших виджетов пользовательского интерфейса
• Виджеты для сложных представлений, таких как списки и карточки
• Новые API для пользовательских теней и анимации

Тема материала и виджеты

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

Темная тема материала

Светлая тема материала

Для получения дополнительной информации см. применять материальную тему.

Чтобы предоставить вашим пользователям знакомый опыт, используйте наиболее распространенные шаблоны UX материала:

• Продвигайте основное действие вашего пользовательского интерфейса с помощью плавающей кнопки действия (FAB).
• Покажите свой бренд, навигацию, поиск и другие действия с помощью панели приложений.
• Показать и скрыть навигацию вашего приложения с помощью панели навигации.
• Используйте один из множества других материальных компонентов для макета и навигации вашего приложения, например как сворачивающиеся панели инструментов, вкладки, нижняя панель навигации и многое другое. Чтобы увидеть их все, загляните в Материальные компоненты для Android каталог

По возможности используйте предопределенные значки материалов. Например, навигационная кнопка «меню» для вашего навигационного ящика должна использовать стандартный «гамбургер» икона. См. Значки дизайна материалов для списка доступные значки. Вы также можете импортировать значки SVG из библиотеки значков материалов с помощью Векторный актив Android Studio Студия.

Тени и карты высот

В дополнение к свойствам X и Y представления в Android имеют Z свойство. Это новое свойство представляет высоту вида, которая определяет:

• Размер тени: виды с более высокими значениями Z отбрасывают большие тени.
• Порядок прорисовки: виды с более высокими значениями Z отображаются поверх других видов.

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

Для получения информации о добавлении высоты к другим видам, см. Создать Тени и клипы.

Анимации

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

Эти API позволяют:

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

Анимации сенсорной обратной связи встроены в несколько стандартных представлений, таких как кнопки. Новые API позволяют настраивать эти анимации и добавлять их в свои пользовательские представления.

Дополнительные сведения см. в разделе Обзор анимаций.