На конференции для разработчиков 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.

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

desyatykh 11 марта 2015 в 17:08

Material Design: на Луну и обратно

• Блог компании Redmadrobot ,
• Разработка мобильных приложений ,
• Разработка под Android

• Tutorial

“Это унылое диалоговое окно действительно нужно?”

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

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

Все стало меняться в 2011 году, когда в Google начали усиленно работать над унификацией визуальной части экосистемы своих продуктов и назвали все это Project Kennedy.

При чем тут Кеннеди?

Легенда такова: президент Кеннеди инициировал программу полёта человека на Луну (если верить, что этот полёт когда-либо был). А большой начальник в Google Ларри Пейдж исповедует принцип, что продукты нет смысла улучшать на 10% - они должны быть в 10 раз лучше, чем у конкурентов. Если уж запускать продукт, то сразу на Луну. Вот и здесь было решено круто всё переделать.

Результат в первую очередь коснулся веба, но затронул и некоторые мобильные продукты. В то же время шла отдельная работа над дизайном Android - Holo, который пришел на смену не слишком эстетически приятным интерфейсам старой Android.
Но оставалась одна проблема: Holo по-прежнему отличался от Project Kennedy.


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

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

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

4 принципа Material Design

Material Design зиждется на четырех основных принципах:

1. Тактильные поверхности. В Material Design интерфейс складывается из осязаемых слоёв так называемой «цифровой бумаги». Эти слои расположены на разной высоте и отбрасывают тени друг на друга, что помогает пользователям лучше понимать анатомию интерфейса и принцип взаимодействия с ним.
2. Полиграфический дизайн. Если считать слои кусками «цифровой бумаги», то в том, что касается «цифровых чернил» (всего того, что изображается на «цифровой бумаге»), используется подход из традиционного графического дизайна: например, журнального и плакатного.
3. Осмысленная анимация. В реальном мире предметы не возникают из ниоткуда и не исчезают в никуда - такое бывает только в кино. Поэтому в Material Design мы всё время думаем о том, как с помощью анимации в слоях и в «цифровых чернилах» давать пользователям подсказки о работе интерфейса.
4. Адаптивный дизайн. Речь идет о том, как мы применяем предыдущие три концепции на разных устройствах с разными разрешениями и размерами экранов.

Итак, будем двигаться по порядку.

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

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

Поверхность

Что такое поверхность? В основе своей это “контейнер” с тенью и ничего больше. Но и этого вполне достаточно, чтобы отличить один объект от другого и показать, как они расположены друг относительно друга. Философия Material Design стремится к простоте и “чистому” дизайну.

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

Глубина

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

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

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

NB!

1. Глубина должна иметь смысл. Задавайте себе вопрос: «Почему так, а не иначе?» Если ответа нет, имеет смысл поискать другое решение.
2. Позаботьтесь о логистике. Плавающие кнопки, тулбары и диалоговые окна находятся на определенной высоте. Иногда им нужно перемещаться по оси Z, чтобы избегать столкновений, когда что-то происходит. С этой вот хореографией нужно быть предельно внимательным.
3. Не надо насиловать кнопку. Плавающая кнопка - очень характерный элемент. Многие считают, что стоит добавить её в интерфейс: так это сразу становится Material Design. Но она должна использоваться только для ключевого действия в вашем приложении. Если вам нужно закрыть какое-то окошко или подтвердить действие, то не нужно использовать плавающую кнопку. Для этого есть другие элементы.
4. Не все должно быть на карточке. Если у какого-то объекта есть много форм и он содержит в себе много разного контента, то карточка подходит. А если нет, то, может, лучше сделать это обычным текстом или текстовым списком?
5. Это унылое диалоговое окно действительно нужно? Дизайнеры Google постарались, чтобы сделать диалоговые окна получше, но всё равно для большинства задач больше подходят Bottom Sheets. Есть еще Snackbars. Диалоговые окна нужны только чтобы задать вопрос пользователю.
6. Используйте раскрытие списков. Это недооценённый паттерн, но он вполне себе Material и хорошо решает задачу.

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

