Что такое Google Material Design и как он изменит нашу жизнь.

Material Design представляет собой концепцию дизайна, созданную для унификации сервисов, интерфейсов и прочих продуктов. Концепция была разработана компанией Google и представлена ею для широкой аудитории 25.06.2014 года на конвенции Google I/O. В основе разработки цветовая схема, свойства и элементы объектов дизайна. Material Design регулярно дополняется и обновляется разработчиками. Говоря простым языком, основная идея заключается в дизайне в виде блоков, которые открываются и сворачиваются кубиками, подобно картам, с использованием эффекта тени. Сами карты должны плавным образом переключаться между собой.

В основе стратегии такого дизайна лежит в создании целостного пользовательского опыта, возможности проникновения сервисов в самые разные сферы жизнедеятельности пользователя ПК.

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

- Джон Вайли, главный по дизайну поиска Google

Главные принципы

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

Тактильные поверхности. Интерфейс состоит из «цифровой бумаги». Слои этой «бумаги» размещаются один над другим, и отбрасывают тени. Благодаря этим теням, пользователи персональных компьютеров лучше понимают основы работы с интерфейсом.

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

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

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

Тактильные поверхности

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

Поверхность

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

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

Глубина

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

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

Нижний слой глубины является «дном».

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

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

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

Изящная типографика

Типографика имеет важное значение в полиграфическом дизайне. Она задает структуру контента и влияет на образование стиля определенного бренда.

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

Контрастная типографика

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

Модульная сетка и направляющие

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

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

Геометрическая иконографика

Простейшие иконки давно использовались на базе работы системы Андроид. В Material Design они выглядят еще проще и визуально приятнее.

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

Скачать иконки по теме:

Цвет

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

Основным цветом окрашивают action bar, а status bar выделяют более насыщенным его тоном. Акцентный цвет применяется для полосок, индикаторов, плавающих кнопок. Он привлекает внимание к ключевым элементам правления.

Акценты расставляются точечно и в небольшом количестве. Для остальной части интерфейса цвета применяют в соответствии с правилом: большой объем текста (список писем почты) оставляют стандартного размера и добавляют цвет для обращения внимания пользователя ПК; малый объем текста (калькулятор, фото) увеличивают в 2-3 раза в размере и добавляют цветные плашки.

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

Красивые фото

В Material Design можно и даже нужно использовать различные фотографии и иллюстрации. Часто в картинках отсутствуют рамки. Сам status bar делается бесцветным, чтобы не отвлекать внимание от изображений. «Цифровые чернила» всегда используют не только для красоты, но обязательно для функциональности дизайна.

• Рекомендуется брендирование.
• Нельзя забывать об отступах и свободном пространстве (для базовой сетки 8dp, для отступов — 72 dp).
• Используйте яркие изображения.

Осмысленная анимация

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

Пример 1. Анимация показывает, что именно эта конкретная карточка после нажатия вышла на передний план, раскрылась, и стало видно больше информации.

Пример 2. При нажатии на дату в календаре всплывает событие, которое плавно отрывается слоем от общего календаря, превращается в отдельный блок и раскрывается в подробном отдельном блоке с описанием этого события.

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

Реакция

Еще одним ключевым моментом анимации в Материальном дизайне считается реакция на определенные действия пользователя ПК. Изменения в интерфейсе Андроид L происходят после касаний пальцев. Эти изменения отображаются волнообразным действием.

Микроанимации

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

Четкость и резкость

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

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

Адаптивный дизайн

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

От общего к частному

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

Отступы

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

Направляющие

Отступы задаются благодаря направляющим. Ширина отступов для смартфонов, планшетов, компьютеров и телевизоров будет абсолютно разной. Так, для планшета она составляет 80 dp, а для экрана смартфона - всего 72 dp.

Размеры

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

Блоки

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

Тулбар (Toolbar)

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

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

Material как метафора

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

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

Хорошим его примером является приложение «Newsstand». Здесь визуализировались привычные нам объекты: газеты, журналы, которые стоят на полках. Перелистывая эти журналы мы имитируем реальное перелистывание обычной книги из повседневной жизни. Таким образом, в «цифру» продублирована традиционная реальная жизнь.

Развитие цифрового дизайна

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

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

Наглядность как фундаментальная основа

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

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

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

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

Осмысленная динамика

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

Примеры сайтов в стиле Material Design

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

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

Видеоролики

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

