ProtoPie и Adobe XD — хорошести: 👌
- Двухстороннее редактирование — означает, что вы можете повторно импортировать файлы после внесения изменений в Adobe XD без необходимости повторного взаимодействия, если поддерживать структуру согласованной.
- ProtoPie предоставляет возможности прототипирования без кодирования с простой в использовании триггерной моделью взаимодействия. Требует довольно много кликов, но даёт вам массу возможностей.
- Действительно простой способ использования одного объекта для получения контроля над другим. Скажите, что вы можете связать перемещение слоя с изменением непрозрачности второго слоя и масштабирования третьего за один раз.
- Доступ к некоторым уникальным функциям устройства, таким как компас или вибрация, а также возможность создавать прототипы, которые взаимодействуют между устройствами. Представьте приложение для обмена сообщениями, в котором вы отправляете сообщение на одном устройстве и получаете его на другом.
…и нехорошести: 👎
- Ваши векторные слои из Adobe XD становятся растровыми изображениями в ProtoPie. Подобным образом маски и повторяющиеся сетки будут, упрощены до растрового слоя.
- Тоже будет и с текстом, по крайней мере сейчас.
- Нет управления воспроизведением временной шкалой, что делает тестирование немного болезненным, особенно для прототипов с обилием анимации.
🍿Я записал подробное учебное руководство о том, как работает интеграция ProtoPie и Adobe XD, которое даст вам наилучшее представление самых интересных функций. Ниже вы найдете список лучших функций, которые вы не можете прозевать. Если вы хотите пропустить процесс проектирования в Adobe XD, перемотайте видео до 17м03с:
Вот список некоторых интересных функций для вас, чтобы не скучать:
Условная анимация
Вы можете решить, что последовательность анимации срабатывала только при выполнении некоторых условий. Например, мы добавляем предметы в корзину только в том случае, если кто-то бросает продукт в точное место прототипа (корзины):
Последовательная анимация
Вы можете использовать последовательность действий в своих триггерах, чтобы одна анимация зависела от другой. Таким образом, вы можете легко изменить размер одного элемента на основе положения другого:
Ещё больше условий
Наличие триггерного диапазона, позволяет нам воздействовать, только если выполняются определённые свойства слоёв, к которым мы обращаемся. Мы используем это, чтобы отобразить корзину, если продукт был перемещён из своего исходного положения (мы определяем изменение значения x):
Поддержка сенсоров
Вы можете управлять сенсорами современных устройств и выполнять анимацию, используя, например, наклон, звук, компас и 3D касания.
Анимация из https://www.protopie.io/features/
Воздействие на текст
С родными текстовыми полями в ProtoPie мы можем динамически изменять значение полей после выполнения любого желаемого действия. Мы применяем его, чтобы обновить корзину, пока кто-то бросает в неё продукт:
Соединительные действия
Вы можете создавать взаимодействия, в которых задействованы два или более устройства, и проводить некоторые тесты с несколькими устройствами. Представьте приложение для обмена сообщениями, в котором вы можете отправлять и получать сообщения на разных устройствах:
Анимация из https://www.protopie.io/features/
Какой инструмент прототипирования лучше?
Для подведения итога — как вы можете видеть, стоит взглянуть на ProtoPie и новый двухсторонний экспорт из Adobe XD. ProtoPie может хорошо служить вам, и он относится к виду инструментов для прототипов с совершенно уникальным набором функций. Нет четкого ответа на вопрос: Какой инструмент прототипирования лучше? В постоянно меняющейся экосистеме инструментов прототипирования вы должны оставаться любопытными и многому учиться на этом пути. Вы обнаружите, что для некоторых задач вы, возможно, захотите использовать быстрое прототипирование в Marvel (для быстрой демонстрации сценария), Flinto (отличный способ, чтобы создать более сложные микро взаимодействия для кнопок), Principle (благодаря в основном секциям, позволяющим создавать зависимости между двумя анимированными свойствами), ProtoPie (единственный инструмент интегрированный с Adobe XD, умный способ подключения объектов или использование прототипов между устройствами), либо Framer (предоставляет вам неограниченные возможности для более продвинутых проектов, но требует кодирования).
Куда двигаться дальше?
Если вы хотите узнать больше о ProtoPie — убедитесь, что вы посмотрели этот бонусный урок, который я записал, чтобы дополнить видео из этой статьи. Также не будет лишним углубиться в Adobe XD, поскольку он стал всё более широко использоваться в дизайне и прототипировании пользовательского интерфейса. Вот полный курс Adobe XD.
