Опишите вашу задачу
Мы оказываем услуги полного цикла по созданию мобильных приложений — от бизнес-анализа и проектирования до релиза и дальнейшей поддержки развития. Помимо этого мы можем подключиться и к уже существующему проекту на любом его этапе.
Также вы можете связаться с нами по email: company@cleverpumpkin.ru
2 сентября 2022
ВРЕМЯ ПРОЧТЕНИЯ — 4 МИН
ВРЕМЯ ПРОЧТЕНИЯ — 4 МИН
Material You — новый шаг в персонализации интерфейсов на Аndroid
Корпорация Google сделала очередной шаг в сторону открытого и универсального дизайна интерфейсов мобильных устройств. Material You — это последняя версия гайдлайнов Material Design. Чем привлекает и что предлагают обновленные гайдлайны для Android приложений, разбирался Федор Миронов, дизайнер CleverPumpkin.
В начале эры смартфонов вопрос простоты и гармоничности интерфейса стоял далеко не на первом месте. Пользователям хватало предлагаемых функций и возможностей, а если при этом дизайн был удобным и привлекательным, то это становилось только дополнительным преимуществом.
Со временем интерфейсу стали уделять должное внимание, его стремились сделать сбалансированным и приятным для глаз. Однако сфера дизайна не стоит на месте, она постоянно меняется и выходит за пределы стандартов. Наступила эпоха персонализации опыта использования приложений и устройств. Все современные тенденции ведут к тому, чтобы подчеркнуть индивидуальность пользователя через взаимодействие с девайсом, сделать опыт уникальным, зависящим от самого пользователя.
Учитывая это, компания Google разработала новую версию гайдлайнов Material Design и назвала их Material You. Мы просмотрели гайдлайн и хотим поделиться новшествами, которые коснутся внешнего вида приложений.
Суть Material Design заключается в том, что каждая часть интерфейса состоит из цифрового «материала». Материальность подчёркивается узнаваемыми физическими характеристиками: все элементы имеют определённые границы, согласованы между собой по высоте и отбрасывают друг на друга тени. Благодаря этому возникает ощущение глубины и многослойности пространства, и в то же время объекты приобретают иерархию и осязательность. Material You придерживается этой тенденции, отходя от однотипных по своему дизайну интерфейсов предыдущего поколения.
Со временем интерфейсу стали уделять должное внимание, его стремились сделать сбалансированным и приятным для глаз. Однако сфера дизайна не стоит на месте, она постоянно меняется и выходит за пределы стандартов. Наступила эпоха персонализации опыта использования приложений и устройств. Все современные тенденции ведут к тому, чтобы подчеркнуть индивидуальность пользователя через взаимодействие с девайсом, сделать опыт уникальным, зависящим от самого пользователя.
Учитывая это, компания Google разработала новую версию гайдлайнов Material Design и назвала их Material You. Мы просмотрели гайдлайн и хотим поделиться новшествами, которые коснутся внешнего вида приложений.
Суть Material Design заключается в том, что каждая часть интерфейса состоит из цифрового «материала». Материальность подчёркивается узнаваемыми физическими характеристиками: все элементы имеют определённые границы, согласованы между собой по высоте и отбрасывают друг на друга тени. Благодаря этому возникает ощущение глубины и многослойности пространства, и в то же время объекты приобретают иерархию и осязательность. Material You придерживается этой тенденции, отходя от однотипных по своему дизайну интерфейсов предыдущего поколения.
Форма интерфейса
Новая концепция дизайна направлена на то, чтобы взаимодействие с устройством было комфортным, удобным и дарило позитивные эмоции. Для реализации этого почти у всех прямоугольных кнопок скруглили углы — это выглядит более приятно и отлично сочетается с закругленным дизайном корпуса устройства. Такие сглаживания прямоугольников добавляют также ощущения неформальности и гибкости, но при этом сохраняется строгий функциональный стиль. Помимо закруглений кнопки стали чуть больше.
Также изменилась плавающая кнопка (FAB) — её сделали квадратной формы с закруглёнными углами и более крупной — на больших экранах использовать такую кнопку намного удобнее. Нижняя панель с приложениями, которая предназначена для навигации и других ключевых действий, теперь выше, и в её дизайне больше не используется тень.
Другими стали и сегментированные кнопки — комплекс из нескольких кнопок, которые помогали пользователям выбирать опции, переключать или сортировать элементы. В Material You эти кнопки приобрели скругления, а текст написан в регистре предложений.
Изменения коснулись также таких компонентов, как чипы (chips) — их сделали прямоугольными и сгладили углы. При этом чипы разделены на четыре типа:
Также изменилась плавающая кнопка (FAB) — её сделали квадратной формы с закруглёнными углами и более крупной — на больших экранах использовать такую кнопку намного удобнее. Нижняя панель с приложениями, которая предназначена для навигации и других ключевых действий, теперь выше, и в её дизайне больше не используется тень.
Другими стали и сегментированные кнопки — комплекс из нескольких кнопок, которые помогали пользователям выбирать опции, переключать или сортировать элементы. В Material You эти кнопки приобрели скругления, а текст написан в регистре предложений.
Изменения коснулись также таких компонентов, как чипы (chips) — их сделали прямоугольными и сгладили углы. При этом чипы разделены на четыре типа:
- Assist — для автоматизированных действий, например, добавить событие в календарь;
- Filter — для фильтрации данных;
- Input — для добавления данных, которые были введены пользователем, например, адрес электронной почты;
- Suggestion — для подбора предположений о возможных действиях пользователя, например, варианты слов во время ввода текста.
Шрифт
Ещё одним шагом к адаптивности стал отказ от фиксированных размеров шрифтов. Теперь в приложениях будут использоваться динамические вариативные шрифты, которые автоматически меняются в зависимости от устройства и размера экрана — это сделает взаимодействие с контентом ещё более удобным. Правда сами пользователи вряд ли заметят это нововведение — настолько плавными и естественными будут такие изменения. Этот подход обеспечивает более комфортную разработку для экранов любых размеров: от смартфона до smart-телевизора.
Изменился подход и в целом к шрифтовым стилям — заголовки стали крупнее, увеличены отступы, появилось больше воздуха. Это повышает ясность и чёткость текста, в то же время немного уменьшая информативность, поскольку просмотреть сообщение на экране блокировки будет сложнее.
Особым нововведением стала доработанная панель управления, где содержится детальная информация о каждом запрошенном разрешении — теперь всегда можно посмотреть данные о работе приложений, пока они не используются.
Давайте теперь перейдём к наиболее важным изменениям, которые затрагивают настройки цвета ОС и приложений.
Изменился подход и в целом к шрифтовым стилям — заголовки стали крупнее, увеличены отступы, появилось больше воздуха. Это повышает ясность и чёткость текста, в то же время немного уменьшая информативность, поскольку просмотреть сообщение на экране блокировки будет сложнее.
Особым нововведением стала доработанная панель управления, где содержится детальная информация о каждом запрошенном разрешении — теперь всегда можно посмотреть данные о работе приложений, пока они не используются.
Давайте теперь перейдём к наиболее важным изменениям, которые затрагивают настройки цвета ОС и приложений.
Цвет
Цветовая палитра приложений в Material Design — это довольно сложная система, которая призвана не только передать стилистку и задать настроение, но и направлять пользовательский опыт. Ранее система цветов состояла из двух основных цветов бренда, которые использовались в приложении, служебных цветов ошибок, обводки, контрастных им цветов-двойников для текста, а также некоторых других.
Сейчас Material You добавил возможность вносить ещё один, третий основной цвет, что дает больше возможностей для брендинга. При этом по-прежнему сохраняется полноценный контраст и читаемость как в светлой, так и в тёмной теме.
Сейчас Material You добавил возможность вносить ещё один, третий основной цвет, что дает больше возможностей для брендинга. При этом по-прежнему сохраняется полноценный контраст и читаемость как в светлой, так и в тёмной теме.
Динамические цвета
Жемчужиной подхода можно смело назвать новую функцию динамического цвета, создающую полноценную палитру на основе обоев, которые выбирает пользователь. Обои — это тот элемент персонализации устройства, который полностью зависит от выбора пользователя, а значит, отражает его предпочтения, характер, вкусы.
Менять обои легко — а благодаря Material You вы сможете также легко преображать интерфейс устройства. Встроенная система анализирует цветовую схему обоев и извлекает из неё так называемый seed color, который становится основой цветовой темы устройства. При этом вся градация цветов разбивается на тринадцать тонов в зависимости от количества света, присутствующего в цвете. Это помогает достичь максимальной красочности и в то же время гармоничности сочетания.
Особенно впечатляющий эффект будет достигнут тогда, когда вы поставите в качестве обоев фото, сделанное собственными руками, и система создаст уникальное цветовое оформление, которого нет больше ни на одном смартфоне и которое максимально полно отражает ваш личный опыт.
И эта цветовая схема будет применена не только в самой операционной системе, но и в других приложениях, которые поддерживают функцию динамического цвета.
Конечно, эта функция не является императивом — если вам не понравится результат, вы всегда сможете воспользоваться системными цветовыми решениями.
Менять обои легко — а благодаря Material You вы сможете также легко преображать интерфейс устройства. Встроенная система анализирует цветовую схему обоев и извлекает из неё так называемый seed color, который становится основой цветовой темы устройства. При этом вся градация цветов разбивается на тринадцать тонов в зависимости от количества света, присутствующего в цвете. Это помогает достичь максимальной красочности и в то же время гармоничности сочетания.
Особенно впечатляющий эффект будет достигнут тогда, когда вы поставите в качестве обоев фото, сделанное собственными руками, и система создаст уникальное цветовое оформление, которого нет больше ни на одном смартфоне и которое максимально полно отражает ваш личный опыт.
И эта цветовая схема будет применена не только в самой операционной системе, но и в других приложениях, которые поддерживают функцию динамического цвета.
Конечно, эта функция не является императивом — если вам не понравится результат, вы всегда сможете воспользоваться системными цветовыми решениями.
Итог
Потребуется время, чтобы Material You успешно адаптировался в среду разработки. В дальнейшем ещё будут выпускаться улучшения и дополнения этой системы, однако такое глобальное обновление — это явный плюс, который поможет сделать интерфейсы более современными и приятными для глаз.
Мы в CleverPumpkin также поддерживаем современный подход в дизайне и разработке приложений — обращайтесь к нам, чтобы быть на волне новейших тенденций!
Мы в CleverPumpkin также поддерживаем современный подход в дизайне и разработке приложений — обращайтесь к нам, чтобы быть на волне новейших тенденций!
Другие статьи по теме:
Есть идея?