Roman Nurik, один из дизайнеров команды Google, рассказал, как изменилось приложение I/O 2014 в процессе разработки, чтобы соответствовать принципам Material Design. Специально для вас мы перевели его видео.

Видео от канала «Google Design».

На конференции для разработчиков Google I/O 2018, кроме обновленного Android и более глубокой интеграции искусственного интеллекта в свои сервисы, компания Google представила новый стандарт в дизайне системы и мобильных приложений - Material Design 2.0. Что нового?

Белое пространство и полупрозрачность Одним из самых заметных изменений в новом материальном дизайне является минимальное количество насыщенных цветов и серых подложек, только сплошное белое пространство и полупрозрачность. На мой взгляд это смотрится очень свежо, тем самым выводит операционную систему и софт на новый уровень визуального восприятия. Отныне стоковый Android P, без графических надстроек от сторонних производителей, я по праву считаю самым красивым решением среди интерфейсов. ИМХО.Новые инструменты для разработчиков: Material Theme

Плагин Material Theme для Sketch, представляет собой по сути библиотеку шрифтов, иконок и фирменных цветов предусмотренных новыми гайдлайнам Google в Android P. Также при разработке с его помощью вы в пару кликов можете отредактировать форму компонентов и типографику в вашем проекте.Больше скруглений и минимализма

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

Новые шрифты

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

Так что в скором времени мы можем ждать масштабный редизайн всех веб и мобильных сервисов Google. На данный момент в магазине приложений одними их таких первенцев являются Google Play Игры, Google Tasks и приложение для участников конференции Google I/O 2018.

• Обновленный стиль фирменных иллюстраций

• Использование четырех основных цветов логотипа в качестве визуального языка

Пример, новая версия Gmail:

Концепты Material Design 2.0

Само собой сообщество дизайнеров отреагировало на предстоящие перемены в дизайне от Google, и ровно месяц назад пользователь Reddit под ником Morphicsn0w представил свое видение площадки Google Play.

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

На экранах с описанием приложений Morphicsn0w сфокусировал внимание на описании приложений, сместив акцент с информации о количестве загрузок и оценках пользователей.

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

Не обошли стороной и любимый многими YouTube, автор портала 9to5Google, а по совместительству неплохой дизайнер Алекс Брукс (Alex Brooks) пофантазировал над тем, что можно было бы изменить в существующем клиенте видеохостинга. Реузльтат лично меня очень и очень воодушевил.

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

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

Более подробную информацию про концепт YouTube от Алекса читайте в оригинальной статье .Концепт Google Play Music в Material Design 2.0

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

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

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

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

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

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

Третье, что мне не нравится в Play Music - это расположение и убранство медиатеки. На мой взгляд её устройство слишком сложное. Например, чтобы получить доступ к данному разделу с главного экрана, требуется совершить целых четыре действия: сделать свайп, чтобы вызвать боковое меню; клик для выбора раздела «Фонотека»; свайпнуть по списку чтобы выбрать требуемую вкладку (плейлисты, радиостанции, исполнители, альбомы).

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

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

Презентация концепта Google Play Music на Behance Заключение

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

Спасибо за внимание!

25 июня 2014 года компания Google представила общественности свое новое видение на дизайн интерфейсов будущего – целый комплекс правил и условий, по которым впредь будут строиться интерфейсы всех продуктов корпорации. Зачем все это понадобилось? Еще пять лет назад все продукты Google сильно отличались друг от друга, в том числе различные версии одного приложения на разных устройствах. Разработчики задумались о создании специальных правил построения и унификации всех разрабатываемых приложений и сервисов, которые позже объединились под общим названием «Проект Кеннеди». Именно этот проект позже развился в Material Design (материальный дизайн ).

Философия материала

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

Одной из черт унифицированного дизайна стали карточки с информацией, которые могли размещаться в любой части рабочей области. Исследуя их в приложении Google Now, разработчики задали себе вопрос: «А что находится под этими карточками?». По словам вице-президента по дизайну Google Матиаса Дуарте (Matias Duarte), этот «невинный вопрос зажег мощную искру».

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

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

Квантовая бумага (Quantum paper)

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

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

Цифровые чернила (Digital Ink)

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

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

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

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

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

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

Значимость анимации

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

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

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

Заключение

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

В самом Google разработку материального дизайна ставят в один ряд с такими значительными событиями как разработка оконного интерфейса и управление курсором (Xerox PARC) и создание сенсорных экранов (Apple). Что ж, посмотрим, что из этого получится.