Раз поверхности в Material Design мы называем «цифровой бумагой», то всё, что на ней размещается - текст, изображения, пиктограммы - нанесены «цифровыми чернилами». И Material Design использует классические принципы полиграфического дизайна в оформлении интерфейсов.

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

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


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

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

Размер шрифта

На сайте google.com/design/spec есть стандартная палитра шрифтов, которую можно смело использовать. В палитре используется шрифт Roboto, но его можно заменять своим фирменным шрифтом, чтобы поддержать бренд. Важно всё внимательно протестировать, так как на разных устройствах рендеринг шрифтов может работать по-разному. Обычно OTF шрифты работают лучше, чем TTF.

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

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

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

Теперь к расположению контента на экране. В полиграфическом дизайне используются модульные сетки, в экранном дизайне это больше базовые сетки с очень маленькими модулями. Так, в Material Design используется сетка с шагом в 8dp. DP - это density-independent pixel, единица во многом аналогичная единице point в iOS.

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

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

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

Если говорить про иконографику, то простые иконки использовались в Android уже на протяжении какого-то времени, но в Material Design они стали еще проще и дружелюбней. На неофициальном ресурсе materialdesignicons.com дизайнеры могут найти пиктограммы для своих целей и по возможности внести свой вклад.

Цвет

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

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

Насколько много цвета применять? Акценты ставятся точечно, в небольшом количестве. Для раскрашивания остальной части интерфейса есть простое базовое правило. Когда текста много, например, это список почты, стоит оставить app bar стандартного размера и покрасить его, чтобы позволить пользователю сосредоточиться на содержимом. Если контента не так много, например, детальный просмотр отдельного элемента, фото или калькулятор, то это отличная возможность для применения больших цветных плашек - 2х или 3х высоты app bar.

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

Мы взяли фотографию, и алгоритм выделил из него 6 цветов с разными характеристиками:
- есть 3 сочных и 3 приглушенных цвета;
- они делятся на светлые, стандартные и тёмные тона;
- для каждого цвета фона определяется свой цвет текста, который также можно использовать.

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

И наконец, как и в печатном дизайне, в Material Design поощряется использование фотографии и иллюстраций во всей красе. Картинки в основном размещаются без рамок, часто «навылет». Даже status bar специально делается прозрачным, чтобы не мешать. При этом каждая капля «цифровых чернил» на экране имеет функцию, почти ничего нет просто для украшения.

NB!

1. Брендируйте с удовольствием. Google находится в более выгодном положении с тем, что может использовать яркие цвета в качестве фирменных, но это не стоит воспринимать как проблему. Цвета можно выбрать из корпоративного брендбука и вообще использовать логотип.
2. Не забывайте отступы и “давайте воздуха”. Базовая сетка в 8dp и отступ слева в 72dp - практически правило. Пусть контенту будет хорошо и свободно.
3. Выразительные фото делают погоду. Фотографии и иллюстрации в качестве выразительных средств - наш выбор.

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

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

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

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

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

Асимметрия

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

Реакция

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

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

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

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

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

NB!

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

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

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

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

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

Отступы

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

Whiteframes

Идеи по организации пространства и отступам для разных экранов можно подсмотреть на сайте google.com/design/spec в разделе Whiteframes. Это отличное место, чтобы начать, понять общий смысл и затем продолжить собственные эксперименты.

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

Направляющие задают нам отступы для «чернил» на отдельных листах «бумаги». На смартфоне у нас один лист и один хороший отступ слева, а на планшете их два и в обоих случаях есть отступ. Важно, что для этих двух форм-факторов отступ будет разным. На планшете это 80dp, а на смартфоне - 72dp. Отступы от краёв экрана также разные.

Размеры

