UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Framer и Sketch: продуманное прототипирование
Редакція
Редакція

Опубліковано • Оновлено

Framer и Sketch: продуманное прототипирование

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

Шаг 1: Статичный дизайн

Для примера мы создадим стопку карточек, листаемую с помощью свайпа, которые вы видели в приложениях вроде Moments и Tinder. Карточки можно добавить в избранное или убрать. Каждую карточку можно открыть для просмотра контента. Процесс создания статического дизайна должен быть вам уже хорошо знаком. Продумайте все состояния, которые может принимать приложение при работе с пользователем, и набросайте их в Sketch. Как только получили полное понимание нужного набора возможностей, вы сможете двигаться дальше. Примечание: Framer сейчас поддерживает импорт из разрешения 1х. Рисуйте дизайн в 1х, упрощая себе жизнь в дальнейшем при создании спецификаций для разработки. Состояния статического макета Состояния статического макета

Шаг 2: Выпишите их

Это просто волшебный этап. Именно он спасает меня во многих случаях, не дает терять время на постоянные движения взад-вперед в попытках выработать нужные сценарии на более поздних этапах. Обычным текстом опишите список того, что должен выполнять ваш прототип. Попробуйте выписать все действия, которые будет проходить человек в вашем прототипе, а также результат, который они будут видеть при этих действиях. Множество сценариев выглядят чем-то вроде линейных временных шкал, так что выпишите состояние, идеальную картину того, что должно произойти в результате того или иного действия. С крайними случаями мы разберемся позже. Эта простая текстовая логика приведет к созданию псевдо-кода. Она также поможет в создании файла Sketch, который в следующем шаге мы импортируем во Framer. Создание по-настоящему целостного файла для импорта сэкономит вам массу времени. Вот как выглядит ваша логика в текстовом виде:

- Коснуться иконки для открытия приложения в главном виде

  • Загружаются карточки
  • Свайп карточки влево отмечает ее, как завершенную
  • Свайп карточки вправо отправляет ее в избранное
  • Касание кнопки open на любой карте раскрывает ее
  • Для активной карточки появляется вид списка
  • Касание exit закрывает вид списка
  • На последней карточке должен быть показ анимации завершения
  • Касание кнопки reload перезапускает карточки

Теперь вернемся к началу этого сценария и допишем, что является действием пользователя, а что - результатом этого действия со стороны интерфейса:

- Касание иконки (действие пользователя) для открытия приложения в главном виде (зум-анимация)

  • Свайп карточки влево (действие пользователя) отмечает ее (анимация галочки), как завершенную и загружает оставшиеся карточки на новых позициях (анимация)
  • Свайп карточки вправо (действие пользователя) отправляет ее в избранное (анимация звездочки) и загружает оставшиеся карточки на новых позициях (анимация)
  • Касание кнопки open (действие пользователя) на любой карте раскрывает ее (анимация раскрытия карточки в полноэкранном режиме)
  • Для активной карточки появляется вид списка (открывается список, и появляется кнопка exit)
  • Касание exit (действие пользователя) закрывает вид списка (элементы списка и кнопа exit исчезают, full screen становится соразмерным с карточкой)
  • На свайпе последней карточки (действие пользователя) должен быть показ анимации завершения (появляется анимация)
  • Касание кнопки reload (действие пользователя) перезапускает карточки (анимация загрузки)

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

Шаг 3: Скомпилируйте ваш файл Sketch для импорта в Sketch

На этом шаге мы берем оригинальный файл Sketch с графикой для интерфейса и конвертируем его в новый, который будет использоваться для импорта во Framer. Я предпочитаю слоить состояния интерфейса в том порядке, в котором они появляются в визуальной иерархии. Это позволяет избегать использования placeBefore или placeBehind (опции по переносу на передний и задний план) в конечном коде, что помогает упростить дебаг и избежать путаницы. Большую часть слоев я размещаю там, где они и будут находится в активном виде, а затем просто передвигаю их из вида при настройке проекта Framer. Скомпилируйте ваш файл Sketch для импорта в Sketch На первый взгляд, все выглядит немного сумасбродно, но для создателя смысл очевиден. Я пытаюсь быть максимально кратким и четким в названиях, использую обычно названия из моей расписанной текстом логики, просто убирая пробелы и начиная каждое слово с большой буквы. Я выбираю названия, которые очевидны, но при этом конкретны, чтобы не приходилось рыскать в поиске смысла по всему документу Sketch. Названия всегда должны описывать цель элемента. Например, у вас должна быть всего одна кнопка, которая перезагружает вид, но назовите ее ‘reloadButton’ вместо ‘button’. Так проще избежать путаницы, если вы решите добавить больше кнопок. Убедитесь, что вы удалили все слои из Sketch-файла, которые не должны отображаться в прототипе. Так вы упростите структуру, процесс поиска конкретных элементов, улучшите работу самого прототипа. Иногда я сглаживаю (flatten) все элементы, которыми не надо манипулировать в конце проекта для еще более лучшего быстродействия. Но я не делаю этого на более ранних стадиях проекта для максимальной гибкости изменений.

