Pixate: зручний інструмент для мобільного прототипування

image

Деякий час тому ми Redmadrobot задалися метою визначитися з інструментом створення анімації і прототипів. До цього ми встигли випробувати багато — від простого Flinto до набираючого популярність Origami. І в кожному з них щось не влаштовувало: у Flinto і MarvellApp — примітивна інтерактивність, в Origami — тривалий процес прототипування. Нам же потрібний інструмент, який дозволить швидко створити якісний анімаційний прототип для проведення lean-тестувань та презентації замовнику. І ми його знайшли — для нас таким інструментом став Pixate.

Чому Pixate?
Pixate дозволяє проектувати анімацію для мобільних пристроїв (iOS і Android) з допомогою веб-версії і настільного додатки (Mac, Windows). Завантаживши на свій пристрій додаток, ви завжди будете мати при собі прототип, буквально дозволяє «помацати» себе живцем. У Pixate досить велика кількість вбудованих типів анімації — move, scale, rotate, fade, color, reorder. А також інтерактивних жестів — drag, tap, double tap, long press, rotate, pinch, scroll. Для кожного з них передбачено безліч налаштувань. Тим, кому цього здасться мало, може скористатися наявною бібліотекою сценаріїв (Actions), або написати свої на JavaScript. Все це дозволяє легко відтворити звичний нам поведінка мобільних додатків.

Як це працює
Інтерфейс Pixate складається з 6 функціональних блоків:
  1. Layers.
  2. Actions.
  3. Interactions and Animations.
  4. The Canvas.
  5. Layer Properties.
  6. Interaction/Animation Properties.
image

А. Layers
Шар є ключовим елементом у прототипі. Кожному шару можна задати ім'я і видимість (яка працює тільки на полотні, але не під час перегляду на мобільному пристрої).
Шар можна переміщати вище або нижче інших верств, що відіб'ється на розташування елемента серед інших. Шари можна групувати. У цьому випадку дочірні шари будуть успадковувати властивості батьківського.

B. Actions
Скрипти дозволяють автоматично маніпулювати об'єктами у прототипі. У Pixate вже є набір популярних скриптів, але при необхідності, як я вже згадував, можна написати свої власні.

C. Interactions and Animations
Дана область поділяється на дві частини — інтерактивне вплив і анімація. У першому розділі знаходяться жести, використовуючи які ми можемо взаємодіяти з прототипом на пристрої. У другому — набір нативних видів анімації.
Щоб додати якого-небудь елементу прототипу інтерактивність або анімацію, достатньо перетягнути значок анімації або жесту на потрібний шар.

D. The Canvas
Цей розділ складається з двох частин — меню і безпосередньо робочої області.
У меню зазначається назва прототипу, вибирається пристрій, під роздільна здатність якого вибудовується робоча область. Передбачена можливість скасування останніх дій. Також можна поділитися своїм прототипом, відправивши посилання на будь-якій людині (доступно тільки в веб-версії).
Робоча область — візуальне представлення вашого прототипу. Те, що ви бачите в ній, буде відображатися на екрані мобільного пристрою.

