Лого vc.ru

Proto.io, Pixate, Origami: Обзор инструментов для прототипирования приложений с поддержкой Sketch

Proto.io, Pixate, Origami: Обзор инструментов для прототипирования приложений с поддержкой Sketch

Дизайнер Тес Мат проанализировал достоинства и недостатки нескольких инструментов для прототипирования приложений и рассказал, когда и какие из них лучше использовать.

В рубрике «Интерфейсы» — перевод заметки Мата, подготовленный командой Varhal.

Поделиться

Я заново создал 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-приложение (cкачайте бесплатную триал-версию).

Цена: 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.
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Материал полезный, но не в реалиях РФ.

По теме: знаком с Proto.io, Pixate, UXpin.

Если нужно реализовать полностью интерактивный проект они более или менее одинаковы в использовании. Мне по душе больше всего UXpin.

Очень жду выхода Comet от Adobe.

Понапридумывают всякую хипста-хрень, лишь бы за живыми людьми не наблюдать и их настоящие беды в блокнотик не записывать.

Что ты несёшь... Причём тут это...

0

А для сайтов такое (кроме Dreamweaver и Muse) посоветуйте что-то, пожалуйста.

0

UXpin, как я писал выше.
Webflow инструмент подобный Muse.

www.axure.com/
www.invisionapp.com/ - кроме мобилок веб умеет
moqups.com/ - я пользуюсь для прототипирования
balsamiq.com/products/mockups/ - так же пользовался

0

Когда на inVision пытаешься переходы между страницами настроить получается каша из скринов.
Правда в свое время очень помог - на протяжении месяца приходилось делать правки на 52 макетах. Встроенные в систему пометки комментариев, синхронизация с облаком, история файлов и конвертация psd макета чуть упростили задачу. Хотя наверно надо было заказчику за такое по шапке надавать.

0

Одним заголовком обидели всех дизайнеров, работающих в Photoshop.

Растр один хрен в Sketch не обработаешь.
Но он чертовски хорош. Особенно сторонние плагины.

Юзаю Proto.io и в целом очень доволен, но подтверждаю тормоза на сложных проектах и корявую реализацию работы с переменными, приходится зачастую забивать абсолютные значения при расчете сдвигов и анимаций

0

Променял его на pixate. Рекомендую.

1

а бальсамик уже не в чести?

0

На самом деле не хватает простого инструмента, похожего на флеш — чтобы линейная анимация на таймлайне + сборщик событий + код (самому с нуля + библиотека заготовок).

Тогда можно было бы вообще собирать максимально полные прототипы приложения в очень короткий срок. Но, к сожалению, инструменты пока далеки от этого, а засилье постраничных сервисов вообще удручает. Ну кому это надо?

Легче изучить Swift :)

0

Я думал об этом :) но там тоже не все так просто — слишком высокий порог входа и очень много головняка даже при работе с рыбными данными. Да и скорость даже у опытных прогеров никогда не сравнится со скоростью прототипирования, а это важнейший пункт.

0

Очень верно подмечено сравнение с flash. Почему-то сразу Куваев вспомнился со своей масяней.

0

Principle - разобраться можно минут за 10-15 и сразу включиться в работу над анимацией, что не скажу про Framer, Origami и Pixate - нужно больше времени и это большой минус.

Да, простой, крутой, но очень дорогой...

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Shtadler Anton

потому что хочется) У каждого свой фан.

Ашот Габрелянов представил приложение Magic для создания индивидуальных стикеров на основе эмоций
0
Дмитрий Каулькин

Язь это ещё норм. Хорошо, что не дратути.

«Вжух»: реакция российских компаний на мем с котом и волшебной палочкой
0
Maga Abdurakhmanov

1. Google Authenticator на часах, очень удобно, что всегда под рукой. За телефоном обычно надо лезть
2. SMS коды, тоже самое что Google Authenticator
3. Нотифаи, настроенные в соответствии с важностью, не надо лезть за телефоном ты сразу видишь, особенно удобно с встречами
4. Не отвлекает людей вокруг звуки твоего телефона (я его всегда на тихом режиме держу теперь)
5. Будильник в часах будит только тебя виброй
6. Если забыл телефон дома и ушел, часы напомнят виброй
7. Управление музыкой, не надо искать телефон, погромче или на паузу поставить
8. Когда едешь на велосипеде, а тебе пишут смс/в телеграм, можно голосом ответить с часов, не доставая телефон
9. Тречит сон и шаги, так-как часы всегда на запястье (7 дней на зарядке)

Есть на рынке другие часы, которые это могут?

От $740 млн до $40 млн за один год
0
Nikolay Kachev
Tredwear

Как будто балтику 9 рекламируют, а не напиток для интеллектуалов. Типа наебенься с нами чувачок

Компания «Альянс» показала на бутылках своего сидра героев знаменитых картин в состоянии опьянения
0
Sp Soul
ITSys

А что вы ожидали увидеть: блаженные лица, с руками к небу. Не думаю, что успешные трейдеры на уолл-стрит подобным могут похвастаться, в отличии от их банковских счетов - реальный экстаз.

Штаб-квартира: Петербургский офис игровой студии Playkot
0
Показать еще