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

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

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

    Метки:
    Поделиться публикацией
    Комментарии 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

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