Новый логотип и айдентика Google продвигают идеи материального дизайна

Подробные гайдлайны от разработчика материального дизайна вы найдете здесь -

Дизайн-евангелиста Google Мустафы Куртулду о применении их технологии в разработке приложений Keep и Inbox.

В закладки

Перевод подготовлен командой онлайн-школы английского Skyeng .

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

Но что если для определённого продукта эти принципы не работают? И что делают дизайнеры Google, когда разрабатывают продукт, выходящий за рамки классических гайдлайнов?

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

Inbox: Модульная сетка

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

Когда команда Inbox сопоставляла предварительные варианты дизайна, концепция Material Design ещё была в разработке. Это дало Inbox отличную возможность - установить стандарты Material Design, одновременно решая задачу глубины и объёма в UI.

Глубина

Изначальный дизайн Inbox был недостаточно гибким - пространство сетки позволяло уместить только семь писем на 13-дюймовом экране. Этого было слишком мало, особенно по сравнению с Gmail, где помещается 16-20 писем.

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

Тим Смит

Главный дизайнер Inbox

Изменив параметры сетки, высоту строк и то, как выглядит шрифт, дизайнеры Inbox смогли добиться оптимальной глубины интерфейса, отображая при этом 12-17 писем, каждое внутри карточки Material Design. Интерфейс приложения адаптируется под устройство пользователя. К примеру, шрифт в строке «Тема письма» меняется в зависимости от размеров экрана.

Цвета, изображения и иконки

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

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

Верхняя панель

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

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

Тим Смит

Главный дизайнер Inbox

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

Keep: образцы адаптивной навигации

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

Вовлечение, пустые экраны и анимация

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

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

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

Женевьева Куэвас

Выбор правильных элементов Material: нижняя навигация или плавающая кнопка действия

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

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

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

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

Женевьева Куэвас

Инженер-программист Google Keep

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

Руководство, а не набор правил

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

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

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

Если вы используете Bower в качестве менеджера, для установки MDL в папку bower_components можно набрать следующую команду: bower install material-design-lite –save

Если же вы используете npm, для установки MDL в папку node_modules необходимо вбить следующую команду: npm install material-design-lite –save

Google рекомендует использовать CSS и JS файлы, расположенные на CDN. Данный метод мы и использовали в демо. Прежде всего, в шапке head HTML документа необходимо подключить CSS файл MDL, иконки Material Design и стили проекта, в которых можно будет вносить собственные изменения:

< link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" > < link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons" > < link rel = "stylesheet" href = "css/styles.css" >

Типографика в Material Design Lite

Для английского языка и похожих на него (латинские, греческие и кириллические символы) в материальном дизайне были выбраны шрифты Roboto и Noto.

Noto также поддерживает «плотные» скрипты типа китайского, японского и корейского, а также «высокие» скрипты типа языков юго-восточной Азии и ближнего востока, т.е. арабский, хинди и т.д. Чтобы подключить шрифт Roboto в свой проект, добавьте тег link в верхушку head HTML документа:

< link rel = "stylesheet" href = "http://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300" >

Для латинских, греческих и кириллических символов спецификация материального дизайна рекомендует типографский масштаб 12, 14, 16, 20 и 34. Применить типографские принципы MDL можно, добавив набор специальных классов в разметку. К примеру, .mdl-typography—display-2 для h1 и.mdl-typography—display-1 для

Сделает шрифт размером 45px и 34px соответственно:

Title

Sub-title

< h1 class = "mdl-typography--display-2" > Title < / h1 > < p class = "mdl-typography--display-1" > Sub - title < / p >

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

Как выбрать цвет для вашего проекта в MDL

Взгляните на файл MDL библиотеки material.indigo-pink.min.css. Название файла отсылает нас к цветовой палитре Material Design в стилях. В цветовой палитре по умолчанию используется цвет indigo в качестве основного, а розовый как акцентный. Но вы ни в коем случае не ограничиваетесь этими цветами. Ниже представлены рекомендации материального дизайна о том, как разработать собственную цветовую палитру и как использовать ее в MDL.

Принципы по подбору цвета в Material Design

Материальный дизайн любит сочетать яркие и приглушенные цвета, тени и подсветки: «Цвет должен быть неожиданным и ярким
Спецификация Google Material Design»

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

При разработке собственной палитры материальный дизайн рекомендует использовать три оттенка основной палитры и один акцентный цвет из вторичной палитры. Пример:

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

Как настроить цветовую палитру по умолчанию в Material Design Lite

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

