ProtoPie

Назначение ProtoPie

Прототипы в ProtoPie позволяют продемонстрировать дизайн-макет интерфейса команде проекта, презентовать клиенту и провести тест. При разработке продуктов программу используют такие компании, как Microsoft, Samsung, Nintendo, GoPro, BMW и другие. С помощью сервиса можно решать следующие задачи: 

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

Принцип работы ProtoPie

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

Читайте также

Дизайнер интерфейсов — кто это и чем он занимается?

В результате работы появилась такая формула:

• Object — элемент интерфейса, с которым взаимодействует пользователь (кнопка, поле формы, крестик закрытия модального окна, карточка товара и т.д.).

• Trigger — действие, которое выполняет пользователь. Например, тап (прикосновение пальцем), свайп вниз, вверх или в стороны, долгое нажатие, поворот, уменьшение или увеличение двумя пальцами и др. Триггеры в ProtoPie можно связывать между собой, чтобы изменение одного объекта вызывало изменение другого. Например, при смахивании карточки фильма вверх на экране появляется шкала оценки со звездами. 

Кроме того, в программе предусмотрен ряд триггеров для веб-приложений и сервисов, управляемых клавиатурой и мышью: наведение курсора на объект, нажатие клавиш на клавиатуре и др.

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

• Response — действие, которое выполняет объект. Он может менять цвет, поворачиваться, становиться полупрозрачным, сдвигаться вправо или влево, приобретать или утрачивать тень или обводку, менять радиус скругления углов, прокручиваться и т.д. Кроме того, ряд ответов использует технические возможности смартфона: вибрацию, активацию микрофона, воспроизведение звука и др. 

Для настройки скорости и задержки ответов можно использовать таймлайн (временную шкалу). 

Последовательная реализация этапов образует удобное и приятное взаимодействие пользователя с интерфейсом.

ProtoPie работает в двух форматах: как отдельное приложение для десктопов ProtoPie Studio и как плагины (дополнительные программные модули) для трех популярных инструментов веб-дизайнеров — Figma, Sketch и Adobe XD. 

Особенности ProtoPie

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

Читайте также

15 заповедей хорошего UX/UI-дизайнера

Например, можно:

• добавлять на макет функционал фото- и видеосъемки;
• показывать управление персонажем в мобильной игре;
• менять конфигурацию элементов при повороте экрана;
• замерять скорость движения в спортивном приложении;
• анимировать функционал голосового управления;
• демонстрировать работу системы распознавания мелодии и многое другое.

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

Аналоги ProtoPie для создания интерактивных прототипов

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

Adobe XD — классическое решение для создания и анимирования интерфейсов. Применяется не только в веб- и UX/UI-дизайне, но и для разработки игр и брендинга. 

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

Principle — помогает создавать только несложную анимацию. Работает только на macOS.

Flinto — предназначена специально для создания анимации прототипов, но работает только на macOS и iOS.

Marvel — имеет функционал, наиболее похожий на ProtoPie. Кроме того, в ней есть полезный инструмент Developer Handoff, который превращает дизайн в код — мгновенно генерирует его фрагменты для упрощения последующей разработки. Как и Principle, тоже доступен только для macOS.

ProtoPie не привязан к какой-либо конкретной ОС. Это выделяет программу среди конкурентов.

Преимущества и недостатки ProtoPie

Преимущества:

• бесплатный 30-дневный пробный период;
• возможность делать прототипы для операционных систем всех современных мобильных устройств: iOS, iPadOS, Android, WearOS и в ближайшем будущем watchOS;
• возможность создания сложных элементов и логик работы приложения без знания программирования;
• подключение к прототипу функций, выходящих за рамки навигации и недоступных в других сервисах: голосовое управление, доступ к камере, управление с помощью акселерометра, взаимодействие между устройствами и др.;
• возможность поделиться проектом с помощью QR-кода или ссылки;
• интеграция с Figma, Sketch и Adobe XD.

 

• бесплатные пошаговые уроки, которые помогут новичкам начать работать в программе, а профи — расширить свои навыки.

Недостатки:

• необходимость покупки программы после окончания бесплатного периода;
• относительная сложность освоения для новичков;
• высокие трудозатраты на создание прототипа, которые нецелесообразны в простых проектах.

Программу можно скачать здесь. Плагины для других приложений доступны отдельно: для Figma, для Sketch, для Adobe XD. После регистрации, скачивания и установки начнется 30-дневный бесплатный период.