Рекомендуется брать кратные пропорции для всех элементов. В частности - выбирать размер app bar значительно удобнее, если делать его кратным: 1х, 2х, 3х. На смартфонах и планшетах этот размер разный, но приложение без проблем адаптируется.

Блоки

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

Toolbar

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

NB!

1. Далеко не всегда нужен navigation drawer. Google очень часто использует выдвижную навигацию в своих приложениях, поэтому вы можете видеть её в разных примерах. Но у Google очень много задач, которые можно решить с её помощью: разместить помощь, настройки, логин/логаут, информацию о пользователе и так далее. Если у вас похожие задачи, то всё OK, а если вы делаете простой инструмент, то не стоит.
2. Cмелее и остроумнее с тулбарами. Возможность менять размер тулбара динамически, делать его двойного и тройного размера - это очень круто и удобно. Большинство дизайнеров боится с этим связываться и выбирают один размер раз и навсегда, но тут можно и стоит быть смелее.
3. Не надо делать из нижнего угла гетто для плавающей кнопки. Плавающая кнопка может быть где угодно: снизу, сверху, справа, слева. Конечно, в углу до неё может быть удобно дотягиваться, но это не единственный вариант. Кнопка может перемещаться с места на место в зависимости от задач.
4. И смартфоны, и планшеты; и вертикально, и горизонтально. Линейка Android-устройств велика, и это не упрощает жизнь разработчикам. Но правда в том, что у пользователей действительно есть все эти устройства, которые они поворачивают и так и этак (даже если речь идет о смартфонах). Этот момент надо отрабатывать.

Это Material Design. Не бойтесь экспериментировать и ошибаться: не стоит зацикливаться на копировании существующих решений. Пробуйте!

Теги:

• material design
• android
• дизайн интерфейсов

Добавить метки

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

Комментарии 121

• • • • • • • • • • Вы тоже, как и гугл только горизонтально держите телефон?
                    

                    В вертикальном только 50-70% экрана используется

                    
                    

                    • На этом экране довольно много текста.

                      Это много текста? Что же Твиттер с людьми то сделал…

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

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

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

Google представил материальный дизайн широкой публике 25 июня 2014 года как дизайн новой операционной системы Android, получившей впоследствии название Lollipop. Полноценно использовать материальный дизайн можно только в рамках создания приложений для Lollipop, но некоторые приложения для Android 4 также вполне могут быть переработаны в стиле material, впрочем, с определенными ограничениями. Главный и, вероятно, единственный фактор, существенно ограничивающий свободу разработчиков приложений для Lollipop – плохая совместимость концепции material design с более ранними версиями Android и пока еще небольшая распространенность Android 5.1 Lollipop. В любом случае, устранение последнего недостатка является лишь вопросом времени.

Android Lollipop

Выход в свет концепции material design был сопряжен с появлением подробного, доступного и обстоятельного гайдлайна от Google . Обсуждая материальный дизайн в нашей статье, мы будем регулярно обращаться к этому полному и яркому руководству, разработанному дизайнерами Google.

Основные тезисы и базовые принципы Material Design

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

1. Поверхности. Воплощенные в виде карточек, созданных из «цифровой бумаги», такие поверхности полностью подчиняются законам физического мира, обладают тактильным откликом и обеспечивают сильную обратную связь вместе с высокой интуитивностью.
2. Типографика полиграфического толка. Вместо того чтобы изобретать велосипед, почему бы не воспользоваться более чем вековыми наработками в области полиграфии? Учитывая, что исходную поверхность теперь представляют слои виртуальной, практически осязаемой бумаги, вполне логично наносить на нее информацию сообразно лучшим образцам полиграфической продукции. Говоря более утрированно, Google адаптировала правила «реальной», полиграфической типографики для экранов мобильных устройств.
3. Анимация. Анимация в материальном дизайне должна подчиняться физическим законам, а следовательно – интуитивным ожиданиям пользователя. Взаимосвязь движущихся объектов, их влияние друг на друга, способ появления и движения – все это должно быть реальным, логичным и предсказуемым.
4. Адаптивный дизайн. Тот самый главный аспект, о котором мы говорили в начале статьи. Адаптивный дизайн призван унифицировать пользовательский опыт и сделать его единообразным на всех платформах.

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

