Инструменты для прототипирования статичных изображений, анимаций и переменных
Подборка актуальных в 2018 году сервисов от арт-директора «Сбербанка» Александра Отважного.
Новые инструменты и сервисы для дизайна и прототипирования выходят и обновляются каждый день. Я провёл полное и глубокое исследование инструментов, представленных сегодня на рынке, и помогу в них разобраться.
Я разбил список на три большие группы по функциональности и разберу каждую отдельно.
- Связанные статичные изображения.
- Компоненты и состояния, послойная анимация переходов.
- Переменные, программируемое реалистичное поведение, логические операторы.
Инструментов намного больше. Здесь собраны сильные и интересные решения, которые можно относительно надёжно использовать в работе. Все они имеют средства для просмотра созданных прототипов и одинаково подходят как для веб-сайтов, так и для мобильной разработки.
Спойлер: ещё нет идеального инструмента, который закроет все задачи и будет иметь всю необходимую функциональность. До сих пор приходится идти на компромиссы, использовать костыли и смекалочку. Axure в 2018 году не нужен.
Первая группа — структура, лоу-сценарии
Инструменты первой группы используют изображения экрана, связанные между собой ссылками. Ссылки привязаны к хотспотам или объектам. В результате получаются статичные прототипы, которыми легко поделиться, собрать обратную связь и отредактировать.
С их помощью можно за несколько минут проверить гипотезы, собрать сценарий для первичного анализа. Но из-за большой степени условности прототипы ведут себя совсем не так, как мобильное приложение, что может запутать респондентов и снизить качество тестирования.
Самые заметные инструменты на сегодня: Marvel, Invision и нативные средства Adobe XD, Figma и Sketch (с 49-й версии).
Marvel
Простейший онлайн-сервис для создания прототипов. Работает как в виде дополнения к дизайн-редакторам, так и самостоятельно в виде веб-сервиса. Недавно обзавёлся собственным простым редактором.
Мобильное приложение позволяет не только просматривать, но ещё создавать и редактировать прототипы. Бесплатная версия имеет ограничение на количество проектов, но в приложении оно выключено, и можно вполне легально создавать сколько угодно проектов.
Плюсы
-
Простота и удобство.
-
Автономность (можно работать без редакторов).
-
Условная бесплатность.
-
Инструменты для совместной работы и тестирования.
Минусы
-
Не замечено.
Invision App
Invision (не Studio) — тоже дополнение для редакторов, но в отличие от Marvel позволяет связывать экраны напрямую в Sketch и экспортировать уже готовый прототип без настройки переходов и связей.
Также отличается большим количеством вспомогательных функций и развитой инфраструктурой. Вместе с инструментом прототипирования идёт широкий набор сервисов для совместной работы, хранения библиотек, собственного стока и много другого.
Платная подписка стоит от $13 в месяц.
Плюсы
- Развитая экосистема дополнительных сервисов.
- Возможность настраивать связи прямо в Sketch.
Минусы
- Не замечено.
Adobe XD
Стоимость подписки 644 рублей в месяц (бесплатная версия даёт пошарить всего один прототип).
Sketch
Стоимость подписки $99 в год.
Figma
Встроенные в дизайн-редакторы инструменты прототипирования полностью закрывают функциональность отдельных веб-сервисов. Имеются небольшие отличия, связанные с развитием редакторов.
Например, Adobe XD сам по себе сильно отстаёт от конкурентов, а в Sketch (50) пока ещё нет удобного механизма шеринга, но в общих моментах все стремятся к единому опыту, лучше всех реализованному в Figma.
Есть бесплатная версия.
Плюсы
- All-in-one платформа — один инструмент для всего рабочего процесса.
- Не стоит дополнительных денег.
Минусы
-
Наследуются от инструмента. Например, Sketch запускается только на Mac, а Figma не работает без интернета.
Вторая группа — переходы между экранами, послойная анимация
Инструменты второй группы сфокусированы на анимации. С их помощью реализуются бесшовные переходы между экранами, имитируется поведение элементов интерфейса, собирается несложная анимация. Механизм работы прост — задаются начальное и конечное состояния экрана и событие, при котором запускается переход.
В результате получаются прототипы, точно передающие поведение интерфейса, однако они не могут работать с данными, запоминать выбранные опции и имитировать прочее сложное поведение.
Principle
Один из первых и самых популярных инструментов для анимации интерфейсов. Подходит для небольших сценариев в два-три экрана и детальной настройки сложных взаимодействий. Содержит ограниченный дизайн-редактор с базовыми функциями.
Не подходит для сборки сложных разветвлённых прототипов из-за неудачного способа организации экранов, невозможности переиспользовать элементы и сложного редактирования анимации. Нет экспорта в код.
Лицензия стоит $129.
Плюсы
- Хороший инструмент для несложной анимации и коротких сценариев.
- Много учебных материалов, развитое сообщество.
Минусы
- Работа со сложными сценариями превращается в кошмар.
- Нет экспорта в код.
- Работает только на Mac.
- Нет онлайн-шеринга.
Invision Studio
Многообещающий инструмент от Invision находится в раннем доступе. Заявляется как ещё один дизайн-редактор с большой функциональностью. И действительно, несмотря на проблемы со стабильностью, инструмент предоставляет удобную работу с прототипом, отличный редактор анимации, полную поддержку всех сервисов Invision. И сейчас он распространяется бесплатно.
Плюсы
- Новый инструмент от Invision с отличным потенциалом и мощной инфраструктурой.
- В будущем может стать основным рабочим инструментом для многих.
- Есть версия для Windows.
- Есть онлайн-шеринг.
Минусы
-
Связаны с ранним доступом. Пока что это нестабильный продукт с ограниченной функциональностью.
-
Нет экспорта в код.
Flinto for Mac
Flinto использует тот же принцип создания и анимации прототипов, что и Invision Studio, чем выгодно отличается от Principle. Подход, при котором сложная детальная анимация настраивается в отдельном от общего экрана интерфейсе, позволяет легко управлять процессами, редактировать и переиспользовать компоненты в следующих прототипах.
Лицензия стоит $99.
Плюсы
- Удобно организованный рабочий процесс позволят работать со сложными сценариями и анимацией.
Минусы
- Нет онлайн-шеринга.
- Работает только на Mac.
Kite Composer
Kite Composer станет отличной заменой перечисленным инструментам для тех, кто привык анимировать интерфейсы в After Effects. Принцип работы, при котором основным инструментом становится таймлайн, а параметры и события навешиваются на объекты как фильтры, позволяет сфокусироваться на качестве анимации. Также имеются экспорт кода в macOS или iOS и встроенный инспектор.
Лицензия стоит $99.
Плюсы
-
Рабочий процесс, похожий на АЕ на минималках.
-
Экспорт в код.
Минусы
-
Я так в нём и не разобрался.
Третья группа — программируемое поведение
Инструменты этой группы дают на выходе полностью управляемый прототип, который использует данные пользователя и функции устройства. Это позволяет точно имитировать работу приложения для тестирования и разработки.
Каждый инструмент отличается своим подходом к процессу и своим способом программирования — от упрощённого JavaScript в Framer до визуального Quartz Composer в Origami Studio.
Прототип, собранный в Origami Studio. По ссылке — исходный файл, который можно открыть на телефоне в приложении Origami Live
Haiku
Уже сейчас, в бете, Haiku предлагает широкий набор возможностей для анимации и интерактивности. Вкратце, инструмент подключается к Sketch- или Figma-файлу и позволяет редактировать параметры объектов на общем таймлайне. Больше подходит для анимации, но благодаря редактору Actions, работающем на JavaSript, можно прописать сложную логику прототипа.
Полученный результат экспортируется с помощью библиотеки Lottie.js на все возможные платформы и форматы.
Сервис находится в бета-версии, пока бесплатен.
Плюсы
- Универсальность.
Минусы
-
Нужно знать JavaScript для обработки событий и состояний.
-
В бета-версии.
-
Только для Mac.
Proto.io
Стоимость подписки от $24 в месяц.
Atomic.io
Многофункциональные веб-сервисы, которые позволяют прописывать сложную логику прямо в браузере. Не имеют принципиальных различий в функциональности. Переменные и тонкая настройка состояний и событий дополняют привычную логику инструментов для анимации.
К сожалению, в таком формате собирать и редактировать связи сложнее, чем специальными средствами. Также необходимость работы в браузере накладывает свои ограничения на процесс.
Есть бесплатная версия.
Плюсы
-
Не нужно знать языки программирования.
Минусы
-
Веб-версия.
Framer
Один из самых популярных на сегодня инструментов со своим дизайн-редактором и средой программирования на CoffeeScript — упрощённой версии JavaScript.
Широкие возможности, огромное коммьюнити, доступные обучающие материалы делают Framer идеальным решением для дизайнеров, которые умеют или хотят научиться программировать.
Однако на сложных прототипах работа с кодом, правка и отладка занимают много времени. На выходе получается условный HTML в браузере, который нельзя использовать в мобильной разработке. Поэтому Framer не может использовать нативные возможности мобильных устройств, камеру, вибро, гироскоп и другие.
Стоимость подписки от $12 в месяц.
Плюсы
-
Удобная среда для программирования логики прототипа и шеринга результата.
Минусы
-
Нужно знать CoffeeScript.
-
Дизайнер тратит много времени на отладку кода.
Origami Studio
Бесплатный инструмент от Facebook использует визуальную среду программирования Quartz Composer.
Последние обновления качественно улучшили опыт и интерфейс, сделав Origami, на мой взгляд, самым удобным и функциональным средством проектирования логики и связей в прототипах мобильных приложений.
К сожалению, часто раздражают плохая оптимизация и вечные проблемы со Sketch-плагином импорта. Однако скорость и интуитивность, с которой собираются сложные процессы, перевешивают все минусы.
Плюсы
- Бесплатно.
-
Неограниченная функциональность — можно использовать и JSON, и данные гироскопа.
-
Простой процесс для сложной логики.
Минусы
-
Проблемы с оптимизацией.
-
Мало учебных материалов.
Phase
Многообещающий инструмент, который должен выйти в июне 2018 года. Разработчики заявляют, что будет революционный процесс, объединяющий визуальное программирование и таймлайн. Звучит очень хорошо, обязательно нужно попробовать.
В 2018 году отпала необходимость в отдельных простых инструментах прототипирования — вся функциональность в той или иной степени поддерживается дизайн-редакторами. Лично мне для простых прототипов хватает Figma.
Сложные логические штуки я сейчас собираю в Origami. Также перешёл с Principle на Invision Studio — даже в раннем доступе это очень удобный инструмент для анимации. Очень надеюсь на Phase, кажется, он сможет заменить нам все инструменты и предложить удобный для всех рабочий процесс в одном окне.
#дизайн #инструменты
© vc.ru