[Mac App Store] Prototypr — оживляем макет iOS приложения

18

0 Icon

В этот раз я хочу рассказать про необычную программу отечественных разработчиков, предназначенную для быстрого прототипирования программ для iOS — Prototypr.

Ни для кого не секрет, что iOS-приложения чаще всего выгодно отличаются от конкурентов на других платформах своим дизайном, продуманным до мелочей и нарисованным с точностью до пикселя. Обычно для создания интерфейсов используются инструменты типа Adobe Photoshop и/или Illustrator. Но нарисовать интерфейс зачастую мало, его надо показать в динамике. Хорошо, если рядом есть программист, способный быстро этот дизайн нарезать и превратить в полноценное приложение. Хуже, когда программиста нет, или он занят, или когда нужно несколько разных вариантов дизайна показать заказчику как можно быстрее, а он из них выберет только один…

Конечно, можно экспортировать картинки в PNG и показать заказчику дизайн в виде унылых красивых статичных скриншотов, но это явно не дает представления о концепции приложения, не позволяет понять — удобно ли будет пользоваться программой, логично ли построены в ней переходы. Именно поэтому на помощь приходит Prototypr.

По иконке и вообще прорисовке интерфейса видно, что над приложением его авторы (Влад Алексеев и Андрей Усольцев) работали старательно, и хотя в приложении на данный момент не хватает некоторых мелочей (особенно туториала), потенциал у него есть.

Первое окно программы предлагает нам создать новый прототип, выбрав iPad или iPhone, или же открыть один из тех, что был в работе.

Главный экран

В окне программы все весьма просто: в левой половине показаны эскизы интерфейса, которые в будущем станут нашей программой, в правой, основной, показано как это все будет выглядеть на устройстве.

Пустое окно

Очень умилила меня такая деталь как переключатель цвета устройства в правом нижнем углу — можно выбрать белый и черный цвет.

Главный шаг — это добавление мокапов, которые появятся в списке слева. При необходимости их можно упорядочить обычным перетаскиванием.

Так как я ни разу не дизайнер, и мокапов интерфейса iOS программ у меня нет, то я решил тут немного смухлевать и для примера взял просто пару скриншотов мобильного App Store. Будем считать что я их нарисовал.

Скриншоты AppStore

Добавляем скриншоты в программу, они занимают свое место.

Добавим эскизы

И теперь самый главный шаг: нам нужно задать логические связи между мокапами. Для этого на каждом из мокапов мы можем указать определенные зоны, которые в реальном приложении будут выполнять какие-то действия. Это делается мышкой: выделяем нужный прямоугольник и назначаем ему одно из двух действий. У каждого прямоугольника активной зоны есть два небольших кружка. Верхний, со значком молнии, обозначает переход на другой экран. Нажав и перетащив его, можно выбрать нужный экран, который будет указан стрелкой.

Добавим ссылки

Нижняя кнопка активной зоны позволяет присвоить ей действие «вернуться на предыдущий экран». Из этих двух простых действий и строится проект интерфейса.

Когда прототип будет готов, естественно, можно просмотреть его прямо на компьютере в полноэкранном симуляторе. Если же надо посмотреть как все работает на реальном устройстве, нужно установить на телефон дополнительную программу. Тут тоже видна забота разработчиков: Prototypr показывает QR код со ссылкой на бесплатную мобильную версию.

Установим мобильное приложение

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

Мобильное приложение

В настольной версии выбираем нужное устройство.

Выбор устройства

И если оно доступно, кнопка в верхнем правом углу засветится розовым цветом (значок молнии), который и запускает прототип на мобильном устройстве. Кстати, прототипы которые уже скопированы на iPhone или iPad можно смотреть без подключения к компьютеру. Удобно, если вы, например, собираетесь поехать к заказчику показать варианты дизайна.

