Что такое Google Material Design
Айше Джемилева
4.2K
Обсудить
В мире существует множество дизайнерских концепций, позволяющих четко и грамотно сформировать структуру интерфейса и красиво представить ее пользователям. Одна из таковых – это Material Design. Я расскажу, что она собой представляет, чем полезна и в чем основные особенности данного подхода.
Material Design – это…
Material Design – это дизайн-система, которую изобрели и представили в компании Google в 2014 году. Это не просто гайдлайн по единому визуальному оформлению – благодаря ему были унифицированы интерфейсы всех продуктов и сервисов корпорации, в частности ОС Android. В результате их совокупность воспринимается как единая цифровая система, создавая таким образом новый пользовательский опыт и обеспечивая проникновение сервисов корпорации во все сферы жизни человека.
До внедрения этой концепции не то, чтобы в разных продуктах, а даже в разных версиях одного сервиса (в мобильной и десктопной) дизайн значительно отличался. Из-за этого пользователям было сложно ориентироваться при переходе между ними. Даже попытка разработать единый стиль для приложений Android Holo не решила проблему – люди все равно путались в интерфейсах. Лишь с переходом к принципу Material Design пользовательский опыт удалось улучшить.
Зачем он нужен
Как уже было ранее сказано, Material Design предназначен для унификации интерфейсов в продуктах и сервисах компании. По мнению разработчиков Google, объекты интерфейса должны иметь аналог, некую метафору в реальном мире. И в качестве метафоры они взяли обычную бумагу и чернила. За счет этого была создана ассоциация с реальным миром и использованием знакомых тактильных характеристик, глубины.
Бумага в Material Design, в точности как в реальном мире, характеризуется тонкостью и плоскостью, также имеет тень.
Помимо обычных физических свойств в ней также имеется некая доля «волшебства» – анимация. Благодаря такому решению пользователю легче понять принципы работы ПО и переходы от одного состояния к другому. Получается, что анимация и оживляет интерфейс, и показывает пользователю, как все работает.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Подписаться
Основные принципы Material Design
В основе концепции Material Design лежат 4 принципа:
- Тактильные поверхности. Основой формирования пространства служит «цифровая бумага». Отдельные ее листы располагаются на разной высоте и при этом отбрасывают тени друг на друга. Помимо прочего, они также могут растягиваться, менять форму и цвет, также соединяться друг с другом. За счет этого пользователи лучше понимают, как устроена система и какова ее иерархия.
Скажем так, на «цифровой бумаге» элементы выводятся с помощью «цифровых чернил».- Осмысленная анимация. Здесь анимация не просто выскакивает из ниоткуда, а появляется в соответствии с логикой системы. То есть один объект, реагируя на действия пользователя, плавно переходит в другой.
- Адаптивный дизайн. Тут все просто – интерфейс должен быть оптимизирован на всех устройствах и экранах вне зависимости от того, какой продукт мы берем в качестве примера. При этом выглядеть, работать и реагировать все должно везде одинаково.
Скажем так, на «цифровой бумаге» элементы выводятся с помощью «цифровых чернил».Другие особенности
Они вытекают из основных принципов Material Design и заключаются в следующем:
- Наличие глубины теней. Оно придает объем обычному плоскому дизайну и тем самым задает некий функционал – обозначение структуры элементов. Например, чем выше подъем объекта, тем больше его тень.
- Контрастная типографика. Сам по себе типографика задает стиль бренда и создает структуру контента. Во втором случае это хорошо видно на примере заголовков – они выделяются более крупным и темным шрифтом. Это позволяет создать контраст между заголовками и наборным текстом, что и функционально, и красиво.
- Модульная сетка. Эта техника пришла из полиграфического дизайна. Детали располагаются в соответствии с ключевыми направляющими. Сетка создает отступы и лучше демонстрирует структурированность информации.
- Яркие цвета. В этой концепции существуют основные и акцентные цвета. Цель основного цвета – обозначить большие области. Акцентный же чуть более яркий, используется точечно и в небольшом количестве для выделения элементов управления, таких как кнопки, индикаторы и так далее. Тем самым он позволяет привлекать внимание пользователя к ключевым деталям.
- Реакция анимации. Любой объект должен реагировать исключительно на действия пользователя, будь то касание пальцем на мобильных устройства или наводка курсора на десктопных версиях.
- От общего к частному. Этот принцип заключается в уменьшении количества подаваемой информации с уменьшением размера экрана. Соответственно, на больших дисплеях можно показать сразу и списки, и более детальные сведения. А вот на маленьких экранах для этого можно сделать раскрывающийся список или даже перевести подробности на новый экран.
Во втором случае это хорошо видно на примере заголовков – они выделяются более крупным и темным шрифтом. Это позволяет создать контраст между заголовками и наборным текстом, что и функционально, и красиво.
Польза Material Design
В Google при создании Material Design ориентировались на пользовательский опыт и функциональность деталей системы. В итоге интерфейс становится более простым и выразительным. Именно анимация является основным элементом системы, благодаря которому делаются следующие акценты:
- Демонстрация взаимосвязей. Благодаря анимации становится простой и понятной иерархия, человек без труда сможет понять, что произойдет при нажатии на конкретную деталь.
- Фокусировка внимания. Анимация ни в коем случае не отвлекает от основного действия, что соответствует третьему принципу – ее осознанности.
- Выразительность. Каждый продукт компании имеет свой особый характер, стиль, и все это четко отражено в анимированных деталях.
- Обучение. Люди без особого труда могут понять, как выполнять те или иные действия.
- Привлекательность. Даже если исключить практическую составляющую, то вся анимация сама по себе выглядит достаточно интересно. В итоге пользователь проявляет интерес и хочет взаимодействовать с продуктом.
Material Design 3 для Android 12
Благодаря концепции Material Design многие компании пересмотрели подходы к созданию дизайнерских элементов. В частности, анимация из дополнения превратилась в чуть ли не полноценную часть интерфейса. При этом во главе всего этого был заложен именно пользовательский опыт, его оптимизация и упрощение. Данный подход стал в итоге популярным и задал направление для развития всего цифрового дизайна.
Дизайн
Подборки, инструкции и советы от дизайнеров для дизайнеров.
Рекомендуем
Новое в материальном дизайне? 12 принципов, которые нужно знать — Дизайн на vc.ru
5248 просмотров
Первоначально представленный в 2014 году, материальный дизайн в последнее время стал более популярным, так как многие дизайнеры начали интегрировать его не только в свои проекты под Android, но и в другие веб-проекты.
Материальный дизайн для вас?
Я уверен, что вы согласитесь с тем, что отличный дизайн уникальный и функциональный. Вероятно, наиболее важным параметром является «функционал». Поэтому, думая об адаптации принципов материального дизайна при создании цифрового продукта, сначала попытайтесь связать их с целями, которые вы хотите достичь с помощью своего дизайна.
В основном ответьте себе на следующий вопрос: «Соответствуют ли принципы и принципы материального дизайна тому, чего я хочу достичь? »
1. Познакомьтесь с основным ресурсом
Если вы хотите изучить дизайн материала, лучшая отправная точка — официальный ресурс от Google. Он постоянно обновляется и объясняет все важные детали материального дизайна, которые вам необходимо знать, чтобы создать отличный пользовательский опыт.
Что здесь хорошо, так это то, что он охватывает не только специфичные для Android аспекты дизайна материалов, но рассматривает материальный дизайн в целом по отношению к любому приложению или проекту веб-дизайна.
Я настоятельно рекомендую вам, по крайней мере, пройти первые главы этой документации, чтобы ознакомиться с основными принципами.
2. Понять «материал» в материальном дизайне
Название материального дизайна далеко не случайно. Вся идея принципов материального дизайна состоит в том, чтобы сделать дизайн похожим на реальный мир и объекты реального мира, но только на определенном уровне абстракции.
Вы не хотите, чтобы ваш дизайн выглядел чрезмерно реалистичным до такой степени, что он бы похож на объект реального мира. Что вы хотите, это передать идею «материала» пользователю. Другими словами, материальный дизайн использует физический мир как вдохновение и создает новый визуальный язык, который напоминает некоторые свойства мира. Вот в чем дело. Мы, люди, понимаем материалы. Мы знаем, какой на ощупь металл, мы знаем, как выглядит деревянный стол. Мы также можем различить уровни материала, и как они соотносятся друг с другом. Например, мы можем распознать карандаш на листе бумаги на столе.
При проектировании материалов вам нужно научиться передавать ту же иерархию элементов, используя только абсолютный минимум инструментов проектирования, таких как тени, оттенки и т. д.
Визуальная иерархия в дизайне
3. Используйте тени для передачи иерархии
У оригинального “плоского дизайна” не было теней, и это вызвало проблемы с удобством использования.
В материальном дизайне тени больше не считаются ненужным элементом. Поверхность, края, реалистичные тени и освещение являются основными инструментами материального дизайна. Они помогают дизайнерам представить свойства реальных объектов. Добавление глубины к вашим проектам имеет решающее значение, но вы должны быть осторожны, чтобы использовать только минимальную эффективную дозу.
Например, тени являются вашим основным инструментом для передачи иерархии различных элементов, которые объединяются в законченный дизайн. Решая, что и на какой элемент отбрасывает небольшую реалистичную тень, вы представляете визуальную иерархию элементов и слоев, на которых они находятся.
Здесь важна общая структура дизайна, ваша теневая структура в целом имеет смысл для человеческого глаза — если она отображает концепцию материального дизайна.
4. Используйте яркие цвета
Цветовые палитры являются неотъемлемой частью языка дизайна, которые используют при создании продуктов.
Яркий, чистый и насыщенный, основные качества цвета в материальном дизайне.
Материальный дизайна, безусловно, является минималистичным типом дизайна. Другими словами, не нужно использовать много разных инструментов дизайна и стилей. Следовательно, дизайнеры должны обойти это ограничение и найти другой способ показать смысл и создать правильный фокус.
Одна из немногих вещей, которые остались, это цвет. Точнее, чистый цвет и часто яркие цвета. Яркие цвета играют действительно важную роль в дизайне материалов (и в этом случае и “плоского дизайна”), они привлекательные и делают взаимодействие с дизайном приятным для пользователя.
Использование цвета в дизайне
5. Используйте основной цвет и акцентный цвет
Чтобы создать отличный пользовательский опыт, рекомендуется ограничить выбор цветов, выбрав три оттенка из основной палитры и один акцентный цвет из вторичной палитры.
Способ адаптации этого к любому типу дизайна может состоять в том, чтобы выбрать три оттенка, которые составят вашу основную палитру, плюс один цвет, который будет выступать в качестве акцента.
Ваши основные цвета могут использоваться для таких вещей, как фоны, поля, плашки, шрифты и другие ключевые элементы интерфейса. Акцентный цвет — именно то, что предлагает название — он дает вам дополнительные рычаги, когда вы хотите отобразить основной элемент на экране / странице. Разумеется, акцентный цвет должен контрастировать с основными оттенками.
Экран входа в систему против заставки
6. Используйте пустоту
Материальный дизайн берет много идей из традиционного печатного дизайна и принципов, которые в нём есть.
Например, пустота является важным элементом в любом материальном дизайне, она может улучшить вашу типографику и текстовые блоки.
На самом деле, пустота являются наиболее эффективным инструментом для создания отличного пользовательского опыта. Пустота создает фокус, привлекает внимание пользователя и переносит его на определенный элемент (то, что начинающим дизайнерам часто трудно понять).
Короче говоря, используйте крупную типографику для заголовков, добавляйте “воздух” и не бойтесь иметь много пустых мест в ваших проектах в целом.
Экран регистрации на веб-странице.
7. Используйте изображения от края до края
Материальный дизайн любит изображения. Я имею в виду, что если вы решите включить какие-либо изображения в свой дизайн, вы должны дать им главную роль.
Изображения в материальном дизайне используются от края до края — в полном объеме. Это означает, что между краем изображения и краем окна / экрана нет полей.
Если все сделано правильно, это производит впечатление на человека, который использует продукт, а также предоставляет дизайнерам некоторые дополнительные инструменты дизайна среди довольно небольшого набора теней, цветовых палитр и слоев.
Твиттер-баннер с использованием изображения от края до края.
8. Для дизайнов на основе изображений извлекайте цвета из изображений
Говоря об изображениях, Google рекомендует нам извлекать цвета из изображений, которые мы используем в наших проектах, а затем сделать их частью цветовой палитры.
Трудно спорить с этим. Такое действие создавая впечатление, что все встало на свои места и просто в целом выглядит гармонично.
Визуальное представление взятия цветов из исходного изображения.
9. Используйте анимацию
По словам Google, анимация дает смысл.
Материальный дизайн использует тот же принцип и использует анимацию для взаимодействия с пользователями, давая им понять, как использовать дизайн.
Что анимировать? Просто сделайте отклик на только что выполненное действие. Например, пользователь нажал кнопку? Была ли анимация для подтверждения того, что действие выполнено.
Универсальность языка анимации в материальном дизайне позволила использовать его в различных продуктах. Даже крупные продукты, такие как YouTube и Google Chrome, включили анимацию в основные взаимодействия.
Анимация используется в приложении
10. Сделайте анимацию достоверной
«Достоверной» является ключевым словом здесь.
Дни анимации — которая просто движется по экрану — давно прошли. Сейчас, если вы собираетесь включить анимацию, вы можете сделать её достоверной в соответствии с законами физики — чтобы она соответствовала тому, как объекты реального мира взаимодействуют друг с другом.
Google посвящает целую главу в гайдлайнах материального дизайна для анимации.
В этих руководствах они объясняют, как ведет себя массу и вес, ускорение и замедление, и как работает замедление (способ сделать анимацию более естественной, изменяя скорость движения в разные моменты времени).
В материальном дизайне, анимация хороша только в том случае, если способна имитировать движение объектов реального мира. Это единственный способ, которым анимация обогатит интерфейс и сделает его более понятным для пользователя.
11. Сделайте все адаптивным
Один из основных принципов материального дизайна — сделать полученную работу доступной и пригодной для использования на любом устройстве и экране любого размера.
Прежде всего, цель состоит в том, чтобы сделать преемственный дизайн. Таким образом, пользователь не будет сбит с толку, если он переключится с одного устройства на другое, поскольку у него не будет отображен совершенно новый интерфейс.
С хорошо адаптированным дизайном они могут переходить без каких-либо препятствий и просто продолжать использовать приложение / сайт прямо с того места, где они остановились.
Естественно, это означает, что дизайн должен быть отзывчивым. К счастью, с современными фреймворками вы уже получаете большую часть рабочих заготовок, поэтому адаптация вашей работы не должна быть такой большой проблемой.
12. Помните, все в деталях
Одним из основных элементов, которые делают материальный дизайн настолько трудным для выполнения безусловно, является то, что он настолько сильно упрощен.
Например, при “скевоморфном дизайне” руководство было простым, «Сделайте так, чтобы каждый элемент дизайна как можно ближе напоминал его реальный эквивалент».