Создание анимации для съемки видео в DexBee
Меня зовут Диана, я — дизайнер проекта DexBee. Я занимаюсь дизайном всех 4х приложений под разные платформы, сопроводительной полиграфией к ним, рекламными конструкциями для выставок, анимацией, помогаю оформлять посты для социальных сетей. Для начала, я немного расскажу о самом проекте.
DexBee —клубная система вовлечения клиентов в фитнес, включающая в себя 4 приложения:
✔ DexBee Club: приложение для администрирования клуба. Для владельцев, управляющих, технических специалистов.
✔ DexBee Trainer: приложение для управления тренировками. Для тренеров клуба.
✔ DexBee TV: приложение для онлайн-монитора. Устанавливается на телевизор фитнес-клуба, для удобного отслеживания показателей.
✔ DexBee: приложение для клиента фитнес-клуба.
Задача этой системы — контроль степени усилий на тренировках по показателям пульса, для избежания травм и перегрузок сердца.
DexBee помогает повысить качество тренировок в фитнес-клубе, за счет того, что тренеры и клиенты видят на экране степень нагрузки клиента во время выполнения упражнений, в зависимости от приложенных усилий.
У DexBee есть 5 основных цветов для отображения зон нагрузки:
→ Серая — зона без нагрузок/зона очень легких нагрузок
→ Синяя — тут нагрузки еще легкие, но более активные, чем в серой
→ Зеленая — зона с нагрузками средней тяжести
→ Желтая — зона тяжелых, активных нагрузок
→ Красная — показывает что нагрузка максимальна
→ Малиновая —шестая зона. Это зона перегрузки( в момент когда на экране появляется эта зона — нужно немедленно прекратить упражнения)
Меня зовут Диана, я — дизайнер проекта DexBee. Я занимаюсь дизайном всех 4х приложений под разные платформы, сопроводительной полиграфией к ним, рекламными конструкциями для выставок, анимацией, помогаю оформлять посты для социальных сетей. Для начала, я немного расскажу о самом проекте.
DexBee —клубная система вовлечения клиентов в фитнес, включающая в себя 4 приложения:
✔ DexBee Club: приложение для администрирования клуба. Для владельцев, управляющих, технических специалистов.
✔ DexBee Trainer: приложение для управления тренировками. Для тренеров клуба.
✔ DexBee TV: приложение для онлайн-монитора. Устанавливается на телевизор фитнес-клуба, для удобного отслеживания показателей.
✔ DexBee: приложение для клиента фитнес-клуба.
Задача этой системы — контроль степени усилий на тренировках по показателям пульса, для избежания травм и перегрузок сердца.
DexBee помогает повысить качество тренировок в фитнес-клубе, за счет того, что тренеры и клиенты видят на экране степень нагрузки клиента во время выполнения упражнений, в зависимости от приложенных усилий.
У DexBee есть 5 основных цветов для отображения зон нагрузки:
→ Серая — зона без нагрузок/зона очень легких нагрузок
→ Синяя — тут нагрузки еще легкие, но более активные, чем в серой
→ Зеленая — зона с нагрузками средней тяжести
→ Желтая — зона тяжелых, активных нагрузок
→ Красная — показывает что нагрузка максимальна
→ Малиновая —шестая зона. Это зона перегрузки( в момент когда на экране появляется эта зона — нужно немедленно прекратить упражнения)
Если рассмотреть процесс работы системы DexBee, то он таков: клиент приходит в спортивный клуб, надевает пульсометр DexBee, и, во время тренировки, на экране телевизора отображается персональная плашка с его именем, пульсом, количеством сжигаемых ккал и процентом нагрузки с индикатором зоны активности, благодаря которому можно отследить перенапряжение или недостаток нагрузки.
Изучать что-то новое и совершенствовать имеющиеся знания всегда полезно. Мне хотелось освоить анимацию, а, как известно, самый эффективный способ чему-то научиться это — практика, а еще лучше — рабочая задача.
И такая задача была сформирована: создание функционала DexBee-камеры.
Приложение должно:
🔥 наглядно демонстрировать преимущества системы умных тренировок;
🔥 передавать через анимацию степень нагрузки клиента во время тренировки в спортивном клубе так, чтобы это было понятно и непосвященным людям;
🔥 предоставить возможность тренерам и клиентам делиться в социальных сетях своими достижениями с помощью видеоролика с тренировки на котором видна информация о нагрузке.
На первом этапе работы по созданию анимации мы уточнили технические ограничения и основные требования к анимации плашек DexBee-камеры: важно было сохранить цветовую шкалу зон нагрузок, передать за счет интенсивности движения анимации степень нагрузки клиента в той или иной зоне, анимация должна плавно зацикливаться и при этом длительность ее цикла должна составлять не более 1 секунды.
Изучать что-то новое и совершенствовать имеющиеся знания всегда полезно. Мне хотелось освоить анимацию, а, как известно, самый эффективный способ чему-то научиться это — практика, а еще лучше — рабочая задача.
И такая задача была сформирована: создание функционала DexBee-камеры.
Приложение должно:
🔥 наглядно демонстрировать преимущества системы умных тренировок;
🔥 передавать через анимацию степень нагрузки клиента во время тренировки в спортивном клубе так, чтобы это было понятно и непосвященным людям;
🔥 предоставить возможность тренерам и клиентам делиться в социальных сетях своими достижениями с помощью видеоролика с тренировки на котором видна информация о нагрузке.
На первом этапе работы по созданию анимации мы уточнили технические ограничения и основные требования к анимации плашек DexBee-камеры: важно было сохранить цветовую шкалу зон нагрузок, передать за счет интенсивности движения анимации степень нагрузки клиента в той или иной зоне, анимация должна плавно зацикливаться и при этом длительность ее цикла должна составлять не более 1 секунды.
Итак, мы имеем 5 основных цветов зон нагрузки - серый, синий, зеленый, желтый и красный. Появилась идея соотнести эти цвета с природой. Чтобы начать подбирать образы, мне нужно было узнать какие ощущения вызывает каждая из зон.
Первое, что я услышала о зонах нагрузки - в красной зоне тяжелые, максимальные нагрузки, при которых клиент чувствует, что буквально «горит» на тренировке. Самый подходящий образ - горящий огонь.
Желтая - зона достаточно активных усилий, при нахождении в этой зоне у клиента идет активное жиросжигание, сердцебиение усилено, эта характеристика хорошо ассоциируются с активными ударами молний — яркие, резкие, сильные.
Следующая по убыванию нагрузки — зеленая, зона достаточно комфортная, индикатор средних нагрузок. Первая идея — колышущееся трава, но зона все же достаточно активная, поэтому был выбран более динамичный образ — листьев, кружащихся в быстром потоке ветра.
В голубой зоне - нагрузка более легкая, чем в зеленой, плавная. Для индикатора этой зоны подходил образ движущейся воды - и цветом, и интенсивностью усилий, в последствии образ был доработан и из мягких движений волн превратился в поток воды, выплескивающийся из под земли.
Серая зона — это индикатор легких нагрузок, клиенты в этой зоне либо вообще находятся без движения, отдыхают от упражнений, либо выполняют очень легкие упражнения, например перед началом тренировки. Такая зона рассчитана на восстановление сил от излишних нагрузок и для клиентов на реабилитации. Легкое, едва заметное движение — это облака, которые медленно плывут по небу.
Первое, что я услышала о зонах нагрузки - в красной зоне тяжелые, максимальные нагрузки, при которых клиент чувствует, что буквально «горит» на тренировке. Самый подходящий образ - горящий огонь.
Желтая - зона достаточно активных усилий, при нахождении в этой зоне у клиента идет активное жиросжигание, сердцебиение усилено, эта характеристика хорошо ассоциируются с активными ударами молний — яркие, резкие, сильные.
Следующая по убыванию нагрузки — зеленая, зона достаточно комфортная, индикатор средних нагрузок. Первая идея — колышущееся трава, но зона все же достаточно активная, поэтому был выбран более динамичный образ — листьев, кружащихся в быстром потоке ветра.
В голубой зоне - нагрузка более легкая, чем в зеленой, плавная. Для индикатора этой зоны подходил образ движущейся воды - и цветом, и интенсивностью усилий, в последствии образ был доработан и из мягких движений волн превратился в поток воды, выплескивающийся из под земли.
Серая зона — это индикатор легких нагрузок, клиенты в этой зоне либо вообще находятся без движения, отдыхают от упражнений, либо выполняют очень легкие упражнения, например перед началом тренировки. Такая зона рассчитана на восстановление сил от излишних нагрузок и для клиентов на реабилитации. Легкое, едва заметное движение — это облака, которые медленно плывут по небу.
Что касается технической стороны анимации: длительность одного цикла — всего одна секунда, после чего анимация воспроизводится по кругу, в течение всего времени записи видео. На первый взгляд кажется что это очень мало для проигрывания самой анимации, но даже на создание одной секунды уходит достаточное количество времени.
После определения образов:
⚙ Я изучила аналоги и существующие примеры анимаций
⚙ Продумала сценарии движений для каждого объекта
⚙ Прорисовала раскадровки и расставила ключевые кадры
⚙ Настроила различные параметры анимации
⚙ При помощи графика движения устранила все погрешности: визуальные скачки кадров и резкие переходы
⚙ Отладила скорость каждой из зон относительно друг друга — самая активная и быстрая это красная с огнем, чуть медленнее - вспышки молний, далее интенсивность движения снижается на зеленой зоне, потом идет синяя с фонтаном воды, которая медленнее и плавнее кружащегося потока листьев, но интенсивнее едва заметного движения плывущих облаков.
После финальной обработки и выгрузки готовая анимация соединилась с текстовым наполнением, была встроена в камеру и синхронизирована с поступающими данными.
После определения образов:
⚙ Я изучила аналоги и существующие примеры анимаций
⚙ Продумала сценарии движений для каждого объекта
⚙ Прорисовала раскадровки и расставила ключевые кадры
⚙ Настроила различные параметры анимации
⚙ При помощи графика движения устранила все погрешности: визуальные скачки кадров и резкие переходы
⚙ Отладила скорость каждой из зон относительно друг друга — самая активная и быстрая это красная с огнем, чуть медленнее - вспышки молний, далее интенсивность движения снижается на зеленой зоне, потом идет синяя с фонтаном воды, которая медленнее и плавнее кружащегося потока листьев, но интенсивнее едва заметного движения плывущих облаков.
После финальной обработки и выгрузки готовая анимация соединилась с текстовым наполнением, была встроена в камеру и синхронизирована с поступающими данными.
Несмотря на то, что первая версия плашек для DexBee-камеры была упрощенной (включала в себя анимацию зоны, пульс, ккал и имя) она все же вызвала интерес у клиентов, так что было решено продолжать развивать и дорабатывать ее.
Был доработан дизайн — вариантов комплектов плашек стало больше, мы отказались от условного отображения иконками ккал и пульса, вместо них рядом с цифрами появились поясняющие подписи («пульс», «ккал» - количество сожженных ккал и «нагрузка»), которые сделали контент понятным даже тем, кто вообще не слышал о DexBee.
Еще одной особенностью было то, что в видеоролике двигались одновременно сами клиенты и анимация зон, а это, в некоторых случаях, вызывало двойную когнитивную нагрузку у наблюдателей, поэтому мы решили прорисовать дополнительно статичные плашки, чтобы каждый клиент мог выбрать подходящий для его видеоролика вид анимации.
Сейчас у DexBee-камеры 3 анимированных комплекта:
«Природные явления»
«Пламя, горящее в стилизованном камине»
«Новогодняя тема»
и 2 статичных комплекта в ярком геометрическом дизайне.
Был доработан дизайн — вариантов комплектов плашек стало больше, мы отказались от условного отображения иконками ккал и пульса, вместо них рядом с цифрами появились поясняющие подписи («пульс», «ккал» - количество сожженных ккал и «нагрузка»), которые сделали контент понятным даже тем, кто вообще не слышал о DexBee.
Еще одной особенностью было то, что в видеоролике двигались одновременно сами клиенты и анимация зон, а это, в некоторых случаях, вызывало двойную когнитивную нагрузку у наблюдателей, поэтому мы решили прорисовать дополнительно статичные плашки, чтобы каждый клиент мог выбрать подходящий для его видеоролика вид анимации.
Сейчас у DexBee-камеры 3 анимированных комплекта:
«Природные явления»
«Пламя, горящее в стилизованном камине»
«Новогодняя тема»
и 2 статичных комплекта в ярком геометрическом дизайне.
Анимированное горящее пламя вызвало интерес, поэтому мы решили посвятить этой теме отдельный комплект плашек, в котором на полупрозрачном фоне горит цветной огонь с разной степенью интенсивности — от легкого огонька в синей до мощного потока пламени в красной зоне. Стилистически огонь в теме «Камин» отличается от огня в комплекте природных явлений, он реалистичен, передает объем и свечение настоящего пламени, переменную прозрачность пламенных языков.
«Новогоднее настроение» стало милым бонусом нашим клиентам. В серой зоне мы видим едва заметные движения головой у снеговика, в синей — пингвин-неваляшка в новогоднем костюме, в более активной зеленой зоне — танцующая елочка, украшенная разноцветными гирляндами, в желтой - позитивный имбирный пряник, а в красной - удивленный Санта Клаус с горящим мешком подарков.
DexBee-камера - эксперимент, воплощенный нашей командой и способствующий усилению вовлеченности клиентов в процесс тренировки.
Теперь каждый тренер может не только рассказать об эффективности умной системы на практике, но и наглядно продемонстрировать ее, поделившись видео в социальных сетях, а клиенты могут похвастаться своими успехами и приложенными усилиями.
DexBee - постоянно развивающийся проект, открытый к новым идеям и предложениям, помогающий специалистам прокачивать профессиональные навыки в разных областях знаний. Возможно, в дальнейшем мы дополним приложение камеры новыми комплектами плашек.
Автор статьи: Диана, дизайнер проекта DexBee.
Теперь каждый тренер может не только рассказать об эффективности умной системы на практике, но и наглядно продемонстрировать ее, поделившись видео в социальных сетях, а клиенты могут похвастаться своими успехами и приложенными усилиями.
DexBee - постоянно развивающийся проект, открытый к новым идеям и предложениям, помогающий специалистам прокачивать профессиональные навыки в разных областях знаний. Возможно, в дальнейшем мы дополним приложение камеры новыми комплектами плашек.
Автор статьи: Диана, дизайнер проекта DexBee.