Поверхности, их свойства и функции

В свойствах поверхностей сосредотачивается та самая материальность концепции Google. Сама структура интерфейса максимально реалистична – она имеет глубину, ограниченную толщиной устройства. К примеру, устройство толщиной в 1 см по material design будет содержать в себе внутренний мир такой же толщины. Это очень напоминает тонкий аквариум, у которого есть задняя стенка и переднее стекло, но вместо морской живности по этому аквариуму плавают поверхности, напоминающие листки бумаги и распределяющиеся по толщине аквариума слоями. И, точно так же, как и подводные обитатели, эти поверхности-карточки полностью подчиняются физическим законам – порой кажется, что они более чем реальные, заключенные между задней стенкой смартфона и стеклом дисплея.

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

Ось Z в мире material design отвечает за объем интерфейса

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

Способ отображения тени в материальном дизайне

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

Приоритетная поверхность выходит на первый план, отбрасывая тень на нижний «листок»

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

Особенности типографики в Material Design

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

Примеры типографики material design

Шрифты

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

Шрифт Roboto

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

Контрастная типографика в действии

Расположение контента или принцип верстки в material design

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

Структура и расположение полей в материальном дизайне

Иконки

Иконографика, используемая в материальном дизайне, представляет собой логическое развитие идеи максимального упрощения, которую можно было наблюдать в более ранних версиях Android. Google характеризует иконки для material как простые, отчетливые и дружелюбные. При этом идея материальности также может распространяться на иконки – сам Google последовательно воплощает идею material в иконках своих продуктов. К примеру, иконка Gmail, изображающая бумажный конверт, происходит от своего реального аналога. В среде материального дизайна упрощенное изображение конверта кажется почти таким же реальным, как «настоящий» прототип – на иконке можно наблюдать характерные тени, обозначающие изгибы и физическую структуру листа бумаги, свернутого в форме почтового конверта.

Виртуальный прототип бумажного конверта и готовая иконка Gmail

Примечательно, что материальный подход к созданию иконок допускается только в отношении тех иконок, которые символизируют конкретный продукт – такой, как Gmail. Другие же, системные (или UI icons) иконки, которыми наполняются приложения, имеют менее материальную природу. Они по-настоящему минимальны, однородны и просты. Благодаря своей простоте и символичности, они удобочитаемы даже при значительном уменьшении. В таких иконках преобладают геометрические формы.

Иконки Android Lollipop – разве может быть что-то более минималистичным и простым?

Для разработчиков Google предлагает внушительный набор иконок, выполненных в стиле материального дизайна. В этой подборке можно найти, пожалуй, любые необходимые иконки для создания приложений с материальным дизайном. Набор иконок material design от Google доступен на GitHub. Также хотелось бы упомянуть ресурс materialdesignicons.com , на котором можно найти не только иконки других авторов, но и предложить разработанные самостоятельно.

Философия цвета

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

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

Примеры основных цветов из Primary палитры и родственные им акцентные цвета (приводятся в нижних блоках, с буквенным обозначением в виде « A » перед номером оттенка)

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

Status bar принимает цвет action bar , но по-прежнему выделяется более насыщенным, темным оттенком

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

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

Анимация

Движение супрематического квадрата, Казимир Малевич (1920) и Meaningful Motion , Google Material Design (2014)

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

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

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

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

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

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

Перемещение слоя «цифровой бумаги» в галерее

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

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

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

Эффект растекающейся поверхности может быть очень изящным и красочным

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

Пример анимации базовых иконок в Android Lollipop

Вездесущий Ripple -эффект

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

Ripple -эффект, происходящий при быстром касании экрана пальцем

