rednaxi Aug 9 2013 at 09:49

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

6 min

217K

Development of mobile applications*

+57

Comments 55

avesha Aug 9 2013 at 10:28

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

rednaxi Aug 9 2013 at 10:43

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

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

n0_quarter Aug 9 2013 at 10:55

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

rednaxi Aug 9 2013 at 11:16

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

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

Glebcha Aug 9 2013 at 10:56

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

rednaxi Aug 9 2013 at 11:15

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

Zeliret Aug 9 2013 at 10:56

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

Ivnika Aug 9 2013 at 11:01

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

rednaxi Aug 9 2013 at 11:19

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

Ivnika Aug 9 2013 at 11:25

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

rednaxi Aug 9 2013 at 11:34

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

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

Sunriks Aug 9 2013 at 11:37

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

rednaxi Aug 9 2013 at 11:42

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

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

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

vanxant Aug 9 2013 at 23:31

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

aimh Aug 10 2013 at 00:06

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

Glebcha Aug 9 2013 at 12:04

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

rednaxi Aug 9 2013 at 12:10

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

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

NULL_byte Aug 9 2013 at 12:09

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

n0_quarter Aug 9 2013 at 12:10

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

rednaxi Aug 9 2013 at 12:16

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

Alextos Aug 9 2013 at 12:14

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

sneer Aug 9 2013 at 12:30

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

DobroeZlo Aug 9 2013 at 13:06

Photoshop -> Expression Blend -> Visual Studio

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

vvzvlad Aug 9 2013 at 18:15

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

pikok Aug 9 2013 at 13:13

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

maxatwork Aug 9 2013 at 21:01

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

Liny_li Aug 9 2013 at 13:18

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

Glebcha Aug 9 2013 at 15:48

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

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

Liny_li Aug 9 2013 at 16:16

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

Glebcha Aug 9 2013 at 16:34

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

UksusoFF Aug 9 2013 at 13:27

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

mSergiy Aug 10 2013 at 06:00

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

UksusoFF Aug 10 2013 at 21:28

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

gleb_kudr Aug 9 2013 at 13:40

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

yurash Aug 9 2013 at 16:36

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

u0rypT Aug 9 2013 at 17:14

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

vvzvlad Aug 9 2013 at 18:07

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

vvzvlad Aug 9 2013 at 18:14

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

UFO just landed and posted this here

tepexob Aug 10 2013 at 07:12

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

rednaxi Aug 10 2013 at 08:09

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

jazzbird Aug 10 2013 at 03:47

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

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

mSergiy Aug 10 2013 at 06:07

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

Semi Aug 10 2013 at 19:12

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

placebokid Aug 12 2013 at 15:53

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

alexander_fokin Aug 14 2013 at 20:01

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

qivb18 Aug 14 2013 at 20:50

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

aimh Aug 19 2013 at 12:56

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

qivb18 Aug 19 2013 at 13:31

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

dude1phoenix Dec 17 2013 at 14:17

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

dash01 Mar 19 2014 at 13:16

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

devays Aug 21 2014 at 18:52

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

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

69from Jan 13 2016 at 12:36

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

devays Jan 14 2016 at 12:12

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

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

OlegLevashov Apr 11 2016 at 23:19

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

Show the best of all time