Я покажу вам, как создать прототип, навеянный Звездными войнами

Юридическая информация: Lucasfilm, логотип Lucasfilm, STAR WARS и все связанные символы, имена и литеры являются фирменными знаками и интеллектуальной собственностью copyright © 2012 Lucasfilm Ltd. Все права защищены.

Введение

Кто не любит хорошую карточную анимацию? Ее никогда не бывает много, правда? Это, конечно, чуть более обыденно, чем картина, которая сотрясла не так давно мир своим выходом. Да, в этом туториале мы по полной пройдемся по теме Звездных войн, они вдохновили меня на создание этой карточной анимации в Principle.

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

Перед началом установите следующие приложения и скачайте такие исходники:

*Можете найти его в папке Tutorial Assets/Fonts.

Когда все приложения и исходники на месте, приступим…

Что мы будем создавать?

Вот превью того, над чем вы поработаете в этом уроке…

Начало работы в Principle

Можете оставить все, как есть. Окно Preview* по умолчанию имеет размер iPhone 6, круто. Если у вас не так, просто выберите iPhone 6 из меню Size Presets в инспекторе.

Создание карточной анимации Star Wars в Principle, начало работы
Пресеты размеров

*При работе над прототипом окно Preview в Principle очень помогает, но ничего не заменит тестирования на устройстве из реального мира, так что я порекомендую установить Principle Mirror из App Store.

Импорт дизайна из Sketch

Откройте исходник в Sketch, кликните на кнопку Import на панели инструментов, выберите импорт в 2x, и кликните Import.

Создание карточной анимации Star Wars в Principle, импорт из Sketch
Импорт дизайна из Sketch

Ваши экраны будут импортированы из Sketch и выровнены по области канваса. Можете кликнуть на каждый экран (появится зеленая граница, показывающая, какой экран вы выделили), и увидеть его в окне превью…

Создание карточной анимации Star Wars в Principle, выделение экрана
Окно превью

… в списке слоев вы увидите, что порядок экранов, групп и слоев полностью повторяет оригинальную иерархию из файла Sketch…

Создание карточной анимации Star Wars в Principle, слои в Principle
Иерархия слоев, сохраненная из Sketch

Подсказка: Вы увидите, что некоторые слои и группы были сглажены после появления в Principle. К некоторым из них я специально добавил астериск (*) в конец названия слоя/группы. Так проще управлять разными элементами, помогает с размером и скоростью прототипов. Другие группы сгладились потому, что в исходном файле Sketch использовалась маска (например, Header), а Principle сглаживает группы, содержащие маску, так что имейте это в виду.

Файл, созданный в Sketch, состоял из 4 артбордов (мне просто нравится так структурировать свои файлы Sketch, так на них проще ссылаться при переходе на стадию прототипирования), но прототип, который мы будем создавать в Principle, происходит внутри одного экрана, где карточки появляются слева и справа, по мере того, как свайпит пользователь. Так что нам понадобится структурировать элементы немного по-другому.

Создание карточной анимации Star Wars в Principle, Файл Sketch
Файл Sketch
Создание карточной анимации Star Wars в Principle, Файл Principle
Файл Principle

Я покажу, что нужно изменить, вам будет понятнее

Анимация хедеров

У вас 4 экрана с персонажами Rogue One (“Изгой один”).

Создание карточной анимации Star Wars в Principle, анимация хедеров
Персонажи карточек Rogue One

Первый персонаж, конечно же, Орсон Кренник, и от него пользователь сможет свайпить влево, чтобы отобразить других персонажей.

Начав со слоя Header, мы поместим каждый внутрь первого (и вскоре, он станет единственным) экрана.

Скопипастьте (Cmd + C и Cmd + V) каждый из хедеров с других 3 экранов в первый, помещая один поверх другого. Перетяните их в список слоев. В списке слоев переставьте их так, чтобы они были в том же порядке, что и на экране. В итоге должно получиться так:

Создание карточной анимации Star Wars в Principle, выбираем все хедеры
Добавление всех слоев Header на первый экран

Затем (Shift+клик) выделите все слои Header и (Cmd + G) сгруппируйте их. Используйте (Cmd + R) для переименования группы заголовков.

Создание карточной анимации Star Wars в Principle, создание папки в Principle
Группа и переименование

Теперь скопируйте слои карточек профиля (Profile Card) и слой Background (я его использую исключительно как помощника для выравнивания) на первый экран и корректно выровняйте.

Итак, с экрана Джин Эрсо, выделите группу Jyn Card (Cmd + Click) и слой Background …

Создание карточной анимации Star Wars в Principle, выделите группу Card и слой Background
Выделите группу Card и слой Background