Ripple -эффект, происходящий при попытке перемещения изображения внутри галереи

Технический аспект анимации material design или естественная огибающая

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

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

График движения анимированных объектов: быстрое ускорение и плавное замедление

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

Наиболее важный, ключевой аспект материального дизайна. Философия material design подразумевает полную унификацию пользовательского опыта. Иными словами, пользователь не должен сталкиваться с разными версиями одного приложения, пользуясь разными гаджетами. Опыт пользователя должен быть одинаков и для десктопа, и для смартфона или планшета. Единственные допустимые и объективные различия – это разные размеры и пропорции элементов интерфейса приложения. Во всем остальном разные версии одного приложения должны формировать совершенно идентичный пользовательский опыт.

Необходимость унификации и выработки единообразного пользовательского опыта Google осознали одними из первых. На практике это осознание обернулось так называемым проектом «Кеннеди», когда в 2011 году компания начала разрабатывать единый тип интерфейса для всех своих приложений. В эстетическом и UX-отношении Google добились неплохих результатов, однако, между версиями их продуктов для десктопа и для мобильных гаджетов под управлением Android все еще оставалась настоящая пропасть. Собственно, сам material design является следующей после проекта «Кеннеди» попыткой создать по-настоящему унифицированный интерфейс.

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

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

Модульная сетка и распределенные блоки

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

Интерфейс, выполненный в соответствии с принципами material design , универсален для любого экрана

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

Элементы

Плавающая кнопка в нормальном или мини- исполнении

Floating action button . Плавающая кнопка – один из самых характерных и узнаваемых элементов материального дизайна. Именно ее пользователь замечает в первую очередь. Плавающая кнопка является очень удачным способом подтолкнуть пользователя к какому-либо ключевому действию, с ее помощью человек быстрее получает доступ к тем функциям, которые для него наиболее актуальны в данный момент. Кнопка имеет свойство оказываться в различных частях экрана и, несмотря на то, что чаще всего ее можно встретить в нижнем углу, она может находиться в любой точке экрана.

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

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

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

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

Floating Action Button в действии

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

Позитивные и негативные действия floating action button

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

App bar , пришедший на смену action bar

Серьезно изменился, по сравнению с предыдущими версиями, action bar. В Android Lollipop его функциональность заметно возросла и теперь обновленный элемент называется app bar. Благодаря изменениям, новый app bar является инструментом полного контроля пользователя над приложением, причем, как и в случае с другими аспектами material design и новой ОС Lollipop в частности, app bar полностью интуитивен и понятен.

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

Базовый вариант обновленного action bar , содержащий необходимые элементы для управления приложением

Оттенки app bar , предложенные Google

Текущее положение вещей с разработкой приложений для Android Lollipop и AppCompat v21

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

Впрочем, для тех разработчиков, которые хотят сохранить совместимость своих приложений со старыми версиями Android, Google предлагает набор инструментов, позволяющих использовать элементы материального дизайна в приложениях для предшественников Lollipop. В соответствующем блоге разработчикам предложено ознакомиться с библиотекой AppCombat, с помощью которой можно внести элементы material в старые версии Android.

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

Виджет app bar

Критический взгляд на Material Design

При всей очевидной новизне и удачной реализации, у материального дизайна (при желании) можно обнаружить некоторые недостатки. Хотя, как и во всех подобных вопросах, каждый сам решает, являются ли перечисленные моменты недостатками. Стоит заметить, что на данный момент сторонники концепции material design все-таки составляют большинство от общего числа тех, кто продолжает бурно обсуждать последнее детище Google. Тем не менее, более скептически настроенной публикой к интерфейсу Lollipop выдвигаются следующие претензии.

