Proto.io, Pixate, Origami: Огляд інструментів для прототипування застосувань з підтримкою Sketch

1. Сторінки проти шарів
2. посторінкові інструменти
3. пошарові інструменти
4. Proto.io
5. Перегляд превью при створенні прототипу
6. Відправка прототипу клієнту
7. Різниця між прототипом і додатком
8. переваги
9. Pixate
10. прев'ю
11. Відправлення клієнтові
12. переваги
13. недоліки
14. прототип
15. Facebook Origami
16. прев'ю
17. Різниця з додатком
18. переваги
19. недоліки
20. Framer
21. прев'ю
22. Відмінності від додатка
23. переваги
24. прототип
25. Form від RelativeWave
26. прев'ю
27. Відправлення клієнтові
28. Відмінності від додатка
29. переваги
30. прототип
31. Principle
32. Прев'ю в процесі створення прототипу
33. Відправка прототипу клієнту
34. Відмінності від додатка
35. Преимущества
36. Flinto для Mac
37. прев'ю
38. Відправлення клієнтові
39. Відмінності від додатка
40. Преимущества
41. Tumult Hype
42. прев'ю
43. Відправлення клієнтові
44. Відмінності від додатка
45. Преимущества
46. Недоліки
47. прототип
48. решта інструментів
49. Axure
50. Indigo Studio
51. PencilCase
52. Atomic
53. Justinmind
54. Mockingbot
55. iAd Producer
56. що використовувати

Я заново створив onboarding користувачів IF від IFTTT в п'яти високорівневих інструментах для створення прототипів, щоб зрозуміти різницю між ними. Це були Proto.io, Pixate, Framer, Origami від Facebook і Form від RelativeWave.

Дивіться, як ці п'ять інструментів поводяться в порівнянні з реальністю.

Сторінки проти шарів

Чому я вибрав саме ці п'ять інструментів? Я помітив, що відтворення чогось, навантаженого анімацією (іконки, що рухаються в різних напрямках і на різних швидкостях) неможливо в більшості пакетів для прототипування.

Більшість інструментів дозволяють всього лише підключати статичні сторінки, в той час як більш складні системи дозволяють анімувати різні об'єкти або шари в рамках заданої сторінки.

На цьому я зупинюся детальніше.

посторінкові інструменти

В такому інструменті ви макетіруете різні скріни додатки, а потім створюєте посилання і кнопки, щоб з'єднати їх між собою. Ви натискаєте на кнопку в будь-якому місці екрану, щоб перейти на інший екран.

