Порівняння п’яти інструментів для прототипування програм - AppTractor

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

Тес Мат у блозі на Medium поділився своїм вибором інструментів для прототипування [/pullquote]

Сторінки проти верств

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

Я поясню детальніше.

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

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

Приклади інструментів зі сторінками: 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, але вони виявилися надто корпоративними (читайте надто дорогими). Я спробую їх іншим разом.

Отже, ось що я одержав. Подивіться, як працюють ці п'ять реалізацій порівняно з цим продуктом:

Працює у вебі, плеєри для iOS та Android

Proto.io – напрочуд потужний веб-додаток; має багато, багато функцій. Але тому, що все працює за принципом дрэг-енд-дроп, кнопками та вибором значень зі списку, іноді буває важко знайти те, що потрібно.

Це досить дратівливо: вам потрібно натискати на [Save Project] і потім [Preview] щоразу, коли ви хочете бачити результат зроблених вами змін.

Надсилання прототипу клієнту

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

Легко зробити швидкий макет завдяки розширеній бібліотеці стандартних елементів UI, багато з них кастомізуються.
Proto.io - єдина (з п'яти), у кого є і посторінковаверсія: ви можете зробити багато екранів всередині одного проекту та реалізувати переходи між ними.
Синхронізувати Dropbox для об'єктів.