0,0
рейтинг
9 августа 2013 в 09:49

Разработка → Создаем быстрый прототип мобильного приложения

На хабре уже присутствует некоторое количество статей, посвященных процессу прототипирования в разработке программного обеспечения. Есть достаточно фундаментальные статьи с обзорами стандартов и расчетами, есть статьи про прототипирование устройств, есть цикл из двух статей про процесс выбора инструмента для прототипирования. К сожалению, процесс создания прототипов мобильных приложений освещен очень скудно – в виде единственной статьи в 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 долларов каждое.
Демонстрация дизайна на устройстве без программирования

Justinmind Prototyper
www.justinmind.com
Инструмент, позволяющий создавать интерактивные прототипы сайтов и приложений для iPhone, Android и iPad. Поддерживает множество возможностей, включая работу с жестами ( в прототипах можно реализовать Drag&Drop и т.д.). К сожалению, бесплатная версия ограничена только перелинковкой между шаблонами и 10 МБ места в облаке. Но есть триал на 30 дней

За подсказку спасибо Glebcha

Mockko
www.mockko.com
Бесплатный on-line инструмент для создания прототипов. Поддерживается перелинковка между экранами, просмотр прототипов на iPhone. Собственно, создавать прототипы можно только для iPhone, сайт работает только в Chrome или Safari. Обещают в будущем поддержку также iPad.

За подсказку спасибо n0_quarter

Microsoft Expression Blend
msdn.microsoft.com/ru-ru/library/windows/apps/jj129478.aspx
Используя Blend + SketchFlow, вы можете создавать интерактивные прототипы приложений под любые платформы.
Подробнее:
Прототипирование в Expression Blend + SketchFlow. Часть 1. Немного истории
Прототипирование в Expression Blend + SketchFlow. Часть 2. Основы

За подсказку спасибо Ivnika

App Cooker
www.appcooker.com
Предлагает создать иконку, простенький прототип приложения и, как киллер-фича, предлагается встроенный инструмент помощи при ценообразовании.

За подсказку спасибо Glebcha

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

Mockabilly
www.mockabilly.com
Уже готовые макеты заливаете на iPhone (поддерживается только эта платформа) и тестируете непосредственно на самом устройстве.

Invision
www.invisionapp.com
Бесплатно доступен только один проект, но если нет необходимости одновременно демонстрировать более одного проекта, то он должен вам понравится, поскольку никаких других ограничений нет. Плата взимается только за увеличение количества проектов.

LiveView
zambetti.com/projects/liveview
Приложение для удаленного просмотра на экране iPhone и iPad прототипа, разработанного и запущенного на Mac.

Вывод


Инструментов для создания прототипирования огромное количество, здесь описаны лишь некоторые из них. Для себя мы остановились на следующем наборе: скетчпад для первоначального прототипирования, и Proto.IO/Fluid UI для создания интерактивных прототипов.

А чем пользуетесь вы?

Большую часть статьи написал мой коллега Александр Кочеванов (aimh), за что ему огромное спасибо
А что используете вы?

Проголосовало 546 человек. Воздержалось 762 человека.

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

