Граблі, емулятор, аніматор

Нещодавно я зайнявся пошуком хорошого інструменту для створення прототипів і анімації своїх ідей. В результаті дослідження ринку перетворилося на перегляд спеціалізацій інструментів свого арсеналу і шліфуванням процесу проектування нового продукту.

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

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

  • Архітектор
    Створення функціонального аспекту (інформаційна архітектура, структура, сценарії, механізми та інше).
  • Візуалізатор
    Створення образного аспекту (айдентика, ілюстрації, семантика та інше).
  • Тестувальник
    Перевірка на користувачів та збір відгуків.
  • Граблі
    Створення простого, частіше посторінкового, прототипу, в якому прочісуємо фундамент продукту, щоб виключити помилкові і помилкові ходи на початку шляху.
  • Емулятор
    Створення складного прототипу, як можна більш близького до природної середовищі.
  • Аніматор
    До виробничого процесу такий вид інструменту часто рідко має відношення, щоб клієнт не ображався на нереалізовану показану раннє красу, а розробник не падав в обморок від майбутніх мук. А ось для створення концептів, інтерактивних винаходів та інших своїх експериментів і фантазій – саме те.
  • Документатор
    Ведення і оформлення проектної документації, створення пакета для розробників.
Кожен може на догоду своєму процесу створити свій вид інструменту, який вирішує певні завдання. Наприклад, хтось може використовувати окремі інструменти для створення надихаючих дощок (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 задоволенням познайомлюсь з вашим набором інструментів або власної класификацией. Чи можете поразгоняться і придумати альтернативні назви видів в вищевикладеної (граблі – зачіска, прочісування; тестувальник – агент поширення, барига; емулятор – пандора, мідні труби).

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.