Затем скопируйте и вставьте эти элементы в первый экран, и, выделив слой Background, снизьте непрозрачность до 0% в инспекторе.

Создание карточной анимации Star Wars в Principle, меняем прозрачность на 0
Снизьте непрозрачность в инспекторе до 0%

Проделайте то же самое с двумя другими экранами (не забудьте сократить непрозрачность слоев Background до 0, и упорядочить их корректно в списке слоев), пока не получится что-то такое:

Создание карточной анимации Star Wars в Principle, организация слоев карточек и фонов
Организация слоев карточек и фонов

С помощью Shift+клик выделите все эти группы и слои, сгруппируйте их (Cmd + G) и переименуйте(Сmd + R) во Views.

Создание карточной анимации Star Wars в Principle, переименуйте группу во Views
Переименуйте группу во Views

Теперь удалите остальные 3 экрана, они нам больше не понадобятся. Просто выделите их в списке слоев и нажмите Delete.

Создание карточной анимации Star Wars в Principle, удалить экраны
Выделите экраны и удалите их

Сгруппируем некоторые элементы и упорядочим список слоев корректно. Во-первых, выделите каждую группу карточек, которую мы скопировали, и соответствующие им слои фона, и сгруппируйте (Cmd + G).

Создание карточной анимации Star Wars в Principle, группировка слоев
Сгруппируйте карточки и слои фона

Затем передвигайте группы, пока не получится что-то такое…

Создание карточной анимации Star Wars в Principle, реорганизация слоев
Реорганизация групп и слоев в списке слоев

И, наконец, кликните дважды на названии экрана, измените его на Screen.

Создание карточной анимации Star Wars в Principle, изменение названия экрана
Изменение названия экрана

Перепланировка карточек

Переместите карточки, которые теперь спрятаны за первой. Выделите вторую карточку (Джин Эрсо) в списке слоев, введите 375 (ширина экрана) в поле X в инспекторе. Так карточка будет помещена прямо рядом с экраном, а сам экран сядет на 0 координату по оси Х.

Создание карточной анимации Star Wars в Principle, выравнивание карточки Джин Эрсо
Выравнивание карточки Джин Эрсо

Для следующей карточки понадобится немного математики в поле Х. Введите 375*2.

Создание карточной анимации Star Wars в Principle, умножаем на два по X
Для поля Х опять используйте элементарную математику.

Для последней карточки введите значение 375*3.

Наконец, все упорядочено на канвасе, как следует.

Да, вы можете спросить “А почему бы таким же образом не расположить все сразу в Sketch?”. Действительно, можно так сделать, но как я упоминал раньше, хотя мы собираемся создать взаимодействие только внутри одного экрана, я все равно при создании Sketch-файла предпочитаю иметь полный обзор того, как будут выглядеть мои экраны на завершенных кадрах взаимодействия.

Настало время добавить движения в наши труды.

Для начала создайте простую анимацию Paging между каждой из карточек. Это супер-просто в Principle.

Выделите группу Views в списке слоев, и в Инспекторе выберите Page из горизонтального меню выбора.

Создание карточной анимации Star Wars в Principle, настройки постраничного скролла
Настройки постраничного скролла

Убедитесь, что скролл-гайды закреплены по правому и левому краям экрана…

Создание карточной анимации Star Wars в Principle, Закрепление скролл-гайдов
Закрепление скролл-гайдов

Протестируйте скролл, посвайпив карточки в окне превью. Все выглядит хорошо? Просто, эффективно, но все еще не дошлифовано, состояние “Даа, все выглядит хорошо, но…”.

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

Подсказка: При использовании превью, просто нажимайте W для рестарта/перезагрузки прототипа.

Работа с драйверами

Документация Principle

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

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

Создание карточной анимации Star Wars в Principle, работа с драйверами, фото -1
Откройте панель драйверов

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

Задайте 0 для бегунка линейки, выделите первый хедер в списке слоев и кликните иконку плюс (+) рядом с названием слоя в панели драйверов, из появившегося меню выберите Opacity.

Создание карточной анимации Star Wars в Principle, работа с драйверами, фото -2
Выберите Opacity из всплывающего меню Drivers

Это создаст ключевой кадр с текущим значением слоя Header, в котором указана 100% Opacity (непрозрачность).

Создание карточной анимации Star Wars в Principle, работа с драйверами, фото -3
Настройка первого ключевого кадра

Быстрая подсказка: если вы хотите убрать текущий ключевой кадр из анимации, просто выделите его и затем кликните на иконку Remove (X) рядом с названием Property.

