Учебное пособие по Framer: 7 простых микровзаимодействий для улучшения ваших прототипов

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

Почему вы должны создавать прототипы небольших взаимодействий?

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

Взгляните на примеры ниже. Дизайнеры всего мира создают такие микровзаимодействия в различных продуктах.

7 прототипов

В этом уроке я дам вам обзор каждого микровзаимодействия и некоторые фрагменты кода. Мы будем использовать несколько различных методов, поэтому вы сможете выбрать тот, который лучше всего подходит для вашего продукта. Не существует «правильного» способа создать что-либо внутри Framer Studio — как я упоминал в своей предыдущей статье, Framer дает вам большую свободу создавать то, что вы хотите.

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

1. Кнопка действия

Кнопка действия часто представляет основное действие текущего экрана. Иногда он содержит несколько действий внутри. Мы создадим взаимодействие для второго случая. Загрузите рабочий прототип здесь: https://framer.cloud/ShBnH

Шаг 1: Создайте три круглые кнопки

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

Шаг 2: Создайте два состояния для всех слоев

Создайте два разных состояния для слоев. Используйте приведенный ниже код, чтобы меньшие кнопки перемещались над основной и поворачивали значок на 45°:

 button_1.states.a = y: 427 x: 246 width: 64 height: 64 button_2.states.a = y: 330 x: 246 width: 64 height: 64 icon.states.a = rotation: 45

Шаг 3. Добавьте событие

Чтобы сделать этот прототип анимированным, мы должны добавить событие. После нажатия кнопки действия измените состояния всех слоев:

 button.onTap -> button_1.stateCycle() button_2.stateCycle() icon.stateCycle()

Шаг 4: Весенняя анимация

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

 button_1.animationOptions = curve: Spring(tension: 170, friction: 12) button_2.animationOptions = delay: 0.05 curve: Spring(tension: 170, friction: 12) icon.animationOptions = curve: Spring(tension: 250, friction: 5)

Кнопка действия готова!

2. Интерактивные переключатели

Приведенные ниже шаги позволят вам создать собственное взаимодействие с переключателем. Загрузите рабочий прототип здесь: https://framer.cloud/ieypV

Шаг 1. Спроектируйте игровую площадку для коммутаторов

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

Шаг 2. Создайте состояния

Помните из первой статьи, как проектировать состояния прямо во Framer Studio? Создайте свои состояния, как вам нравится, или используйте мои настройки:

 dot.states.a = x: 50 backgroundColor: "rgba(5,106,161,1)" switch_bg.states.a = backgroundColor: "rgba(0,136,205,1)" icon.states.a = opacity: 0 circle.states.a = x: 37 y: 183 width: 301 height: 301 circle_1.states.a = x: 20 y: 166 width: 337 height: 337

Шаг 3. Добавьте событие

Чтобы прототип заработал, мы должны добавить событие к переключателю. После нажатия переключателя мы изменим состояние всех слоев:

 switch_1.onTap (event, layer) -> dot.stateCycle() switch_bg.stateCycle() circle.stateCycle() circle_1.stateCycle() icon.stateCycle()

Шаг 4: Настройте время

Чтобы все было более естественно, настройте время и задержку всех состояний:

 dot.animationOptions = time: 0.2 switch_bg.animationOptions = time: 0.2 circle_1.animationOptions = time: 0.5 curve: Spring circle.animationOptions = time: 0.5 delay: 0.05 curve: Spring icon.animationOptions = time: 0.5 curve: Spring

Теперь наш прототип готов!

3. Действие прокрутки элемента списка

Это типичное взаимодействие для удаления, архивирования или сохранения элементов из списка. Проведите пальцем влево или вправо, и элемент будет удален. Загрузите прототип здесь: https://framer.cloud/rzMWP

Шаг 1. Создайте прототип в режиме «Дизайн».

При желании вы можете использовать свой собственный дизайн. Вам просто нужно сохранить ту же структуру слоев. Как вы можете видеть на изображении выше, под всеми элементами списка есть кнопка «Отменить».

Шаг 2. Сделайте элементы перетаскиваемыми

Для простоты мы создадим взаимодействие только для первого элемента списка. Во-первых, сделайте элемент списка перетаскиваемым: item.draggable = true .

Затем заблокируйте вертикальную ось: item.draggable.vertical = false .

Настройте ограничения перетаскиваемой области: item.draggable.constraints

