Пошаговое руководство по анимации интерфейса в Principle и Sketch

Дизайн пользовательского интерфейса с анимацией и переходами - это отличный способ

улучшить опыт взаимодействия пользователя с продуктом (UX). Анимированные микропереходы помогают стимулировать пользователя к действиям, в эпоху очень

короткой устойчивости внимания людей. Поэтому Airbnb недавно представил Lottie

- новый open-source инструмент для простого добавления анимации в родные

приложения.

Проекты вроде Lottie показывают растущую важность добавления движений, это новый элемент создания улучшенных UX для приложений и вебсайтов. В этом уроке вы научитесь эффективным приемам UI-анимации с помощью Principle для Mac. После

того, как вы пройдете это руководство, вы сможете превратить скучные статичные

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

Скачайте эти бесплатные ресурсы, чтобы двигаться дальше. Вам понадобятся только приложения Principle и Sketch. Если у вас их еще нет, скачайте и установите бесплатные триал-версии по этим ссылкам:

• Principle
• Sketch
• Файл-исходник для этого урока

Обзор интерфейса Principle

Если вы работаете в Mac OS, интерфейс Principle будет вам очень знаком. В нем три

основных раздела: боковая панель, область дизайна с артбордами и окно превью,

которое можно двигать и ресайзить.

Понимание базовых принципов анимации в Principle

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

Чтобы помочь вам, я собрал небольшой лексикон терминов, использованных в этом уроке:

• Компонент: это вид группировки, который помогает контейнировать элементы и даже анимации. Это аналог смарт-объекта в Photoshop или символа в Illustrator.
• Триггер: способ начала анимации - т.е. касание, скролл, ховер и т.д.. В Principle триггер можно задать, выделив любой элемент внутри Principle и кликнув на иконку в виде вспышки молнии, которая появляется справа.
• Переход: изменение состояния с одного артборда на другое, т.е. слайд-эффект влево или вправо.
• Смягчающий эффект: степень мягкости перехода на основе того, как анимация начинается и кончается.

A. Триггер и переход

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

1. Задайте начальное состояние: как ваши элементы UI выглядят в начале перед тем, как стартует анимация.
2. Задайте триггер: выберите элемент взаимодействия, а также действие, которое запускает анимацию.
3. Определите конечное состояние: как элементы отображаются в конце анимации.

Как только вы настроили анимацию, можете просмотреть ее в окне превью.

В. Длительность анимации и смягчающий эффект

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

1. Откройте панель анимации: выделите черные стрелки между двумя артбордами, и нажмите кнопку “Animate” в верхней панели.
2. Увеличьте длительность анимации: передвиньте концы синих линий.
3. Примените смягчение: выделите все точки в форме ромбов и выберите “Ease Both” из выпадающего списка, чтобы смягчить переходы.

Что получится?

Это видео показывает, что вы сможете делать после освоения урока. Демо-приложение демонстрирует цветовую палитру Google Material Design, и предоставляет детали по каждому цвету, когда вы выберите какой-то оттенок. Вы сможете создавать анимацию загрузки, переходы между страницами с плавным parallax-эффектом, а также слайдер меню.

Скачайте бесплатный файл-исходник для урока здесь. Начнем.

Переходим из Sketch-файла в Principle

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

Удаление шапок экранов для бесшовного скроллинга

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

Создание анимации загрузки - фигуры

1. Выделите группу фигур загрузки, и нажмите на “Create Component”, содержащий фигуры и текст загрузки. Создайте компонент для текста с первым символом; мы проанимируем текст отдельно.
2. Выделите сгруппированные фигуры. Выберите триггер “Tap” и перетащите его поверх того же артборда, чтобы создать дубликат.
3. Второй артборд представляет конечное состояние анимации, и вы можете повернуть группу, используя параметр угла. Задайте другие значения угла для заливки и контура, чтобы создать более интересный эффект.
4. В завершение, выделите стрелки между артбордами, кликните “Animate”, чтобы открыть панель анимации, и измените длительность до 1.00 секунды.

Создание анимации загрузки - текст

1. Сначала создайте slide-up анимацию. Выделите фигуру кнопки, и примените триггер “Tap”. В новом артборде подвиньте все экраны вверх на 640px (именно такая сейчас высота артборда).
2. Теперь создадим параллакс-эффект. Перейдите на предыдущий артборд, или на приветственный экран, подвиньте геометрические фигуры и текст вниз на разные значения Y.
3. Наконец, внутри панели анимации, увеличьте длительность, скажем, до 1 с. Примените эффект “Ease Both” к временной прямой (предварительно проверьте, что все точки в форме ромба выделены, и кликните на любую синюю линию, чтобы применить эффект ко всем).
4. Просмотрите анимацию и подвиньте фигуры так, чтобы параллакс-эффект выглядел хорошо.

Создание parallax-эффекта cтраницы приветствия

