Когда я утверждал, что моушен-дизайн не должен вызывать трудностей, я подумал, что это вызовет удивление. Добавив слово «дизайн» в название, я попытался обойти очевидную проблему: создавать анимации наверняка сложно. В конце концов, что хорошего в изящных дизайнах, если их невозможно реализовать?

Material Design был вдохновлен метафорой «smart paper» – коллекцией поверхностей, которые могут адаптироваться, чтобы формировать пользовательский опыт. Мы представили часть этой метафоры с помощью системы возвышения (elevation system), которая точно отображает свет и тени. Но согласование этих поверхностей с движением (умным и элегантным способом) было более сложной задачей. Вот почему команда Material рада поделиться новым проектом, облегчающим создание анимации.

Система переходов Material Design

Мы недавно опубликовали новое руководство по дизайну и документацию для разработчиков (в том числе код Android и Flutter) для наиболее важного типа анимации в приложениях: переходов пользовательского интерфейса.

Основа анимации заключается в хорошо реализованных переходах – фундаментальном аспекте юзабилити. Существует четыре паттерна перехода, которые обрабатывают анимацию между компонентами и полноэкранными представлениями: Container transform, Shared axis, Fade through и Fade.

Вот примеры типов переходов, которые вы сможете использовать:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Введение в новую систему Motion Material Design, паттерны переходов
Примеры переходов, которые вы можете сделать с помощью системы движения Material Design

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Введение в новую систему Motion Material Design, паттерны переходов
Слева: просто и функционально Справа: эффектно и подчеркнуто

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

Совместная работа над анимацией

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Введение в новую систему Motion Material Design, паттерны переходов
Демо спецификаций анимации, созданной в Direct

Они написаны в веб-приложении Direct, созданном моушен-дизайнером Google Джоном Шлеммером. Это стало распространенным методом написания спецификаций анимации в Google. Мы рады поделиться спецификациями анимации в наших руководствах, чтобы помочь объяснить все детали моушен-дизайна. Если вы хотите создавать и размещать свои собственные спецификации анимации с помощью Direct, возьмите открытый исходный код программы на GitHub.

Это только начало

Как вы могли заметить, этот контент помечен тегом бета. Команда хотела выпустить эту новость как можно раньше, чтобы убедиться, что мы выбрали правильный технический и дизайнерский подход, прежде чем использовать еще больше возможностей. Существует множество направлений развития моушен-дизайна, поэтому обязательно поделитесь своим мнением. Пишите нам в Twitter @materialdesign. Мы надеемся, что это только начало нашей миссии по упрощению создания анимации.

Свежие вакансии
                        Emlid Emlid UX/UI Designer Офис Санкт-Петербург
                        e-Legion e-Legion UX/UI Дизайнер Офис Санкт-Петербург
                        Регистратор доменных имен РЕГ.РУ Регистратор доменных имен РЕГ.РУ UX/UI дизайнер Удаленно Москва
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
Все вакансии

Оригинал: medium.com

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

Урок по созданию анимации в Figma, используя плагин Figmotion

Чтобы освоить Figma и Figmotion, я собираюсь воссоздать ряд микровзаимодействий из приложения Google Photos

Полное руководство по правильному использованию анимации в UX

В этой статье я собрал все основные принципы и правила создания анимации воедино

Как повысить ценность дизайна благодаря анимациям в интерфейсе

В первую очередь давайте рассмотрим классификации, техники и специфики анимации. Затем, сравним некоторые инструменты для создания анимаций