UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Как создавать кастомные анимации загрузки в Principle для уменьшения процента отказов
Редакція
Редакція

Опубліковано • Оновлено

Как создавать кастомные анимации загрузки в Principle для уменьшения процента отказов

Известные как тробберы, анимации загрузки используются для индикации прогресса сбора данных или рендеринга интерфейса. Прошли те времена, когда единственной опцией была стандартная, скучная полоса загрузки. Сегодня в вашем распоряжении красивые анимации с использованием CSS, jQuery или обычные GIF-ки - с их помощью вы можете оживить интерфейс и добавить индивидуальности своему продукту. Продуманные анимации помогают развлечь пользователей, пока они ждут загрузки нужного контента. Хорошая анимация загрузки помогает управлять ожиданиями и улучшает опыт пользователя, удерживая его интерес. В этом уроке мы будем использовать Sketch для создания базовых фигур и Principle для быстрой генерации кастомных анимаций загрузки. (Оба эти приложения работают на Mac.). Вы научитесь создавать яркие анимации загрузки, используемые в Trello, Flickr, Slack и др.

Приступим.

Анимация загрузки в Slack

Как создавать кастомные анимации загрузки в Principle, Slack Как создавать кастомные анимации загрузки в Principle, Sketch В Sketch нарисуйте закругленные квадраты со стороной 50px или радиусом 100px каждый. Они должны выглядеть как идеальные круги, но мы используем именно квадраты с закругленными углами, чтобы создать эффект растягивания в анимации. Поместите четыре фигуры таким образом, чтобы создать воображаемый квадрат с промежутком в 150px между каждым углом. Задайте разные цвета (#35BA90 зеленый, #69CADD синий, #EBA900 желтый и #E20661 розовый). Как создавать кастомные анимации загрузки в Principle, Slack анимация Импортируйте фигуры в Principle, сгруппируйте и кликните на опции “Create Component” (создать компонент). Войдите во вложенную группу и поверните артборд на 15 градусов. Затем выделите каждый отдельный круг и поверните его назад до первоначальной позиции (назад на 15 градусов). Это создаст эффект растягивания в линию. Как создавать кастомные анимации загрузки в Principle, Slack анимация Примените триггер “Auto” к артборду, затем растяните каждый закругленный квадрат до противоположной стороны артборда до длины 295px. Задайте непрозрачность 75% для каждой фигуры на обоих артбордах. Как создавать кастомные анимации загрузки в Principle, Slack - фото 2 Примените еще один триггер “Auto” ко второму артборду. На новом артборде сократите каждую линию до начальной ширины 50px, но с обратной стороны от начальной позиции. Прилинкуйте последний артборд к первому с помощью триггера “Auto”. Нажмите кнопку “Back to Parent” для превью конечного результата. Совет: Когда вы жмете “Back to Parent”, можно повернуть главную группу на -30 градусов, чтобы было больше похоже на Slack. Также можете изменить темп анимации внутри панели “Animate” и применить эффект “Ease Both” для сглаживания переходов.

Анимация загрузки Trello

Как создавать кастомные анимации загрузки в Principle, trello Как создавать кастомные анимации загрузки в Principle, trello - sketch В Sketch нарисуйте синий квадрат со стороной 100px. Нарисуйте белый прямоугольник 60px в ширину и 140px в высоту. Выровняйте его по верхнему левому углу предыдущего квадрата с верхней и левой границей 30 px. Продублируйте белый прямоугольник, выровняйте его по правому краю квадрата с границей 30px и сократите его высоту до 70px. Как создавать кастомные анимации загрузки в Principle, trello - Principle Импортируйте артборд в Principle и примените триггер “Auto” для создания нового ключевого кадра. На новом артборде поменяйте высоты белых прямоугольников (левый должен стать 70px, правый - 140 px в высоту). Примените эффект “Ease-Both” в панели “Animate” для сглаживания перехода.

Вращающийся круг

Как создавать кастомные анимации загрузки в Principle, вращающийся круг Как создавать кастомные анимации загрузки в Principle, вращающийся круг в sketch Нарисуйте круг в Sketch. Задайте контур в 10px со значениями “Dash” (штрих) и“Gap” (промежуток) и без заливки. Используйте цвет “Angular Gradient” для контура, он поможет четче выразить эффект вращения, который вы создадите позже. Как создавать кастомные анимации загрузки в Principle, вращающийся круг - фото 2 Откройте новый файл Principle и перенесите круг из Sketch с помощью кнопки “Import”. Примените два триггера “Auto” в ряд. Как создавать кастомные анимации загрузки в Principle, вращающийся круг - фото 3 Чтобы создать эффект вращения, выделите круг в среднем артборде и замените его значение “Angle” на 360 градусов. Затем выделите третий круг и задайте ему другое название (например, “copy”) внутри панели слева. Это поможет сымитировать эффект бесконечного вращения. Наконец, прилинкуйте третий артборд к первому с помощью еще одного триггера Auto. Примените переход “Linear” ко временной линии между артбордами 1 и 2. Просмотрите только что созданную анимацию в окне превью.

Анимация загрузки Flickr

Как создавать кастомные анимации загрузки в Principle, Flickr Как создавать кастомные анимации загрузки в Principle, Flickr анимация Нарисуйте синий и розовый круги, чтобы они касались друг друга. Импортируйте их в Principle и примените триггер “Auto” для создания нового артборда. Поменяйте местами положения кругов и примените новый триггер “Auto” для создания третьего артборда. На третьем артборде поменяйте местами порядок слоев с кругами в панели слева. Как создавать кастомные анимации загрузки в Principle, Flickr анимация - фото 2 Примените третий триггер “Auto”, чтобы создать четвертый артборд. На нем еще раз поменяйте местами положение кругов, и вставьте последний триггер “Auto” c последнего артборда на первый.

Текстовый загрузчик

Как создавать кастомные анимации загрузки в Principle, текстовый загрузчик Как создавать кастомные анимации загрузки в Principle, текстовый загрузчик - фото 2 Создайте новый проект в Principle, и с помощью инструмента Text напечатайте “LOADING.” Выровняйте текст по левому краю и по вертикальному центру артборда. Примените триггер “Auto” пять раз в ряд. Пятый триггер протяните с последнего артборда на первый, чтобы создать петлю кадров. Как создавать кастомные анимации загрузки в Principle, текстовый загрузчик - фото 3 Начиная с первого артборда и двигаясь вправо, редактируйте каждый артборд, добавляя ноль, одну, две, три, две и одну точку к исходному тексту “LOADING”. Прогрессия артбордов должна выглядеть так: LOADING LOADING. LOADING.. LOADING… LOADING.. LOADING. Теперь проверьте результат в превью.

Пульсирующие точки

Как создавать кастомные анимации загрузки в Principle, пульсирующие точки Как создавать кастомные анимации загрузки в Principle, пульсирующие точки - фото 2 Нарисуйте точку диаметром 60px. Скопируйте и вставьте еще одну точку, поместите ее на расстоянии 60px от первой справа. Убедитесь, что обе точки и интервал в 60px отцентрированы на артборде. Как создавать кастомные анимации загрузки в Principle, пульсирующие точки - фото 3 Вставьте триггер “Auto” четырежды в ряд. На втором артборде уменьшите вторую точку до 30px. На третьем артборде уменьшите вторую точку до 0px, а первую до 30px. Как создавать кастомные анимации загрузки в Principle, пульсирующие точки - фото 4 На четвертом артборде увеличьте вторую точку до 30px и сократите первую до 0px. На пятом артборде увеличьте первую точку опять до 30px, и прилинкуйте артборд к первому с помощью триггера “Auto”.

Вращающиеся точки

Как создавать кастомные анимации загрузки в Principle, вращающиеся точки Как создавать кастомные анимации загрузки в Principle, вращающиеся точки - фото 2 Поместите пять точек, как на игральном кубике. Импортируйте артборд в Principle и отцентрируйте его. Как создавать кастомные анимации загрузки в Principle, вращающиеся точки - фото 3 Примените триггер “Auto” на артборде. На новом артборде поверните группу точек на 360 градусов. Прилинкуйте второй артборд к первому с помощью триггера “Auto”.

Пульсирующий круг

Как создавать кастомные анимации загрузки в Principle, пульсирующий круг Как создавать кастомные анимации загрузки в Principle, пульсирующий круг - фото 2 Начните с круга размером 50px, выровненного по центру и круга 150px с границей 5px, но без заливки. Примените триггер “Auto” трижды в ряд. Как создавать кастомные анимации загрузки в Principle, пульсирующий круг - фото 3 На первом артборде уменьшите второй круг (контур без заливки) до 50px, а внутренний круг до 10px. На третьем артборде увеличьте круг-контур до 200px и задайте 0% непрозрачность. Увеличьте внутренний круг до 150px и задайте непрозрачность 50%. На последнем артборде увеличьте внутренний круг до 200px и задайте 0% непрозрачность. Уменьшите круг-контур до 50px и задайте 25% непрозрачность. Как создавать кастомные анимации загрузки в Principle, пульсирующий круг - фото 4 Примените триггер “Auto” к последнему артборду. Уменьшите внутренний круг до 10px с 50% непрозрачностью. Прилинкуйте последний артборд к первому с помощью триггера “Auto”.

Прыгающие точки

Как создавать кастомные анимации загрузки в Principle, прыгающие точки Как создавать кастомные анимации загрузки в Principle, прыгающие точки - ото 1 Нарисуйте в линию три круга размером 50px и интервалом 50px. Примените триггер “Auto”. На втором артборде переместите первый круг вверх на 50px. Примените триггер “Auto” на втором артборде. На третьем выделите первых два круга и передвиньте вверх на 50px. Три круга должны расположиться по диагонали. Примените триггер “Auto” к третьему артборду. На четвертом подвиньте первый круг вниз на 50px. Выделите последние два круга и подвиньте их вверх на 50px. Как создавать кастомные анимации загрузки в Principle, прыгающие точки - ото 2 Примените триггер “Auto” на четвертом артборде. На пятом подвиньте первые два круга вниз на 50px. Выделите последний круг и подвиньте на 50px вверх. Примените триггер Auto на пятом артборде. На шестом подвиньте последние два круга вниз на 50px. Как создавать кастомные анимации загрузки в Principle, прыгающие точки - фото 3 И, наконец, вернитесь на самый первый артборд, подвиньте первый круг вверх на 50px и прилинкуйте последний артборд к первому с помощью триггера “Auto”. Можете оценить результат в превью.

Классический загрузчик

Как создавать кастомные анимации загрузки в Principle, классический загрузчик Как создавать кастомные анимации загрузки в Principle, классический загрузчик - фото 1 Нарисуйте круг в Sketch, задайте серую границу 20px без заливки. Вставьте копию того же круга поверх первого и измените заливку на другой цвет. Я для примера использую синий. Нарисуйте квадрат поверх четверти синего круга. Передвиньте слой с квадратом под слой круга, и примените “Mask” к слою прямоугольника. Как создавать кастомные анимации загрузки в Principle, классический загрузчик - фото 2 Перейдите в Principle и проимпортируйте графику из Sketch с помощью кнопки “Import”. Примените триггер “Auto” к первому артборду и поверните синий круг на 360 градусов. Вставьте второй триггер “Auto” на втором артборде. Переименуйте сгенерированный третий слой с кругом на “copy” и прилинкуйте его назад к первому артборду с помощью триггера “Auto”.

Заключение

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


Перевод статьи Tidjane Tall

Топ коментарі (0)