Недавно я занялся поиском хорошего инструмента для создания прототипов и анимации своих идей. В итоге исследование рынка превратилось в пересмотр специализаций инструментов своего арсенала и шлифовкой процесса проектирования нового продукта.
Чтобы понять, какой именно мне нужен инструмент, я обобщенно зафиксировал свой текущий рабочий процесс. Проектирование нового продукта проходит следующие фазы:
- Моделирование
создание статичной модели продукта: прокручиваю в голове, развиваю на бумаге, отражаю на статичных макетах; - Простое прототипирование
простой постраничный прототип, тесты и коррекция; - Сложное прототипирование
сложный многослойный прототип, тесты и коррекция; - Выгрузка
подготовка и упаковка проектной документации, сдача в разработку.
В парадигме такого процесса мой инструментарий приобрёл следующую классификацию:
- Архитектор
Создание функционального аспекта (информационная архитектура, структура, сценарии, механизмы и прочее). - Визуализатор
Создание образного аспекта (айдентика, иллюстрации, семантика и прочее). - Тестировщик
Проверка на пользователях и сбор отзывов. - Грабли
Создание простого, чаще постраничного, прототипа, в котором прочёсываем фундамент продукта, чтобы исключить ложные и ошибочные ходы в начале пути. - Эмулятор
Создание сложного прототипа, как можно более близкого к нативной среде. - Аниматор
К производственному процессу такой вид инструмента зачастую редко имеет отношение, чтобы клиент не обижался на нереализованную показанную раннее красоту, а разработчик не падал в обморок от будущих мук. А вот для создания концептов, интерактивных изобретений и прочих своих экспериментов и фантазий – самое то. - Документатор
Ведение и оформление проектной документации, создание пакета для разработчиков.
Каждый может в угоду своему процессу создать свой вид инструмента, который решает определённые задачи. Например, кто-то может использовать отдельные инструменты для создания вдохновляющих досок (moodboard). Но я ими пользуюсь очень редко (и, может быть, зря), поэтому не включал в основной список инструментов.
Итак, исходя из вышеописанной классификации, мне нужны были грабли, эмулятор и аниматор. Не имеет значения, будет это одно приложение от одной компании или три разных, лишь бы поставленные задачи выполнялись легко, удобно и эффективно.
Определившись с категориями нужных инструментов, я уточнил точечные критерии и пожелания:
- быстрое, очевидное, интуитивно понятное знакомство с продуктом: нет ни времени, ни желания долгому обучению инструмента;
- лёгкий и безущербный импорт и синхронизация макетов из Ps или Sketch;
- прототип можно создать для любой платформы;
- аниматор должен создавать сложную анимацию как можно более простыми операциями;
- дабы не городить фантазий на сложном прототипировании, эмулятор должен выдавать как можно более нативное поведение, чтобы было как можно меньше отклонений между реальным продуктом и его сложным прототипом;
- гифка или видео на выходе;
- кликабельным прототипом я смогу делится с коллегами и пользователями, вставлять в презентацию, щупать на разных устройствах;
- разумный ценник.
Выборка потенциальных инструментов к началу тестов сформировалась следующая:
- Adobe After Affects
- Adobe Expirience Design
- Marvel
- InVision
- Silver Flows
- Principle
- Flinto for Mac
- Proto.io
- Atomic.io
- Pixate
- Framer Studio
- Origami Studio
Еще раз уточняю, чтобы не было лишней дискуссии: в выборку попали инструменты, которые могут потенциально взять на себя спектр требуемых задач (простое и сложное прототипирование, анимация), и не попали инструменты, которые тяготеют к архитекторам и другим специализациям (Axure, UXPin, Balsamiq, WebFlow, Justinmind, Indigo Studio и другие).
И еще раз напоминаю, что знакомство с инструментами сильно зависит от личного видения и понимания рабочего процесса и других профессиональных предпочтений, поэтому перед собственным вердиктом обязательно сами пробуйте продукт!
Теперь мне оставалось взять на тест-драйв каждый из инструментов и сложить обобщённое впечатление, держа на руках чек-лист из особенностей своего рабочего процесса и личных пожеланий. Итак, поехали!
*** Пульс ярмарки от 22 апреля 2016 года ***
Adobe After Effects. Инструмент, безусловно мощный, но не создавался под анимацию интерфейсов, поэтому сделав в нём банальные вещи окольными для себя путями, решил отложить в сторону. В будущем хочу детальнее познакомиться для других нужд, а пока пройду мимо до других времён.
Adobe Expirience Design. Выглядит очень симпатично, хорош для быстрого прототипа, которым можно поделиться ссылкой или видеофайлом, поюзать на устройстве. Жаль, что не могу видеть обратную связь от прототипа. Но это только превьюшка, так что в будущем всё возможно. Вкладка Design для меня лишняя: пока не представляю как буду там проектировать, но вполне возможно это дело привычки. Благо, времени, чтобы наиграться с программой и понять нужна ли она валом (платной программа планирует стать в конце года). Не благо, что пока только на Мак-платформе.
Pixate. Прототипы, сделанные в этом инструменте, выглядят очень достойно, но у меня не сразу заладилось взаимодействие. Было здорово поклацать простейшие механизмы на своём устройстве, сконектившись без проводов, но это всё же эмулятор, поэтому на выходе нужен прототип посложнее. Благодаря тому, что бесплатная, на досуге попытаюсь освоить, может подружимся.
Principle. Презентационный минутный ролик – образцово показательный: быстро и без воды показан потенциал продукта, поэтому пробовал его в числе первых. Процесс покатился сразу, почти всё очень понятно для меня. Покопавшись немного в туториалах, опробовал еще большую мощь инструмента. Я почему-то ожидал от него роли эмулятора, но всё же это аниматор: полноценную прогулку по прототипу приложения я пока не представляю как в нём сделать без нервотрёпки, а вот пофантазировать о какой-нибудь механике отдельного аспекта – великолепен для этих целей. Будет здорово, если в дальнейшем, он будет совершенствоваться именно по этой дорожке аниматора, став полноценной, легковесной и заточенной вариацией After Effects.
Flinto for Mac. В очереди на пробу стоял ближе к концу. Тем приятнее было удивление от работы с ним: знакомство сложилось просто на «ура», функционал залетел очень быстро, после прогона коротких официальных туториалов и пробы на собственных руках оставил ещё большее впечатление. Жирнючие плюсы за дизайнера трансформаций и за возможность добавления нескольких жестов на один объект: в текущем проекте это нужно было мне позарез. Если Principle я видел эмулятором, то Флинто мне почему-то казался аниматором. Оказалось ровно наоборот: создать сложный прототип вместе с нестандартными анимациями во Flinto у меня получилось легче и быстрее всех других продуктов. На досуге обязательно опробую другой инструмент этой компании – Flinto Lite.
Marvel. Наверное, удивил больше всех, так как собирался пробовать для галочки и ничего особого не ждал. Первое знакомство прошло совершенно незаметно: через считанные минуты свой простой прототип я уже листал на мобильном, мог обсуждать с коллегами или через Lookback тестировать на пользователях, отправить ссылку почтой или смской, вставить кликабельный прототип в Behance-презентацию. Вкупе с чистой и опрятной оболочкой оставил очень приятные впечатления, сделав весомую заявку на полноценный инструмент для второй стадии моего процесса (простого прототипирования). Решающими в этом оказались именно share&feedback-возможости. Есть возможность создавать простые макеты, но для меня этот функционал лишний, как и в Adobe XD.
InVision. Мощный инструмент с большими перспективами. Увеличил свой вес с покупкой Silver Flows, который я очень и очень хотел попробовать. И не совсем понятно когда я смогу это сделать: некоторые вкусности, как анонсированные в сентябре-августе прошлого года Inspect и Motion, до сих пор в закрытой бете и когда выйдут в свет – я так и не понял. Из минусов отмечу немного перегруженный вид: после Marvel выглядит грузным и дремучим, но это личные впечатления опять же. Поэтому для меня InVision остаётся тёмной лошадкой, за которой обязательно буду следить: у него есть все предпосылки чтобы стать хорошим комплексным инструментом в моём арсенале.
Proto.io. Прототипы, сделанные в нём, впечатляют, но после пары заходов знакомство не сложилось. Скорее всего, мне помешала нагруженность инструмента функциями архитектора, чего мне не требовалось, а научиться сделать сложный прототип из-за 15-дневного триального периода я попросту не успел, как и понять за что я буду платить 24 доллара в месяц за 5 проектов, это самое дорогое предложение в моей выборке. Очень жаль, так как претендовал на роль эмулятора и аниматора.
Atomic.io. Прототипы опять же впечатляют, но это скорее аниматор, хотя и задатки эмулятора были замечены. Процесс не совсем заладился, но триальный период месячный, поэтому есть еще возможность изучить его детальнее, благо есть официальные исходники. По логике напоминает Pixate.
Framer Studio. Анонсированные возможности и прототипы оставляют очень приятное впечатление. Возможностей действительно очень много, но требует более детального изучения. Создать сложный прототип займёт больше времени, но на выходе будет действительно приближенный к боевым условиям образец. Вышедшая 12 апреля новая версия оставляет еще больше надежд на более быстрый процесс работы и знакомства.
Origami Studio. С нетерпением хочу поиграться с визуальным программированием: логика и процесс работы выглядят очень дружественными и родными для меня. Осталось лишь дождаться новую версию, которая была анонсирована в начале апреля. Есть альтернативный Form, но по рекомендациям веса больше у Origami, поэтому думаю начать с него.
***
Нагулявшись по ярмарке, сделал для себя текущие промежуточные итоги:
- Marvel практически закрывает задачи моего второго этапа (быстрого прототипирования), поэтому предварительно беру его к себе на службу в качестве граблей и одного из тестировщиков, тем более что на этапе более детального практического знакомства пока не потребуется башлять. Рядом будут маячить альтернативы в лице InVision и Flinto Lite;
- Flinto опробую на первое время эмулятором, но в свою развивающую программу ставлю приоритетным процессом изучение сложного прототипирования (Framer и Origami). В этой теме хорошо зажигает Антон Карташов, с его материалов и начну, как и группы RPC. Возможно в будущем попробую связку Flinto, если надо набросать по-быстрому прототип посложнее, и Framer (Origami), когда нужна будет более реальная эмуляция.
- Principle возьму на испытательный срок аниматором, турбодизель After Effect мне сейчас не нужен.
- Остальные инструменты, особенно InVision, буду держать на пульсе, чтобы при необходимости корректировать свой арсенал.
Нюансы, которые я выяснил в ходе поисков:
- Триальная модель помешала дальнейшему знакомству. Другое дело, если бы подсчитывали дни фактического пользования, как Principle. Но в ходе краткосрочного знакомства, когда не получилось с первого-второго раза зацепится за продукт, хочется покрутить инструмент с другой стороны и дать ему еще один шанс. Но в итоге из-за разных причин, в том числе простой рабочей занятости, я не смог уложиться в двухнедельный срок и наше знакомство не состоялось. Поэтому модель бессрочного и не сильно зажранного использования на бесплатной основе оставляет более приятные впечатления о продукте и возможности использования его при дальнейшем знакомстве на платной основе с большими мощностями. Вобщем, free-to-pay выглядит более привлекательной формой монетизации и на этом рынке.
- Инструмент с сильно заточенным узкоспециализированным функционалом часто оставляет более приятные впечатления, чем «комбайн», решающий эти задачи наряду с другими: он может не только делать свою работу лучше, чем «комбайн», но и просто находится в голове именно на той полочке, на которой вы решаете свои задачи, а не занимать несколько полок подряд, путаясь с другими инструментами. Если нужен документатор – можно достать Zeplin, если нужен тестировщик – можно достать Lookback и так далее.
Битва на рынке прототипировщиков в разгаре, поэтому буду держать эту тему на пульсе: в случае обновления заголовок будет менять дату (upd@день.месяц), в комментариях буду указывать что именно обновилось.
В процессе этого исследования родился концепт моего инструмента, которым я спешно поделился в этой статье.
C удовольствием познакомлюсь с вашим набором инструментов или собственной класификацией. Или можете поразгоняться и придумать альтернативные названия видов в вышеизложенной (грабли – причёска, прочёс; тестировщик – агент распространения, барыга; эмулятор – пандора, медные трубы).
Автор: amatyukh
