В преддверии долгожданного анонса в этом месяце Google случайно опубликовала запись в блоге, в которой подробно излагаются идеи и исследования, лежащие в основе Material 3 Expressive Design — новейшего направления дизайна компании.
Полная версия статьи была заархивирована в блоге Wayback Machine (С изображениями, не показанными в архивной версии, представленной ниже.) Вот основные моменты:
Material 3 Expressive представляет собой то, что Google называет «новым смелым направлением дизайна», и является «самым востребованным обновлением системы дизайна Google за всю историю». Google стремится к тому, чтобы приложения выходили за рамки «чистого» и «скучного» дизайна и создавали интерфейсы, которые взаимодействуют с людьми на эмоциональном уровне. Помимо полного названия, его также называют «M3 Expressive» или просто «выразительный дизайн».
Material 3 Expressive появился на свет в результате исследований — не в стиле «41 оттенка синего», где дизайнерские решения делегируются данным, а в результате совместного исследования, включающего исследования, дизайн и проектирование.
В 2022 году команда Material Design начала задаваться вопросом: «Почему все эти приложения выглядят так похоже? Так скучно? Неужели не было места для большего ощущения?»
За последние три года мы исследовали последствия этого диалога, проведя десятки раундов проектирования и исследований, чтобы найти следующую ступень эволюции Material Design. Благодаря 46 отдельным исследованиям с сотнями проектов и более чем 18000 3 участников со всего мира мы разработали прекрасную и очень удобную систему. Принципы Material XNUMX Expressive основаны на серьезных исследованиях и построены на проверенных передовых методах обеспечения удобства использования, поэтому дизайнеры могут с уверенностью использовать эти новые компоненты и принципы, зная, что они создают что-то простое в использовании и с чем люди смогут взаимодействовать.
Эти исследования включали:
- Отслеживание движения глаз: Проанализируйте, на чем пользователи фокусируют свое внимание. Отслеживание движения глаз — мощный инструмент для понимания поведения пользователя и выявления областей, требующих улучшения дизайна.
- Опросы и фокус-группы: измерение эмоциональных реакций на различные дизайны. Эти методы помогают понять, как пользователи воспринимают дизайн на эмоциональном уровне.
- Эксперименты: Собирайте чувства и предпочтения. Эксперименты необходимы для определения того, какой дизайн предпочитают пользователи, и для оценки влияния различных элементов на пользовательский опыт.
- Легкость использования: Узнайте, насколько быстро участники понимают и используют интерфейс. Удобство использования — важнейший показатель успешности любого дизайна, определяющий, насколько легко и эффективно пользователи могут достичь своих целей.
Google утверждает: «Основными элементами выразительного дизайна являются использование цвета, формы, масштаба, движения и сдерживания». Дополнительно: «Material 3 Expressive отличается смелым использованием формы и цвета, создавая восхитительный пользовательский опыт». Использование смелых цветов и форм является ключевой частью Material Design 3 Expressive, направленной на создание увлекательного и запоминающегося пользовательского опыта.
Эти аспекты дизайна также имеют важное значение для повышения удобства использования продукта за счет привлечения внимания к важным элементам интерфейса, таким как выделение ключевых действий и группировка схожих элементов. Это улучшает пользовательский опыт и делает его более плавным и эффективным.
Плавающая панель инструментов — это компонент, созданный Material 3 Expressive. В концептуальных проектах мы видим нижнюю панель в форме таблетки, которая не охватывает всю ширину экрана. В результате мы видим лишь небольшую часть фона, а рисунки от края до края становятся более заметными. Это похоже на то, что доступно сегодня в Google Chat.
Исследования Google показывают, что «выразительный дизайн проще в использовании» и помогает пользователям «быстрее находить основные действия на каждом экране и быстрее перемещаться».
…Участники смогли определить ключевые элементы пользовательского интерфейса до 4 раз быстрее, продемонстрировав, что эти конструкции направляют внимание пользователя на самую важную часть экрана. Мы видели, как многие приложения достигли подобного уровня улучшения, и это касается не только времени фиксации взгляда. Мы также отметили сокращение времени, необходимого для нажатия на ключевые действия, на несколько секунд в различных протестированных нами дизайнах.
Опять же, важно подчеркнуть, что это всего лишь концептуальные проекты, которые не отражают реальные продукты. (Для более точной информации произошла утечка. Редизайн Google Clock (На выходных.) Однако приведенный ниже пример «до» явно представляет собой текущий пользовательский интерфейс Gmail.
Когда мы смотрим на конкретные проекты, например, на экраны для примера приложения электронной почты, показанные ниже, мы можем воочию увидеть преимущества принципов выразительного дизайна. Например, кнопка «Отправить» в новом дизайне стала больше, расположена прямо над клавиатурой и использует дополнительный цвет для привлечения к себе внимания. Мы можем сравнить это с невыразительным дизайном, который размещает небольшую кнопку «Отправить» на панели инструментов в верхней части экрана вместе с другими элементами управления, такими как прикрепление файла. Когда участников попросили «отправить электронное письмо» в приложении, их глаза увидели кнопку в 4 раза быстрее в дизайне эмодзи. Это отражает важность «выразительного дизайна» для улучшения пользовательского опыта.
Другие концептуальные проекты демонстрируют приложение для часов, голосовой ввод, фоторедактор, платежи и кошелек:
Успех или неудача внедрения нового пользовательского интерфейса зависит от того, насколько легко его внедрить и насколько плавно он обновляется с M3. Похоже, что сейчас Jetpack Compose находится в гораздо лучшем положении, поэтому я настроен осторожно и оптимистично.
Между тем, исследования и пользовательское тестирование показали, что «люди всех возрастов отдают явное предпочтение хорошо реализованному выразительному дизайну по сравнению с невыразительным дизайном, который соответствует рекомендациям iOS по созданию пользовательского интерфейса».
Google обнаружил, что «выразительный дизайн великолепен», особенно для привлекательности бренда: «Наше исследование показало, что использование дизайна M3 Expressive повышает «крутость» продукта для людей».
- …Мы обнаружили 32%-ное увеличение восприятия субкультуры, что говорит о том, что выразительный дизайн делает бренд более актуальным и «в теме».
- …увеличение новизны на 34%, благодаря чему бренд выглядит свежим и инновационным.
- …рост мятежа на 30%, что свидетельствует о том, что экспрессивный дизайн позиционирует бренд как смелого, инновационного лидера, готового отойти от нормы.
Комментарии закрыты.