Создание прототипа кастомной pull-to-refresh анимации во Flinto

Pull-to-refresh остается одним из самых популярных жестов, реализованных в мобильных приложениях. Он кажется простым в использовании, естественным и настолько логичным, что трудно представить обновление страницы без него. Но давайте отмотаем время назад.

Tweetie

В 2010 году Лорен Брихтер создал Tweetie, одно из многочисленных приложений для Твиттера. Стоит погрузиться в море подобных приложений, и окажется невозможным отличить одно от другого. Решение же Лорена выделялось из общей массы благодаря одной маленькой детали. Все изменила простая анимация pull-to-refresh, которая на тот момент была абсолютно инновационной. Неудивительно, что Твиттер купил Tweetie и предложил Лорену работу. С течением времени, все больше и больше приложений внедряли этот жест, и даже сама компания Apple торжественно объявила о добавлении pull-to-refresh в системное приложение Mail. app к радости людей, любящих хороший юзабилити.

Сегодня большинство клиентов хотят видеть этот жест в своих приложениях, а большинство дизайнеров (согласно моему опросу) хотят создавать прототипы с интегрированной анимацией pull-to-refresh, желательно кастомной. В этом уроке я покажу как создать такой прототип во Flinto.

Chatboard app

Для создания прототипа я возьму скрины приложения-чата, созданного компанией Erminesoft. Список чатов пользователя будет идеальным местом для внедрения анимации жеста обновления страницы.

Шаг 1

Нарисуйте дизайн в Sketch. Я все же надеюсь, что вы не используете Corel Draw, боже упаси, и честно вам скажу, Photoshop тоже не лучший вариант. Итак, на данном шаге нам нужно создать экран со списком чего-либо. Если необходимо, отрисуйте анимируемый элемент (или элементы) и экспортируйте экран во Finto. Для этого есть два варианта:

  1. Экспортировать отдельными .png файлам,
  2. Использовать плагин «Send to Flinto».

Шаг 2

Добро пожаловать во Flinto. Для создания простой анимации «pull-to-refresh», нам понадобится пять экранов. На этом этапе нам нужно добавить кастомный рисунок или использовать стандартные формы Flinto (прямоугольник или круг). Сразу вас остановлю, не ищите форму круга. Возьмите прямоугольник ®, сделайте из него квадрат и установите максимальный радиус скругления углов — готово. В моем случае, я создам три стандартных круга.

Chatboard app all screens

Шаг 3

Для первого кадра анимации необходимо создать отдельный слой со списком контента. Под ним мы располагаем анимируемый элемент в начальной позиции, в нашем случае, это три круга расположенные на одинаковых координатах X и Y. Это «Экран 1».

Chatboard app screen 1

Шаг 4

На «Экране 2» нам нужно опустить контент вниз по оси Y, показывая анимируемые элементы, ранее скрытые под списком контента.

Chatboard app screen 2

Кроме того на этом шаге (и всех последующих) необходимо выставить Transition Timer (таймер перехода) на 0 мс, чтобы не возникало задержек при переходе к следующему экрану анимации. Просто нажмите на название артборда, чтобы увидеть настройки таймера перехода.

Flinto timer link

Шаг 5

На предыдущем экране («Экран 2») мы видим только один круг, но, напомню, на самом деле это три круга, расположенные на одинаковых координатах. На этапе «Экрана 3» нам необходимо сдвинуть один из кругов на 30 пикселей влево по оси X, а другой круг — на 30 пикселей вправо по оси X. Опять ставим таймер перехода на 0 мс.

Chatboard app screen 3

Шаг 6

Переходим к «Экрану 4». Повторяем шаг 5, но двигаем круги не по оси X, а по оси Y на те же 30 пикселей. Координаты X всех элементов должны быть одинаковы и выровнены по центру. Напоминаю про таймер перехода.

Chatboard app screen 4

Шаг 7

Скопируйте «Экран 2» на новый «Экран 5». Все, что вам нужно сделать, — изменить Transition Target по таймеру не на «Экран 3», а на наш Home Screen.

Chatboard app all screens

Шаг 8

С артбордами закончили и теперь можно приступать к анимации. Выделите слой контента на Home Screen, нажмите [F] и привяжите его к «Экрану 2». Создайте New Transition.

Кстати, а вы знали, что клавиша [F] означает не нецензурное английское слово на букву f, а само название программы Flinto, и является ее фирменной клавишей.

Выберите следующие настройки перехода:
Gesture — Down Swipe
Target — «Screen 2»
Transition — New Transition

Flinto настройка перехода

Шаг 9

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

Шаг 10

На этом этапе нам нужно соединить элементы между собой, чтобы программа понимала, что, например, элемент «Круг 1» на главном экране — тот же элемент на всех остальных экранах.

Чтобы этого добиться, мы выбираем два одинаковых элемента и нажимаем «Connect Layers».

Flinto Connect Layers

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

Flint анимация Sping

Step 11

Нажимаем Save & Exit. Сейчас нам нужно выбрать этот тип перехода для всех переходов в проекте, включая таймеры.

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

Chatboard прототип

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

Прототипирование iOS-приложения в Sketch и Flinto: часть 1