Что такое material design: Новое в материальном дизайне? 12 принципов, которые нужно знать — Дизайн на vc.ru

Новое в материальном дизайне? 12 принципов, которые нужно знать — Дизайн на vc.ru

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

5281 просмотров

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

Материальный дизайн для вас?

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

В основном ответьте себе на следующий вопрос: «Соответствуют ли принципы и принципы материального дизайна тому, чего я хочу достичь? »

1. Познакомьтесь с основным ресурсом

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

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

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

2. Понять «материал» в материальном дизайне

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

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

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

​Визуальная иерархия в дизайне

3. Используйте тени для передачи иерархии

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

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

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

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

4. Используйте яркие цвета

Цветовые палитры являются неотъемлемой частью языка дизайна, которые используют при создании продуктов. Яркий, чистый и насыщенный, основные качества цвета в материальном дизайне.

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

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

Одна из немногих вещей, которые остались, это цвет. Точнее, чистый цвет и часто яркие цвета. Яркие цвета играют действительно важную роль в дизайне материалов (и в этом случае и “плоского дизайна”), они привлекательные и делают взаимодействие с дизайном приятным для пользователя.

​Использование цвета в дизайне

5. Используйте основной цвет и акцентный цвет

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

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

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

​Экран входа в систему против заставки

6. Используйте пустоту

Материальный дизайн берет много идей из традиционного печатного дизайна и принципов, которые в нём есть.

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

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

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

​Экран регистрации на веб-странице.

7. Используйте изображения от края до края

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

Изображения в материальном дизайне используются от края до края — в полном объеме. Это означает, что между краем изображения и краем окна / экрана нет полей.

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

​Твиттер-баннер с использованием изображения от края до края.

8. Для дизайнов на основе изображений извлекайте цвета из изображений

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

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

​Визуальное представление взятия цветов из исходного изображения.

9. Используйте анимацию

По словам Google, анимация дает смысл.

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

Что анимировать? Просто сделайте отклик на только что выполненное действие. Например, пользователь нажал кнопку? Была ли анимация для подтверждения того, что действие выполнено.

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

​Анимация используется в приложении

10. Сделайте анимацию достоверной

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

Google посвящает целую главу в гайдлайнах материального дизайна для анимации.

В этих руководствах они объясняют, как ведет себя массу и вес, ускорение и замедление, и как работает замедление (способ сделать анимацию более естественной, изменяя скорость движения в разные моменты времени).

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

11. Сделайте все адаптивным

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

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

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

12. Помните, все в деталях

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

Например, при “скевоморфном дизайне” руководство было простым, «Сделайте так, чтобы каждый элемент дизайна как можно ближе напоминал его реальный эквивалент».

Примеры скевоморфизма:

​Скевоморфный калькулятор в Apple iOS 5.

С материальным дизайном это немного проще, но в то же время сложнее.

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

Оригинал: Nick Babich

Material Design от Google — что это такое, 4 принципа создания дизайна интерфейсов

Примеры компонентов Material Design для дизайна интерфейсов из «Официального руководства»

Краткая история подхода

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

2011 — год первых изменений. Разработчики постарались привести к общему знаменателю хотя бы часть интерфейса, для чего был создан проект Project Kennedy. Он предназначался для десктопных версий.

Логотипы известных сервисов Google в едином стиле в проекте Project Kennedy. Источник

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

Пример цветовой системы для приложения, сайта или сервиса из «Официального руководства» по Material Design

Flat Design — это концепция «плоского» дизайна, при котором все элементы управления (иконки, кнопки, меню) лишены тени и визуального объема. Объекты выглядят нереалистичными, зато ничто не отвлекает пользователя от решения его задачи.

Главное меню Windows 8 — яркий пример плоского дизайна интерфейсов. Источник

Скевоморфизм — концепция, которая конкурировала с плоским дизайном и в основе которой лежит максимальная реалистичность изображений (иконок, кнопок, фоновых рисунков). Графика наглядно демонстрирует объем предметов, их тени и текстуры. Скевоморфизм был популярен на заре использования смартфонов: он привлекал внимание, выглядел эстетично и дорого.

Пример скевоморфизма — скриншот рабочего стола iPhone с iOS 6. Источник

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

Пример материального дизайна иконки почтового сервиса. Нет гиперреализма, но сохранены мягкие тени и простые формы. Источник

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

