На хабре уже присутствует некоторое количество статей, посвященных процессу прототипирования в разработке программного обеспечения. Есть достаточно фундаментальные статьи с обзорами стандартов и расчетами, есть статьи про прототипирование устройств, есть цикл из двух статей про процесс выбора инструмента для прототипирования. К сожалению, процесс создания прототипов мобильных приложений освещен очень скудно – в виде единственной статьи в 2010 году, и пара слов в статье Разработка мобильных приложений: с чего начать.
Хотелось бы исправить эту ситуацию, и предложить вашему вниманию большой обзор доступных инструментов для прототипирования мобильных приложений.
Прототипирование — это создание макета, модели будущего приложения для того, чтобы определить правильность структуры приложения, его функциональности и, в целом, концепции приложения. Если приложение разрабатывается по стороннему заказу, клиенту также может показываться прототип для того, чтобы он мог контролировать и вносить корректировки в свое приложение.
Прототип обладает чудесным свойством устранять недопонимания между различными специалистами (менеджер, руководитель, дизайнер, программист, клиент), вовлеченными в проект, структурировать мысли и предотвращать ошибки и выполнение лишней работы еще на ранних стадиях разработки. Можно тестировать будущее приложение, используя фокус-группу, это поможет получить полезную информацию от будущих пользователей.
В ритме сегодняшней жизни при достаточно высокой цене человеко-часов, очень важно работать быстро и, желательно, без потери качества. Для этого было введено понятие “быстрое прототипирование”. Что поможет нам перейти от простого прототипа к быстрому? Это развивающиеся технологии, наличие огромного количества сервисов и, конечно, собственные .
Самый популярный инструмент создания быстрых прототипов.
Первый и самый любимый инструмент дизайнеров — это бумага и любой пишущий инструмент (карандаш, ручка, маркеры). Он позволяет накидать структуру приложения и сделать первые наброски интерфейса максимально быстро.
Можно рисовать на доске, стене, бумаге. Однако этот способ имеет и ряд недостатков:
- почерк должен быть разборчивым, чтобы его понимала вся рабочая группа, и чтобы самому потом не расшифровывать собственные записи
- при удаленной работе неудобно демонстрировать такой прототип
Конечно, можно сфотографировать все бумажки и отправить их, например, по почте или скайпу, но без пояснений все равно вряд ли удастся обойтись.
Как ускорить и упростить «бумажное» прототипирование
Скетчпад (SketchPad, Скетчбук, sketchbook)
это блокнот разлинованый макетами телефонов разных платформ. Имеет точечную сетку на «экране».
Вы можете распечатать аналог скетчпада самтостятельно по шаблонам: habrahabr.ru/post/152075/
UI – блокнот
это тот же самый скетчпад, только без привязки к платформе. На нем можно рисовать абсолютно любые приложения
Лекала.
Удобная, должно быть, вещь, но в России в продаже их найти не удалось.
www.uistencils.com/collections/frontpage/products/iphone-stencil-kit
Штампы
В российских магазинах тоже отсутствуют, но можно заказать у компании по изготовлению печатей, или сделать самому из куска резины, если руки достаточно прямые. К сожалению, чернила – вещь довольно маркая, поэтому лучше все-таки не пытаться экономить и купить или распечатать скетчпад.
www.cultofmac.com/224355/iphone-stamp-for-ui-sketching/
На этом с обзором «бумажных» инструментов закончим, и перейдем к самому интересному:
Программные решения для создания быстрых прототипов
Keynotopia
keynotopia.com/
Позволяет быстро создавать макеты с помощью базы шаблонов, добавлять ссылки на кнопки, комментировать и делиться с коллегами для тестирования результатов прототипирования. Приложение платное, стоимость зависит от ваших запросов.
POP
popapp.in
Инструмент для любителей рисовать руками. Рисуете, качаете приложение на iPhone, фоткаете, создаете раскадровку, тестируете и делитесь с коллегами. Все очень просто.
RATCHET
maker.github.io/ratchet/
habrahabr.ru/post/157819/
Создается прототип, максимально приближенный к реальному приложению. Может загружаться на компьютер или телефон, но без навыков HTML, CSS и JS не обойтись.
Proto.io
proto.io/
SaaS решение для прототипирования. Сервис нам очень понравился, но в бесплатный пакет входит очень скудный набор функций, поэтому он фактически бесполезен. За действительно рабочий инструмент придется заплатить не менее 24$.
Codiqa
codiqa.com
Еще одно облачное решение. Та же модель монетизации, как и в proto.io. Кому-то этот сервис может показаться удобнее.
Mockingbird
gomockingbird.com/
Ситуация противоположна Invision: имеется конструктор, но демонстрировать не очень удобно. Да и под мобильную разработку подходит плохо.
Lumzy
www.lumzy.com/
Прошлый век. Под смартфоны тоже не удастся ничего создать.
iPhone Mockup Web App
iphonemockup.lkmc.ch/
Отличительной особенностью является имитация рисунка приложения и самого телефона от руки, но это не оправдывает отсутствия возможности создавать связи между макетами.
Axure RP
www.axure.com/
habrahabr.ru/post/101938/
Программа достаточно функциональная, считается одним из лидеров на рынке. Подходит для прототипирования сайтов и приложений под iPhone и iPad.
AppGyver
www.appgyver.com/
На выбор даются шаблоны Android, iPhone и iPad. Протестировать здесь вы сможете только логику приложения без дизайна, поскольку работа ведется с уже готовыми набросками приложений. В бесплатном статусе вы сможете протестировать сервис с 3 скриншотами. На мобильное устройство можно будет установить приложение, с помощью которого возможно оценить результат работы.
Fluid Ui
www.fluidui.com
Удивительно, но этот сервис обладает всеми необходимыми функциями. Может быть, он не так изящен, как другие, зато позволяет и самостоятельно собрать прототип в конструкторе, и залить уже готовые макеты, проставить связи между страницами приложения, отправить получившийся макет для просмотра друзьям и коллегам и протестировать его на телефоне. Сервис также поддерживает Windows Phone!
MockFlow
www.mockflow.com
Имеет десктопное приложение и онлайн сервис, что, несомненно, является преимуществом, но простой настолько, что даже скучно.
Mockingbot
www.mockingbot.com
Еще один очень неплохой инструмент, содержащий все необходимые функции, но, к сожалению, поддерживает только iPhone.
Prototypr
prototypr.com/
Софт исключительно для владельцев яблочных девайсов. Пользоваться очень легко — просто перетаскиваем нужные элементы на макет и одним нажатием клавиши смотрим результат на телефоне.
Balsamiq Mockups for Desktop
www.balsamiq.com
Можно создать как простой схематичный прототип, так и очень детальный с точностью до пикселя. Рисованая стилистика делает серьезный инструмент веселой игрушкой.
iMockups for iPad
www.endloop.ca/imockups/
Рисовать прототипы прямо на iPad? Легко! Для него самого и iPhone, конечно. Качаем приложение и получаем удовольствие от простоты и неплохого результата.
Interface 2
interface2.lesscode.co.nz/
Создание динамических прототипов для iPhone и iPad непосредственно на самих устройствах всего за 10 долларов каждое.
Демонстрация дизайна на устройстве без программирования
Отдельного небольшого обзора заслуживают инструменты, которые вообще не позволяют сделать прототип, зато дают возможность продемонстрировать нарисованный дизайн на реальном устройстве.
Mockabilly
www.mockabilly.com/
Уже готовые макеты заливаете на iPhone (поддерживается только эта платформа) и тестируете непосредственно на самом устройстве.
Invision
www.invisionapp.com/
Бесплатно доступен только один проект, но если нет необходимости одновременно демонстрировать более одного проекта, то он должен вам понравится, поскольку никаких других ограничений нет. Плата взимается только за увеличение количества проектов.
LiveView
zambetti.com/projects/liveview/
Приложение для удаленного просмотра на экране iPhone и iPad прототипа, разработанного и запущенного на Mac.
Вывод
Инструментов для создания прототипирования огромное количество, здесь описаны лишь некоторые из них. Для себя мы остановились на следующем наборе: скетчпад для первоначального прототипирования, и Proto.IO/Fluid UI для создания интерактивных прототипов.
А чем пользуетесь вы?
За помощь в подготовке статьи большое спасибо моему коллеге Александру Кочеванову (aimh)
Автор: rednaxi
Забыли про AppCooker (iPad)
Лучшее решение на мой взгляд