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

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

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

Суть Material Design заключается в том, что каждая часть интерфейса состоит из цифрового «материала». Материальность подчёркивается узнаваемыми физическими характеристиками: все элементы имеют определённые границы, согласованы между собой по высоте и отбрасывают друг на друга тени. Благодаря этому возникает ощущение глубины и многослойности пространства, и в то же время объекты приобретают иерархию и осязательность. Material You придерживается этой тенденции, отходя от однотипных по своему дизайну интерфейсов предыдущего поколения.

Форма интерфейса

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

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

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

Изменения коснулись также таких компонентов, как чипы (chips) — их сделали прямоугольными и сгладили углы. При этом чипы разделены на четыре типа:

• Assist — для автоматизированных действий, например, добавить событие в календарь;

• Filter — для фильтрации данных;

• Input — для добавления данных, которые были введены пользователем, например, адрес электронной почты;

• Suggestion — для подбора предположений о возможных действиях пользователя, например, варианты слов во время ввода текста.

Кроме того, в Material You предусмотрен ещё один тип кнопок — кнопки-иконки, которые позволяют выполнять дополнительные действия одним нажатием.

Шрифт

Ещё одним шагом к адаптивности стал отказ от фиксированных размеров шрифтов. Теперь в приложениях будут использоваться динамические вариативные шрифты, которые автоматически меняются в зависимости от устройства и размера экрана — это сделает взаимодействие с контентом ещё более удобным. Правда сами пользователи вряд ли заметят это нововведение — настолько плавными и естественными будут такие изменения. Этот подход обеспечивает более комфортную разработку для экранов любых размеров: от смартфона до smart-телевизора.

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

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

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

Цвет

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

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

Динамические цвета

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

Менять обои легко — а благодаря Material You вы сможете также легко преображать интерфейс устройства. Встроенная система анализирует цветовую схему обоев и извлекает из неё так называемый seed color, который становится основой цветовой темы устройства. При этом вся градация цветов разбивается на тринадцать тонов в зависимости от количества света, присутствующего в цвете. Это помогает достичь максимальной красочности и в то же время гармоничности сочетания.

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

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

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

Итог

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

Мы в CleverPumpkin также поддерживаем современный подход в дизайне и разработке приложений — обращайтесь к нам, чтобы быть на волне новейших тенденций!