E. Layer Properties
Вказані параметри відносяться до вибраного шару. Можна налаштувати його положення, розмір, орієнтацію, змінити зовнішній вигляд (з допомогою колірної заливки або використовуючи імпортовані об'єкти).

F. Interaction/Animation Properties
Тут задаються специфічні для кожного типу інтерактивного впливу і анімації властивості: визначаються умови взаємодії, стиль і плавність анімації, її прихильність до часу та інші налаштування.
При необхідності можна вимкнути яке-небудь властивість, натиснувши на тумблер праворуч від назви.

Розглянемо на прикладі
Не будемо голослівними і розглянемо інтерфейс Pixate на прикладі створення анімації для одного з наших останніх проектів — програми «АльфастрахованиеМобайл».

Крок 1.
Насамперед необхідно імпортувати в проект всі необхідні елементи, з якими ми будемо будувати взаємодію.
Для цього на панелі Layers» перейдемо на вкладку «Assets» і шляхом звичного drag-and-drop перенесемо потрібні нам зображення.

image

Крок 2.
Потім переносимо зображення в робочу область («The Canvas») і вирівнюються так, як нам потрібно. Для кожного зображення автоматично буде створений свій шар, з яким ми в подальшому будемо здійснювати різні маніпуляції.

image

Крок 3.
Тепер зробимо елемент інтерактивним. Для цього в панелі «Interactions» натиснемо на «Tap» і перетягнемо на потрібний нам шар.
Щоб переконатися, що все було зроблено правильно, подивимося на панель «Layer Properties» і побачимо на ній значок «Tap».

image

Крок 4.
Щоб при натисканні (або іншому жесті) на елемент відбувався інтерактивний відгук інтерфейсу, нам потрібно анімувати.
Для цього на необхідний шар з панелі «Animations» перетягнемо потрібний тип анімації.
Тепер ми можемо керувати її властивості на панелі «Interaction/Animation Properties».

image

Вибираємо шар, при взаємодії з яким буде викликатися анімація. У нашому випадку це шар «Button Container» і жест «Tap». Зазначимо тривалість анімації 0.2 секунди, затримку залишимо за замовчуванням (0 секунд).

Крок 5.
Повторюємо кроки 3 і 4, налаштовуючи інтерактивні жести і анімацію до тих пір, поки не досягнемо необхідного результату.

Крок 6.
Коли весь інтерфейс збудований, буде корисно запустити його на пристрій і протестувати.

Ось що у нас вийшло в результаті:

image

Трохи про недоліки
Як би все чудово було, недоліки все ж є.
В деяких випадках виникала проблема з сервером — прототипи веб-версії ставали недоступними, не зберігалися, або автоматично не оновлювалися на мобільному пристрої.
Складний, на перший погляд, процес створення анімації, особливо при спробі поставити умови. Але є достатня кількість відео-уроків, а багато виникають питання вже успішно вирішені силами дизайн-спільноти.
Прикро, що немає можливості в один клік задати для вже створеної анімації зворотний. Наприклад, ви зробили анімацію розкриття бічного меню, але щоб закрити його, виконати ту ж роботу по створенню анімації, але із зворотними параметрами.
Також відсутня можливість скопіювати установки анімації з одного шару на інший. Якщо у вас в інтерфейсі у декількох кнопок повинно бути однакове поведінку, то для кожної потрібно буде настроїти заново.
І ще один істотний недолік — з десктопного додатка немає можливості поділитися прототипом з яким-небудь пристроєм. Це можна зробити тільки при прямому підключенні через usb, що незручно, особливо коли треба показати прототип клієнту або використовувати його для юзабіліті-дослідження.

Порівняння з аналогами
Як прийнято в подібних оглядах, не можна обійти стороною порівняння з конкуруючими продуктами. Візьмемо найбільш видних представників, для створення прототипів з анімацією (програми для анімації в розрахунок не беремо): Origami від Facebook, MarvellApp і Flinto.

Pixate Origami MarvelApp Flinto
Складність в освоєнні Висока Висока Низька Низька
Веб-версія
Десктопна версія Mac, Windows Mac
Мобільні додатки iOS, Android iOS iOS, Android
Обширність бібліотеки анімацій Є всі можливі види нативної анімації. Є всі можливі види нативної анімації. Доступно тільки найбільш часто використовувані види анімації (пов'язані
з переходами між екранами).
Мінімальний набір анімації (Disslove, Push, Серветки, Flip).
Вартість Веб-версія: $16/міс.
Десктопна: $150/рік
Безкоштовно $12-100/місяць $20/місяць
Сайт Pixate Origami MarvelApp Flinto
Висновок
З урахуванням всіх переваг і недоліків ми вважаємо Pixate одним з найпривабливіших гравців на ринку мобільного прототипування і анімації. Проект росте і розвивається, розробники стверджують, що вже працюють над функцією експорту коду (поки тільки для iOS). А це вже серйозна підмога, щоб залишити далеко позаду найближчого переслідувача в особі Origami.

Читайте також:
Central Park, NY: редизайн офіційного програми
Material Design: на Місяць і назад
Редизайн додатка РЗ: концепт

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

0 коментарів

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