Порівняння 5 інструментів для прототипування додатків
Я взяв за основу процес онбордінґа в додатку IF від IFTTT і вирішив відтворити цей процес в п’яти інструментах для прототипування: Proto.io, Pixate, Framer, Origami від Facebook і Form від RelativeWave. Ціль — порівняти ці інструменти.
На відео нижче видно, як працюють 5 моїх прототипів в порівнянні з оригіналом:
Сторінки чи шари?
Чому я обрав саме ці інструменти? Як виявилось, у більшості програм не вийде реалізувати прототип, настільки насичений анімаціями, як мій (іконки рухаються у різних напрямках і з різною швидкістю). Більшість інструментів дають можливість лише поєднати кілька статичних сторінок. І тільки в кількох більш складних програмах можна анімувати різні об’єкти (або шари) в межіх однієї сторінки.
Поясню детальніше.
Коли в основі сторінки
Принцип роботи таких інструментів: у вас є різні екрани, і ви поєднуєте їх за допомогою маркерів або кнопок. Натискаємо на кнопку на одному екрані — потрапляємо на інший. В таких інструментах зазвичай можна вибрати тип переходу між екранами: плавне проявлення, поява зправа, поява знизу і т.д. Результат виглядає злегка громіздко, але це хороший спосіб нашвидкоруч зробити макет, коли ви ще не визначилися із потоком в додатку (наприклад, скільки екранів буде — і яких, як вони будуть з’являтись, куди будуть вести кнопки і т.д.)
Приклади інструментів, в основі яких сторінки: Briefs, InVision, Notism, Flinto, Fluid, Mockup.io, Prott, POP, Marvel, Balsamiq, Red Pen і Keynotopia. Звісно, в деяких із них можна налаштувати анімації або зони прокрутки на сторінці, але все ж вони не дають відтворити всі можливі взаємодії, які будуть у справжньому додатку.
Коли у основі шари
Кожен елемент інтерфейса або, іншими словами, кожен шар можна зробити клікабельним, перетягуваним, змахуваним… і анімованим. Звичайно, це безумство — створювати прототип всього додатку в такому інструменті: роботи буде скільки, що простіше створити сам додаток. Але це відмінний спосіб спробувати нові взаємодії або налаштувати таймінги анімацій.
Я пробував інструменти Proto.io, Pixate, Framer, Origami від Facebook і Form від RelativeWave. Чесно кажучи, є й інші — Axure та Indigo Studio — але вони здались мені корпоративними (відповідно достатньо дорогими). Можливо, я спробую їх іншим разом.
А поки поговоримо про обрані.
Proto.io
Веб-додаток, є плеєр під iOS та Android.
Proto.io — на диво потужний веб-додаток із купою функцій. Але там буває складно знайти потрібне налаштування, тому що все працює через перетягування, натискання кнопок і вибір значень зі списку.
Щоб реалізувати фішку прототипа IF (різні об’єкти рухаються із різною швидкістю), мені довелось додати кілька власних JavaScript-обчислень. У відповідне текстове поле вміщався тільки один рядок, тому довелось зберігати мої довгі обчислення в окремому файлі на комп’ютері. Хочу також відзначити, що ці JavaScript-обчислення можуть просто і не спрацювати. Якщо щось не працює. обов’язково перевірте консоль свого браузера. (В мене видавало помилку із-за негативного значення змінної).
Передогляд в процесі створення прототипа
Це трохи дратує: щоб подивитися внесені зміни, доводиться щоразу натискати Зберегти проект а потім Передогляд.
Як надіслати прототип клієнту
- в веб: дуже легко — генеруємо публічне посилання накшталт цього. (Таке посилання можна відкрити і з мобільного пристрою, і зберегти на робочий стіл в iOS у вигляді “додатку”). Також можна викласти роботу для широкої аудиторії на Proto.io Spaces.
- через пристрій: можна створити для клієнтів спеціальні акаунти рецензентів (вони безкоштовні) і надати доступ до проекту. Клієнти зможуть дивитися прототипи через додаток (iOS або Android).
Різниця між прототипом і “живим” додатком
Невелика. Але анімації вийшли менш плавні, тому що довелося додати багато взаємодій із кастомними JavaScript-обчисленнями. Прототип непогано працює в веб, але дуже глючить на мобільних. Більш прості прототипи наче як відтворюються з нормальною швидкістю.
Переваги
- легко створювати швидкі макети, тому що є велика бібліотека стандартних елементів інтерфейсу, і багато із них можна налаштувати.
- Proto.io — єдиний (із вибраних п’яти) працює на основі сторінок: у вас може бути кілька екранів у межах одного проекта і ви можете створювати переходи між цими екранами.
- об’єкти можна синхронізувати через Dropbox.
Недоліки
- немає передогляду в реальному часі
- анімації можуть глючити, якщо додати багато взаємодій (як у цьому прикладі)
- всі прототипи зберігаються на їх веб-платформі, а значить, якщо ви видалите акаунт, то не зможете навіть запустити старі прототипи. (Правда є можливість “законсервувати” акаунт за 5$ на місяць: ваші проекти зберігатимуться в системі, і згодом ви зможете реактивувати акаунт)
- відсутня 3D анімація
Прототип
Можна подивитися на Proto.io Spaces (зареєструйтеся, щоб імпортувати його у свій акаунт)
Додаток для iOS:
Додаток для Android:
Вартість:
$29 на місяць або $288 на рік за 5 активних проектів
Є плани для 10, 15 або 30 активних проекта, а також безкоштовний 15-денний тріал.
Pixate
Десктопний додаток для OS X і Windows.
Плеєри під iOS і Android.
Новина від 5 жовтня 2016 року: З 31 жовтня Pixate припинять оновлювати і підтримувати, а Pixate Cloud закриють.
Pixate здається вдалося знайти правильний баланс простоти і функціональності: інструмент набагато могутніший, ніж прості програми на основі сторінок, але при цьому досить швидкий в освоєнні. Досить вивчити керівництво для користувачів та відео туторіали, і ви готові до роботи. А ще є кілька демок, які можна розібрати, щоб зрозуміти, як вони зроблені.
Передогляд
Pixate Studio може використовувати Xcode iOS Simulator (на Mac) для запуску прототипа. Теж можна з’єднатися з додатком (iOS або Android) через локальний WiFi. Такий спосіб відмінно працює, особливо тому, що обидва прототипа (в симуляторі і в додатку) миттєво оновлюються.
Як надіслати прототип клієнту
- Якщо у вас план Cloud (5$ на місяць), можна опублікувати проект. Щоб запустити прототип, клієнту потрібно відсканувати нужно QR-код на сторінці через плеєр (на iOS або Android).
- Також можна додатки скільки завгодно співавторів у ваш Cloud-акаунт і надати їм доступ до прототипів. Їм потрібно буде увійти в свій акаунт у додатку.
- Або можна просто надіслати поштою файл формату .pixate. Цей файл можна запустити в Pixate Studio (також можна буде побачити, як прототип зроблено, і щось змінити).
Різниця між прототипом і “живим” додатком
Немає шостої сторінка, тому що полотно в Pixate має обмежену ширину.
Переваги
- можна швидко освоїти
Недоліки
- є деякі баги, іноді доведеться шукати обхідні шляхи.
Прототип
можна подивитися в додатку| або завантажити .pixate файл
Додаток для Mac або PC:
Мобільні додатки:
Ціна:
Pixate Studio
Безкоштовно! (Раніше було $149, поки Google не придбав Pixate в липні 2015.)
Pixate Cloud
$5 з користувача на місяць або $50 з користувача на рік. (Є безкоштовний 30-денний тріал)
Facebook Origami
Запускається на Quarz Composer у Apple для Mac.
Є оглядач для тестування на iPhone та iPad.
Як ви ймовірно знаєте, Origami створено тією ж командою дизайнерів Facebook, які працювали над Paper. Origami — не окрема програма, а щось накшталт плагіна для Quartz Composer, візуального програмного середовища, яке є частиною інструментів розробників Apple.
Ви програмуєте в Quartz Composer поєднуючи патчі один із одним. Різні патчі мають різні функції, а Origami основним чином є набором додаткових патчів, розроблених спеціально для дизайну інтернейсів додатків. Багатьом людям (не мені) такий підхід подобається більше, ніж писати код; але тут всеодно доводиться описувати процес у форматі “якщо це, тоді зробіть те, із значенням із цього розрахунку, але якщо ні…” — а це всеодно свого роду програмування, просто не через рядки коду, а через поєднання патчів.
І доречі: IDEO також створили фреймворк для прототипування на базі Quartz Composer, він називається Avocado. Там є кілька функцій, які можуть знадобитись для деяких проектів: інтеграція по Bluetooth, інтерактивна iOS клавіатура, патч “дисковий телефон” (dial) для прокручування круглих елементів інтерфейса, патч “flip-картка” (flippable card). Шари також можна зробити перетягуваними.
Передогляд в процесі створення прототипа
- На дестопі: у Quartz Composer є режим перегляду, і будь-які зміни виконані вами в редакторі, будуть миттєво відображені у цьому вікні перегляду.
- На пристрої: Можна тестувати на iOS пристрої, підключеному до вашого Mac — в додатку Origami Live. Додаток реагує на будь-які жести (тапи, змахування, тощо), але це насправді проекція того, що звпущено в Quartz Composer. Тож якщо ваш Mac не тягне прототип на 60fps, в Origami Live на мобільному він не буде працювати швидше.
Як надіслати прототип клієнту
Це буде складно. Звісно ж, можна просто запустити прототип і виконати запис екрана, але тоді зникає весь сенс інтерактивного прототипа; з таким же успіхом можна зробити прототип у After Effects. Єдиний реальний спосіб випробувати прототип на іншому пристрої — це скористатися тими ж засобами. У клієнта має бути Mac, куди він встановить Quartz Composer + Origami, щоб запустити ваші прототипи— звичайно ж, після того, як зареєструється як розробник Apple.
Різниця між прототипом і “живим” додатком
Він може працювати трохи повільніше, ніж “живий” додаток, в залежності від вашого комп’ютера. Quartz Composer — досить потужна річ, він змусить кулер вашого комп’ютера “збожеволіти”, особливо якщо у вашого mac-а слабенька відеокарта (наприклад Mac mini) або якщо підключено кілька моніторів (моя вина!). Мій максимум — 20 fps, навіть коли під’єднано всього один монітор.
Переваги
- можливо, документації малувато, зате в них дуже активна спільнота користувачів. Плюс, ви знайдете кілька відео, туторіалів і блог-постів.
Недоліки
- буває складно зрозуміти, як що зробити і які патчі (із безлічі) використовувати.
- складно сказати, наскільки активно йде розробка Quartz Composer. Останнє оновлення датується листопадом 2011 року. Але, у той же час, Apple можливо випустить заміну (для проектування візуальної взаємодії через Quarz) перш ніж закривати цей проект.
- Последняя версия вышла в ноябре 2011. Но, в то же время, Apple возможно выпустит замену (для проектирования визуального взаимодействия через Quartz) прежде чем закрывать этот проект.
Прототип
Додаток для Mac:
інструкції з встановлення
Оглядач iOS:
Origami Live
Ціна:
Безкоштовно! Потрібен тільки акаунт розробника Apple, але його теж можна зробити безкоштовно.
Framer
Framer Studio — додаток для прототипування для Mac, але для Framer.jsonly достатньо Safari або Chrome.
Не треба нічого перетягувати, натискати кнопки або з’єднувати точки — у Framer вам потрібно програмувати. Програмісти почуватимуть себе як вдома, дизайнери, можливо — не дуже. Але не такий страшний чорт як його малюють, — у Framer Studio використовує спрощена версія JavaScript: CoffeeScript. Але факт того, що сам рушій (Framer.js) використовує JavaScript, відкриває перед нами розширені можливості: ви можете робити все, що можливо у веб браузері, тобто можете приєднатися до сервера щоб використовувати живі дані або створити Twitter-клієнт, який показуватиме твіти в режимі реального часу.
Передогляд в процесі створення прототипа
- на десктопі: Framer Studio має живе інтерактивне прев’ю праворуч; воно оновлюється миттєво, коли ви щось змінюєте.
- на пристрої: Є додатки для Android та iOS. Вони всі приєднуються до Framer Studio, коли знаходяться в одній мережі WiFi, і автоматично оновлюють прототип щоразу, як ви зберігаєте його у Framer Sudio.
Як надіслати прототип клієнту
Одним кліком ви можете згенерувати публічну сторінку (накшталт цієї), яку можна переглядати в Chrome, Safari або в мобільному браузері. (Посилання можна додати на домівку iOS як ‘додаток’). Те ж посилання можна відкривати в оглядачах (які по суті є браузерами без Chrome) для iOS і Android. Великий прототип накшталт нашого може завантажуватися у оглядачі кілька секунд, але після цього анімації працюють плавно.
Різниця між прототипом і “живим” додатком
Функціональність цього прототипа трохи ширша ніж у інших чотирьох: тут можна перемикатися між режимами Вхід, Реєстрація та Змінити пароль на останній сторінці. (Ви не зможете насправді авторизуватися або зареєструватися, але навіть це було б можливо реалізувати у Framer).
Переваги
- Кращої інтеграції зі Sketch чи Photoshop не існує: шари й об’єкти мають ті ж назви, які ви їм дали в процесі проектування дизайну. (Framer.js містить mac-додаток Framer Generator який робить той же трюк.)
- У Framer можливо все, що можна робити з JavaScript: наприклад, брати справжні дані з веб-серверів або використовувати акселерометр.
Недоліки
- Вам доведеться для всього писати код: для кожної анімації чи взаємодії. Ви маєте знати або ви маєте познайомитись із CoffeeScript, можливо навіть й із JavaScript.
Прототип
переглянути онлайн| завантажити проект .framer
Додаток для Mac:
Framer Studio
Додатки для iOS:
Framer Preview | Frames
Додаток для Android:
Framer
Додаток для Windows 10 Mobile:
Framed
Вартість:
Framer.js, фреймворк JavaScript — безкоштовний і з відкритим кодом.
Framer Studio коштує $129. (Є безкоштовна демонстраційка на 8 годин активного користування)
Form від RelativeWave
Додатки для Mac з можливістю перегляду на iPhone чи iPad.
Form — це покищо достатньо молодий інструмент (його запустили у вересні 2014). Його творці явно надихалися рішеннями Facebook і IDEO на базі Quartz Composer. Хлопці з RelativeWave скоріш за все подумали “Як би виглядав Origami без всього цього зайвого багажу з Quartz Composer?” Тому в Form містяться тільки ті патчі, які вам потрібні: і чимало з них точно такі ж, як в Origami. Загалом, користувачі Origami відчують себе як вдома.
Передогляд в процесі створення прототипа
Прототип взагалі-то запускається в iOS додатку, під’єднаному через WiFi чи USB. Ви помітите, що якщо пристрій не підключений, то за подвійним кліком на зв’язок між патчами дані зчитуватися не будуть. Звісно, не завадила б можливість перегляду прямо в додатку на Mac (як в Quartz Composer) і, здається, така фіча вже запланована.
Як надіслати прототип клієнту
Додаток для перегляду iOS (безкоштовний) дозволяє відкривати файли формату .form, тож можна просто відправити файл клієнту поштою, щоб він запустив його на своєму iOS пристрої.
Різниця між прототипом і “живим” додатком
На мій погляд — не суттєва. Якщо раптом знайдуться, обов’язково напишіть мені.
Переваги
- У порівнянні з Origami: прототип запускається на пристрої через рідний додаток, тож працює набагато чуйніше, ніж в Origami Live.
- Можна використовувати камеру пристрою і геопозіцію. (Origami може використовувати веб-камеру Mac)
Недоліки
- Ті ж самі, що й в Origami, якщо у вас складний прототип: в результаті виходить каша. Щоб бачити повну картину, гуртуйте патчі.
Прототип
Додаток для Mac:
Додаток iOS:
Вартість:
Безкоштовно! Додаток для Mac раніше коштував $ 79.99, але після того, як Google придбав RelativeWave в листопаді 2014 роки (через кілька місяців після запуску), вони зробили його безкоштовним.
Чим користуватися?
Якщо ви ще не користувалися цими інструментами, і хочете зробити швидкий прототип, раджу вам:
- Pixate
- або Proto.io
Але якщо ви готові витратити час на вивчення потужного інструменту, то вам підійде:
- Form, якщо віддаєте перевагу візуальному програмуванню
- Framer, якщо вам більше подобається писати код
Я познайомився з усіма п’ятьма (хоча б трохи), тому я б використовував різні інструменти в різних ситуаціях:
- Інструмент на основі сторінок, коли я лише працюю над потоком в додатку. На такій ранній стадії високорівневий прототип не потрібен.
- Для низькорівневих прототипів також можна використовувати Proto.io: там є стандартні елементи інтерфейсу для iOS, Android і Windows Phone, також можна з’єднати екрани між собою. На додачу у вас буде додаткова перевага: зовнішній вигляд прототипа потім можна покращити у Sketch або Photoshop.
- Pixate, коли вже є UI дизайн і об’єкти, а анімації не надто складні.
- Form, якщо в прототипі потрібно використовувати сенсори пристрою чи камеру.
- Frame для всього іншого.
Ще трохи
Всі ці інструменти достатньо молоді, і ми все ще шукаємо максимально ефективні підходи до проектування взаємодії, але я бачу великі перспективи у Framer. Мені дуже подобається універсальність і потужність цього інструменту, і я знайшов собі відмінний привід погратися з ним довше: я пишу книгу про Framer!
Книга про Framer — це інструкція для людей, які не мають досвіду в програмуванні. Вона починається з основ CoffeeScript. Також там будуть туторіали, за якими ви зможете відтворити популярні додатки.
Новина від 30 березня 2016 року: Книга готова!
Спочатку опубліковано на cptv8.com.
Це переклад статті Теса Мата “Five app prototyping tools compared”.