Потяните бегунок линейки вверх панели драйверов и тяните ее вправо, пока не дойдете до значения 375 (что является шириной нашего экрана, помните?). Конечно, вы будете видеть смену элементов в области канваса, и 2-я карточка появится в поле зрения.

Создание карточной анимации Star Wars в Principle, работа с драйверами, фото -4
Потяните бегунок линейки до 375

Теперь нужно постепенно затенить первый хедер, так что просто уменьшите непрозрачность до 0 в инспекторе.

Создание карточной анимации Star Wars в Principle, работа с драйверами, фото -5
Уменьшите непрозрачность для слоя Header

Вы увидите, что автоматически добавился новый ключевой кадр в панели Drivers.

Создание карточной анимации Star Wars в Principle, работа с драйверами, фото -6
К анимации добавился конечный ключевой кадр

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

Давайте повторим те же шаги и для других слоев хедеров. Когда бегунок линейки находится на отметке 375, выберите Header 2 в списке слоев, затем кликните значок плюс (+) рядом с его названием в панели Drivers, выберите Opacity для добавления ключевого кадра. Перетяните бегунок вправо, пока следующая карточка не “сядет” внутрь экрана. Или просто посчитайте в голове; 375*2 = 750. Готово!

Опять же, уменьшите непрозрачность до 0, и ваши ключевые кадры будут снова связаны.

Создание карточной анимации Star Wars в Principle, работа с драйверами, фото -7
Связанные ключевые кадры

Вперед, настройте последний ключевой кадр сами. Получилось!

Создание карточной анимации Star Wars в Principle, работа с драйверами, фото - 8
Ключевые кадры последнего слоя хедеров

Ну что ж, анимации хедеров отсортированы. Перейдем к подгонке текстовых слоев, эмблемы, кнопки, для создания нужного положения при слайдинге экранов, а также настройки масштаба, непрозрачности для некоторых элементов. Мы начнем с карточки Джин Эрсо, особенно по части группы Profile Details (детали профиля), где настроим значение непрозрачности по мере изменения положения по оси Х.

Создание карточной анимации Star Wars в Principle, работа с драйверами, фото - 9
Выделите группу Profile Details

При Scrub Head на 0, группа Profile Details выделена, кликните на иконке плюс (+) рядом с названием группы в панели драйверов, выберите Opacity, и затем уменьшите непрозрачность до 20%.

Создание карточной анимации Star Wars в Principle, работа с драйверами, фото - 10
Уменьшите непрозрачность до 20%

Затем, как мы делали для градиентов хедера, перетяните Scrub Head на 375, и увеличьте непрозрачность снова до 100%.

Создание карточной анимации Star Wars в Principle, работа с драйверами, фото - 11
Увеличьте непрозрачность снова до 100%

Теперь для эмблемы повстанцев мы настроим масштаб и значение X.

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

Итак, с помощью Cmd + Click выделите эмблему повстанцев на канвасе, и добавьте Scale, и X value Keyframe в панели драйверов.

Создание карточной анимации Star Wars в Principle, работа с драйверами, фото - 12
Добавьте два ключевых кадра одновременно

И затем, из Инспектора, сократите масштаб до 0.5 и измените значение X до 80.

Создание карточной анимации Star Wars в Principle, работа с драйверами, фото - 13
Уменьшите масштаб, настройте положение по оси X

Как и раньше, перетащите бегунок шкалы на 375, и в инспекторе верните масштаб эмблемы обратно до 1, а значение Х — назад в 0.

Создание карточной анимации Star Wars в Principle, работа с драйверами, фото - 14
Верните масштаб и координату Х в исходные значения

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

Вернемся к делу, нам еще немало…

Настроим координату X текстовых слоев и кнопки, следуя тем же алгоритмам, что и раньше.

Убедитесь, что бегунок линейки стоит на 0, затем добавьте ключевой кадр со значением X на каждый из последующих слоев, затем настройте значение параметра X в инспекторе —

  • 1500 SWP 230
  • Jyn Erso 120
  • Used to operating… 150
  • Swap Button 220

В итоге карточный макет на канвасе должен выглядеть так:

Создание карточной анимации Star Wars в Principle, работа с драйверами, фото - 15
Добавление X value Keyframeов на каждый слой

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

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

  • 1500 SWP 164
  • Jyn Erso 0
  • Used to operating… 0
  • Swap Button 102

А теперь протестируйте все в окне превью, и вы увидите, что текстовые слои двигаются в слегка пошатывающейся манере. Идеально!

Ну что ж, настал момент самообучения. Следуя тем же шагам, которые я показал для карточки Джин Эрсо, создайте те же анимации и переходы для карточек Кассиана Андора и Берегового штурмовика.

