Дизайн Вадим Скворцов
3 860

Инструменты для прототипирования статичных изображений, анимаций и переменных

Подборка актуальных в 2018 году сервисов от дизайнера «Сбербанка» Александра Отважного.

В закладки

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

Я разбил список на три большие группы по функциональности и разберу каждую отдельно.

  1. Связанные статичные изображения.
  2. Компоненты и состояния, послойная анимация переходов.
  3. Переменные, программируемое реалистичное поведение, логические операторы.

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

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

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

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

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

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

Самые заметные инструменты на сегодня: 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 не работает без интернета.

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

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

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

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

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.

Плюсы

  • Рабочий процесс, похожий на АЕ на минималках.

  • Экспорт в код.

Минусы

  • Я так в нём и не разобрался.

Третья группа — программируемое поведение

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

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

Каждый инструмент отличается своим подходом к процессу и своим способом программирования — от упрощённого 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, кажется, он сможет заменить нам все инструменты и предложить удобный для всех рабочий процесс в одном окне.

#дизайн #инструменты

{ "author_name": "Вадим Скворцов", "author_type": "editor", "tags": ["\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 6, "likes": 21, "favorites": 45, "is_advertisement": false, "subsite_label": "design", "id": 41007, "is_wide": false, "is_ugc": false, "date": "Thu, 28 Jun 2018 15:44:53 +0300" }
{ "promo": {"title":"\u0411\u0430\u043d\u043d\u0435\u0440\u044b \u0434\u043b\u044f \u043c\u0435\u0434\u0438\u0439\u043a\u0438","order_id":1528,"state":80,"description":"HTML5, GIF, \u0441\u0442\u0430\u0442\u0438\u043a\u0430, \u0432\u0438\u0434\u0435\u043e, Stories","email":"tolkunovdb@gmail.com","button_text_id":3,"link":"https:\/\/tolkunov.com\/?utm_source=vc&utm_medium=miniad&utm_campaign=january19","app_store_link":null,"google_play_link":null,"color_id":3,"rejection_reason_text":null,"image":"{\"type\":\"image\",\"data\":{\"uuid\":\"41176a71-6175-567c-225e-31e7709b4327\",\"width\":500,\"height\":500,\"size\":7289,\"type\":\"jpg\",\"color\":\"1c9cd4\",\"external_service\":[]}}","total":15000,"with_payment":true,"dates":"[{\"year\":\"2019\",\"month\":\"01\",\"day\":\"22\",\"available\":\"true\",\"price\":\"15000\",\"discount\":\"0\",\"format\":\"backend\"}]","hits_count":24820,"scrolls_count":0,"clicks_count":57,"hits_limit":0,"scrolls_limit":0,"clicks_limit":0}, "link": "https://vc.ru/redirect?hash=ffe3550907cac285bbe194e5cc0bfc4136b260de87ef16f5410a24c518617363&component=booster&id=106&type=daily&target=entry&url=aHR0cHM6Ly90b2xrdW5vdi5jb20vP3V0bV9zb3VyY2U9dmMmdXRtX21lZGl1bT1taW5pYWQmdXRtX2NhbXBhaWduPWphbnVhcnkxOQ==", "buttonText": "Заказать", "location": "entry", "id": "106" }
{ "id": 41007, "author_id": 120027, "diff_limit": 1000, "urls": {"diff":"\/comments\/41007\/get","add":"\/comments\/41007\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/41007"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "possessions": [] }

6 комментариев 6 комм.

Популярные

По порядку

Написать комментарий...
2

Супер статья!

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

Делали на маках. Использовали Marvel, Overflow.io, кто-то даже фотошоп.

Угадайте, что стало самым популярным инструментом прототипирования?

Xcode. Именно как инструмент прототипирования, а не написания кода.

Ответить
–7

Любят дизайнеры бесполезную работу.

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

Ответить
2

показать готовые переходы на готовом дизайне и вайрфреймах это суровая необходимость, особенно когда у вас +100 экранов.

Ответить
2

Налинковать 100 экранов в прототип и показать это заказчику и потенциальным пользователям - 1-2 дня работы дизайнера.
Причем можно сразу несколько разных версий решения показать, для сравнения.

Закодить это и выкатить на полпроцента - много времени. А закодить несколько версий - еще больше и надо А/Б-тест запустить.

А еще нужны эти полпроцента аудитории. Так что прототип из картинок - единственный выход до запуска продукта, погонять идею :)

Но вот в случае с готовым продуктом и минорными изменениями вы правы. Протестить варианты двух похожих простых экранов на пользователях намного круче и по времени не так затратно.

Ответить

0

Еще есть http://mokup.me/ - как Principle, но и на мак и на виндовс.

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления
{ "page_type": "default" }