Интерактивные прототипы с Adobe XD и ProtoPie – то, что вы не можете прозевать!


Одно из последних обновлений для Adobe XD принесло возможность экспорта в ProtoPie. Конечно, размещение такой ставки — это продуманный шаг Adobe. Скорее всего, нам стоит ожидать ещё более тесную интеграцию между инструментами, и хотя возможности прототипирования Adobe XD на данный момент не очень интересны, использование ProtoPie в процессе дает вам гораздо больше возможностей.
Моя цель — предоставить вам обзор того, как работает интеграция, и показать практический рабочий процесс для разработки пользовательского интерфейса и прототипирования с использованием упомянутых инструментов. Это не исчерпывающее руководство по прототипированию, а скорее взгляд на ProtoPie, и его уникальные функции, которые могут отлично послужить вам по сравнению с другими инструментами прототипирования. Если вы хотите углубиться в процесс экспорта, взгляните на этот пост. Ниже показан прототип, который мы будем создавать:
Интерактивные прототипы с Adobe XD и ProtoPie – Обзор, работы интеграции, и практический рабочий процесс

ProtoPie и Adobe XD — хорошести: 👌

  • Двухстороннее редактирование — означает, что вы можете повторно импортировать файлы после внесения изменений в Adobe XD без необходимости повторного взаимодействия, если поддерживать структуру согласованной.
  • ProtoPie предоставляет возможности прототипирования без кодирования с простой в использовании триггерной моделью взаимодействия. Требует довольно много кликов, но даёт вам массу возможностей.
  • Действительно простой способ использования одного объекта для получения контроля над другим. Скажите, что вы можете связать перемещение слоя с изменением непрозрачности второго слоя и масштабирования третьего за один раз.
  • Доступ к некоторым уникальным функциям устройства, таким как компас или вибрация, а также возможность создавать прототипы, которые взаимодействуют между устройствами. Представьте приложение для обмена сообщениями, в котором вы отправляете сообщение на одном устройстве и получаете его на другом.

…и нехорошести: 👎

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

🍿Я записал подробное учебное руководство о том, как работает интеграция ProtoPie и Adobe XD, которое даст вам наилучшее представление самых интересных функций. Ниже вы найдете список лучших функций, которые вы не можете прозевать. Если вы хотите пропустить процесс проектирования в Adobe XD, перемотайте видео до 17м03с:

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

Условная анимация

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

Интерактивные прототипы с Adobe XD и ProtoPie – Условная анимация

Последовательная анимация

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

Интерактивные прототипы с Adobe XD и ProtoPie – Последовательная анимация

Ещё больше условий

Наличие триггерного диапазона, позволяет нам воздействовать, только если выполняются определённые свойства слоёв, к которым мы обращаемся. Мы используем это, чтобы отобразить корзину, если продукт был перемещён из своего исходного положения (мы определяем изменение значения x):

Интерактивные прототипы с Adobe XD и ProtoPie – Ещё больше условий

Поддержка сенсоров

Вы можете управлять сенсорами современных устройств и выполнять анимацию, используя, например, наклон, звук, компас и 3D касания.

Интерактивные прототипы с Adobe XD и ProtoPie – Поддержка сенсоров

Анимация из https://www.protopie.io/features/

Воздействие на текст

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

Интерактивные прототипы с Adobe XD и ProtoPie – Воздействие на текст

Соединительные действия

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

Интерактивные прототипы с Adobe XD и ProtoPie – Соединительные действия

Анимация из https://www.protopie.io/features/

Какой инструмент прототипирования лучше?

Для подведения итога — как вы можете видеть, стоит взглянуть на ProtoPie и новый двухсторонний экспорт из Adobe XD. ProtoPie может хорошо служить вам, и он относится к виду инструментов для прототипов с совершенно уникальным набором функций. Нет четкого ответа на вопрос: Какой инструмент прототипирования лучше? В постоянно меняющейся экосистеме инструментов прототипирования вы должны оставаться любопытными и многому учиться на этом пути. Вы обнаружите, что для некоторых задач вы, возможно, захотите использовать быстрое прототипирование в Marvel (для быстрой демонстрации сценария), Flinto (отличный способ, чтобы создать более сложные микро взаимодействия для кнопок), Principle (благодаря в основном секциям, позволяющим создавать зависимости между двумя анимированными свойствами), ProtoPie (единственный инструмент интегрированный с Adobe XD, умный способ подключения объектов или использование прототипов между устройствами), либо Framer (предоставляет вам неограниченные возможности для более продвинутых проектов, но требует кодирования).

Куда двигаться дальше?

Если вы хотите узнать больше о ProtoPie — убедитесь, что вы посмотрели этот бонусный урок, который я записал, чтобы дополнить видео из этой статьи. Также не будет лишним углубиться в Adobe XD, поскольку он стал всё более широко использоваться в дизайне и прототипировании пользовательского интерфейса. Вот полный курс Adobe XD.

Надеюсь, вы узнали что-то полезное! Пожалуйста, дайте знать, что вы думаете в комментариях 🙌