Задать URL к файлу стилей MDL в атрибуте href ссылки link в шапке header вашего HTML документа.

Заменить indigo и pink на свои первичный и акцентный цвета соответственно.

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

< link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.teal-amber.min.css" >

Вот и все! Если же вы храните скомпилированные и минифицированные MDL файлы на своем сервере, тогда вам поможет сайт MDL. Там вы найдете Customize and Preview tool, с помощью которого можно выбрать основной и акцентный цвета на интерактивном колесе палитры. Затем можно загрузить CSS файл с выбранной темой и вставить его напрямую в проект:

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

MDL компонент слой

MDL предлагает множество широко используемых веб-компонентов, среди которых слои, кнопки, карточки, переключатели и т.д. Начните создавать структура вашего HTML шаблона с помощью слоев Material Design Lite. MDL слой распространяется на весь контейнер с классами.mdl-layout .mdl-js-layout. Начните с кода ниже, вставьте его сразу после открывающего тега body:

Для создания слоев в MDL используется CSS flexbox. Тег с классом.mdl-layout является flex контейнером со свойством flex-direction property: column. Слой состоит из следующих подкомпонентов:

Слой навигации

Как использовать вкладки для навигации

Создать меню можно одним из следующих способов:

Прозрачный хедер

Фиксированная боковая панель без хедера

Фиксированный хедер

Фиксированные хедер и боковая панель

Прокручивающийся хедер

Каскадный хедер

Можете свободно посмотреть все вышеперечисленные опции в разделе MDL navigation, а также поэкспериментировать с каждой из них в своем проекте.

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

Чтобы быстро создать хедер с вкладками вам понадобится: Добавить еще два класса к контейнеру, который мы создали ранее — .mdl-layout—fixed-header и.mdl-layout—fixed-tabs.

< div class = "mdl-layout Mdl-js-layout mdl-layout--fixed-header Mdl-layout--fixed-tabs" > < / div >

Обратите внимание на то, как MDL использует CSS классы из пространства имен BEM.

Your Title Tab 1 Tab 2

< header class = "mdl-layout__header" > < div class = "mdl-layout__header-row" > < ! -- Title -- > < span class = "mdl-layout-title" > Your Title < / span > < / div > < ! -- Tabs -- > < div class = "mdl-layout__tab-bar mdl-js-ripple-effect" > < a href = "#fixed-tab-1" class = "mdl-layout__tab is-active" > Tab 1 < / a > < a href = "#fixed-tab-2" class = "mdl-layout__tab" > Tab 2 < / a > < / div > < / header >

И осталось добавить соответствующие панели с контентом:

content panel 1 content panel 2

< main class = "mdl-layout__content" > < ! -- Panel 1 -- > < section class = "mdl-layout__tab-panel is-active" id = "fixed-tab-1" > < div class = "page-content" > < ! -- контентпанели1 -- > content panel 1 < / div > < / section > < ! -- Panel 2 -- > < section class = "mdl-layout__tab-panel" id = "fixed-tab-2" > < div class = "page-content" > < ! -- контентпанели2 -- > content panel 2 < / div > < / section > < / main >

У панели с id=»fixed-tab-1″ задан класс.is-active, она будет отображаться по умолчанию.

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

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

Your Title

< div class = "mdl-layout__drawer" > < span class = "mdl-layout-title" > Your Title < / span > < / div >

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

Сетка в Material Design Lite

MDL использует 12-ти колоночную сетку для настольных компьютеров, 8-ми колоночную сетку для планшетов (до 800px) и 4-х колоночную для экранов мобильных устройств (до 500px). Сделать контейнер сеткой можно, добавив класс.mdl-grid:

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

Такого результата можно добиться, если обернуть каждую секцию в разные.mdl-grid элементы, а отдельной секции добавить пользовательский класс с CSS max-width: 960px.

< div class = "mdl-grid intro-section" > < ! -- контентненавесьэкран-- > < / div >

Intro-section { max-width: 960px; }

Intro - section { max - width : 960px ;

Также если вы хотите избавиться от внешних отступов margin между колонок сетки, в MDL есть замечательный класс, который необходимо добавить к контейнеру колонок — .mdl-grid—no-spacing:

< div class = "mdl-grid mdl-grid--no-spacing" > < ! -- контент-- > < / div >

Вы получите что-то типа:

< div class = "content-grid mdl-grid" > < div class = "mdl-cell" > < ! -- контент-- >