Теперь Material Design — полноценная дизайн-система

Обзор обновлённых Material Design и Android P от руководителя портальной дизайн-команды Mail.Ru Group Юрия Ветрова.

Google показала обновлённую дизайн-систему Material Design 2.0 на конференции I/O. Это серьёзное изменение визуального стиля и расширение инструментария, первые звоночки которого появились ещё в марте.

Теперь Material Design — полноценная дизайн-система

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

  • Много скруглений, что сильно перекликается с iOS 10-11. Возможно, это сделано с прицелом на безрамочные телефоны, которых становится всё больше, — это лучше сочетается с их скруглёнными краями экрана.
Теперь Material Design — полноценная дизайн-система
Теперь Material Design — полноценная дизайн-система
  • Цвет настроения — белый. Больше нет яркой шапки приложения и серых подложек, сплошное белое пространство с минимумом акцентов. В каких-то приложениях Google встречается цветная нижняя панель, и сама идея акцентных цветов не уходит из гайдлайнов, но тенденция явная (включая сайты Gmail и Drive).
Теперь Material Design — полноценная дизайн-система
  • Навигация по системе в духе iPhone X. Паттерн «рукоятки» вместо кнопки «Домой» с почти аналогичной механикой, отказ от отдельной кнопки списка приложений (также вызывается свайпом снизу) и ставшая официальной в последние годы нижняя панель навигации. Всё это помогает управлять современными телефонами, которые стали не только больше, но и выше за счёт безрамочности. Кстати, в некоторых новых приложениях Google инструменты навигации почти везде внизу. Осталось упростить кнопку «Назад» (она уже пропала с домашнего экрана).

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

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

Теперь Material Design — полноценная дизайн-система

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

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

Другие интересные детали анонса

  • Четыре цвета логотипа как основа визуального языка. Это хорошо получилось в Gmail для веба — иконка «+» и цвета индикаторов чётко наследуют идею.
Теперь Material Design — полноценная дизайн-система
Теперь Material Design — полноценная дизайн-система
  • Похоже, для своих продуктов компания перейдёт на шрифт Google Sans.
Теперь Material Design — полноценная дизайн-система
  • Самоограничения на использование телефона и отдельных приложений. Пользователь сам задаёт их, после этого приложение становится чёрно-белым, мотивируя прерваться. В ночное время телефон полностью переходит в такой режим.
  • Проще настраивать частоту уведомлений. Если пользователь несколько раз скрывает уведомление от приложения без прочтения, Android предложит скрыть его вообще. Наушники Pixel Buds могут зачитывать некоторые уведомления голосом.
  • Интеграция сторонних приложений в результаты поиска и контекстные меню в качестве Slices и поиск по выделенному слову.
Теперь Material Design — полноценная дизайн-система
  • Мобильный Сhrome поддержит дополненную реальность.
  • Экспериментальная камера Google Lens научилась делать больше и станет частью стандартного приложения.

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

2626
6 комментариев

А что толку? Гугл сама забивает болт на свои ГОСТы в плане дизайна, не то что сторонние разработчики

6

Это не гост, а рекомендации

9

Темизация же, а не тематизация

1

Дайте уже такой скин для Джумлы и закончим на этом 🌝

Унификация упростит дизайн приложений. Плагин даже сделали.

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

Мне лично жутко коробит белый аппбар вверху и остутствие F2F2F2 подложки под карточками - получается больничная тема.

1
Невыдуманные истории, когда владельцы бизнеса решили пренебречь информационной безопасностью

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

Невыдуманные истории, когда владельцы бизнеса решили пренебречь информационной безопасностью
1515
44
33
11
11
Батюшка Бизнесменский, или как автор vc из топ-5 ворует чужую статью, выдавая её за своё интервью, а неудобные комментарии удаляет

Незапланированное воскресное расследование о том, как топовый автор обманывает читателей vc.ru

Батюшка Бизнесменский, или как автор vc из топ-5 ворует чужую статью, выдавая её за своё интервью, а неудобные комментарии удаляет
2323
66
33
11
11
Стратегию на 5 лет может написать любой дурак! А ты попробуй спланировать шаг на завтра?
Стратегию на 5 лет может написать любой дурак! А ты попробуй спланировать шаг на завтра?

Я очень долго думал, что Стратег подразумевает аццкие компетенции в построении Стратегий. Типа как Император Бонапарт, стоишь на холме, под тобой поле сражения. Конница справа, артиллерия слева, посредине тоже кто-то есть.

11
Космический корабль Crew Dragon с российским космонавтом Кириллом Песковым пристыковался к МКС

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

Фото NASA 
66
Недвижка подорожала до максимума, рубль сильно укрепился. Ипотека, дивиденды, облигации, крипта и другие новости. Воскресный инвестдайджест

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

Недвижка подорожала до максимума, рубль сильно укрепился. Ипотека, дивиденды, облигации, крипта и другие новости. Воскресный инвестдайджест
2020
33
33
11
11
Меня выгнали с работы, и я открыла глянцевый журнал. Разборки, воровство, слёзы...

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

Меня выгнали с работы, и я открыла глянцевый журнал. Разборки, воровство, слёзы...
1717
33
22
11
31 вариант международных площадок где можно опубликовать свою статью. В одной табличке с названиями, сайтами, описаниями и посещаемостью. Делюсь с вами
31 вариант международных площадок где можно опубликовать свою статью. В одной табличке с названиями, сайтами, описаниями и посещаемостью. Делюсь с вами
2222
55
Блогер, а ты отслеживаешь источники трафика в свой ТГ канал?
Блогер, а ты отслеживаешь источники трафика в свой ТГ канал?

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

22
11
«Чем ты гордишься?»: интервью со специалистом по визуальным эффектам клипа Abracadabra Lady Gaga

Что заставляет специалиста по-настоящему гордиться своей работой?Я попросил лучших в своём деле рассказать свои истории.
Читайте коллекцию отличных историй замечательных специалистов!
Сегодня с нами Игорь Эйт — VFX Supervisor (Lady Gaga, Damiano David, Kaytranada, Korn, Little Big* и др.) с рассказом о своей работе.

Рубрика «Чем ты гордишься?» | Изображение создано в сервисе <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fgerwin.io&postId=1043253" rel="nofollow noreferrer noopener" target="_blank">Gerwin.io</a>
1111
33
«Вам бы делать хорроры»: в Голливуде появились первые ИИ-киностудии

Издание Forbes рассказало, что за фильмы они снимают и какие инструменты используют.

1717
77
33
Наш актеры и так играют как ИИ
Делится ли имущество в "гражданском браке"?

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

Делится ли имущество в "гражданском браке"?
55
[]