?‍♂️ Как выбрать инструмент для прототипирования в 2018 году?

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

Как выбрать инструмент для прототипирования в 2018 году?

Как выбрать инструмент для прототипирования в 2018 году?

Как выбрать инструмент для прототипирования в 2018 году?

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

Спойлер: Ещё не подвезли идеального инструмента, который закроет все задачи и содержит весь функционал. До сих пор приходится идти на компромиссы, использовать костыли и смекалочку. Axure в 2018-м году не нужен.

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

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

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

 

low-test-one

Интерактивный прототип, собранный в Figma. Нажмите на красный квадрат.

С их помощью можно за несколько минут проверить гипотезы, собрать сценарий для первичного анализа. Но, из-за большой степени условности, прототипы ведут себя совсем не так, как мобильное приложение, что может запутать респондентов и снизить качество тестирования.
На сегодняшний день самые заметные инструменты — Marvel, Invision, и нативные средства Adobe XD, Figma, и Sketch (с 49-й версии).

 


 

Marvel

https://marvelapp.com/ — есть бесплатная версия

 

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

Marvel интерфейс

? Плюсы
+ Простота и удобство+ Автономность (можно работать без редакторов)+ Условная бесплатность+ Инструменты для совместной работы и тестирования? Минусы− Не замечено


Invision App

https://invisionapp.com/— от 13$ в месяц

 

Invision (не Studio) — тоже дополнение для редакторов, но, в отличие от Marvel, позволяет связывать экраны напрямую в скетче и эскпортировать уже готовый прототип без настройки переходов и связей. Также отличается большим количеством вспомогательных функций и развитой инфраструктурой. Вместе с инструментом прототипирования идёт широкий набор сервисов для совместной работы, хранения библиотек, собственного стока и много другого.

Invision App интерфейс

? Плюсы

+ Развитая экосистема дополнительных сервисов

+ Возможность настраивать связи прямо в скетче

? Минусы

− Не замечено

 


 

 

Adobe XD

https://www.adobe.com/ru/products/xd.html — 644 ₽ в месяц

Sketch

https://www.sketchapp.com — 99 $ в год

Figma

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

Встроенные в дизайн-редакторы инструменты прототипирования

? Плюсы

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

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

? Минусы

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

 


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

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

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

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

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

 


Principle

http://principleformac.com — 129 $ за лицензию
Один из первых и самых популярных инструментов для анимации интерфейсов. Подходит для небольших сценариев в 2–3 экрана и детальной настройки сложных взаимодействий. Содержит ограниченый дизайн-редактор с базовыми функциями. Не подходит для сборки сложных разветвлённых прототипов, из-за неудачного способа организации экранов, невозможности переиспользовать элементы и сложного редактирования анимации. Нет эскпорта в код.

Principle интерфейс

? Плюсы
+ Хороший инструмент для несложной анимации и коротких сценариев

+ Много учебных материалов, развитое сообщество

? Минусы

− Работа с сложными сценариями превращается в кошмар

− Нет экспорта в код

− Работает только на Mac

− Нет онлайн-шеринга

 


Invision Studio

https://www.invisionapp.com/studio — ранний доступ
Многообещающий инструмент от Invision находится в раннем доступе. Заявляется как еще один дизайн-редактор с большой функциональностью. И действительно, несмотря на проблемы со стабильностью, инструмент предоставляет удобную работу с прототипом, отличный редактор анимации, полную поддержку всех сервисов Invision и на данном этапе распространяется бесплатно.

Invision Studio интерфейс

Плюсы

+ Новый инструмент от Invision с отличным потенциалом и мощной инфраструктурой.

+ В будущем может стать основным рабочим инструментом для многих.

+ Есть версия для Windows

+ Есть онлайн-шеринг

Минусы

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

− Нет экспорта в код

 


 

Flinto for Mac