Внедряем новую анимацию в работающую дизайн-систему

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

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

Разумеется, такой подход может загубить даже самый продуманный дизайн и отпугнуть пользователя. Мы расскажем, как системно внедрить анимацию и разработать четкие правила по ее использованию.

Зачем вообще нужна анимация на сайте?

Основной принцип никуда не девается — нужно “быстрее, выше, сильнее” чем у конкурента. Анимация является одним из самых действенных способов не только выделиться, но и подарить посетителю незабываемый пользовательский опыт, выделяясь из общего потока тематических сайтов. 

Основные задачи анимации:

  1. Восхищать — подобные интеракции прочно заседают в памяти.
  2. Информирование — простой способ донесения необходимой информации.
  3. Фокусировка — особенно важные части информации можно доходчивее донести анимированными блоками.

Начинаем внедрять анимацию

Страшно? Если да, то так и должно быть. Если большого слона нужно есть по кусочкам, то интеграцию анимации в дизайн-систему нужно начинать с проведения аудита сайта.

Подобный аудит можно сравнить с аудитом UX шаблонов. Да, это точно не самый быстрый путь. Главное достоинство — возможность понять, в каких случаях можно повторно использовать анимированные блоки, а где должно быть уникальное решение.

Основные паттерны для аудита:

  1. Типы использования (фокус, информирование, выразительность).
  2. Кривые времени.
  3. Хореография движущихся объектов.
  4. Всевозможные эффекты.
  5. Обозначенные моменты, где движение элемента должно прекращаться или ускоряться.

Аналогию можно провести с аудитом для сокращения фигур и излишних шрифтов. Главной фокус ставьте на последовательность анимационной системы.

Определите главные принципы для анимации проекта

Бездумное применение анимации может существенно нарушить единообразие продукта. При этом, если выставить жесткие ограничения, можно задушить “полет фантазии” дизайнеров и разработчиков.

Необходимо находить средние значения, способные только дополнять и улучшать UX. Воспользуйтесь одной из основных принятых концепций:

  1. Информативность, целенаправленность, выразительность.
  2. Скорость, выразительность.
  3. Индивидуальность, брендинг.

Также, можете попробовать разработать собственное видение. Обычно такой подход позволяет получить более самобытный продукт и точно выделиться среди конкурентов.

Работайте над развитием структурных блоков

К данному пункту необходимо приступать только после прохождения предыдущего. Именно здесь происходит разработка библиотеки блоков. В них войдут значения продолжительности, плавности и эффекты. То есть, начальное состояние, хореография, конечное состояние объекта.

Время действия и свойства элемента

Разная графика сайта требует разного времени действия. Весь тайминг должен быть заложен еще на этапе планирования. Иногда тайминг объединяют с плавностью, если габариты объекта это позволяют.

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

Необходимо сразу определить продолжительность динамики анимации. То есть, для объектов разных размеров, следует использовать разную скорость срабатывания. Можете разработать для себя формулу, включающую сам элемент, пройденное им расстояние, время и плавность. Можно заморочиться даже со сложностью анимирования, как переменной.

Эффекты анимации

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

Чтобы проще было ориентироваться, просто подпишите такие связки как-то по своему. Это может быть систематизированные карточки, с прописанными значениями. Вам хватит просто сказать разработчику “Вставь здесь “Исчезновение карты””, он сверится со списком и изобразит необходимый эффект.

Хореография элементов

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

  1. На основе принципа. Фокусировка пользователя на объекте для показа контекста навигации или пространства.
  2. Комплексность. Несколько объектов движутся внутри одного контейнера.
  3. Модульность. Возможные настройки уменьшения интенсивности движения или сохранения стабильной скорости движения.
  4. Повествование. На разных этапах, хореография может замедляться или ускоряться. 

Разработка спецификаций

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

Самым простым способом донести графически действие элемента считается показ начала и конца блоков анимации. Фактически, нужно стать режиссером и подготовить раскадровку для будущего “фильма”.

Также, можно просто текстом прописать “Если Вы используете эту кнопку, она должна иметь эффект …” и дальше расписываете, что должно происходить. Этот способ длиннее и его трудно назвать более доступным для восприятия.

Ура! Начинаем внедрять труды

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

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

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

Внедряем новую анимацию в работающую дизайн-систему
5 (100%) 1 vote