Утечка: почему Google сделала Material 3 более выразительным?
6 мая 2025
В преддверии анонса этого месяца Google случайно опубликовала в своем блоге сообщение, в котором подробно описывались идеи и исследования, лежащие в основе Material 3 Expressive.
Полный текст сообщения был сохранен на Wayback Machine (изображения, отсутствующие в архивной версии, представлены ниже). Вот основные выводы:
Material 3 Expressive - это так называемое «новое смелое направление в дизайне», которое является «наиболее изученным обновлением системы дизайна Google за всю историю». Google хочет, чтобы приложения «вышли за рамки „чистого“ и „скучного“ дизайна и создали интерфейсы, которые взаимодействуют с людьми на эмоциональном уровне». Помимо полного названия, его также называют «M3 Expressive» или просто «выразительный дизайн».
Material 3 Expressive родился в результате исследований - не в стиле «41 оттенок синего», когда дизайнерские решения делегируются данным, а в результате совместного поиска, охватывающего исследования, дизайн и проектирование.
В 2022 году команда Material Design начала спрашивать:
«Почему все эти приложения выглядели так похоже? Так скучно? Разве нет возможности усилить ощущения?».
В течение последних трех лет мы изучали последствия этого разговора, проводя десятки раундов проектирования и исследований, чтобы найти следующую эволюцию Material Design. В результате 46 отдельных исследований с сотнями вариантов дизайна и более чем 18 000 участников со всего мира мы пришли к системе, которая одновременно красива и очень удобна в использовании. Принципы Material 3 Expressive основаны на серьезных исследованиях и опираются на передовой опыт в области юзабилити, поэтому дизайнеры могут с уверенностью использовать эти новые компоненты и принципы, зная, что они создают то, что будет легко использовать и с чем люди смогут общаться.
Эти исследования включали в себя:
Эти аспекты дизайна также являются основополагающими для того, чтобы сделать продукт более удобным в использовании, привлекая внимание к тому, что важно в интерфейсе: Выделение ключевых действий и группировка похожих элементов.
Плавающая панель инструментов - один из компонентов, появившихся в Material 3 Expressive. В концептах мы видим нижнюю панель в форме таблетки, которая не занимает всю ширину экрана. Таким образом, мы видим кусочек фона, а дизайн от края до края становится все более важным. Это похоже на то, что сегодня доступно в Google Chat.
Исследование Google показало, что «выразительный дизайн проще в использовании» и помогает пользователям «быстро определять ключевые действия на каждом экране и быстрее ориентироваться».
... участники смогли заметить ключевые элементы пользовательского интерфейса в 4 раза быстрее, что говорит о том, что такой дизайн помогает направить внимание пользователя на наиболее важную часть экрана. Мы видели, как многие приложения достигали такого уровня улучшений, и это не ограничивается только временем фиксации взгляда. Мы видели, как время нажатия на ключевые действия уменьшалось на секунды в разных протестированных нами дизайнах.
Опять же, важно подчеркнуть, что это всего лишь концепты, которые не отражают реальные продукты.
Когда мы смотрим на конкретные дизайны, например на экраны для примера приложения для работы с электронной почтой, представленные ниже, мы можем увидеть преимущества выразительных принципов напрямую. Например, кнопка «Отправить» в новом дизайне крупнее, расположена прямо над клавиатурой и использует вторичный цвет, чтобы привлечь к ней внимание. Мы можем сравнить это с невыразительным дизайном, в котором маленькая кнопка «Отправить» располагается в верхней части экранной панели инструментов вместе с другими элементами управления, такими как прикрепление файла. Когда участников попросили «Отправить письмо» в приложении, их глаза увидели кнопку в 4 раза быстрее, чем в экспрессивном дизайне.
Другие концепты показывают приложение для часов, голосовой ввод, фоторедактор, платежи и кошелек:
Полный текст сообщения был сохранен на Wayback Machine (изображения, отсутствующие в архивной версии, представлены ниже). Вот основные выводы:
Material 3 Expressive - это так называемое «новое смелое направление в дизайне», которое является «наиболее изученным обновлением системы дизайна Google за всю историю». Google хочет, чтобы приложения «вышли за рамки „чистого“ и „скучного“ дизайна и создали интерфейсы, которые взаимодействуют с людьми на эмоциональном уровне». Помимо полного названия, его также называют «M3 Expressive» или просто «выразительный дизайн».
Material 3 Expressive родился в результате исследований - не в стиле «41 оттенок синего», когда дизайнерские решения делегируются данным, а в результате совместного поиска, охватывающего исследования, дизайн и проектирование.
В 2022 году команда Material Design начала спрашивать:
«Почему все эти приложения выглядели так похоже? Так скучно? Разве нет возможности усилить ощущения?».
В течение последних трех лет мы изучали последствия этого разговора, проводя десятки раундов проектирования и исследований, чтобы найти следующую эволюцию Material Design. В результате 46 отдельных исследований с сотнями вариантов дизайна и более чем 18 000 участников со всего мира мы пришли к системе, которая одновременно красива и очень удобна в использовании. Принципы Material 3 Expressive основаны на серьезных исследованиях и опираются на передовой опыт в области юзабилити, поэтому дизайнеры могут с уверенностью использовать эти новые компоненты и принципы, зная, что они создают то, что будет легко использовать и с чем люди смогут общаться.
Эти исследования включали в себя:
- Отслеживание движения глаз: анализ того, на чем пользователи фокусируют свое внимание.
- Опросы и фокус-группы: оценка эмоциональной реакции на различные варианты дизайна
- Эксперименты: сбор информации о настроениях и предпочтениях
- Юзабилити: проверка того, насколько быстро участники могут понять и использовать интерфейс.
Эти аспекты дизайна также являются основополагающими для того, чтобы сделать продукт более удобным в использовании, привлекая внимание к тому, что важно в интерфейсе: Выделение ключевых действий и группировка похожих элементов.
Плавающая панель инструментов - один из компонентов, появившихся в Material 3 Expressive. В концептах мы видим нижнюю панель в форме таблетки, которая не занимает всю ширину экрана. Таким образом, мы видим кусочек фона, а дизайн от края до края становится все более важным. Это похоже на то, что сегодня доступно в Google Chat.
Исследование Google показало, что «выразительный дизайн проще в использовании» и помогает пользователям «быстро определять ключевые действия на каждом экране и быстрее ориентироваться».
... участники смогли заметить ключевые элементы пользовательского интерфейса в 4 раза быстрее, что говорит о том, что такой дизайн помогает направить внимание пользователя на наиболее важную часть экрана. Мы видели, как многие приложения достигали такого уровня улучшений, и это не ограничивается только временем фиксации взгляда. Мы видели, как время нажатия на ключевые действия уменьшалось на секунды в разных протестированных нами дизайнах.
Опять же, важно подчеркнуть, что это всего лишь концепты, которые не отражают реальные продукты.
Когда мы смотрим на конкретные дизайны, например на экраны для примера приложения для работы с электронной почтой, представленные ниже, мы можем увидеть преимущества выразительных принципов напрямую. Например, кнопка «Отправить» в новом дизайне крупнее, расположена прямо над клавиатурой и использует вторичный цвет, чтобы привлечь к ней внимание. Мы можем сравнить это с невыразительным дизайном, в котором маленькая кнопка «Отправить» располагается в верхней части экранной панели инструментов вместе с другими элементами управления, такими как прикрепление файла. Когда участников попросили «Отправить письмо» в приложении, их глаза увидели кнопку в 4 раза быстрее, чем в экспрессивном дизайне.
Другие концепты показывают приложение для часов, голосовой ввод, фоторедактор, платежи и кошелек:
Новости
Все новости