Как создать собственную анимацию загрузки, чтобы снизить показатель отказов

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

Сегодня хорошо продуманная анимация с использованием CSS, jQuery или простых анимированных GIF-файлов — это возможность оживить ваши интерфейсы и добавить индивидуальности вашему продукту.

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

В этом уроке мы будем использовать Sketch для создания основных фигур и Principle для быстрого создания простых пользовательских анимаций загрузки. (Оба этих приложения предназначены для Mac.) Вы узнаете, как создавать красочные анимации загрузки, используемые Trello, Flickr, Slack и другими.

Давайте приступим к делу.

Слабая анимация загрузки

В Sketch нарисуйте четыре закругленных квадрата со стороной 50 пикселей или радиусом 100 пикселей каждый. Они должны выглядеть как идеальные круги, но мы используем квадраты со скругленными углами, чтобы создать эффект растяжения линии в анимации.

Разместите четыре фигуры таким образом, чтобы получился воображаемый квадрат с расстоянием между сторонами 150 пикселей. Примените четыре разных цвета (зеленый #35BA90, синий #69CADD, желтый #EBA900 и розовый #E20661).

Импортируйте формы в Principle, сгруппируйте их и нажмите «Создать компонент», чтобы вложить группу.

Войдите внутрь вложенной группы и поверните монтажную область на 15 градусов. Затем выберите каждый отдельный круг и поверните его обратно в исходное положение (на 15 градусов назад). Это создает эффект растяжения по прямой линии.

Примените триггер «Авто» к монтажной области, а затем растяните каждый прямоугольник со скругленными углами к противоположной стороне монтажной области до длины 295 пикселей. Установите непрозрачность 75% для каждой фигуры на обеих монтажных областях.

Примените еще один триггер «Auto» ко второму артборду. На новой монтажной области уменьшите каждую линию до исходной ширины 50 пикселей, но с противоположной стороны от исходного положения.

Свяжите последнюю монтажную область с первой с помощью триггера «Авто». Нажмите кнопку «Вернуться к родительскому элементу», чтобы просмотреть конечный результат.

Совет. Когда вы переходите «Вернуться к родительскому элементу», вы можете повернуть основную группу на -30 градусов, чтобы она больше походила на Slack. Кроме того, вы можете изменить темп анимации на панели «Анимация» и применить эффект «Замедлить оба», чтобы сгладить переходы.

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

С помощью Sketch нарисуйте синий квадрат со стороной 100 пикселей. Нарисуйте белый прямоугольник шириной 60 пикселей и высотой 140 пикселей. Выровняйте его по левому верхнему углу предыдущего квадрата с верхним и левым полем 30 пикселей. Дублируйте этот белый прямоугольник, выровняйте его справа от квадрата с правым полем 30 пикселей и уменьшите его высоту до 70 пикселей.

Импортируйте монтажную область в Principle и примените триггер «Авто», чтобы создать новый ключевой кадр. На новом артборде поменяйте местами высоту белых прямоугольников (сделайте левый прямоугольник высотой 70 пикселей, а правый прямоугольник — 140 пикселей). Примените эффект «Ease-Both» на панели «Animate», чтобы сгладить переход.

Катящийся круг

Нарисуйте круг в Sketch. Примените границу 10px со значениями «Dash» и «Gap» и без заливки. Используйте цвет «Угловой градиент» для границы, который подчеркнет эффект вращения, который вы создадите позже.

Откройте новый файл Principle и используйте кнопку «Импорт», чтобы перенести круг из Sketch. Примените два триггера «Авто» подряд.

Чтобы создать эффект поворота, выберите круг в средней монтажной области и измените его значение «Угол» на 360 градусов. Затем выберите третий круг и дайте ему другое имя (например, «копировать») внутри левой панели. Это имитирует бесконечное вращение.

Наконец, свяжите третий артборд с исходным другим триггером «Авто». Примените «Линейный» переход к временной шкале между монтажными областями 1 и 2. Проверьте только что созданную анимацию в окне предварительного просмотра.

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

Нарисуйте синий круг и розовый круг бок о бок. Импортируйте их в Principle и примените триггер «Авто», чтобы создать новый артборд.

Инвертируйте положение кругов и примените новый триггер «Авто», чтобы создать третью монтажную область. На этой новой монтажной области инвертируйте порядок слоев кругов на левой панели.

Примените третий триггер «Авто», чтобы создать четвертую монтажную область. На этой последней монтажной области еще раз инвертируйте положение кругов и примените окончательный триггер «Авто» от последней монтажной области к исходной.

Тип загрузки

Создайте новый проект в Principle и с помощью инструмента «Текст» напишите «ЗАГРУЗКА». Выровняйте текст по левому краю и отцентрируйте его по вертикали в монтажной области.

Примените триггер «Авто» пять раз подряд. Верните пятый триггер из последнего цикла монтажной области на начальную монтажную область.

Начиная с начальной монтажной области и двигаясь вправо, отредактируйте текст на каждой монтажной области, чтобы добавить ноль, одну, две, три, две и одну точку соответственно рядом с исходным текстом «ЗАГРУЗКА». Последовательность артбордов должна выглядеть примерно так:

ЗАГРУЗКА ЗАГРУЗКА. ЗАГРУЗКА.. ЗАГРУЗКА… ЗАГРУЗКА.. ЗАГРУЗКА.

Теперь вы можете просмотреть только что созданную анимацию.

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

Нарисуйте точку размером 60 пикселей. Скопируйте и вставьте еще одну точку и поместите ее на 60 пикселей вправо. Убедитесь, что обе точки, включая зазор в 60 пикселей, расположены точно по центру артборда.

Примените триггер «Авто» четыре раза подряд.

На втором артборде уменьшите вторую точку до 30px.

На третьем артборде уменьшите вторую точку до 0px, а первую до 30px.

На четвертом артборде увеличьте вторую точку до 30 пикселей и уменьшите первую точку до 0 пикселей.

На пятой монтажной области уменьшите первую точку до 30 пикселей и свяжите монтажную область с первой доской с помощью триггера «Авто».

Роллинг Точки

Поместите пять точек в порядке, который вы найдете на шестигранном кубике. Импортируйте артборд в Principle и отцентрируйте его.

Примените триггер «Авто» на монтажной области.

На новом артборде поверните группу точек на 360 градусов.

Свяжите вторую монтажную область с первой с помощью триггера «Авто».

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

Начните с круга 50px, выровненного по центру внутри круга 150px, который имеет границу 5px, но без заливки.

Примените триггер «Авто» три раза подряд.

На первой монтажной области уменьшите размер линейного круга до 50 пикселей и внутреннего круга до 10 пикселей.

На третьем артборде увеличьте линейный круг до 200 пикселей и установите для него непрозрачность 0%. Увеличьте внутренний круг до 150 пикселей и придайте ему непрозрачность 50%.

На последней монтажной области увеличьте внутренний круг до 200 пикселей и установите для него непрозрачность 0%. Уменьшите окружность линии до 50px и придайте ей непрозрачность 25%.

Примените триггер «Авто» к последнему артборду. Уменьшите внутренний круг до 10 пикселей с непрозрачностью 50%.

Свяжите последнюю монтажную область с первой с помощью триггера «Авто».

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

Выровняйте три идеальных круга высотой 50 пикселей с интервалом 50 пикселей между ними.

Примените триггер «Авто». На втором артборде переместите первый круг вверх на 50 пикселей.

Примените триггер «Auto» ко второй плате. На третьей монтажной области выберите первые два круга и переместите их вверх на 50 пикселей. Три круга должны лежать на диагональной линии.

Примените триггер «Авто» к третьей доске. На четвертом артборде переместите первый круг вниз на 50 пикселей. Выберите последние два круга и переместите их вверх на 50 пикселей.

Примените триггер «Авто» на четвертой доске. На пятом артборде сдвиньте первые два круга на 50 пикселей вниз. Выберите последний круг и переместите его вверх на 50px.

Примените триггер «Авто» на пятой доске. На шестом артборде сдвиньте два последних круга вниз на 50 пикселей.

Наконец, вернитесь к самой первой монтажной области, переместите первую точку на 50 пикселей вверх и свяжите последнюю монтажную область с первой с помощью триггера «Авто». Вы можете предварительно просмотреть конечный результат.

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

Нарисуйте круг в Sketch и задайте ему серую рамку шириной 20 пикселей без заливки.

Вставьте копию того же круга поверх него и измените заливку копии на другой цвет. В этом примере мы будем использовать синий.

Нарисуйте квадрат, перекрывающий одну четверть синего круга. Переместите слой с прямоугольником ниже слоя с кругом и примените «Маску» к слою с прямоугольником.

Перейдите к Principle и импортируйте рисунок Sketch с помощью кнопки «Импорт».

Примените триггер «Авто» к первой монтажной области и поверните синий круг на 360 градусов.

Примените второй триггер «Auto» ко второй монтажной области. Переименуйте сгенерированный третий слой круга в «копировать» и свяжите его с первой монтажной областью с помощью триггера «Авто».

Заключение

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

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

• • •

Дальнейшее чтение в блоге Toptal Design:

• UX электронной коммерции — обзор лучших практик (с инфографикой)
• Важность ориентированного на человека дизайна в дизайне продукта
• Лучшие портфолио дизайнеров UX — вдохновляющие тематические исследования и примеры
• Эвристические принципы для мобильных интерфейсов
• Упреждающий дизайн: как создать волшебный пользовательский опыт