Material Design: сделайте приложения лучше. Реклама и скрытые возможности приложения

Material Design был продемонстрирован на конференции разработчиков Google I/O летом 2014 года. По мнению многих UX-дизайнеров, корпорация впервые представила реальную альтернативу гайдлайнам Apple. Издание The Verge подготовило список десяти Android-приложений, которые являются хорошими примерами реализации стиля Material Design.

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

Первое практическое применение Material Design получил в сервисе Google Now. Стиль стал основой для операционной системы Android 5.0, известной также как Android Lollipop.

Action Launcher 3

Простой лаунчер для операционной системы Android. Action Launcher 3 добавляет «быстрое меню» для доступа к приложениям, может изменять дизайн интерфейса, фоновое изображение, меню и прочее.

Falcon Pro 3

Альтернативный Twitter-клиент для Android-смартфона или планшета обновил свою графику и анимацию в соответствии с гайдлайнами Material Design.

FeedlyReader

RSS-ридер для сервиса Feedly также обновил свой интерфейс в соответствии с гайдлайнами Google.

Cabinet

Разработчики файлового менеджера первыми обновили интерфейс сервиса — Cabinet в Material Design появился еще до официального выхода операционной системы Android Lollipop. Приложение позволяет управлять файлами в смартфоне.

Google Inbox

Один из лучших, по мнению редакции The Verge, примеров применения концепции Material Design. Inbox заимствует идею стартапа Mailbox, который каждое входящее письмо представляет в виде задачи. Сервис доступен по приглашениям.

Weather Timeline

Простое приложение с прогнозом погоды. Разработчики предусмотрели возможностью установки виджета — также в стиле Material Design.

Simplenote

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

Google Messenger

Еще одно приложение Google, обновленное в Material Design. Пользователи могут менять цвета диалогов, настраивать уведомления и прочее.

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

Теги

• Разработка
• Дизайн

Зачем это нужно

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

Принципы

• Поверхности и тени. Элементы интерфейса должны представлять собой слои, наложенные друг на друга. Используйте на верхних слоях, чтобы обозначить их иерархию и обратить на них внимание пользователя.
• Плотность. Не оставляйте много свободного пространства между фотографиями и полей по краям экрана. Так вы создадите более наполненный интерфейс.
• Цвета. Используйте контрастные цвета, чтобы сделать акцент на бренде и важных элементах интерфейса. Выберите основной и акцентный цвета для всего приложения. Рекомендуем использовать , чтобы выбирать цвета прямо из контента.
• Макет должен соответствовать стандартной сетке с шагом 8 dp, позволяющей поддерживать единый стиль и удобство чтения. Для более точного размещения текста можно использовать сетку с шагом 4 dp. Такие элементы, как основной текст, уменьшенные изображения, названия панелей и др. следует выравнивать по базовым линиям .
• Движущиеся элементы , например , должны использоваться для связи одного экрана с другим и не мешать пользователям. Анимация делает интерфейс приятным и создает непрерывное визуальное повествование.
• Реакция на действие , например на прикосновение к экрану, должна выглядеть как . При этом для устройств с Android ниже версии 5.0 следует использовать android:selectableItemBackground . Кроме того, рекомендуем сделать так, чтобы интерактивные элементы приподнимались при касании , а при изменениях движение распространялось от точки контакта.

Системные компоненты интерфейса

• Ее цвет на устройствах с Android 5.0 и более поздних версий нужно изменить так, чтобы он соответствовал основному цвету приложения или контента на экране. Если вокруг изображений нет рамок и полей, строку состояния можно сделать прозрачной. API уровня 23 и выше позволяет сделать значки в строке состояния темными. Для этого используется атрибут .
• Верхняя панель и панели инструментов должны быть информативными и соответствовать фирменному стилю . В левом верхнем углу этих элементов не должно быть значка приложения. Вместо него используйте цвета, типографику и логотип. На экранах, где много графики, можно сделать прозрачной. Картинки, кроме изображений профилей, не должны иметь полей и даже могут находиться за панелью действий или состояния . Чтобы текст и навигационные значки было видно на прозрачной панели, накладывайте на изображения дополнительный слой с градиентом. Также рекомендуется использовать различные способы прокрутки , которые делают интерфейс более красивым и функциональным.
• Вкладки. Соблюдайте рекомендации по взаимодействию и стилю . Вкладки должны прокручиваться горизонтально, между ними не должно быть разделителей. Чтобы выделить активные вкладки , меняйте их основной цвет или размещайте под ними черту контрастного цвета. Как правило, вкладки и верхняя панель приложения находятся в одной плоскости, если вы не задали другую иерархию.
• Панель навигации должна соответствовать требованиям Material Design и содержать только основные элементы навигации. Ее слой следует помещать над верхней панелью приложения и контентом на экране, но под строкой состояния. При первом запуске приложения панель навигации должна быть открыта. Это поможет пользователям изучить навигацию.
• Нижняя панель навигации удобна, если в приложении есть от 3 до 5 элементов верхнего уровня. Такая наглядная панель, которую можно сдвинуть, позволяет делать текстовые ярлыки длиннее. Убедитесь, что она доступна на большинстве экранов (кроме экранов с данными, доступных не на верхнем уровне) и скрывается, если пользователь прокручивает страницу.

Элементы интерфейса, с которыми взаимодействует пользователь

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

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

Белое пространство и полупрозрачность

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

Новые инструменты для разработчиков:

Material Theme

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

Больше скруглений и минимализма

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

Новые шрифты

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

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

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

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

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

Концепты Material Design 2.0

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

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

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

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

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

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

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

Более подробную информацию про концепт YouTube от Алекса читайте в оригинальной статье .

Концепт Google Play Music в Material Design 2.0

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

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

Главный экран

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

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

Плеер

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

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

Медиатека

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

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

Меню/Side Bar

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

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

Заключение

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

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

На конференции I/O. Это серьёзное изменение визуального стиля и расширение инструментария, первые звоночки которого появились ещё в марте .

Визуально Android P продолжил сближение с iOS (различия между платформами стираются с обеих сторон):

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

И самое главное - теперь это полноценная дизайн-система с компонентами в коде , а не просто масштабные гайдлайны и шаблоны к ним с какими-то разрозненными примерами. Эти компоненты также поддерживают тематизацию, так что система выглядит целостной (сами компоненты начали появляться год назад). Новый сайт Material Design сделал фокус на две составляющие - дизайн и разработка - более явным. Они также запустили давно обещанный инструмент Gallery , аналог Zeplin и Wake. Но это как-то вяло на фоне обещаний, данных после покупки Pixate (основатель ушёл в Figma) и Form (Гугл подтверждает репутацию сгнаивателя купленных компаний).

Из других интересных деталей анонса:

Бета-версию уже можно поставить на некоторые телефоны. Финальная версия появится осенью. Засучиваем рукава, работы будет много.

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

Material Design (Материальный дизайн) - дизайн программного обеспечения и приложений операционной системы Android от компании Google. Впервые представлен на конференции Google I/O 25 июня 2014 года. Идея дизайна заключается в приложениях, которые открываются и сворачиваются как карточки, используя эффекты теней. По идее дизайнеров Google, у приложений не должно быть острых углов, карточки должны переключаться между собой плавно и практически незаметно.

Изначально внутри компании его называли кодовым именем «квантовая бумага» (quantum paper). Основная метафора материального дизайна - плоская бумага, находящаяся в трехмерном пространстве.

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

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