Пример оформления элементов интерфейса с использованием особенностей Material Design: теней, ярких оттенков, анимации. Работа Nastassia Frost и Rimma Kovalevich. Источник

Другие особенности материального дизайна

Глубокие тени. Они способны обозначить структуру различных элементов на странице, которые расположены послойно. В частности, чем выше объект, тем больше его тень. Все так, как в реальности.

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

Фрагмент правил использования шрифтов из «Официального руководства» по Material Design

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

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

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

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

Пример использования принципов материального дизайна при разработке интерфейса. Заметно затемнение нижнего слоя и подсвечивание пунктов меню. Работа Anton Zuienko. Источник

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

Основным элементом всей системы становится анимация, с помощью которой можно:

• демонстрировать взаимосвязи. Открываем окно и видим подсвеченную форму для заполнения. Вбиваем в нее данные, и кнопка «Далее» становится цветной или просто появляется из небытия. Анимация ведет пользователя от одного действия к другому;
• обращать внимание. Фокус пользователя сосредоточен только на основном действии. Анимация не отвлекает его, а лишь дополняет происходящее на экране;
• демонстрировать особенности. Любой программный продукт имеет свои особенности и стиль, которые можно выразить через анимированные детали интерфейса;
• обучать. Демонстрация шагов, подсвечивание кнопок и форм — пользователю можно заранее показать путь, чтобы он освоился в новом для него интерфейсе.
• вызывать интерес. Анимация не только практична, но и привлекательна. Она вызывает интерес и желание понажимать на все кнопки. Элементарное человеческое «Вау, а что будет, если клацну сюда?».

Пример использования материального дизайна при разработке элементов интерфейса: один основной и несколько акцентных оттенков в цветовой схеме, шрифты с различным кеглем. Работа Ahmed Jalal. Источник

Главный источник сведений по предмету — «Официальное руководство» от Google. Скачать его можно на посвященном материальному дизайну сайте. Руководство содержит не только текстовые рекомендации, но и наглядные иллюстрации, которые демонстрируют основные принципы и помогают дизайнерам в их работе. Более того, для каждого конкретного случая составители подобрали как положительные, так и негативные примеры.

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

Для тех, кто занимается разработкой на базе Angular. js, существует официальный порт стилей. Там же можно найти видеоуроки (часть из них бесплатная, остальные доступны по подписке).

Введение — дизайн материалов

Цели Развернуть и свернуть содержимоеСтрелка, указывающая вниз при сворачивании и вверх при раскрытии.

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

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

Принципы Развернуть и свернуть содержимоеСтрелка, указывающая вниз при сворачивании и вверх при раскрытии.

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

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

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

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

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

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

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

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

Весь контент и код на этом сайте лицензированы в соответствии с лицензией Apache 2, если не указано иное, полный текст которой можно найти по адресу https://www. apache.org/licenses/LICENSE-2.0.html.

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

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

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

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

Цель дизайна материалов — лучше объединить фундаментальные принципы дизайна с технологиями.

Материальный дизайн имеет три основных принципа:

1.

Материал — это метафора

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

Это означает, что экранные кнопки должны выглядеть как кнопки в реальной жизни, элементы должны иметь тени, и необходимо соблюдать «основы света, поверхности и движения».

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

Например, всплывающая реклама — у нее должна быть тонкая тень, потому что тени есть у всех 3D-объектов.

 

2. Смелый, наглядный и преднамеренный

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

Будь смелым! Используйте пурпурный!

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

 

3. Движение придает смысл

Движение может использоваться для перемещения пользователя и создания смысла, в частности, движение особенно полезно для обеспечения обратной связи с пользователем.

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

 

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

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

Во-первых, материальный дизайн важен в контексте плоского дизайна.

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

 

Это большое дело.

Впервые элементы стали 90 092 меньше 90 093 плоскими, и в результате их стало проще использовать — без потери прекрасного минимализма плоского дизайна.

Во-вторых, материальный дизайн подходит к экранному дизайну с гораздо более осязательной стороны, чем другие языки или подходы дизайна раньше. Руководства по дизайну материалов размещают все объекты на экране в 3D-матрице, а не в 2D. То есть в мире материального дизайна объекты (например, текстовое поле) фактически занимают место.

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

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

No related posts.