И, наконец, установите размер элемента size: size: item .

Вот как выглядит весь код:

 item.draggable = true item.draggable.vertical = false item.draggable.constraints = size: item

Теперь вы можете проводить пальцем влево и вправо, и элемент всегда будет возвращаться в исходное положение.

Шаг 3: Создайте состояние

Затем создайте состояние для элемента списка при его удалении. Я просто переместил его за пределы экрана, используя ось x.

 item.states.a = x: -360

Шаг 4. Изменение состояния после свайпа

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

 item.onMove -> if item.x < -70 item.stateCycle("a")

В этом случае мы используем оператор «если». В приведенном выше коде в основном говорится, что когда мы перемещаем слой элемента более чем на 70 пикселей, меняем состояние элемента на состояние «a». Вы можете прочитать об операторах if в документации Framer Studio: https://framer.com/getstarted/programming/#conditional

Шаг 5. Отмените действие после касания

Мы почти закончили с этим взаимодействием. Осталось только отменить это действие:

 item_bg.onTap -> item.stateCycle("default")

Вы должны быть знакомы с этим кодом из предыдущего урока.

Шаг 6 (необязательно): отрегулируйте время анимации

При желании вы можете настроить время анимации:

 item.animationOptions = time: 0.75 curve: Spring

4. Кнопка загрузки

Это очень полезное взаимодействие для действий, требующих загрузки или ожидания пользователя. Когда мы создадим это взаимодействие, вы узнаете, как управлять многими анимациями, которые происходят одна за другой. Загрузите прототип здесь: https://framer.cloud/FxmHN

Шаг 1. Создайте прототип в режиме «Дизайн».

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

Шаг 2. Добавьте событие

Весь этот прототип можно сделать без написания единой строки кода, просто используя функции автокодирования Framer.

Сначала добавьте событие. Мы запустим все взаимодействие нажатием на слой кнопки:

Это код, который Framer написал для вас:

 button.onTap (event, layer) ->

Шаг 3: Создайте анимацию

Мы будем использовать функции автокодирования Framer для разработки всех анимаций:

Я разработал четыре анимации с разным временем:

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

Вот код, который Framer написал для каждой из этих анимаций:

 # change progress bar width progress.animate width: 247 options: time: 1.4 curve: Bezier.ease # hide upload icon upload.animate opacity: 0.00 y: 39 options: time: 0.2 curve: Bezier.ease # show and rotate loader icon load.animate opacity: 1.00 rotation: 360 options: time: 1 curve: Bezier.ease # show and scale check icon done.animate opacity: 1.00 scale: 1.4 options: time: 0.2 curve: Bezier.ease delay: 1.00

Шаг 4. Сбросьте анимацию загрузки

Как вы могли заметить, мы не скрывали значок загрузчика после окончания анимации. Чтобы закончить этот прототип, запустите другую анимацию, используя это событие: load.onAnimationEnd ->

 load.animate opacity: 0.00 options: time: 0.2 curve: Bezier.ease

5. Потяните, чтобы обновить

Почти каждый продукт со списком внутри него использует этот тип взаимодействия. Пользователь тянет вниз весь список, чтобы обновить его. Это очень легко создать. Загрузите прототип здесь: https://framer.cloud/DgMDw

Шаг 1. Создайте простой список со значком обновления

Мы можем перейти прямо в режим разработки. Нам нужны две вещи: список и значок обновления. Здесь важно скрыть значок обновления с непрозрачностью и добавить его в наш список:

Шаг 2: Создайте компонент прокрутки

Мы хотим сделать наш список прокручиваемым. Для этого используйте компонент прокрутки и добавьте к нему слой списка:

 scroll = new ScrollComponent size: Screen scrollHorizontal: false list.parent = scroll.content

Шаг 3. Сделайте значок обновления видимым

Создайте простое состояние для значка:

 icon.states.a = opacity: 1

Шаг 4: Добавьте событие после вытягивания вниз

Наш список прокручивается прямо сейчас. Это означает, что когда мы прокручиваем вверх или вниз, все содержимое прокрутки перемещается по оси «y». Обладая этими знаниями, мы можем создать событие:

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a")

Мы снова используем оператор «если». Если список сдвинется вниз (переместится по оси Y) более чем на 180 пикселей, мы вызовем действие. В данном случае мы будем анимировать два слоя: список и значок обновления.

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1

