Используйте Framer X для создания интерактивных прототипов

Как дизайнеры, всегда есть вопрос о том, какие инструменты прототипирования вы должны использовать для вашего проекта. Есть много программного обеспечения для задач, таких как Wireframing (см. Наш лучший Wireframaming Tools и отлично Строители сайта ), прототипирование и строительные комплексные взаимодействия; Однако очень немногие инструменты способны обращаться за всеми. Framer - это один инструмент, который имеет все эти функции и значительно ускоряет процесс создания крошечных анимаций и взаимодействий.

Последняя итерация, Framer X. Теперь использует React и JavaScript вместо использования CoffeeScript для разработки микрообменных взаимодействий и анимации. Это помогает доставлять более быстрое время загрузки и лучшую производительность. Кроме того, использование компонентов реагирования означает, что пользователи имеют больше приспособлений для добавления и расширения, включая вложение медиаплееров, данные в реальном времени и графики внутри прототипов.

Тестирование является основной частью процесса здания прототипа, и в то время как Framer X отлично при создании интерактивных прототипов необходимо помочь увидеть, насколько хороши его создания. Проверьте наш Тестирование пользователей Опубликовать для некоторых из лучших инструментов для дополнения Framer и помогите построить реальные прототипы и убедитесь, что вы используете лучшее веб хостинг Сервис для вас.

Как создать приложение с Framer X

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

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

Чтобы начать, вам нужно создать новую рамку (Ardboard), нажав значок + на левой навсере. Выберите любой стиль Artboard из списка стандартных шаблонов для iPhone / Android на правой панели. Теперь вы готовы пойти.

01. Создайте панель поиска

Давайте начнем с создания панели поиска. Вместо создания прямоугольника и добавления значка поиска, как мы обычно, мы можем фактически использовать быстрые многоразовые компоненты в Framer X, они называются пакетами. Есть тысячи пакетов, которые можно найти в левой панели навигации в магазине. Нажмите на Store, поиск набора Android и пример набора, а затем установите их.

Эти пакеты содержат элементы, такие как карты, кнопки, клавиатуры, ползунки, входы и пункты меню навигации. Как только вы устанавливаете эти пакеты, вы можете использовать элементы из меню компонентов слева.

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

02. Создайте стек контента

Для этого недавнего блока активности сначала добавьте текст «недавние действия», что довольно просто. Теперь мы можем использовать новую функцию Framer X, называемых стеками. Это можно сделать, нажав на значок + и выбрав стек S в меню. После выбора стека перетащите область 600 х 300 на рабочей рамке, чтобы создать стек. Этот стек будет показан как синий.

Теперь вернемся к разделу компонентов и под Android Kit, ищите элемент CARD-5 и перетащите его в стек, который мы только что создали. Дублируйте эти карты дважды и убедитесь, что все три карты в стеке.

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

Теперь, когда мы создали стек, давайте сделаем это прокручиваемым. Переместите его из кадра / ArtBoard. Нажмите на значок + из левой навигации и щелкните вариант прокрутки. Так же, как мы создали область со стеком, создайте прокручиваемую область на раме / Artboard, это тот же размер, что и стек.

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

03. Создайте вертикальный стек

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

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

04. Создать новую страницу

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

Для добавления видео, перейдите в магазин и установите пакет YouTube, что позволяет вам легко добавлять видео на ваш прототип. Теперь перейдите на панель компонентов и перетащите элемент YouTube из-за компонента YouTube в рамку.

Отрегулируйте ширину миниатюр так, чтобы она соответствовала ширину рамы. На панели правой собственности вы можете вставить URL-адрес видео, который вы хотите воспроизвести в прототипе. Если вы хотите, есть также способ автозапуска видео через флажок на панели «Свойства».

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

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

05. Введите взаимодействия

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

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

Чтобы помочь сделать экран отличным, давайте добавим немного цвета и заполните его иконы в социальных сетях, такие как Facebook, Instagram, WhatsApp и Email. Этот экран акций также должен быть добавлен икона X, который при щелчке приведет его обратно в исходное состояние.

Убедитесь, что все значки расположены внутри стека. Как только икона X будет включен, следующий шаг - это связать этот кадр, чтобы он всплыл, когда вы щелкнули значок Chare.

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

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

Вы можете проверить, работает ли прототип или нет, нажав на значок PLAY, найденный в правом верхнем углу интерфейса. Аналогично, вам необходимо связать экран акции на экране видео, чтобы, когда пользователь нажимает на значок X, он возвращается на предыдущий экран.

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

06. Добавить кнопку Сохранить

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

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

Ссылка, выберите значок в форме сердца на видеорепене и добавьте ссылку на кадр сохраненного списка. Вместо того, вместо того, чтобы имущество переходного транспорта является толкаем, сделать его наложением. Отрегулируйте его до 80%, а затем проверьте его, используя кнопку воспроизведения. Изменить, пока вы не удовлетворены наложением. Ссылка значка x на сохраненном значке списков обратно на видео.

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

Эта статья была первоначально опубликована в выпуске 325 чистых, самых продаваемых в мире журнала для веб-дизайнеров и разработчиков. Купить выпуск 325. или же подписываться к сети.

Присоединяйтесь к нам в апреле 2020 года с нашей линейкой суперзвезд JavaScript в Generatejs - конференция, помогающая вам построить лучший JavaScript. Забронируйте сейчас generateConf.com.

Прочитайте больше:

• Как выделиться и нанять как ux дизайнер
• 20 UX советы, которые вам нужно знать
• 22 лучших инструментов дизайна пользовательского интерфейса