Искандер Гиниятуллин @rednaxi
карма
125,0
рейтинг 0,0
WEB-разработчик
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (55)

  • +2
    • 0
      Интересное решение.

      На мой взгляд это ближе к «бумажному» прототипированию с использованием лекал, нежели к полноценным интерактивным прототипам
  • +2
    Еще есть www.mockko.com — очень достойное решение для быстрого прототипирования.
    Из плюсов — достаточно простой интерфейс, на выходе получается кликабельная версия прототипа, можно отправить ссылку клиенту/команде
    • +1
      Интерфейс действительно очень простой, как и весь инструмент. Поддерживается только iPhone, работает только в Chrome/Safari — это минусы.

      Спасибо за подсказку, добавил в список.
  • +2
    Когда занимался проектированием для Android выбор пал на Justinmind.
    • 0
      Спасибо, действительно отличный инструмент. Добавил в список.
  • +3
    Я использую Pencil со встроенным набором 4.* android
  • +3
    Я пользуюсь Microsoft Expression Blend (странно что не упомянут в статье)… Много плюсов как при разработке так и при демонстрации.
    • 0
      Все-таки я сконяюсь к тому, что Blend это инструмент для создания дизайна, а не прототипов.
      • +1
        Дизайнить в blende? Брррр, а вот прототип «живой» без проблем.
        • 0
          Окей, вы победили :-)

          Нашел на хабре две интересные статьи про прототипирование в Blend, добавил в статью.

  • 0
    Отличная статья, огромное спасибо за ссылку на лекала и программы, как раз искал такую подборочку!
    • 0
      За подборку все благодарности Саше aimh — он ее составлял, но аккаунт у него только read-only к сожалению.

      Я только помог с редактурой текстов, немного поиском приложений и публикацией.

      Ну и сейчас благодаря сообществу хабра еще пополним подборку недостающими приложениями.
      • 0
        Подарил товарищу инвайт.
        • 0
          Спасибо большое) сегодня определенно мой день
  • +1
    Возможно кому-то пригодится комплексный инструмент для проектирования на iOS AppCooker.
    Предлагает создать иконку, простенький прототип приложения и, как киллер-фича, предлагается встроенный инструмент бизнес-планирования.
    • 0
      Спасибо, добавил в список.

      Отдельное спасибо за интересный инструмент для бизнес-планирования — как раз дополняет мою сегодняшнюю статью
  • +1
    Может голосовалку еще добавить, чтобы была информация о популярности решений среди хабровчан?
    • 0
      отличная идея.
      • 0
        Добавил, голосуйте.
  • 0
    Пользуюсь Axure с подключением дополнительных библиотек с оф. сайта.
    Возможность создания интерактивных прототипов крайне удобна, позволяет сразу проверить насколько удобно пользоваться.
  • 0
    На правах рекламы appery.io/ )
  • +1
    Photoshop -> Expression Blend -> Visual Studio

    такой путь для WP использую я
    • 0
      Спасибо, мастер йода!
  • +1
    Есть еще Moqups. Условно бесплатный и в использовании удобный.
    • 0
      +1, отличный инструмент, может, даже лучший вообще. Быстрый, без флеша, с вменяемыми шорткатами, бесплатный для маленьких проектов.
  • 0
    Сначала грубо набрасываю на бумаге, потом делаю делаю детальный интерактивный прототип в axure.
    На этапе рисования на бумаге не пользуюсь никакими лекалами, рисую как попало, просто чтобы нащупать правильное направление.
    • 0
      Я вначале тоже практиковал «как попало» пока не попал на свою лень)
      Потом все же стал делать пометки — нативный контрол или нет, важность (например для заполнения формы), зависимость (указывал принадлежность к родительскому элементу).
      А выглядело все в виде разделенного на две части листа — слева мокап занимал бОльшую половину, а справа колонка с описанием проставленных для каждого элемента тегов.

      Не сочтите за замечание, подумал может мой опыт будет вам полезен.
      • 0
        Это вопрос личного стиля, наверное. Люблю все детально прорабатывать в Axure, там же и комментарии к элементам оставляю. А на бумаге у меня при большой детализации каша получается — не хватает аккуратности) Этап бумажного рисования мне нравится тем, что можно взять несколько листов и буквально за пять минут набросать 3-4 варианта, чтобы решить, какой из них стоит прорабатывать дальше.
        • 0
          Ух, я слишком педантичен наверное)
          Про бумагу согласен — быстрее и не улетучиваются идеи пока ищешь подходящий объект в софтине, в случае с айпадом например.
          Кстати до сих пор не нашел удобного инструмента для коллективной работы с прототипами — комментарии, история изменения, права доступа, прогресс. Может подскажете?
  • 0
    Никто не встречал элементы интерфейса Android 4 в svg?
  • 0
    mockupbuilder.com/ очень клевая софтина, всегда ей пользовался. К сожалению, стала платной. Хотя десктопная версия вроде по-прежнему бесплатна, надо посмотреть.
  • 0
    pencil.evolus.vn/Downloads.html вполне тоже ничего — мультиплатформенная, бесплатная, есть разные шаблоны. Бедненько, но чистенько.
  • +1
    А как же делать прототипы ios приложений в интерфейс билдере? Это наиболее точный и гибкий инструмент, и при наличии нормальных навыков у дизайнера, даже быстрый.
  • 0
    beta.appinventor.mit.edu/
    Не совсем для дизайна, больше заточен под функционал. Но и в нем можно делать прототипы с картинками и перемещением между экранами:
    • 0
      Вот например, дизайн -> конструктор -> реальное приложение на телефоне(скриншот). К тому же, приложение еще и работает.
  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      Аналогично, MS Visio!
      Инструментом пользуюсь уже более 10 лет (еще в универе чертил в нем абсолютно все).
      Вся фишка в его простоте в освоении, помноженной на невероятную универсальность. Ведь в нем не только скетчи экранов, screens-flow и стуктурные схемы архитектур решений можно чертить, но и вообще все что угодно!
      Автор, добавьте MS Visio в голосовалку плиз.
      • 0
        К сожалению, когда опрос создан, его больше нельзя редактировать.
  • 0
    Для меня прототип — это обязательно нечто интерактивное, так что эскизы на бумажках, хоть и полезны, но реального прототипа никогда не заменят. Для прототипирования своих идей я использую Xcode или веб-сервер на node.js. Дизайнерам, которым сложно что-то запрограммировать, рекомендую прочитать статью про протипирование с помощью сторибордов в Xcode:
    blog.mengto.com/prototype-xcode-storyboard/

    А для быстрого рисования скетчей я использую блокнот, InDesign и Sketch App.
  • 0
    Спасибо за статью. Есть еще WireframeSketcher. Умеет переходы между экранами делать, подходит для прототипирования не только мобильных приложений, не перегружен функциями, но все основное есть. Opensource, однако не бесплатен.
  • +1
    Для небольших набросков использую Balsamiq Mockups. Только не десктоп, а веб версию — builds.balsamiq.com/b/mockups-web-demo/
    Из минусов — каждые 10 минут нужно жать «ок» на информационном окне и сохранение не в один клик.
  • +1
    Очень рекомендую popapp.in
  • +1
    А я посоветую глянуть NinjaMock. Довольно молодой сервис, который хорошо развивается и полностью бесплатный (пока?). Выбрал его среди многих за простоту освоения и лаконичность. Результатом более чем доволен.
    • 0
      Спасибо за ссылку. Наконец то нормальный сервис с поддержкой Windows Phone.
      • 0
        www.fluidui.com
        здесь тоже есть WP
        • 0
          На этот сервис я обратил внимание, он упоминается в статье. Мне он не понравился. Не удобный в использовании, не достаточный по функционалу, да и UI очень невзрачное у него получается. NinjaMock превосходит его многократно.
  • 0
    Когда уже есть результат работы дизайнера (набор экранов) можно использовать appdemostore.com чтобы пройти по всем экранам и предварительно оценить логику переходов в приложении.
  • 0
    Никто не встречал инструментов прототипирования для iOS с возможностью подключения камеры?
  • 0
    Спасибо, прекрасная статья!

    Особенно понравилось работать с POP, очень просто и быстро делает из набросков полноценный динамический прототип.
  • 0
    В justinmind есть поворот экрана при просмотре, но как задать элементам ширину в процентах и расставить элементы так, чтобы при горизонтальном расположении они занимали соответствующие места?
  • 0
    В статье есть, а в голосовании нет — balsamiq.

    Еще добавил бы Sketch 3. Особенно удобно, когда вся команда от проектировщика и дизайнера до верстальщика и программиста пользуются одной программой
  • 0
    Есть еще неплохой и достаточно мощный инструмент для прототипирования Indigo Studio http://www.infragistics.com/products/indigo-studio

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.