Инструменты для создания прототипа

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

Изображение

Послойная анимация переходов

Изображение

В этой статье я собрал самые интересные и нужные (на мой взгляд) инструменты, которые пригодятся в работе каждому дизайнеру. Они подходят как для веб-сайтов так и для мобильных разработок.

Группа 1 — структура, лоу-сценари

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

структура, лоу-сценари

Скриншот экранов с настроенными связями в Sketch

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

Представители этой группы — Adobe XD, Figma, и Sketch. Сравнение этих программ находится здесь. Также представителями этой группы являются Marvel и Invision.

Marvel

https://marvelapp.com/

Простой и легкий способ для создания прототипа. Является самостоятельной программой, при этом может использоваться как дополнение к прочим дизайнерским редакторам.
Бесплатная версия позволяет создать ограниченное количество прототипов, но в мобильной версии это ограничение снято.

Marvel

Invision App

https://invisionapp.com/

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

Invision App

Adobe XD Sketch Figma
Adobe XD

https://www.adobe.com/ru/products/xd.html

Бесплатная версия позволяет создать всего 1 прототип. Хочешь all in – выложи 10 баксов. Подробнее о программе в прошлых статьях (советы по Adobe XD, изучаем Adobe XD часть 1, изучаем Adobe XD часть 2).

Sketch

https://www.sketchapp.com — годовой абонемент 99 баксов.

Figma

https://www.figma.com
Доступна бесплатная версия.
Читай: Преимущества Figma. Краткий обзор

Встроенные в дизайн редакторы инструменты прототипирования полностью закрывают функционал отдельных веб-сервисов. Имеются небольшие отличия, связанные с развитием редакторов. Например, Adobe XD сам по себе сильно отстаёт от конкурентов, а в скетче (50) пока еще нет удобного механизма шеринга, но в общих моментах все стремятся к единому опыту, лучше всех реализованному в Figma.

Прототип

👍Плюсы

+ All-in-one платформа — один инструмент для всего рабочего процесса

+ Не стоит дополнительных денег.

👎Минусы

− Наследуются от инструмента. Например, Скетч запускается только на маках, а Фигма не работает без интернета.

Группа 2 — переходы между экранами, послойная анимация

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

Анимация Пример экрана настройки анимации в Invison Studio

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

https://projects.invisionapp.com/prototype/low-test-cjfiewxmx0057ff01vr18exfq/play/061c6fb1 — кликабельный прототип, собранный в Invision Studio

Principle

http://principleformac.com

Лицензия обойдется вам 129 баксов.
Один из самых востребованных инструментов для анимации. Используется для сценариев в несколько экранов. Экспорта в код не имеет.
К преимуществам можно отнести большое сообщество и достаточное количество учебных материалов.
Недостатки: Работает только с Mac, нет возможности работать со сложными сценариями, нет онлайн-шеринга.

Principle

Invision Studio

https://www.invisionapp.com/studio

Это относительно новый инструмент, который позиционирует себя как полноценный редактор с большими функциональными возможностями. Обеспечивает удобную работу с прототипом, с легкостью редактирует анимации. К преимуществам можно отнести возможность работы на Windows, а также онлайн-шеринг. Из минусов – нет экспорта в код, имеются небольшие проблемы со стабильностью работы.

Invision Studio

Flinto for Mac

https://www.flinto.com

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

Flinto for Mac

Kite Composer

https://kiteapp.co

100 $ лицензия.
Если вы приверженец анимации интерфейсов в After Effects, тогда эта программа для вас. Сконцентрироваться на качестве анимации поможет таймлайн, а параметры и события накладываются как фильтры. Имеется встроенный инспектор, а также экспорт кода в macOS\iOS. Рабочий процесс напоминает АЕ на минималках.

Kite Composer

Группа 3 — программируемое поведение

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

Инструмент

Настройка поведения прототипа в Framer

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

Haiku

https://www.haiku.ai

Бета версия бесплатна.
Представляет собой широкий выбор возможностей для анимации интерфейсов. Имеет возможность изменять параметры объектов, подключаясь например и файлу фигма или скетч. Конечный файл экспортируется в любой формат, и на любую платформу. Недостатком этого инструмента является необходимость знания javaskript для обработки, а также работа только на Mac.

Haiku

Proto.io

https://proto.io — от 24 $ в месяц

Atomic.io

https://atomic.io

доступна бесплатная версия
Возможность прописывать сложные команды прямо в окне браузера. Переменные и тонкая настройка состояний и событий дополняет привычную логику инструментов для анимации. Необходимость работы в браузере накладывает свои ограничения на процесс. Из минусов – только веб-версия.

Atomic.io

Framer

https://framer.com

12 долларов ежемесячно.
Пожалуй самый популярный инструмент, у которого имеется свой дизайн редактор и среда программирования.
Большой функционал, сообщество, обучающие материалы. Все для тех, кто хочет научиться программированию. Для создания сложных прототипов уходит очень много времени.В итоге получаем html в браузере, который не подходит для мобильной разработки. Минут – необходимость знания CoffeeScript.

Framer

Origami Studio

https://origami.design

Инструмент от фейсбук, который использует свою среду программирования Quartz Composer.
Последние обновления порадовали улучшенным интерфейсом, возводя его на передний план по удобству, функционалу и логики. Раздражают только постоянные неполадки с импортом в скетч. При этом скорость и отзывчивость программы перевешивают все минусы. Преимуществом является простой и понятный функционал, возможность использовать JSON. Недостатки – проблема с оптимизацией.

Origami Studio

Phase

https://phase.com

По обещанию разработчиков этот инструмент сочетание таймлайна и визуального программирования. Выход – июнь 2018. Я еще не успел поклацать.

Phase

Добавить комментарий

Ваш e-mail не будет опубликован.