Немного о прототипах

На прошлой неделе пришлось плотно повозиться с одним прототипом приложения, чего, надо признаться я не делал достаточно долго. Отличный повод посмотреть что есть из инструментов на рынке! — подумал я, и по очереди установил несколько. Конечно в сети полно статей типа «5/10/13 лучших инструментов прототипирования для дизайнера/менеджера/садовника в этом году», которые в принципе несут одинаковый смысл и содержание. Среди подобных заметок больше всего понравилась Сравнение: 5 инструментов для прототипирования приложений.

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

По-честному, эта статья все что вам нужно, а ниже заметки с мои опытом.

Axure.

Старый добрый Axure дожил до 8 версии, но на первый взгляд мало чем отличается от 5 или 6. Тот же интерфейс, тот же workflow и инструменты. Если кто не знает: Axure это WYSISWYG-конструктор из стандартных HTML контролов, с возможностью менять их свойства и внешний вид и поведение.

Из кардинально нового — доступ по подписке от $29 в месяц, что намного приятнее чем разовая покупка почти за $500. Да, на главной странице обещают адаптивные макеты, и анимации. В стандартных библиотеках добавились Icons.

Когда может пригодится? Наверно я бы использовал в случаях Когда нужно строить сложные условия на ввод и проверку данных, либо необходимо показать логику кнопки. В текущем случае я не рискнул уходить в него.

Origami Studio

Давно хотел найти повод поиграться с этим инструментом, последний раз когда запускал Origami он как-то был завязан на запуск Quartz Composer, сейчас же это standalone приложение. Порог входа достаточно высок, но возможность увидеть максимально близкие к реальности анимации на устройстве или в редакторе располагает.

Навыков програмирования не требуется, все решается через

Интерфейсможно создать в самом редакторе, либо просто скопировать нужные слои из Sketch.

Из главных минусов :

• очень своеобразная логика работы с патчами и слоями когда нужно привязать множественные действия и условия к одному слою
• периодически mac пытался взлететь, после того как Origami разгонял CPU до 100%
• высокий порог вхождения, правда, для других серьезных инструментов так же
• в сети не так много ресурсов и рецептов по решению отдельных кейсов, вполне возможна ситуация что никто не выложил готовое решение по твоей задаче, и нужно потратить серьезное время

Область применения мне показалась ограниченной, достаточно легко сделать прототип отдельного кейса но при попытке сделать что-то из 4-5 экранов, есть риск получить безумную лапшу из патчей и конекторов, в которой разобраться будет проблемно.

Если все же есть желание попробовать, на youtube есть запись с мастер-класса Антона Карташова который он провел в Avito. Начиная с основ, и к более сложным вещам на русском языке, крайне рекомендую.

Invision / Craft

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

How to build an interactive prototype in Sketch in minutes

Есть подобие Но при этом все получается какое-то кривое и не аккуратное, либо же у меня руки оказались не подходящими.

Из плюсов — есть некое подобие канбан доски для идей и концептов.

Form

Честно, даже не пробовал, увидел что последнее обновление в 2016 году да и подход ala Origami c noodle soup из патчей и коннекторов, и решил отложить.

Framer

Фреймер меня очаровал, не сразу, потребовалось выучить несколько основных компонентов, и немного разобраться с CoffeeScript.

• очень лаконичный интерфейс, нет ничего лишнего но всего достаточно
• все что возможно с JavaScript возможно и в прототипе! Например подключить реальные интерактивные карты с несколькими строчками кода

Framer Mapbox by Bryant Jow — Dribbble

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

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

Для просмотра на устройсве можно использовать браузер, но в отличии от Invision мне не удалось скрыть на устройстве адресную строку, либо официальное приложение Framer Preview on the App Store. Но я рекомендую поставить Frames: Mirror and Gallery for Framer Prototypes, позволяет просматривать онлайн прототипы в Fullscreen режиме.

PS. Отличный доклад для введения в прототипирование