fbpx

Команда Google представила новую систему анимации в Material Design

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

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

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

Моушн-система Material

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

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

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

Моушн-система предоставляет параметры настройки, позволяющие стилизовать переход. Вы можете настроить длительность перехода, замедление и траекторию движения. Если хотите получить простой и понятный стиль, можете использовать стандартное замедление, маленькую длительность и линейные траектории движения. Более сложный стиль подразумевает долгие переходы и движение по дуге.

Слева: просто и функционально Справа: более подчеркнуто

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

Работа вместе

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

Читайте также:  Подборка крутого UI контента за прошедшую неделю #33

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

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

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

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

Источник

Читайте также:

12 принципов анимации, которые прокачают ваш моушн-дизайн

Подборка от inVision: 5 феноменальных примеров моушн-дизайна в UI

15 советов, которые помогут создать эффектный свет в анимации

Поделиться:

Про автора

Руслан Копылов

Автор «Сей-Хай»

comments powered by HyperComments

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: