Pull to refresh

Грабли, эмулятор, аниматор (upd@21.06)

Reading time12 min
Views8.6K
Недавно я занялся поиском хорошего инструмента для создания прототипов и анимации своих идей. В итоге исследование рынка превратилось в пересмотр специализаций инструментов своего арсенала и шлифовкой процесса проектирования нового продукта.

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

  • Моделирование
    создание статичной модели продукта: прокручиваю в голове, развиваю на бумаге, отражаю на статичных макетах;
  • Простое прототипирование
    простой постраничный прототип, тесты и коррекция;
  • Сложное прототипирование
    сложный многослойный прототип, тесты и коррекция;
  • Выгрузка
    подготовка и упаковка проектной документации, сдача в разработку.

В парадигме такого процесса мой инструментарий приобрёл следующую классификацию:

  • Архитектор
    Создание функционального аспекта (информационная архитектура, структура, сценарии, механизмы и прочее).
  • Визуализатор
    Создание образного аспекта (айдентика, иллюстрации, семантика и прочее).
  • Тестировщик
    Проверка на пользователях и сбор отзывов.
  • Грабли
    Создание простого, чаще постраничного, прототипа, в котором прочёсываем фундамент продукта, чтобы исключить ложные и ошибочные ходы в начале пути.
  • Эмулятор
    Создание сложного прототипа, как можно более близкого к нативной среде.
  • Аниматор
    К производственному процессу такой вид инструмента зачастую редко имеет отношение, чтобы клиент не обижался на нереализованную показанную раннее красоту, а разработчик не падал в обморок от будущих мук. А вот для создания концептов, интерактивных изобретений и прочих своих экспериментов и фантазий – самое то.
  • Документатор
    Ведение и оформление проектной документации, создание пакета для разработчиков.

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

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

Определившись с категориями нужных инструментов, я уточнил точечные критерии и пожелания:

  • быстрое, очевидное, интуитивно понятное знакомство с продуктом: нет ни времени, ни желания долгому обучению инструмента;
  • лёгкий и безущербный импорт и синхронизация макетов из Ps или Sketch;
  • прототип можно создать для любой платформы;
  • аниматор должен создавать сложную анимацию как можно более простыми операциями;
  • дабы не городить фантазий на сложном прототипировании, эмулятор должен выдавать как можно более нативное поведение, чтобы было как можно меньше отклонений между реальным продуктом и его сложным прототипом;
  • гифка или видео на выходе;
  • кликабельным прототипом я смогу делится с коллегами и пользователями, вставлять в презентацию, щупать на разных устройствах;
  • разумный ценник.

Выборка потенциальных инструментов к началу тестов сформировалась следующая:


Еще раз уточняю, чтобы не было лишней дискуссии: в выборку попали инструменты, которые могут потенциально взять на себя спектр требуемых задач (простое и сложное прототипирование, анимация), и не попали инструменты, которые тяготеют к архитекторам и другим специализациям (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 удовольствием познакомлюсь с вашим набором инструментов или собственной класификацией. Или можете поразгоняться и придумать альтернативные названия видов в вышеизложенной (грабли – причёска, прочёс; тестировщик – агент распространения, барыга; эмулятор – пандора, медные трубы).

upd@29.04. Дополнительные пробы и новые инструменты

Дополнительные пробы

Atomic. Очень достойный продукт, обязательно попробуйте его. Я увидел в нём нечто среднее между Marvel, Principle и Flinto. И в этом, в зависимости от вашего процесса работы, он хорош или, как в моём случае, не совсем. Для моего процесса он недостаточно примитивен (в хорошем смысле этого слова) и разнобок в feedback-возможностях для «граблей» как Marvel, не совсем удобен в качестве «аниматора» как Principle и до эмулятора он не дотягивает. Поэтому пока, оставшись с приятными впечатлениями об этом продукте, я откладываю его в сторону.
Flinto Lite. Чистые и хорошие грабли с интересным механизмом работы. Правда, я не сразу догнал, что проводок, который соединяет выделенную кликабельную зону с целевой страницей и который тут же пропадает, на самом деле соединяет :) Для этого надо было увидеть в левом сайдбаре мелким шрифтом «Target: целевая страница». В целом инструмент интересный, но если сталкивать с прямым конкурентом Marvel, то у второго побогаче всё те же feedback-возможности и приятнее ценовое предложение.
Pixate. После более близкого знакомства работа в инструменте прояснилась, но не могу пока сказать, что подходит для меня. Однако не забываем: программа бесплатная, поэтому ничего не мешает положить её в загашник и периодически доставать. Вместе с Flinto обитают примерно на одном уровне, поэтому для ПК-шников — это удачная альтернатива.
Framer. Некогда, больше десяти лет назад, я прочитал в одном журнале о некоем языке CoffeeScript. Немного поигравшись с ним, решил отложить до других времён. После знакомства с Framer'ом эти времени, похоже, пришли. Очень доставляет большой контроль над полотном и его объектами, который я увидел после более детального знакомства с этим замечательным инструментом и который существенно корректирует расстановку на моём поле инструментов. Претендует сразу на роль и аниматора, и эмулятора.
InVision. Оказывается, помимо Silver Flows, они купили еще и Macaw, Easee и Relay. Боюсь представить, что за корабль там в итоге получится, поэтому с большим интересом жду вестей с этого хутора.

