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

[avesha]

Использую Android UI Design Kit for Google Slides

[rednaxi]

Интересное решение.

На мой взгляд это ближе к «бумажному» прототипированию с использованием лекал, нежели к полноценным интерактивным прототипам

[n0_quarter]

Еще есть www.mockko.com — очень достойное решение для быстрого прототипирования.
Из плюсов — достаточно простой интерфейс, на выходе получается кликабельная версия прототипа, можно отправить ссылку клиенту/команде

[rednaxi]

Интерфейс действительно очень простой, как и весь инструмент. Поддерживается только iPhone, работает только в Chrome/Safari — это минусы.

Спасибо за подсказку, добавил в список.

[Glebcha]

Когда занимался проектированием для Android выбор пал на Justinmind.

[rednaxi]

Спасибо, действительно отличный инструмент. Добавил в список.

[Zeliret]

Я использую Pencil со встроенным набором 4.* android

[Ivnika]

Я пользуюсь Microsoft Expression Blend (странно что не упомянут в статье)… Много плюсов как при разработке так и при демонстрации.

[rednaxi]

Все-таки я сконяюсь к тому, что Blend это инструмент для создания дизайна, а не прототипов.

[Ivnika]

Дизайнить в blende? Брррр, а вот прототип «живой» без проблем.

[rednaxi]

Окей, вы победили :-)

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

[Sunriks]

Отличная статья, огромное спасибо за ссылку на лекала и программы, как раз искал такую подборочку!

[rednaxi]

За подборку все благодарности Саше aimh — он ее составлял, но аккаунт у него только read-only к сожалению.

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

Ну и сейчас благодаря сообществу хабра еще пополним подборку недостающими приложениями.

[vanxant]

Подарил товарищу инвайт.

[aimh]

Спасибо большое) сегодня определенно мой день

[Glebcha]

Возможно кому-то пригодится комплексный инструмент для проектирования на iOS AppCooker.
Предлагает создать иконку, простенький прототип приложения и, как киллер-фича, предлагается встроенный инструмент бизнес-планирования.

[rednaxi]

Спасибо, добавил в список.

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

[NULL_byte]

Может голосовалку еще добавить, чтобы была информация о популярности решений среди хабровчан?

[n0_quarter]

отличная идея.

[rednaxi]

Добавил, голосуйте.

[Alextos]

Пользуюсь Axure с подключением дополнительных библиотек с оф. сайта.
Возможность создания интерактивных прототипов крайне удобна, позволяет сразу проверить насколько удобно пользоваться.

[sneer]

На правах рекламы appery.io/ )

[DobroeZlo]

Photoshop -> Expression Blend -> Visual Studio

такой путь для WP использую я

[vvzvlad]

Спасибо, мастер йода!

[pikok]

Есть еще Moqups. Условно бесплатный и в использовании удобный.

[maxatwork]

+1, отличный инструмент, может, даже лучший вообще. Быстрый, без флеша, с вменяемыми шорткатами, бесплатный для маленьких проектов.

[Liny_li]

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

[Glebcha]

Я вначале тоже практиковал «как попало» пока не попал на свою лень)
Потом все же стал делать пометки — нативный контрол или нет, важность (например для заполнения формы), зависимость (указывал принадлежность к родительскому элементу).
А выглядело все в виде разделенного на две части листа — слева мокап занимал бОльшую половину, а справа колонка с описанием проставленных для каждого элемента тегов.

Не сочтите за замечание, подумал может мой опыт будет вам полезен.

[Liny_li]

Это вопрос личного стиля, наверное. Люблю все детально прорабатывать в Axure, там же и комментарии к элементам оставляю. А на бумаге у меня при большой детализации каша получается — не хватает аккуратности) Этап бумажного рисования мне нравится тем, что можно взять несколько листов и буквально за пять минут набросать 3-4 варианта, чтобы решить, какой из них стоит прорабатывать дальше.

[Glebcha]

Ух, я слишком педантичен наверное)
Про бумагу согласен — быстрее и не улетучиваются идеи пока ищешь подходящий объект в софтине, в случае с айпадом например.
Кстати до сих пор не нашел удобного инструмента для коллективной работы с прототипами — комментарии, история изменения, права доступа, прогресс. Может подскажете?