1. Выделите компонент загрузки и примените триггер “Tap”, потянув стрелку от него в любое место артборда.
2. Выделите все экраны (из основной группы) и подвиньте их вверх на 640px.
3. Вернитесь на предыдущий артборд, подвиньте фигуры на приветственном экране вниз. Это создаст асинхронный эффект листания (это и есть параллакс).
4. Настройте анимацию добавлением времени на переход в панели анимации: выделите стрелку между артбордами, передвиньте точки синих линий на 1с.

Создание parallax-эффекта - страница About

1. Выделите кнопку в виде стрелки вниз (убедитесь, что выделяете всю группу) и примените триггер “Tap”, потянув стрелку от него на любое место артборда.
2. Выделите все экраны (из основной группы) и передвиньте их на 640px.
3. Вернитесь на предыдущий артборд, подвиньте фигуры на экране “About” вниз. Это создаст асинхронный эффект листания, т.е. параллакс.

Создание Parallax-эффекта - Страница Colors

1. Примените триггер “Tap” к кнопке в виде стрелки вниз (вся группа должна быть выделена), это создаст новый артборд.
2. На новом артборде выделите все экраны и сдвиньте их вверх на 640 px.
3. На предыдущем артборде подвиньте цвета и текст вниз. Помните: чем ниже вы двигаете объект, тем дольше придется двигаться вверх, так что используйте разное расположение объектов для создания более динамичного эффекта.
4. Откройте меню анимации, примените эффект “ease both” на все синие временные полосы внутри панели анимации.

Листание вбок - страница выбора цвета

1. Примените триггер “Tap” на кнопку “Load More” на экране “Colours”.
2. На новом артборде подвиньте контент “Colours” и “Selection” на 360px влево (ширина артборда).
3. Вернитесь на предыдущий артборд и подвиньте контент экрана в обратном направлении - вправо.
4. Помните, что вы также можете анимировать непрозрачность экрана, от 0 до 100%.
5. Поэкспериментируйте с длительностью анимации и эффектом смягчения для достижения нужного перехода.

Анимация иконки меню

1. Любой слой или фигура, в котором были эффекты в исходнике Sketch (например, тени) импортируются в Principle как изображение. Если нужно редактировать фигуры внутри Principle, попытайтесь не добавлять никаких спецэффектов до импорта.
2. Используя существующую иконку как ориентир, нарисуйте три тонких прямоугольника, и сгруппируйте их для создания иконки гамбургер-меню. Вы можете удалить или скрыть предыдущую иконку меню.
3. Выделите новую иконку и примените к ней триггер “tap”.
4. В новом артборде поверните верхний и нижний прямоугольник иконки меню, они должны быть выровнены по центру, и задайте 0% непрозрачности среднему.
5. Чтобы увидеть только что созданную анимацию, соедините измененную иконку меню с артбордом превью через триггер “Tap” и протестируйте.

Создание эффекта листания меню

1. На артборде конечного состояния передвиньте все экраны вправо, пока ссылки меню не будут выровнены по левому краю закрывающей иконки меню.
2. Выделите все внутри папки “Colors”, кроме содержимого меню, и светло-серый фон, уменьшите непрозрачность до 25%. Анимация будет затенять контент страницы, фокусируя пользователя на меню.
3. Увеличьте длительность анимации, перейдите на предыдущий артборд, чтобы немного передвинуть контент меню для создания плавного эффекта.

Сдвиг страницы контактов

1. В открытом меню примените триггер “Tap” на кнопку “Contact Us”.
2. На только что созданном артборде подвиньте все экраны вверх на 640 px.
3. Вернитесь назад на артборд превью и подвиньте элементы из страницы “Form” вниз.
4. Передвиньте элементы на разные значения Y, чтобы создать параллакс-эффект.
5. Наконец, выделите стрелки между артбордами, увеличьте длину анимации и примените эффект “Ease Both” к синим временным полоскам.

И, наконец, страница Thank You

1. Примените триггер “Tap” к кнопке “send message”.
2. На новом артборде подвиньте все экраны вверх на 640 px.
3. Перейдите на предыдущий артборд и подвиньте элементы из страницы “Confirmation” вниз.
4. Поиграйтесь с настройками масштаба и поворота для цветной иконки, чтобы создать более динамичный эффект.
5. Не забудьте увеличить длительность анимации для лучшего восприятия эффекта перехода.

Простота добавления анимаций в Principle

Principle - это фантастический инструмент для реализации ваших идей по анимированию пользовательских интерфейсов.

Его интерфейс полностью в стиле Mac, и он был создан для идеальной совместимости со Sketch-файлами.

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

Как ваши впечатления от урока и самой программы? Делитесь фидбеком в

комментариях.

Читайте также:

Principle для профессионалов, полное руководство

---

Перевод статьи TIDJANE TALL