Посторінкові інструменти також пропонують вибір різних переходів між скринами. Це може бути, наприклад, ефект затінення, зрушення справа наліво або від низу до верху і так далі. Це досить корявий функціональність, але її достатньо для швидкої генерації макетів на етапі продумування поведінки додатки (які скріни потрібні і скільки їх повинно бути, як вони будуть з'являтися, куди повинні вести кнопки і так далі).

Приклади посторінкових інструментів - 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 - напрочуд потужна програма; в ньому багато-багато функцій. Але через те, що все працює за принципом drag-and-drop - потрібно натиснути на кнопку і вибрати значення зі списку - буває вкрай складно відшукати те, що потрібно.

Природа прототипу додатку IF така, що різні об'єкти рухаються на різній швидкості. Тому мені довелося додати кілька нестандартних JavaScript-обчислень.

Надане однорядкове текстове поле було дуже малим для довгих розрахунків, так що для повного огляду мені доводилося зберігати код в текстовому файлі на своєму комп'ютері.

Також важливо, що ці JavaScript-вирази можуть спрацювати некоректно без жодного попередження про помилку. Будьте уважні і перевіряйте консоль веб-браузера, якщо щось не працює (у мене була помилка, викликана змінної, яка містила від'ємне значення).

Перегляд превью при створенні прототипу

А ось це порядком дратує: кожен раз, коли ви хочете перевірити результат внесених змін, потрібно спочатку натиснути на Save Project (зберегти проект), а потім - на Preview (превью).

Відправка прототипу клієнту

В інтернеті. Все просто: ви можете згенерувати публічну посилання - таку як ця . (Ці посилання також відкриваються в мобільному браузері і можуть бути додані на домашній екран iOS як додаток). Ви також можете уявити свою роботу широкій публіці на Proto.io Spaces .

На пристрої: ви можете зробити своїм клієнтам безкоштовні акаунти для перегляду, надавши їм доступ до проекту. Вони зможуть запускати прототипи в додатках під iOS або Android.

Різниця між прототипом і додатком

Різниця невелика. Анімація менш плавне, хоча це може бути викликано великою кількістю інтерактивності з кастомними JavaScript-кодом для скролла. В інтернеті це буде працювати непогано, але на пристрої все виглядає повільно. Швидкість відтворення краще у більш простих прототипів.

переваги

• Легко генерувати швидкі макети через великі бібліотек стандартних елементів інтерфейсу, багато з яких можна змінити під свій формат.
• Proto.io - єдиний з аналізованих інструментів, який також і посторінковий: ви можете зробити кілька скроневої в одному проекті і створити переходи між ними.
• Є синхронізація з Dropbox для збереження початкових кодів.

недоліки

• Немає превью в реальному часі.
• Анімації програються повільно при наявності великої кількості взаємодій, як в моєму прикладі.
• Всі ваші прототипи зберігаються на їх веб-платформі, тому ви не можете їх запускати, якщо раптом видаліть свій аккаунт (є можливість заморозити свій аккаунт: проекти залишаться на місці, коли ви відновите свій аккаунт. І стоять заморожені акаунти $ 5 в місяць).
• Чи не підтримується 3D-анімація.

прототип

дивіться на Proto.io Spaces (Потрібно зареєструватися, щоб імпортувати прототип на свій аккаунт).

Ціна: $ 29 в місяць або $ 288 на рік для п'яти активних проектів.

Також передбачені тарифні плани для 10, 15 або 30 активних проектів і безкоштовна 15-денна тріал-версія.

Pixate

Десктопних програм для OS X і Windows. Плеєри для iOS і Android.

Pixate , Схоже, зайняв золоту середину між простотою використання і функціональністю: в ньому можна зробити набагато більше, ніж в більш простих посторінкових інструментах.

Крива зростання продуктивності не дуже крута, але після перегляду купи туторіали і відеоуроків ви освоїте це додаток. Також є кілька демо , Які можна розібрати, щоб зрозуміти, як вони створювалися.

прев'ю

Pixate Studio може використовувати iOS Simulator від Xcode (на Mac) для запуску прототипу. Ви також можете підключитися з iOS або Android через локальний Wi-Fi. Це відмінне рішення, особливо тому, що і симулятор, і додаток оновлюються одночасно.

Відправлення клієнтові

• Якщо у вас є підписка Cloud ($ 5 в місяць), ви можете опублікувати проект. Тоді клієнти зможуть сканувати QR-код на сторінці, і запускати прототип в iOS або Android плеєрі.
• Ви також можете додати в свій аккаунт Cloud скільки завгодно колег, щоб надати їм доступ до прототипам. Їм потрібно буде залогінитися в додатку під своїм акаунтом.
• Або ви можете просто вислати людині файл .pixate. Його можна відкрити і запустити в Pixate Studio (а також подивитися його структуру і внести зміни).

Відмінності від додатка

Шоста сторінка відсутня, тому що полотно Pixate обмежений по ширині.

переваги

Досить легко навчитися працювати в додатку.

недоліки

Є баги. Щоб обійти баг, іноді доведеться помучитися.

прототип

Перегляд в додатку. Завантажити файл .pixate . Mac або PC- прикладна програма .

Ціна: Pixate Studio - безкоштовно. (Воно коштувало $ 149, поки Google не викупив Pixate в липні 2015.) Pixate Cloud - $ 5 в місяць на кожного користувача або $ 50 в рік на кожного користувача. (Є безкоштовна trial-версія на 30 днів.)

Facebook Origami

Працює на Apple's Quartz Composer для Mac. Є переглядач для тестування на iPhone або iPad.

Як ви вже, напевно, знаєте, Origami був створений командою дизайнерів Facebook, яка працювала над Paper . Origami - це не окрема програма, це плагін Quartz Composer , Середовища візуального програмування, що є частиною інструментів для розробки під Apple.

Ви програмуєте в Quartz Composer, підключаючи патчі один до одного. Різні патчі виконують різні функції, а Origami - це більше набір додаткових патчів, створених для дизайну інтерфейсів додатків. Багато людей (але не я) віддадуть перевагу писати код, але в разі, коли вам потрібно описати щось на кшталт «якщо це, то зробіть те, багатозначно від цього розрахунку; а якщо немає ... », вам все одно доведеться програмувати, тільки шляхом з'єднання декількох патчів, а не написання рядків коду.

До речі: IDEO також створив фреймворк для прототипування на Quartz Composer під назвою Avocado . У ньому є кілька функцій, які будуть досить зручні для деяких проектів: інтеграція Bluetooth, інтерактивна iOS-клавіатура, патч для фліп-карти. Шари також можна зробити рухливими.

прев'ю

• На машині: Quartz Composer є переглядач, і будь-яка зміна, яку ви робите в редакторі, відразу ж відображається в ньому.
• На мобільному пристрої: в додатку Origami Live ви можете протестувати на iOS-пристрої, підключеному до вашого Mac. Додаток реагує на всі жести (торкання пальцем, свайп і так далі), але, по суті, просто показує, що відбувається в Quartz Composer. Так що, якщо у вашого Mac є проблеми з відтворенням прототипу на швидкості 60fps, на Origami Live справа навряд чи піде швидше.

Відправлення клієнтові

А ось тут почнуться труднощі. Звичайно, ви можете зробити запис прототипу з екрану, але це вбиває саму мету створення інтерактивного прототипу. Ви також можете спробувати зробити щось в After Effects.

Єдиний вірний шлях протестувати прототип на іншій машині - мати на ній ті ж настройки. Так, якщо у вашого клієнта є Mac, він може встановити Quartz Composer + Origami, щоб запускати ваші прототипи на своєму комп'ютері. Зрозуміло, для цього клієнту також доведеться зареєструватися як Apple-розробнику.

Різниця з додатком

Прототип може програватися трохи повільніше реального додатки, але це залежить від машини. Quartz Composer досить вимогливий до ресурсів, так що може напружити ваш комп'ютер, особливо якщо немає хорошої графічної карти (як в моєму Mac mini) або коли підключено кілька моніторів. Мій рекорд по відтворенню - 20 fps, навіть при використанні одного монітора.

переваги

документації замало, але є дуже активне ком'юніті користувачів. Плюс також є відеоуроки, туторіали і навчальні записи в блогах.

недоліки

• Може бути важко зрозуміти, як реалізувати ту чи іншу річ і які патчі з усього їх різноманіття для цього використовувати.
• Незрозуміло, чи йде зараз активна розробка Quartz Composer. Остання версія датується листопадом 2011 року. Однак Apple начебто збирається запустити інструмент на заміну (для дизайну візуального взаємодії з використанням Quartz), перш ніж «заморозити» цей.

прототип

Завантажити файл .qtz .

Ціна: безкоштовно. Вам знадобиться обліковий запис розробника Apple, але він також безкоштовний.

Framer

Framer Studio - це інструмент для прототипування на Mac, але Framer.js вимагає тільки Safari або Chrome.

Ніякого drar-and-drop, натискання на кнопки або підключення посилань - в Framer вам доведеться кодувати. Програмісти, на відміну від дизайнерів, будуть відчувати себе як вдома. Але і тут не все так складно: Framer Studio працює на спрощеній версії JavaScript - CoffeeScript. Причому сам движок (Framer.js) працює як раз на JavaScript, що відкриває багато нових можливостей: ви можете реалізувати все, що можливо в веб-браузері, - наприклад, підключитися до веб-сервера для роботи з даними в реальному часі або створити Twitter -клієнт, який показує твіти в реальному часі.

прев'ю

• На машині: Framer Studio є живий інтерактивний превьюер справа; він оновлюється миттєво після кожного скоєного зміни.
• На мобільному пристрої: є додатки для Android і iOS. Всі вони підключаються до Framer Studio, якщо пристрої розташовано в одній Wi-Fi-мережі, і автоматично оновлюють прототип кожен раз, коли ви зберігаєте в Framer Studio.

Відправка прототипу клієнту

В один клік ви можете згенерувати публічну сторінку (як ця ), Яку можна переглянути в Chrome, Safari або в мобільному браузері. Посилання можна додати на домашній екран iOS як додаток. Ту ж посилання можна відкрити в переглядачах (це, по суті, просто браузери-без-Chrome) для iOS і Android. Великий прототип на зразок мого прикладу зажадає декількох секунд для завантаження в переглядач, але потім все буде програватися плавно.

Відмінності від додатка

Цей прототип зміг зробити щось більше, ніж інші чотири: ви можете перемикатися між режимами Sign in (увійти), Sign up (зареєструватися) і Reset Password (змінити пароль) на останній сторінці. Фактично ви не можете залогінитися або зареєструватися, але навіть це в Farmer можна відтворити.

переваги

• Інтеграція з Sketch або Photoshop дуже до речі: ви можете посилатися на шари або об'єкти по іменах, які привласнили їм під час дизайну. (У Framer.js є додаток Framer Generator під Mac, яке дозволяє робити те ж саме).
• Все, що можливо в рамках JavaScript, - використання живих даних або акселерометра - можливо і в Framer.

недоліки

Доведеться писати код для всього, для кожного елемента анімації і взаємодії. Вам знадобляться навички в CoffeeScript, а також в JavaScript.

прототип

Подивитися онлайн , скачати проект .framer , Mac-додаток .

Ціна: Framer.js, JavaScript-фреймворк, має відкритий код і поширюється безкоштовно. Framer Studio коштує $ 99. (Є також безкоштовна 14-денна тріал-версія)

Form від RelativeWave

Mac-додаток з переглядачем для iPhone або iPad.

Form - все ще дуже молоде додаток (його запустили тільки у вересні 2014 року), і його творці надихнулися тим, що Facebook і IDEO творять на базі Quartz Composer.

Хлопці з RelativeWave, можливо, подумали: «Як би виглядав Origami без багажу Quartz Composer?» Учасники Origami будуть тут як вдома; безліч патчів такі ж, але в Form є саме ті патчі, які вам потрібні.

прев'ю

Прототип працює на приєднаних iOS-додатку (через Wi-Fi або USB). Ви помітите, що там немає зчитування значень при подвійному натисканні на сполученні між двома патчами, якщо не підключено ніяке пристрій. Переглядач на MАС, як в Quartz Composer, був би безумовно зручним, і, схоже, у розробників є такі плани.

Відправлення клієнтові

Безкоштовний iOS-переглядач може відкривати файли .form, так що ви можете просто відіслати файл клієнту по електронній пошті, щоб він подивився його на своєму iOS-пристрої.

Відмінності від додатка

Я думаю, що їх небагато. Дайте знати, якщо виявите різницю.

переваги

• У порівнянні з Origami - прототип працює в оригінальному форматі на пристрої, так що він більш чутливий, ніж на Origami Live.
• Ви можете використовувати камеру вашого пристрою і місце розташування (Origami може використовувати веб-камеру вашого Mac).

недоліки

Такі ж, як в Origami: зі складний прототипом ви отримаєте гальмування. Угруповання патчів допомагає зберегти нормальний огляд.

прототип

Завантажити файл .form , Mac-додаток .

Ціна: безкоштовно. Mac-додаток варто було раніше $ 79.99, але коли Google купив RelativeWave в листопаді 2014 роки (всього через місяць після запуску), воно стало безкоштовним.

В останні кілька тижнів вийшли два абсолютно нових інструменту для прототипування sketch додатків, і засновані вони на зовсім різних принципах роботи: Principle і Flinto для Mac.

Третій інструмент, Tumult Hype 3, не такий новий. У мене був цей інструмент для HTML5-анімації, починаючи з версії 2, але я ніколи толком його не використав і не уявляв, як його застосувати до прототіпірованію додатків, поки не отримав коментар від одного з читачів.

Всі три програми пропонують анімацію на основі шарів, і вони дозволили відтворити досить близький клон IF від IFTTT.

І ось ці клони в порівнянні з оригіналом:

Principle

Mac-додаток з плеєром під iOS.

Чого не вистачало в інших інструментах для прототипування - анімація з тимчасової шкалою. Високорівневі інструменти, які я пробував раніше, могли працювати трьома способами:

• Подача сигналу: Поєднуючи різні вузли (Origami, Avocado, Form).
• GUI: Натискання кнопок і установка значень (Proto.io, Pixate).
• Code: Написання коду, який запускається певними подіями (Framer).

Анімація з тимчасовою шкалою може бути знайома тим, хто використовував Adobe After Effects або - пам'ятаєте такі часи? - Adobe Flash. (Потрібно згадати, що в Proto.io також була анімація з тимчасовою шкалою між станами на сторінці.) Principle використовує тимчасову шкалу внизу екрану для анімації об'єктів між сторінками.

І є друга тимчасова шкала. Зі шкалою Drivers (драйвери) у верхній частині екрану, яка насправді є шкалою значень, ви можете застосовувати постійно змінюється положення перетягуваного або прокручується шару для анімації інших об'єктів на тій же сторінці. Скролл вліво або вправо в цьому прототипі IF змінює позиції майже всіх об'єктів.

Так як в цьому прототипі сторінковий скролл (по типу каруселі) переміщує безліч інших об'єктів, мені потрібно було спланувати, як акуратно і добре розмістити ключові точки на часовій шкалі. Мені навіть довелося розмістити свій екран в подивіться-я-справжній-розробник портретний режим. (Більше це не потрібно: я використовував першу версію Principle, в якій не можна було проскролліть список.)

Але, знову ж таки, середньостатистичний проект не буде містити так багато рухомих частин, з'єднань з одним жестом для скролла.

Прев'ю в процесі створення прототипу

У Principle є вбудоване вікно для попереднього перегляду, яке також дозволяє записувати відео або анімовану гифку прототипу. Працює воно відмінно.

Перегляд з мобільного пристрою також на рівні: підключіть свій iOS-пристрій через USB і відкрийте Principe Mirror - воно розпізнається автоматично. Будь-які вироблені вами зміни тут же підтягуються, навіть не потрібно нічого зберігати. Прототип також продовжить програватися після відключення по USB.

Відправка прототипу клієнту

iOS-додаток Principle Mirror може відкривати і програвати файли Principle. (Рада професіонала: потрійне дотик пальцем перезапустить прототип.) Пам'ятайте, що файли не зберігаються в додатку, так що краще зберігати файл .prd в додатку Mail або іншому місці для того, щоб відкривати повторно в Principle Mirror.

Відмінності від додатка

Практично немає, за винятком білої кнопки на сторінці 6 - вона не кликабельна. Я намагався додати для цієї кнопки стан touch down (натиснута), але кожне взаємодія, що не запускається скролл або жестом перетягування, потребує нової сторінки. Можна легко продублювати існуючу сторінку і зробити деякі зміни, але в даному випадку це велика сторінка, і всі зміни в драйверах на оригінальній сторінці викликали непередбачувані руху об'єктів, коли я кликав на кнопку.

Преимущества

• Тимчасові шкали. Відмінний візуальний огляд всіх анімованих мною об'єктів.
• Швидке і просте створення відео або gif-анімації.

Недоліки

• Ні 3D.
• Анімація завжди йде між сторінками (які названі артбордамі в in Principle), представляючи різні стани. Так що доведеться створити їх дуже багато. (Крім анімацій, які активуються скролл або жестом перетягування, як в цьому прототипі).

прототип

Завантажити файл .prd , Mac-додаток (Можна завантажити безкоштовну тріал-версію).

Ціна: Principle коштує $ 99. Є 14-денна тріал-версія, вважаються тільки ті дні, коли ви використовуєте програму.

Flinto для Mac

Mac-додаток з плеєром для iOS.

Спочатку я подумав «Це схоже на посторінковий Flinto (веб-додаток). Різниця тільки в тому, що можна трохи змінювати переходи між сторінками. Подумаєш ».

Але переходи мають і зворотний відгук: використовуючи жест свайп для переходу на наступну сторінку, ви можете контролювати швидкість переходу своїм пальцем (як часто робиться в «рідних» iOS-додатках). До того ж об'єкт на сторінці теж може бути анімований під час переходу, так що я міг зробити прототип, розбитий на сім сторінок, з переходом між ними.

Але це не означає, що мені було потрібно більше часу на створення прототипу. Transition Designer (окремий від полотна вид, в якому можна швидко перемкнутися між початковим і кінцевим станами переходу) - дуже швидкий спосіб налаштування переходу через миттєвого візуального відображення змін. Я закінчив прототип IF в Flinto швидше, ніж в будь-якому іншому тестируемом мною інструменті.

Підхід, заснований на переходах, не має недоліків, хоча: якщо ви хочете анімувати різні параметри одного і того ж об'єкта з різною тривалістю (мається на увазі непрозорість і позиція), тоді вам не пощастило. Як приклад: промені позаду іконок iOS на сторінці 4 залишаються видимими при свайпа на наступну сторінку, тому що я не зміг зменшити тривалість зміни непрозорості.

прев'ю

У Mac-додатку є переглядач, і ви можете через Wi-Fi використовувати додаток iOS для перегляду в реальному часі. Ви можете використовувати обидва переглядача одночасно, і для цього навіть не потрібно зберігати результат своїх змін.

Відправлення клієнтові

Безкоштовне iOS-додаток може відкривати файли .flinto, так що можете просто відправити файл клієнту поштою, і він зможе відкрити його на своєму iOS-пристрої.

Відмінності від додатка

Іконки Instagram і Google Calendar знаходяться позаду, коли свайпа на сторінку 2, тому що сторінки розташовані або поверх один одного, або позаду один одного. Чотири променя світла за іконкою iOS з'являються дуже рано і зникають занадто пізно через те, що окремий таймінг для зміни непрозорості був неможливий; те ж саме і з іконкою повідомлень. Свайп назад також виявить деякі артефакти анімації: зворотні переходи, схоже, не завжди працюють ідеально.

Преимущества

• Transition Designer виявився найшвидшим способом створення переходів.
• Sketch-імпорт. (Тільки один раз, правда - ніяких оновлень після.)

Недоліки

• Обмеженість тільки переходами між сторінками (але сторінка може містити прокручуваний області).
• Те ж, що і в Principle: якщо скрін має кілька станів, вам знадобиться зробити кілька сторінок.

прототип

Завантажити файл .flinto , Mac-додаток (Завантажити безкоштовну тріал-версію).

Ціна: Flinto для Mac коштує $ 99. Є безкоштовна 14-денна тріал-версія.

Tumult Hype

Mac-додаток з переглядачем для iOS.

І ще один додаток з тимчасовою шкалою для анімації.

Цей прототип більше схожий на якийсь хакерський продукт: ви помітите, що анімація не до кінця відповідає вашим дотиків. Це наближений варіант. За фактом, жест для горизонтального зсуву буде скролл через паузу на часовій шкалі.

Думаю, мені пощастило, що я все-таки зміг зробити прототип в Hype, тому що ця програма не може відтворити всі типи мобільних взаємодій. Але мені завжди хотілося вивчити, як використовувати Hype: це класний інструмент ... для створення HTML5-анімацій.

прев'ю

Функція превью в Hype (⌘⏎) відкриває проект в вашому браузері або в додатку Hype Reflect, запущеному в тій же Wi-Fi-мережі.

Відправлення клієнтові

Проект Hype - це просто веб-сторінка, так що ви можете завантажити його в папку і відправити посилання по пошті. Або навіть простіше - опублікувати в Dropbox безпосередньо з Hype.

Відмінності від додатка

Ви не можете повернутися на попередню сторінку, тому що кожна сторінка - це окремий кадр з тригером для завантаження наступного кадру, коли ви додивлятися анімацію до кінця. Також тут немає можливості перескочити через першу або останню сторінку і побачити продовження анімації.

Преимущества

Hype можна також використовувати для створення красивих інтерактивних веб-сайтів. Версія Pro (з доплатою $ 49,99) також дозволяє робити адаптивні макети.

Недоліки

Анімації не працюють так плавно, як в інших інструментах.
Можливо, не зовсім підходящий інструмент для відтворення кожної деталі взаємодій додатки, тому що створювався не для цього.

прототип

Завантажити файл .hype

Ціна: Tumult Hype 3 коштує $ 49,99. Є безкоштовна 14-денна пробна версія.

решта інструментів

Я також протестував Axure и Indigo Studio . Ще коментатори згадали (або прорекламували) кілька інших інструментів: PencilCase , Atomic , Justinmind и Mockingbot . І що за штука з Apple's iAd Producer? Чи можна її використовувати для прототипування?

Axure

Схоже, це популярний інструмент, і він навіть розглядається як галузевий стандарт. Мій сусід по коворкінг дуже його любить. Але він створює дизайн сайтів, а в сайтах не використовується багато жестів. Ось чого не вистачає Axure і багатьом іншим інструментам: в простому прокручуваному віконці жест скролла або зсуву може запустити щось ще.

Indigo Studio

Silverlight ... Він вимагає установки Silverlight, а у мене на машині немає навіть Flash.

Правда, особливої ​​шкоди мені це не принесло.

Я б відніс Indigo Studio до тієї ж категорії, що і Axure: це, в основному, інструмент для клікання, прототипирования вебсайтів, а не для взаємодій в мобільних додатках. Скролінг і зрушення потрібно симулювати.

Оновлення: хлопці з Infragistics спробували відтворити IF, щоб показати, на що здатний Indigo Studio.

PencilCase

Спочатку виглядає привабливо через обіцянки:

• Менше коду: програма користується природною мовою. ( «Коли натиснута кнопка X, перейдіть на картку XYZ»).
• Анімація на основі фізики.
• Легка інтеграція 3D-моделей.
• Керуйте своїм прототипом рухами долоні і руки, використовуючи Myo .
• Інтеграція iBeacon.
• І, коли ваш прототип готовий - публікуйте прямо в App Store.

Зачекайте ... Що?

Все це, звичайно, правда, але в той же час в PencilCase виявилося дуже складно реалізувати безліч простих речей. Крім того, додатки гальмують.

Atomic

Ще один посторінковий інструмент. Неможливо зробити прокручуваний вид, але ви можете зробити вертикальний скрол на мобільних пристроях за допомогою невеликого милиці .
Автоматично генеруються переходи між сторінками досить непогані. А з останнім оновленням вони ще й налаштовуються з тимчасової шкали.

Justinmind

Я побіжно переглянув цю програму, але, схоже, вона також має серйозні обмеження. Наприклад, немає способу створити посторінковий скролл або карусель, це потрібно симулювати за допомогою свайпов. (Подивіться прикріплене відео з прикладом фотогалереї: свайп, а потім додаток анімує наступну фотографію - ніякого перетягування або зсуву на наступне фото).

Mockingbot

Те ж саме: жести обмежені до використання свайпа для запуску дії. Можливий тільки вертикальний безперервний скролл.

iAd Producer

Я хотів його спробувати через цю публікації Лінди Донг. iAd Producer досить зручний в роботі. Також є посторінковий скролл (карусель) в панелі інструментів, але цей скрол не може запускати інші анімації.

Там є значне JavaScript API, з яким знайомі iOS-розробники. Виглядає, як JavaScript-версія UIKit (включаючи джерела даних і делегатів). Так що так, тут можливо відтворити IF, але для цього доведеться заритися глибоко в JS API для відстеження жестів дотику.

що використовувати

2015 рік, здається, став роком інструментів для прототипування.

Якщо ви ще не працювали ні з одним перерахованих інструментів і хочете швидко створити прототип якогось додатку, використовуйте:

• Flinto для Mac.
• або Principle.

Але якщо ви готові витратити час на вивчення потужного інструменту, або не можете реалізувати всі в повній мірі, використовуючи Principle, спробуйте:

• Form, якщо вважаєте за краще візуальне програмування
• Framer, якщо більше подобається писати код

Якщо ви працюєте на Windows - Pixate або Proto.io для швидкого прототипування і Framer.js (з CoffeeScript, якщо хочете) для більш складних речей.

У будь-якому випадку, краще вміти працювати з різними інструментами. Спробуйте кілька, щоб відчути різницю і оцінити можливості.

Я познайомився з усіма ними, так що в своїй практиці буду використовувати їх в завісіості від ситуації:

• Щоб швидко накидати прототип для планування поведінки додатки - Flinto для Mac. Також добре підійдуть будь-які онлайн-додатки з посторінковою анімацією, але Flinto хороший для роботи на робочому столі і дозволяє мені працювати швидко.
• Коли ще немає графіки і потрібен швидкий макет зі стандартними елементами інтерфейсу - Proto.io. У ньому є бібліотека з налаштованим елементами інтерфейсу для iOS, Android і Windows Phone.
• Form, якщо в прототипі потрібно використовувати сенсори або камеру пристрою.
• Для всього іншого - Principle при необхідності або Framer.