[UksusoFF]

Никто не встречал элементы интерфейса Android 4 в svg?

[mSergiy]

wireframesketcher.com/mockups/android-ice-cream-sandwich.html — Android ICS, там рядом есть иконки, а также iPhone, iPad, WP.

[UksusoFF]

Не густо, но и на том спасибо.

[gleb_kudr]

mockupbuilder.com/ очень клевая софтина, всегда ей пользовался. К сожалению, стала платной. Хотя десктопная версия вроде по-прежнему бесплатна, надо посмотреть.

[yurash]

pencil.evolus.vn/Downloads.html вполне тоже ничего — мультиплатформенная, бесплатная, есть разные шаблоны. Бедненько, но чистенько.

[u0rypT]

А как же делать прототипы ios приложений в интерфейс билдере? Это наиболее точный и гибкий инструмент, и при наличии нормальных навыков у дизайнера, даже быстрый.

[vvzvlad]

beta.appinventor.mit.edu/
Не совсем для дизайна, больше заточен под функционал. Но и в нем можно делать прототипы с картинками и перемещением между экранами:

[vvzvlad]

Вот например, дизайн -> конструктор -> реальное приложение на телефоне(скриншот). К тому же, приложение еще и работает.

[tepexob]

Аналогично, MS Visio!
Инструментом пользуюсь уже более 10 лет (еще в универе чертил в нем абсолютно все).
Вся фишка в его простоте в освоении, помноженной на невероятную универсальность. Ведь в нем не только скетчи экранов, screens-flow и стуктурные схемы архитектур решений можно чертить, но и вообще все что угодно!
Автор, добавьте MS Visio в голосовалку плиз.

[rednaxi]

К сожалению, когда опрос создан, его больше нельзя редактировать.

[jazzbird]

Для меня прототип — это обязательно нечто интерактивное, так что эскизы на бумажках, хоть и полезны, но реального прототипа никогда не заменят. Для прототипирования своих идей я использую Xcode или веб-сервер на node.js. Дизайнерам, которым сложно что-то запрограммировать, рекомендую прочитать статью про протипирование с помощью сторибордов в Xcode:
blog.mengto.com/prototype-xcode-storyboard/

А для быстрого рисования скетчей я использую блокнот, InDesign и Sketch App.

[mSergiy]

Спасибо за статью. Есть еще WireframeSketcher. Умеет переходы между экранами делать, подходит для прототипирования не только мобильных приложений, не перегружен функциями, но все основное есть. Opensource, однако не бесплатен.

[Semi]

Для небольших набросков использую Balsamiq Mockups. Только не десктоп, а веб версию — builds.balsamiq.com/b/mockups-web-demo/
Из минусов — каждые 10 минут нужно жать «ок» на информационном окне и сохранение не в один клик.

[placebokid]

Очень рекомендую popapp.in

[alexander_fokin]

А я посоветую глянуть NinjaMock. Довольно молодой сервис, который хорошо развивается и полностью бесплатный (пока?). Выбрал его среди многих за простоту освоения и лаконичность. Результатом более чем доволен.

[qivb18]

Спасибо за ссылку. Наконец то нормальный сервис с поддержкой Windows Phone.

[aimh]

www.fluidui.com
здесь тоже есть WP

[qivb18]

На этот сервис я обратил внимание, он упоминается в статье. Мне он не понравился. Не удобный в использовании, не достаточный по функционалу, да и UI очень невзрачное у него получается. NinjaMock превосходит его многократно.

[dude1phoenix]

Когда уже есть результат работы дизайнера (набор экранов) можно использовать appdemostore.com чтобы пройти по всем экранам и предварительно оценить логику переходов в приложении.

[dash01]

Никто не встречал инструментов прототипирования для iOS с возможностью подключения камеры?

[devays]

Спасибо, прекрасная статья!

Особенно понравилось работать с POP, очень просто и быстро делает из набросков полноценный динамический прототип.

[69from]

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

[devays]

В статье есть, а в голосовании нет — balsamiq.

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

[OlegLevashov]

Есть еще неплохой и достаточно мощный инструмент для прототипирования Indigo Studio http://www.infragistics.com/products/indigo-studio