Дополнительный бонус, который получают дизайнеры, использующие данную программу, это возможность прямого просмотра дизайна из Photoshop на вашем устройстве. Для этого в Photoshop необходимо установить специальный скрипт, который при запуске с помощью Prototypr перенесет изображение в раздел «Mockups» iOS-приложения, откуда его можно просматривать.

Мокапы

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

Название: Prototypr
Издатель/разработчик: Vladislav Alexeev
Цена: 49,99 $
Ссылка: OS X

18 комментариев

  1. 0
    Кирилл

    Спасибо, дороговато, буду искать в сети)
    (отправлено из приложения AppleInsider.ru)

  2. 0

    Хорошая програмка, нужная, но дорогая. Буду ждать какой нибудь акции.
    (отправлено из приложения AppleInsider.ru)

  3. 0

    «Нужная, но дорогая», «Буду искать в сети»… Ужас! 1500 рублей дорого. На Мак деньги есть, а на нужную программу нет…

    • 0
      Алексей К

      iWizard, Знаеш мак это одно а какието програмки реально не стоят своих денег
      (отправлено из приложения AppleInsider.ru)

    • 0
      Кирилл

      iWizard, У 15 летнего школьника денег не много, в сети нет, буду ждать акции, надеюсь на сайте объявят!
      (отправлено из приложения AppleInsider.ru)

    • 0

      iWizard, Ну скажем мак не стоит так дорого как это принято считать, я купил свой эйр 2010 года за 23000 где то пол года назад, к тому же все проги на айфон у меня куплены, потрачено около 3000-4000 рублей но этих прог у меня — завались, тем более их можно устанавливать родственникам и друзьям, но 1500 за прогу, еще и не такую продвинутую, я считаю дорого.
      (отправлено из приложения AppleInsider.ru)

    • 0

      iWizard, Vladislav Alexeev залогинся

    • 0

      iWizard, Полторы тысячи реально небольшая цена для разработчика.

    • 0
      Octavian August

      iWizard, Добивают такие тупые высказывания типа хватило же денег на iPhone или Mac… Да купил Mac и что теперь? Нужно сделаться лохом и хватать всё подряд за любые деньги не исходя из рациональных расчётов стоимости и качества приложения!? Тем более гаджеты, Компы Apple покупает зачастую молодёж как мечту на скопленные средства или родители им так покупают в подарок, или по работе люди пользуются Mac!
      (отправлено из приложения AppleInsider.ru)

  4. 0

    Круче чем AppCooker нет приложений. С нетерпением жду ее для мака

  5. 0
    a_balalin

    Наверно куплю на днях попробовать. По обзору гуд.
    (отправлено из приложения AppleInsider.ru)

  6. 0

    Я бы Кастрировал за это…
    Поясню! …
    Не надо делать «Халяву»!
    Хорошего из этого только одно! Срубить и послушать «Дифирамбы» о качестве приложений сделанных на этом «Чуде» …
    Обманув и начинающих программировать ребят и «чайников» доверчивых думающих что в App Store «Всё» Клёво!…
    А в качестве демки — презентухи можно и баловаться… за такую цену…

  7. 0

    Какая разница как получился Мак? Можно попросить, накопить, заработать эти деньги. У нас в стране принято вопить о дороговизне всего, не сделав в своей жизни ничего. Ну или просто воровать, скачивая дешевый софт с торрентов. Эта программа сделана для разработчиков, а не для школьников. Если приспичило сделать работающий прототип, всегда есть бесплатный Xcode, берите и делайте!
    (отправлено из приложения AppleInsider.ru)

  8. 0

    Посмотрите Blueprint для iPad
    (отправлено из приложения AppleInsider.ru)

  9. 0

    Такое приложение без элементов интерфейса не стоит ничего. Божественный Interface 2 можно купить на айпад и айфон, делать на айпаде интерфейсы под айпад и айфон, а потом, экспортировать в икскод. И стоит он 10 $.

Авторизуйтесь Чтобы оставить комментарий