Примечание: Не забывайте переводить бегунки в изначальную позицию 375 (Cassian Andor), и 750 (Shoretrooper), и только затем приступайте к настройке слоев. Потом, когда нужно вернуть элементы в их изначальные позиции, переводите бегунок линейки на 750 (Cassian Andor), и 1125 (Shoretrooper) соответственно. Вперед, это несложно!

Подсказка: В панели драйверов становится тесно, просто перетяните ее вниз и увеличьте размер окна.

Вы вернулись, супер! Надеюсь, у вас получилось нечто такое:

Создание карточной анимации Star Wars в Principle, результат анимации
Слои, правильно расположенные на канвасе

… и что-то такое должно быть в панели драйверов…

Создание карточной анимации Star Wars в Principle, результат драйверов
Ключевые кадры в панели драйверов.

Вы справились, отличная работа!

Проиграйте все анимации в окне превью.

Выглядит красиво? Или вы заметили проблему?

Да. Анимация не работает на карточке Орсона Кренника, и не работает, когда карточки появляются слева. Пофиксим это быстрее.

Поместите регулятор шкалы на координату 1125, чтобы первые три карточки сидели вне экрана, слева от него.

Создание карточной анимации Star Wars в Principle, положение карточек
Положение карточек слева

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

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

Когда бегунок линейки стоит на 1125, выделите группу Profile Details и уменьшите непрозрачность до 20%. Вы увидите новый добавленный ключевой кадр по опции Opacity в панели драйверов.

Создание карточной анимации Star Wars в Principle, Profile Details
Уменьшение непрозрачности на Profile Details

Для эмблемы уменьшите масштаб до 0.5, и задайте значение X, равное -40.

Затем, для текстовых слоев и кнопки введите эти значения Х в инспекторе:

  • 890 SWP 110
  • Cassian Andor -110
  • An accomplished alliance… -140
  • Swap Button -100

Получится нечто такое:

Создание карточной анимации Star Wars в Principle, Карточка Кассиана Андора
Карточка Кассиана Андора

Проделайте то же самое для карточек Джина Эрсо и Орсона Кренника.

Примечание: не забывайте ставить бегунки на начальные положения 750 (Jyn Erso), и 375 (Orson Krennic), и только потом начинайте настраивать слои. Также, на карточке Орсона Кренника, чтобы вернуть элементы на их начальное положение, верните Scrub Head на 0 (так как это первая карточка, которую вы видите, открыв прототип, все должно быть на своих изначальных позициях).

Создание карточной анимации Star Wars в Principle, Переведите бегунок на 0
Переведите бегунок на 0

Должно получиться примерно так…

Создание карточной анимации Star Wars в Principle, Корректное положение карточек на канвасе
Корректное положение карточек на канвасе

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

Анимация пагинации

Пагинация все еще выглядит несколько статично. Давайте быстро исправим это и закончим работу над этим уроком.

Мы сконцентрируемся на активном слое внутри группы Pagination…

Создание карточной анимации Star Wars в Principle, анимация пагинации - 1
Выделите активную точку

… и задайте Х, а также масштаб для этого слоя.

Выделите слой, кликните на иконке плюс (+) в панели Drivers, выберите опцию X, чтобы создать первый ключевой кадр.

Создание карточной анимации Star Wars в Principle, анимация пагинации - 2
Создайте первый ключевой кадр

Затем переместите бегунок шкалы на 1125, чтобы карточка Берегового штурмана села внутрь экрана.

Удерживайте Shift, чтобы активная точка оставалась выровненной по оси Х, и тяните ее, пока она не встанет поверх последней серой точки. Теперь ключевые фреймы связаны.

Создание карточной анимации Star Wars в Principle, анимация пагинации - 3
Удерживайте Shift, чтобы точки оставались выровненными

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

Поместите бегунок на 0, точка Active должна быть выделена, выделите опцию Scale в панели Drivers.

Создание карточной анимации Star Wars в Principle, анимация пагинации - 4
Выделите опцию Scale в панели Drivers

Далее передвиньте бегунок на 100, измените Scale точки до 0.6.

Создание карточной анимации Star Wars в Principle, анимация пагинации - 5
Уменьшите масштаб Active Dot

Перетяните бегунок снова на 375, и увеличьте масштаб опять до 1.

Создание карточной анимации Star Wars в Principle, анимация пагинации - 6

Проделайте те же шаги для остатка пагинации, всегда возвращая масштаб точки обратно до 1, когда она доходит до каждой карточки (750 и 1125), до тех пор, пока панель драйверов не будет выглядеть так…

Создание карточной анимации Star Wars в Principle, анимация пагинации - 7
Ключевые кадры конечной пагинации.

Вот и все! Отличная работа! Спасибо, что прочитали этот пост.