Когда я утверждал, что моушен-дизайн не должен вызывать трудностей, я подумал, что это вызовет удивление. Добавив слово «дизайн» в название, я попытался обойти очевидную проблему: создавать анимации наверняка сложно. В конце концов, что хорошего в изящных дизайнах, если их невозможно реализовать?
Material Design был вдохновлен метафорой «smart paper» – коллекцией поверхностей, которые могут адаптироваться, чтобы формировать пользовательский опыт. Мы представили часть этой метафоры с помощью системы возвышения (elevation system), которая точно отображает свет и тени. Но согласование этих поверхностей с движением (умным и элегантным способом) было более сложной задачей. Вот почему команда Material рада поделиться новым проектом, облегчающим создание анимации.
Система переходов Material Design
Мы недавно опубликовали новое руководство по дизайну и документацию для разработчиков (в том числе код Android и Flutter) для наиболее важного типа анимации в приложениях: переходов пользовательского интерфейса.
Основа анимации заключается в хорошо реализованных переходах – фундаментальном аспекте юзабилити. Существует четыре паттерна перехода, которые обрабатывают анимацию между компонентами и полноэкранными представлениями: Container transform, Shared axis, Fade through и Fade.
Вот примеры типов переходов, которые вы сможете использовать:
Примеры переходов, которые вы можете сделать с помощью системы движения Material Design
Система переходов также предоставляет параметры настройки, позволяющие стилизовать переход. Вы можете настроить длительность перехода, плавность и траекторию движения, чтобы выразить стиль вашего приложения. Для простого и функционального стиля вы можете использовать короткую длительность, стандартную плавность и линейную траекторию движения. Для более эффектного стиля вы можете использовать большую длительность, подчеркнутую плавность и движение по дуге.
Слева: просто и функционально Справа: эффектно и подчеркнуто
Переходы – это отличная отправная точка для темизации вашего приложения с помощью движения. Подробнее читайте в нашем руководстве по кастомизации.
Совместная работа над анимацией
Проблема, затрудняющая реализацию движения, заключается в том, что существует не так много инструментов, помогающих дизайнерам сотрудничать с разработчиками. Все мы сталкивались с трудностями, пытаясь объяснить идею анимации. Прописать спецификации движения сложно, и это печально, поскольку это необходимо для преодоления разрыва между дизайном и разработкой. Это еще один сложный аспект моушен-дизайна, который команда Material Design хочет сделать проще.
Наше обновленное руководство по анимации представляет спецификации в интерактивном формате шкалы времени. Они включают в себя всю основную информацию, необходимую для понимания и создания анимации.
Демо спецификаций анимации, созданной в Direct
Они написаны в веб-приложении Direct, созданном моушен-дизайнером Google Джоном Шлеммером. Это стало распространенным методом написания спецификаций анимации в Google. Мы рады поделиться спецификациями анимации в наших руководствах, чтобы помочь объяснить все детали моушен-дизайна. Если вы хотите создавать и размещать свои собственные спецификации анимации с помощью Direct, возьмите открытый исходный код программы на GitHub.
Это только начало
Как вы могли заметить, этот контент помечен тегом бета. Команда хотела выпустить эту новость как можно раньше, чтобы убедиться, что мы выбрали правильный технический и дизайнерский подход, прежде чем использовать еще больше возможностей. Существует множество направлений развития моушен-дизайна, поэтому обязательно поделитесь своим мнением. Пишите нам в Twitter @materialdesign. Мы надеемся, что это только начало нашей миссии по упрощению создания анимации.
Перевод статьи medium.com
Найновіші коментарі (0)