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

Разработка пользовательского интерфейса с учетом анимации и переходов — отличный способ спланировать лучший пользовательский интерфейс (UX) для вашего следующего приложения. Анимированные микровзаимодействия — идеальный способ стимулировать взаимодействие пользователей в мире с коротким периодом внимания. Вот почему Airbnb недавно представила Lottie — свой «новый инструмент с открытым исходным кодом, который позволяет легко добавлять анимацию в нативные приложения».

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

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

Давайте начнем.

Загрузите эти бесплатные ресурсы, чтобы следовать им.

Вам понадобятся только приложения Principle и Sketch. Если у вас их еще нет, вы можете скачать бесплатную пробную версию по ссылкам ниже.

• Загрузите бесплатную пробную версию Principle здесь.

• Загрузите бесплатную пробную версию Sketch здесь.

• Загрузите исходный файл бесплатного руководства здесь.

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

Если вы привыкли к Mac OS, то интерфейс Principle покажется вам очень знакомым. Он имеет три основных раздела: боковую панель, область дизайна, в которой отображаются монтажные области, и окно предварительного просмотра, размер которого можно изменять и перемещать.

Понимание основных концепций анимации в принципе

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

Чтобы помочь вам лучше понять, вот краткий словарь терминов, которые вы встретите в руководстве.

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

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

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

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

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

B. Длина анимации и эффект плавности

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

1. Откройте панель анимации: выберите черные стрелки между двумя монтажными областями и нажмите кнопку «Анимация», расположенную на верхней панели.
2. Увеличьте длину анимации: переместите конечные точки синих линий.
3. Применить смягчение: выберите все точки в форме ромба и выберите «Смягчение обоих» в раскрывающемся списке, чтобы сгладить переходы.

Что вы получите

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

Убедитесь, что вы загрузили бесплатный исходный файл учебника здесь.

Давайте начнем.

Переход от файла эскиза к принципу

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

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

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

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

1. Выберите группу форм загрузки и нажмите «Создать компонент», содержащий формы загрузки и текст. Создайте компонент для текста внутри первого символа; мы будем анимировать текст отдельно сразу после этого.
2. Выберите сгруппированные фигуры. Выберите триггер «Tap» и перетащите его поверх той же монтажной области, чтобы создать дубликат.
3. Вторая монтажная область представляет конечное состояние анимации, и вы можете повернуть группу, используя свойство угла. Задайте разные значения угла для «заливки» и «контура», чтобы создать более интересный эффект.
4. Чтобы закончить, выберите стрелки между монтажными областями, нажмите «Анимация», чтобы открыть «панель анимации», и измените продолжительность, сдвинув конечные точки примерно до 1,00 с.

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

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

Создание эффекта параллакса — страница приветствия

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

Создание эффекта параллакса — страница «О нас»

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

Создание эффекта параллакса — страница «Цвета»

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

Перемещение страницы сбоку — страница выбора цвета

1. Примените триггер «Tap» к кнопке «Загрузить еще» на экране «Цвета».
2. В новой монтажной области переместите содержимое «Цвета» и «Выделение» влево на 360 пикселей (ширина монтажной области).
3. Вернитесь к предыдущему артборду и переместите содержимое экрана в противоположном направлении — вправо.
4. Обратите внимание, что вы также можете анимировать непрозрачность экрана, скользя от нуля до 100 процентов.
5. Поиграйте с продолжительностью анимации и эффектом замедления, чтобы настроить эффект перехода.

Анимация значка меню

1. Обратите внимание, что любой слой и форма, которые имели эффект (например, тени) из исходного файла Sketch, импортируются в Principle как изображение. Если вам нужно отредактировать фигуры внутри Principle, постарайтесь не добавлять никаких специальных эффектов до импорта.
2. При этом, используя существующую иконку в качестве ориентира, нарисуйте три тонких прямоугольника и сгруппируйте их, чтобы создать иконку меню гамбургера. Теперь вы можете удалить или скрыть предыдущий значок меню.
3. Выберите только что созданный значок и примените к нему триггер «Tap».
4. В новой монтажной области поверните верхний и нижний прямоугольник на значке меню, убедитесь, что они выровнены по центру, и задайте нулевой процент непрозрачности среднему.
5. Чтобы увидеть только что созданную анимацию, свяжите измененный значок меню с монтажной областью предварительного просмотра с помощью триггера «Tap» и протестируйте его.

Создание эффекта ползунка меню

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

Переход к экрану контактов

1. В открытом меню примените триггер «Tap» к кнопке «Связаться с нами».
2. На только что созданном артборде переместите все экраны вверх на 640 пикселей.
3. Затем вернитесь к монтажной области предварительного просмотра и переместите элементы со страницы «Форма» вниз.
4. Переместите элементы с разными значениями Y, чтобы создать эффект параллакса.
5. Наконец, выберите стрелки между монтажными областями, увеличьте длину анимации и примените «Ease Both» к синим временным шкалам.

Окончание страницы благодарности

1. Примените триггер «Tap» к кнопке «отправить сообщение».
2. На новом артборде переместите все экраны вверх на 640 пикселей.
3. Затем вернитесь к монтажной области превью и переместите элементы со страницы «Подтверждение» вниз.
4. Поиграйте с масштабом и поворотом цветного значка, чтобы создать более динамичный эффект.
5. Убедитесь, что вы добавили длину анимации, чтобы лучше воспринимать эффект перехода.

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

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

Интерфейс удобен для Mac и создан для бесперебойной работы с файлами Sketch.

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

Пожалуйста, оставьте любые вопросы в комментариях ниже. Я рад ответить на них.