Шаг 4: импорт и повторное использование

Ну вот, настало время веселья. Импортируйте Sketch-файл во Framer в разрешении под целевое устройство. Настройте все слои с особыми опциями взаимодействия (перетаскиваемые, прокручиваемые и т.д.). Настройте начальные позиции слоев, масштабирование и т.д. Нужно получить проект в его начальном состоянии, с которого начинается работа пользователя. Это урезанный пример моего варианта (полная доступна в прототипе):

# define initial positions
app.appView.scale = 0
app.appView.originX = 0.361

# define draggables and scrollables
app.card1.draggable = true
app.card2.draggable = false
app.card3.draggable = false
scroll = ScrollComponent.wrap(app.cells)
scroll.scrollHorizontal = false

# define springs
cardLift = “spring(160,40,10)”
cardPull = “spring(200,26,10)”

# define animations
cardExitLeft = (layer) ->
layer.animate
properties:
x: -750
curve: cardPull

# define conditionals
currentCard = 1

Теперь возьмите первое действие пользователя из псевдо-кода, и пропишите настоящим кодом Framer. Так проработайте весь список. На этом этапе будет немного возни, так как вы экспериментируете и смотрите, как то или иное изменение отражается на прототипе. Не бойтесь настраивать и пересохранять слои в файле Sketch. Если вы все сделали правильно, вам будет просто отслеживать изменения во Framer. Я часто обращаюсь к файлу Sketch для выяснения размера элементов. Часто мне придется делать прототип в разрешении 2х из файла Sketch, так что важно не забывать удваивать все значения. Интерфейс Framer

Шаг 5: Настраивайте, пока не получите желаемое состояние

Просто вертите всем, что видите для получения нужного результата. Если у вас есть какие-то повторно используемые анимации или статичные элементы, то изменения делать довольно легко. Попробуйте разные варианты. Редактируйте файл Sketch и при необходимости проводите повторный импорт. Вы можете вдруг придумать что-то новое, что вдохновит вас на новые правки. Самый большой кайф я получаю именно на этом этапе прототипирования. Я вижу, как Framer и Sketch отлично гармонируют друг с другом, мне нравится переключаться между программами, пока не получу именно такой прототип, который мне нужен. Обычно я записываю свои сценарии прототипов в приложение Screenflick. Оно мне нравится, потому что позволяет контролировать как разрешение экрана при записи, так и разрешение на выходе для экспорта. С помощью этого я контролирую, какие из взаимодействий видны зрителю. Также прототипы, записанные в этой программе, работают лучше, чем записанные с использованием Quicktime. Для многих презентаций я устанавливаю прототип на устройство и записываю взаимодействия на камеру. Мне нравится использовать Frames или Frameless. Мне нравится возможность Frames хранить прототипы локально на устройстве, без подключения к интернету. Это очень полезная возможность, если нужно рандомно показывать прототипы в течение дня.

Еще парочка советов

Видео слои

Если у меня есть видео слои, я обычно настраиваю группу слоев ‘holder’ для обозначения, где видео появится в прототипе. По сути это обычный статический слой, который выглядит как видео. Это помогает по двум причинам: я могу ссылаться на файл Sketch для уточнения позиции и размера, а при вставке настоящего видео в иерархию я могу просто поместить его прямо поверх слоя-контейнера.

Сниппеты

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

// Slow down animations
Framer.Loop.delta = 1 / 240

Заключение

Надеюсь, эти мысли помогут вам улучшить процесс выработки логики прототипа, чтобы впоследствии не тратить время на ее настройку. Каждый последующий прототип Framer будет отнимать у вас вдвое меньше времени по сравнению с предыдущим. Поверьте, оно того стоит! Если вы хотите окунуться в сообщество Framer JS, посетите их группу на Facebook. Там всегда масса интересных обсуждений. Спасибо, что прочитали этот пост! Скачайте прототип и файл Sketch на GitHub.


Перевод статьи Charlie Deets

Топ коментарі (0)