Подборка ресурсов по Material Design. Material Design: примеры использования

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Material Design как основа

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

«Когда нужно создать что-то привлекательное для пользователя, не стоит заново изобретать колесо»

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

Использование карточек в дизайне

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

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

Слева: концепт календаря на Material Design; Справа: Sunrise

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

«Являются ли карточки самым оптимальным решением при создании интерфейсов, или есть более интересные способы решения этой задачи?»

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

Остерегайтесь плавающих кнопок

Пример плавающей кнопки в Google inbox

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

Размещение кнопки на экране с несколькими задачами

Расположение меню в плавающей кнопке

Присваивать кнопке крайне важные элементы дизайна

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

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

Конверсия пользователей и стратегии по удержанию пользователей на своем сайте

При слишком большом рвении в области Material Design довольно легко забыть про основу. Как заранее решить, какие компоненты Material Design применять, и что улучшить?

«Четкий выбор конкретных компонентов дизайна на раннем этапе может загнать вас в рамки»

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

Меню

Какое самое важное действие совершает пользователь в моем приложении?

На каком экране (экранах) это происходит?

Какая у меня блок-схема приложения?

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

Правило 1: 80/20

Используйте правило 80/20. 80% пользователей будут использовать всего лишь 20% функциональности моего приложения. Как мне определить именно те 20% и облегчить к ним доступ?

Правило 2: Последовательность

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

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

Контент

Улучшение интерфейса

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

Типографика

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

Иконки

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

Уникальная цветовая схема

Приложение использует концепцию Material Design с необычной цветовой схемой. .

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

Маленькое предостережение

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

«Экспериментальный дизайн может испортить ваш сайт»

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

Заключение

Material Design отличная подушка безопасности в том случае, если вы столкнулись с проблемами в дизайне. Вы вольны сами придумать, как должен работать ваш интерфейс. В Snapchat заложена логика работы с жестами, Facebook Paper (iOS) переосмыслил сам макет, иерархию и анимацию, а Medium крайне эффективно минимизировал свой интерфейс и сосредоточил внимание пользователей на чтении (и записи).

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

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

Cкевоморфизм

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

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

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

Плоский дизайн

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

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

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

Плюсы:

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

Минусы:

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

Материал дизайн

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

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

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

Плюсы:

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

Минусы:

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

Заключение

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

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

Ваш выбор пишите комментариях, посмотрим кого больше!

В нашей сегодняшней статье мы затронем тему, которая еще не обсуждалась на 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. Подражать ему так же глупо, как, например, производителю лапши быстрого приготовления пытаться подрожать бренду “Ferrari”.

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

Корпоративный веб-сайт требует более осмысленный подход, чем просто сказать “хочу вот так”. Если сайт - это лицо бренда в сети, то оно должно иметь индивидуальные черты и визуально соответствовать общему образу компании.

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

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

Сайт Kiosk Browser не только выполнен в стиле Material Design, но и неплохо оптимизирован для мобильных устройств.

Очень удачное решение, в котором гармонично сочетаются детали и конструкции из гайдлайна Material Design (тени, кнопки, flat design, цвета и JS эффекты) и корпоративный стиль группы международных школ ISoE.

Платформа lifeaweso выполнена в соответствии с фундаментальными принципами Material Design: простота, ясность, понятность. Сайт еще находится в стадии разработки, но интеграция визуальной составляющей в стиле Material Design выглядит довольно неплохо.

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

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

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

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

Ну и, конечно, не будем забывать о первоисточнике. Интерфейс сервиса Google Alerts недавно обновился до Material Design, что существенно улучшило его визуальные характеристики и usability.