Microsoft Flat Design был на порядок практичнее и удачнее material design . Как мы уже говорили, материальный дизайн является не более чем удачной компиляцией подходов и приемов, которые уже были разработаны и использованы кем-либо ранее. Одна из концепций, которая была взята на вооружение разработчиками материального дизайна – это так называемый «плоский дизайн» от Microsoft. Сама идея отказа от излишеств в пользу плоского цифрового пространства впервые появилась в продуктах Microsoft. Плоский дизайн представлял собой полный отказ от скеоморфизма в любых его проявлениях. Материальный же дизайн является смягченной версией этой концепции благодаря имитированию «цифровой бумаги» и «цифровых чернил». Материальный дизайн вобрал в себя лучшее из двух миров – плоские и минималистичные пространства от плоского дизайна и определенный анимированный объем от скеоморфизма.

Microsoft Flat Design

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

Неэффективное использование площади экрана, слишком много пустого пространства. Обилие пресловутого «воздуха» в материальном дизайне (как и в современном дизайне в целом) – предмет наиболее жарких споров между дизайнерами, разработчиками и простыми пользователями. Вопрос пустых пространств в современных интерфейсах и в самом деле довольно спорный, так как отношение к количеству свободного места на экране зависит, все-таки, от индивидуальных предпочтений. Многие пользователи желают видеть всю (или большую часть) необходимую информацию перед собой, стараясь не прибегать к скроллу и перелистыванию. Таких пользователей откровенно раздражают большие отступы и промежутки между контентом, как и необходимость постоянно пользоваться скроллом. Сгруппированный контент, грамотно рассредоточенный по всей площади экрана – их выбор.

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

Для примера сравним интерфейс меню Settings у Android и iOS:

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

Обсуждение достоинств и недостатков материального дизайна все еще продолжается, пользователи и разработчики обращают внимание на спорные моменты и недоработки, а также ищут способы наиболее эффективного использования концепции material design. Уже в самое ближайшее время мы увидим, какая судьба ждет материальный дизайн – останется ли он неоднозначным поветрием, навязанным нам на какое-то время гигантом Google, станет ли просто еще одним большим экспериментом в области интерфейсов или будет новым этапом, поднимающим искусство UI на новый уровень.

Заключение

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

Стиль Material design (материал дизайн в русской версии), набрав безумную популярность, остаётся для большинства непонятным и неизведанным объектом. Мы с вами разберёмся на простых и понятных примерах, что такое material design и как его использовать.

Изначально дизайнеры Google ставили перед собой три глобальные задачи:

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

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

Откуда взялся Материал Дизайн: статистика мобильного интернета

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

«Материал» в дизайне: что это?

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

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

Пример наложения слоёв "цифровой бумаги"

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

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

Кнопка в стиле material дизайна и кнопка Web 2.0

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

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

Ошибки и заблуждения

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

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

Третье. Материал и его интерактив – это единственное, что отличает этот стиль. Нет! Чтобы получился «канонический» material design, как у Google, нужно соблюдать и другие принципы:

• Картинки оформляются без промежутков, край к краю;
• Крупные, хорошо читаемые шрифты без засечек;
• Цветовое кодирование;
• Иконки, выполненные по тем же принципам материал дизайна;
• Адаптивная вёрстка.

Полный список правил можно узнать в официальном разделе Google про material design.

Android material design

В применении общих правил к мобильным приложениям есть и свои особенности. Помните, мы говорили про тени? Изначально элементы material design для Android действительно лежат друг на друге, как листки бумаги. Но при взаимодействии каждый элемент, будь то диалоговое окно или кнопка навигации, поднимается вверх. Это способ, с помощью которого в этом стиле выделяются активные блоки. Здесь используется тот же принцип, который со времен Web 2.0 заложен в технологию всплывающих окон (popup-ов).

Теперь "послойный принцип перешел от попапов ко всему интерфейсу

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

Цвета в материал дизайне

Подход к цветовой гамме напоминает FLAT-style. Это достаточно яркие, сочные, природные цвета. Material design подразумевает использование трёх основных типов цветов:

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

Цвета material design: палитра Google

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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