Учебное пособие по Framer: как создавать потрясающие интерактивные прототипы

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

Последняя версия Framer вышла неделю назад, и рынок прототипирования уже никогда не будет прежним. Раньше инструмент создания прототипов Framer был сложным в освоении, но он был полезен как самое точное и безграничное программное обеспечение для создания прототипов. Теперь все изменилось. Framer теперь поставляется с функциями Design + Code + Collaborate, что означает, что вы можете создавать свой прототип непосредственно во Framer, разрабатывая полнофункциональный прототип без какого-либо стороннего программного обеспечения и без каких-либо навыков кодирования.

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

Основы рамщика

Давайте начнем! Просто зайдите на framer.com и загрузите пробную версию. Они дают вам две недели своей полнофункциональной демонстрации, и, поверьте мне, этого времени достаточно, чтобы многое узнать об этом программном обеспечении для прототипирования.

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

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

Совершенно новый Framer — режим дизайна

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

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

Давайте создадим дизайн типа приложения

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

Шаг 1: Создайте простую кнопку и фон.

Чтобы начать свой дизайн, выберите первую вкладку — режим дизайна — и добавьте монтажную область, как в Sketch. В этом уроке мы будем работать над прототипом iPhone 7, поэтому я выбрал этот пресет в качестве размера монтажной области. Я также добавил синюю заливку фона.

Далее выберите инструмент « Прямоугольник » и создайте фигуру в виде простой круглой кнопки.

Шаг 2: Добавьте карточку с изображением.

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

Шаг 3: Добавьте название приложения.

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

Шаг 4: Сообщите Framer, какие слои являются интерактивными.

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

Шаг 5 (бонус): определите глобальные цвета.

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

Когда вы настраиваете свои цвета, просто назовите их в редакторе кода и укажите значения HEX, RGB или RGBa после соответствующего знака «=». Не забудьте держать все переменные в самом верху вашего кода.

 # variables ------------------------------- blue = "#005D99" green = "#3DBE8B" white = "#FFFFFF"

Шаг 6 (бонус): Добавление относительной позиции.

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

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

 # This is how you can align layer position: x: Align.center(0) # align layer horizontaly x: Align.center(200) # align layer horizontaly with 200 offset x: Align.right(0) x: Align.left(0) y: Align.center(0) # align layer verticaly y: Align.top(0) y: Align.bottom(0) # You can use also some variables width: Screen.width # current device width height: Screen.height # current device height # As a reference you can also user layer names x: layerA.x # layerA horizontal position y: layerA.y # layerA vertical position width: layerA.width # layerA width height: layerA.height # layerA height # You can combine all of this into the simple math to calculate position or dimensions width: Screen.width / 2 - layerA.width

Теперь вы настроены — давайте начнем наш проект

Мы создали различные типы слоев Framer. Теперь наша интерактивная площадка готова к работе.

Ну наконец то! Скучная часть подошла к концу. Теперь пришло время для дизайна взаимодействия.

Загрузите весь прототип здесь.

1. Создание взаимодействия кнопки с обратной связью

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

Шаг 1: Создание события для взаимодействия.

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

 layerA.onTap (event, layer) ->

Framer только что написал для вас эту строчку кода. Это означает, что когда вы нажмете кнопку слоя, что-то произойдет.

Шаг 2: Добавление анимации к событию.

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

Фреймер добавил еще несколько строк кода. (Не беспокойтесь — вы по-прежнему можете редактировать свою анимацию с помощью панели анимации.)

 button.onTap (event, layer) -> button.animate borderRadius: 27 borderWidth: 10 borderColor: "rgba(115,250,121,1)" options: time: 0.30 curve: Bezier.ease

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

Шаг 3: Сброс анимации.

Добавьте еще одно событие, почти как мы делали это раньше. Отличие в том, что мы ищем событие, когда анимация заканчивается:

На этот раз код, добавленный Framer, будет выглядеть так:

 button.onAnimationEnd (event, layer) ->

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

 button.onAnimationEnd (event, layer) -> button.animate borderWidth: 100 borderColor: "rgba(255,255,255,1)" borderRadius: 100 options: time: 0.3 curve: Bezier.ease

Вот и все! Теперь у нас есть рабочая обратная связь после нажатия на нашу кнопку.

2. Создание различных состояний для взаимодействий со слоями карт

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

Шаг 1: Добавление и создание состояний для слоя карты.

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

Обратите внимание на отступ кода. Начинать следует с первого ряда.

Я разработал два разных состояния для своего карточного слоя:

 card.states.a = width: 248 height: 287 x: 63 y: 190 borderWidth: 10 borderColor: "rgba(115,250,121,1)" card.states.b = x: 139 y: 529 width: 98 height: 98 borderRadius: 49 borderWidth: 1 borderColor: "rgba(255,255,255,1)"

Шаг 2: Добавление событий.

Остался всего один шаг, чтобы заставить его работать. Мы должны создать событие для изменения этих состояний.

 button.onTap -> card.stateCycle()

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

 button.onTap -> card.stateSwitch("b")

Этот фрагмент полезен, когда вы хотите активировать определенное состояние слоя.

Последняя корректировка, которую я внес в свой прототип, — это изменение скорости анимации и кривой между состояниями:

 card.animationOptions = curve: Spring time: 0.8 

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

Ускорение работы во Framer: Компоненты

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

1. Первый компонент: прокрутка

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

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

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

 scroll = new ScrollComponent width: Screen.width height: Screen.height

Этот код создает невидимую область шириной и высотой текущего устройства.

Шаг 2: Сообщите Framer, какие слои вы хотите прокручивать.

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

 list.parent = scroll.content

Шаг 3: Блокировка вертикальной прокрутки.

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

 scroll.scrollHorizontal = false 

Ух ты! Вы создали прокрутку внутри своего приложения, используя всего пять строк простого кода.

2. Компонент страницы: перелистывание экрана к экрану

Очень популярное взаимодействие для переключения между экранами — свайп. Идея здесь очень похожа на компонент прокрутки. Скачать рабочий прототип можно здесь.

Шаг 1: Настройка компонента.

Во-первых, нам нужно создать «коробку» в редакторе кода, где и будет происходить волшебство:

 page = new PageComponent width: 315 height: Screen.height x: Align.center scrollVertical: false clip: false # the content outside the box won't be clipped

К этому моменту вы должны быть знакомы со всем приведенным здесь кодом. Это просто простая настройка компонента и его области. Теперь нам нужно создать несколько слоев для смахивания.

Шаг 2: Создание слоев

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

Сначала нам нужно сделать артборд в два раза шире. На панели свойств монтажной области найдите ширину и умножьте ее на два (или просто добавьте *2 ). Поместите карты рядом друг с другом, активируйте их синей точкой и назовите их правильно: карта1 и карта2 .

Шаг 3: Добавление слоев к компоненту страницы.

В конце нашего кода в редакторе кода мы должны добавить:

 card1.parent = page.content card2.parent = page.content

Это означает, что мы добавляем эти слои к компоненту.

Теперь компонент страницы готов к работе!

Заключительное слово

Это все, народ! Я надеюсь, что вы нашли это руководство по Framer полезным, чтобы начать свое путешествие с самым мощным инструментом прототипирования на рынке. Кроме того, вам следует подумать о присоединении к группе Framer на Facebook. Вокруг огромное сообщество, и они помогут вам, когда вы только начинаете.

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

• • •

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

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