Мы используем «анимацию», чтобы переместить список вниз на 210 пикселей и повернуть значок обновления на 360°.

Шаг 5. Сбросьте все состояния

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

 icon.onAnimationEnd ->

Мы анимируем вращение значка обновления обратно в исходное положение и, используя цикл состояний, сбрасываем список и фоновое состояние значка:

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1 icon.onAnimationEnd -> refresh.animate rotation: 0 list.stateCycle("default") icon.stateCycle("default")

Вот и все!

6. Взаимодействие с перетаскиванием

Вы когда-нибудь замечали, что когда вы перетаскиваете элемент внутри приложения, всегда что-то происходит с самим элементом? Иногда элемент сжимается, возможно, другие элементы размываются или изменяется непрозрачность. Давайте научимся создавать такое взаимодействие. Загрузите рабочий прототип здесь: https://framer.cloud/YstiW

Шаг 1: Создайте простую сетку с плитками

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

Шаг 2. Используйте цикл «for», чтобы настроить таргетинг на все плитки.

Цикл for может показаться пугающим, но на самом деле это просто. Если вы не знакомы с циклами for , вы можете сначала прочитать немного справочной информации: https://framer.com/getstarted/programming/#loops-and-arrays

Мы будем использовать цикл for для нацеливания на все плитки внутри нашей сетки:

 for item in grid.subLayers

С помощью этой простой строки кода вы нацелились на все слои внутри слоя сетки.

Шаг 3. Сделайте плитки перетаскиваемыми

Сделайте каждый элемент внутри сетки перетаскиваемым:

 for item in grid.subLayers item.draggable = true

Шаг 4: Создайте состояние перетаскивания

Все элементы должны иметь состояние во время их перетаскивания. Вы должны начать с кода, но позже вы сможете редактировать это состояние в редакторе слоев:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)'

Шаг 5: Перетащите события

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

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a")

Я использовал this.bringToFront() , чтобы убедиться, что элемент всегда находится над другими слоями.

Второй триггер сбросит состояние элемента:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default")

На данный момент у нас есть рабочий прототип.

Шаг 6 (необязательно): поиграйте со временем

Взаимодействие всегда происходит на временной шкале. Хорошо настроить временную шкалу для достижения идеального эффекта:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default") item.animationOptions = time: 0.3 curve: Spring

7. Несколько кнопок «Нравится» (дополнительно)

В этом прототипе мы будем использовать более продвинутые методы, чтобы показать вам другой способ нацеливания слоев в Framer Studio, который позволит создать более отзывчивые взаимодействия с меньшими затратами времени. Если вы не знакомы с основами кодирования, я рекомендую вам сначала прочитать эту статью: https://blog.framer.com/code-less-achieve-more-with-arrays-in-framer-c43594d13d59

Для этого взаимодействия мы пропустим часть дизайна и воспользуемся прототипом, который я создал специально для этой статьи: https://framer.cloud/SZMCH.

Шаг 1: Создайте массивы

Взгляните на структуру слоев внутри Framer Studio:

У нас есть «кнопка» внутри «строки» в группе «список». Мы будем создавать взаимодействие со слоями кнопок, поэтому мы должны ориентироваться на них. Но сначала нам нужно найти все слои строк и поместить их в массив:

 rows = list.children buttons = []

Я также создал пустой массив для всех слоев «кнопок»: buttons = [] .

Шаг 2: Добавьте подслой в массив

Начнем с «цикла for»:

 for i in rows buttons.push(i.children[0])

Чтобы добавить слои в массив, мы будем использовать: buttons.push() . Это означает, что мы помещаем первый слой каждой группы «строк» ​​внутрь массива.

Шаг 3: Создайте состояние и событие

Теперь мы создадим состояние для наших кнопок «Нравится» и добавим к ним событие при нажатии:

 for i in buttons i.states.a = scale: 1.2 hueRotate: -80 i.onTap -> this.stateCycle() i.animationOptions = time: 0.3 curve: Spring

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

Последнее примечание

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

• • •

Дальнейшее чтение в блоге Toptal Design:

• UX электронной коммерции — обзор лучших практик (с инфографикой)
• Важность ориентированного на человека дизайна в дизайне продукта
• Лучшие портфолио дизайнеров UX — вдохновляющие тематические исследования и примеры
• Эвристические принципы для мобильных интерфейсов
• Упреждающий дизайн: как создать волшебный пользовательский опыт