Новые инструменты, которые нашел для себя

Floid. Интересный бесплатный инструмент для прототипирования и выгрузки в HTML для Mac-платформы. Много возможностей, но пока сыроват, есть некоторые банальные недочёты. Я пробовал его на прошлой неделе, сейчас сайт недоступен. Пока не знаю, что случилось, но на всякий пожарный оставляю его тут.
Koncept. Веб-платформа для создания прототипов и UX-анализа. Проект пока в закрытой бете. Градаций тарифного плана нет: на одного человека прототипирование будет стоит $30 в месяц, а за аналитику, которая меня интересует больше, просят $100 в месяц, причем взять только одну аналитику нельзя и придётся платить $130 в месяц. Не знаю, почему они выбрали такую финансовую модель: прототип, сделанный этим инструментом, на сайте один и ничего особенного в нём нет, а что будет в аналитике с таким ценником пока даже представить не могу. После регистрации мне выдали 1154-ый номер в очереди, так что мне пока остаётся только немножко подождать.
Creo. Прототип, создаваемый в этом инструменте, магическим образом превращается в нативное приложение. Первые впечатления от этого продукта схожи с кивком а-ля Эйс Вентура, который делает мужичёк в конце демонстрационного видео. Действительно, очень интересно что в итоге получится на официальном релизе, сейчас продукт в открытом бета-тесте.
Noodl. Упомянутый в комменатриях со своей рецензией Noodl действительно интересен, но требует отдельного знакомства, которое я делегировал на этап знакомства с визуальным программированием.
The Protein. Очень интересный российский сервис, который позволяет дизайнерам, разработчикам и тестировщикам вести совместную работу над проектированием интерфейсов. Более подробный рассказ на ЦП.

upd@21.06. Заключение

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

Fuse. Чумовой конструктор, схожий на Creolabs и позволяющий выгружать реальное приложение для Android и iOS. Основан на UX Markup — разновидности XML, которую несложно освоить, тем более есть куча примеров с исходниками и активное сообщество. Бесплатен, находится в открытой бете.

POP. Создание простого прототипа из собственных набросков от руки. Очень прост и удобен. За два прототипа на одного человека можно пользоваться бесплатно.

CanvasFlip. Ещё одни отличные «грабли» с удобным созданием простого прототипа, который можно будет отправить пользователям для теста многими способами. Аналитика отличная: можно смотреть воронку конверсии, интерактивную теплокарту, видеозапись сессии. Оставляет очень приятные впечатления, к тому же есть простая доска для управления проектом. На бесплатном тарифе 5 прототипов.

Koncept. Практически полный аналог Marvel c небольшой порцией аналитики, которая меня не впечатлила. И если аналогом можно пользоваться бесплатно, то Концепт по прежнему требует 130 долларов в месяц.

Noodl. Новая версия 1.0 обрела не только свежий функционал, но и конкретную специализацию — интернет вещей. Разработчики, студия Topp, снабдила релиз прекрасными примерами и уроками при запуске программы, которая работает, напомню, как расширение к Chrome.

Craft Prototype. Вышедшая бета-версия долгожданного инструмента, ранее известного как SilverFlows, сопроводилась оптимистическими промо-статьями и не очень воодушевляющими отзывами тех, кто успел попользоваться.

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

uilang. Очень простой фреймворк для дизайнеров, в том числе для прототипирования. Автор также позиционирует его как отличный старт для дизайнера начать понимать и осваивать JS. Примечателен транспайлером (переводчиком): вводите простое предложение вроде clicking on "#switch" toggles class "active" on "#switch" — и получаете какой-никакой js-код.

Blocs. Для тех, кто ленится писать код — можно воспользоваться замечательным визуальным редактором, который превратит вёрстку в удовольствие.

Tumult Hype. Более продвинутые возможности вёрстки (анимация, физика и т.д.) можно исследовать в этом инструменте.

Scratch. А почему бы и не воспользоваться детской площадкой для изучения программирования? :) Самые азы никогда и никому не мешали.

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

Напомню, что руку на пульсе рынка прототипировщиков держит группа Russian Prototyping Club. А своё дальнейшее изучение прототипирования я буду вести у себя в блоге на Medium. Всем успехов!
Tags:
Hubs:
+8
Comments7

Articles

Change theme settings