Material 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.

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

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

Что бы вы понимали о чем идет речь, вот небольшое видео:

Самый главный документ, с которого стоит начать изучение Material Design, это конечно же гайдлайны от Google . Там полно примеров того как «надо» и как «не надо», а так же есть исходники (для Photoshop и т.п.), в которых можно поковыряться и разобраться что к чему.

Вот еще один хороший сайт с ежедневной подборкой концептов, приложений и т.п. выполненных в стиле Material Design — Material Design Daily . Очень много анимированных примеров, некоторые просто заставляют задуматься «каааак такое можно было придумать?». Одним словом — советую.

Пару слов стоит упомянуть и о подборке цвета в Material Design. Это наверное одна из главных составляющих хорошего дизайна. Вот несколько сайтов, который вам помогут в этом: Flat UI Colors , Material Pallete .

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 Матиас Дуарте (Matias Duarte) в интервью The Verge рассказывает об основных принципах нового дизайна, который получил название Material. Это совершенно иной подход, обеспечивающий унифицированный набор правил, начиная от вида программного обеспечения и заканчивая функциями. Пока дизайн кажется немного странным, и к нему необходимо привыкнуть.

Команда дизайнеров в Google почувствовала необходимость придумать единый внешний вид и функциональность ПО, которые могли бы применяться во всех продуктах: Android, Chrome OS, web-сервисах. Вместо того, чтобы начать с разработки палитры цветов, они начали с вопроса: «Ч то такое программное обеспечение?»

Материя и форма

Ответ пришел из отдела проектирования, когда Джон Уайли (Jon Wiley), главный конструктор поисковика Google, и его коллега Николай Житкофф (Nicholas Jitcoff) смотрели на дизайн Google Now. Они смотрели на карточный интерфейс и подумали: «А если сдвинуть карточку, то что находится за ней?»

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

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

Уайли и Житкофф говорят, что это эстетическая эволюция всей философии дизайна компании Google. В 2012 и 2013 годах в стенах штаб-квартиры интернет-гиганта закипела работа над Project Kennedy, который бы унифицировал дизайн всего.

Творчество и ограничения

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

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

Мы не мчимся через пространство и время на сверхзвуковых скоростях. Дизайн - это поиск решения в рамках жестких ограничений. Дизайн - это искусство.

Дизайнеры компании Google упорно отказываются называть используемый вымышленный материал. Решение, которое одновременно дает им большую гибкость и добавляет уровень метафизического мистицизма к веществу. Квантовая бумага - так прозвучало в некоторых утечках до Google I/O. Это важно, потому что материал подчиняется физике и он не попадет в ловушку скевоморфизма. Это не имитация физических объектов в точности, как выразился Дуарте, это что-то « волшебное» .

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

Материализуй

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

Вот почему Android Wear не дает пользователям ничего, кроме взаимодействия с уведомлениями. Алекс Фоборг (Alex Faaborg), дизайнер платформы, говорит:

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

Google просит слишком много доверия к себе и к его «волшебному» бумажному материалу, но Дуарте уверен, что на это есть веские причины.

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

Parc 3.0

За Material Design стоит гораздо больше, чем просто дизайн Android L, Android Wear и всего остального к чему причастна Google. Речь идет об ощущениях при взаимоотношении человека и технологий.

Дуарте говорит, что Xerox PARC проделала блестящую работу, создав принципы работы с привычными для всех окнами и курсором. Это было новаторством, потому что компании удалось создать виртуальную версию реального рабочего стола. Люди понимали то, как компьютер работает и могли комфортно с ним работать. Это касается и того, что сделала Apple с сенсорными экранами.

Теперь Google считает, что ей удалось проделать тоже самое. Уайли говорит, что сегодня у людей имеется множество технологий: сенсорные экраны, жесты, голосовые команды, интеллектуальные алгоритмы. Material Design объединяет все это многообразие в одну интуитивно-понятную вещь. Это поможет без труда пользоваться одним и тем же на Chrome OS, Android или в интернете.

9 принципов

1. Материал - это метафора

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

2. Поверхности интуитивно понятны

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

3. Размерность рождает взаимодействие

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

4. Единый адаптивный дизайн

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

5. Шрифты, графика, цвета

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

6. Первичные действия

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

7. Пользователи инициируют изменения

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

8. Анимационная хореография

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

9. Движение обеспечивает смысл

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

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

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

Материальный веб-дизайн (material design) — это визуальный язык, созданный компанией Google, который многие называют весьма перспективным направлением.

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

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

Материальный — как метафора

По словам представителей Google:

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

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

Скевоморфизм — это довольно простая методика придания реалистичности искусственным вещам, которая долгое время использовалась для оформления стандартных приложений iPhone («Заметки», «Новости» и другие). С момента официального релиза iOS 7 этот дизайнерский тренд теряет актуальность для пользователей, что вполне справедливо.

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

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

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

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

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

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

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

А пока что просто присмотритесь к размещенным ниже примерам и почерпните из них идеи для собственных разработок.

Планировка событий

Информация об авиарейсах