Лого vc.ru

Инструмент: Создание интерактивных макетов приложений при помощи Mockup.io

Инструмент: Создание интерактивных макетов приложений при помощи Mockup.io

Менторы рубрики «Интерфейсы» на vc.ru приступают к публикации кейсов и инструментов российских компаний, которые будут полезны представителям индустрии.

Сегодня в выпуске — обзор инструмента для прототипирования приложений Mockup.io, подготовленный его командой.

Поделиться

Разработка приложения для мобильного устройства — это сложный и трудоемкий процесс. В его основе лежат четыре основных этапа: планирование, дизайн, программирование, тестирование.

Какой из этих шагов важнее — решить сложно. Но их объединяет то, что на каждом из этих этапов очень важно правильно и эффективно выстроить взаимоотношения между всему участниками процесса: от заказчика до разработчика. В этой цепи очень полезными оказываются прототипы:

  • удешевляют разработку, так как многие правки вносятся в wireframes (черновой макет — прим. ред.), которые намного дешевле и быстрее менять, чем финальный UI или готовое приложение.
  • позволяют быстро находить и улучшать «узкие» места дизайна и юзабили задолго до начала разработки приложения;
  • помогают реалистично и наглядно демонстрировать команде и клиенту концепцию будущего приложения: от основных моментов до нестандартных переходов;
  • упрощают процесс общения между всеми участниками процесса, обсуждение и утверждение дизайна и работы будущего приложения.

Что такое Mockup.io

Mockup.io — это коммуникационная платформа, которая, позволяет:

  1. презентовать макеты страниц приложений;
  2. обсуждать и комментировать их;
  3. создавать интерактивные high-fidelity прототипы;
  4. тестировать UI на реальных iOS и Android-устройствах.

В основном она предназначена для UI/UX-дизайнеров и разработчиков мобильных приложений. Но и обычный предприниматель — например, заказчик приложения тоже сможет пользоваться ею без труда.

Существенным преимуществом Mockup.io является то, что ее создатель — компания Alterplay — уже много лет занимается разработкой мобильных приложений. Поэтому функциональность Mockup.io основана на реальном опыте команды и решении насущных проблем аудитории.

Стоимость

Mockup.io — это сервис, работающий по подписке. Существуют три подписных плана. Все они позволяют приглашать в проект неограниченное число коллег и не имеют ограничений по функциональности. Приложения для iOS и Android устройств бесплатны.

  • Freelancer — бесплатный план, позволяет создать 1 проект, содержащий до 10 макетов. Такая подписка отлично подходит для фрилансеров, работающих с небольшими проектами. Это так же хорошая возможность протестировать приложение перед покупкой платной подписки.
  • Team ($19 в месяц) — позволяет создавать до 10 проектов, до 100 макетов в проекте.
  • Business ($49 в месяц) — поддерживает до 50 проектов, до 250 макетов в проекте.

Если вам нужны специальные условия подписки, можно обратиться напрямую в компанию.

Пользователи имеют возможность подписаться на более дорогой или более дешевый план в любой момент. При обновлении плана вся информация о проектах остается неизменной.

Основными конкурентами Mockup.io являются такие приложения, как Notism, InVision, RedPen, Marvell App. Все они основаны на работе с готовыми мокапами страниц.

Основные преимущества каждой из платформ:

Mockup.io InVision Marvell RedPen Notism
Неограниченное число приглашенных пользователей проекта Просмотрщик прототипов на Apple Watch Экспорт прототипов в app (.apk) приложение Точечные отзывы на прототипах Инструменты для рисования
Предварительный просмотр иконки для iOS, Apple Watch и Android-устройств Одновременное комментирование в режиме реального времени Таймер для отсрочки транзишенов (переходов) в интерактивных прототипах Контроль версий Одновременное комментирование в режиме реального времени
Нативное Android приложение Доски для мокапов с разными статусами (Kanban style) Синхронизация с Dropbox Синхронизация с Basecamp и Asana
Нативное iOS-приложение Инструменты для рисования Прикрепеленные прототипы (embedded) Экспорт всего проекта в PDF
Папки в проектах Создание to-do-списков из отзывов Импорт из Sketch, PhotoShop Создание to-do-списков
Автоматическое обрамление всех мокапов в рамки выбранного устаройства Запись поведения пользователя и его мимики (Lookback.io) Запись поведения пользователя и его мимики (Lookback.io) Настраиваемый вид предварительного просмотра всего проекта
Доступные цены Импорт из Sketch, PhotoShop Контроль версий
Метки для мокапов Синхронизация с Dropbox
Контроль версий

Существуют также более сложные приложения, такие, например, как UXPin, Balsamique, или Avocode. Но это, в первую очередь, конструкторы, которые позволяют создавать прототипы страниц с нуля.

Основные возможности Mockup.io

Презентация дизайна приложения

Автоматическое обрамление загруженных мокапов в виртуальные фреймы устройств: iPhone, iPad, Apple Watch, Android Phone, Android Tablet, либо абстракного устройства (для кастомных размеров экранов). В новой версии уже добавлен фрейм для iPad Pro.

Создание интерактивных прототипов

Создание кликабельных областей, их линковка с другими экранами приложения, установка различных анимированных переходов (transitions) между экранами.

Совместная работа

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

Предварительный просмотр иконки

Загрузка нескольких иконок в проект — позволяет загрузить несколько разных икокнок и увидеть, как каждая из них будет выглядеть в реальном контексте: на домашнем экране устройства или в магазине (App Store или Play Market).

Тестирование прототипа на реальном устройстве

Нативные iOS и Android для тестирования прототипа на реальных устройствах: iPhone, iPad, Android Phone, Android Tablet.

Организация проекта

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

Настраиваемая система меток позволяет присваивать мокапам различные статусы: «в работе», «утверждено», «ждет обсуждения».

Поддержка анимаций и скрола

Приложении поддерживает GIF-анимированные макеты и «длинные» страницы (при загрузке в Mockup.io автоматически трансформируются в страницы со скроллом).

Использование приложения

При создании проекта необходимо выбрать устройство, для которого вы будете прототипировать: iPhone, iPad, Apple Watch, Android Phone, Android Tablet, либо пользовательское устройство (необходимо указать размеры экрана).

Управление проектом осуществляется через меню настроек (Project Settings). Оно доступно внутри каждого проекта, в правом верхнем углу. Это меню позволяет:

  • копировать и удалять проект;
  • открывать его для публичного доступа;
  • приглашать (и удалять) других участников проекта;
  • запускать проект на реальных устройствах;
  • настраивать метки.

Контекстное меню проекта (вызывается правой кнопкой мыши) позволяет:

  • загружать макеты страниц (так же возможно это сделать через drag&drop);
  • создавать папки в проекте;
  • загружать разные версии иконок для предварительного просмотра.

Хотелось бы отдельно остановиться на возможности предварительного просмотра иконки. Тот, кто сталкивался с разработкой и продвижением приложения в App Store или Google Play Market, знает, как сильно иконка влияет на восприятие приложения целевой аудиторией. Особенно при первом визуальном контакте. Хорошая иконка может существенно улучшить уровень продаж, привлекает внимание пользователя, влияет на запоминаемость приложения.

В Mockup.io есть возможность загрузить несколько вариантов иконки и оценить их внешний вид в реальном контексте: на экране устройства, в листинге или на страничке приложения в App Store или Play Market.

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

Например, для создания интерактивных ссылок в прототипе используется меню «Links and Scrolling». Интерактивная (кликабельная) зона выделяется левой кнопкой мышки. В появившемся окне можно выбрать экран, на который эта зона будет ссылаться.

Не забываем и про нативные iOS или Android-анимированные переходы между страницами (transitions). В Mockup.io можно выбрать любую из существующих анимаций перехода от страницы к странице.

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

Кроме линковки страниц, меню «Links and Scrolling» позволяет работать с «длинными» страницами — настраивать фиксированные зоны для скроллинга. Для того, чтобы эти зоны можно было устанавливать максимально точно, в Mockup.io предусмотрена небольшая лупа. Она немного увеличивает ту зону, в которой устанавливается фиксатор.

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

Как мы говорили ранее, любой из прототипов для iOS или Android-устройств можно запустить на реальном телефоне или планшете. Для этого потребуется скачать и установить приложение из App Store или Google Play.

После запуска Mockup.io на устройстве вы попадете в список доступных проектов (созданных вами или в которые вы приглашены). Выбрав нужный проект и экран, с которого необходимо начать работу с прототипом, нажимаете кнопку Play.

При этом интерактивные зоны на каждом их мокапов будут подсвечены голубой рамкой. В приложении поддерживаются GIF-анимированные мокапы. «Длинные» страницы будут отображены как страницы со скроллингом.

Для удобства новых пользователей, в веб-приложении создан демонстрационный проект, который отображает основные возможности Mockup.io. Он доступен в тот момент, когда проект уже создан, но в него не загружено ни одного мокапа.

Планы и прогнозы

За последние годы приложения для мобильных телефонов становятся must-have для многих компаний. Это уже не прихоть, а необходимость: пользователь все больше и больше действий совершает с мобильных устройств, пользуется электронными аксессуарами.

Именно этот тренд и определеяет востребованность таких платформ, как Mockup.io. Они помогают в разработке приложений, упрощают коммуникацию с клиентами и внутри команды, помогают экономить временные и денежные ресурсы.

Главные преимущества Mockup.io:

  • ориентированность на мобильные устройства — вся функциональность разработана и продумана таким образом, чтобы максимально оптимизировать работу именно с прототипами для мобильный устройств;
  • интуитивность и простота — даже самый неопытный клиент разберется что к чему и зачем.

Mockup.io относится к инструментам прототипирования, которые работают с готовыми мокапами страниц: это могут быть схематические макеты или полностью нарисованные дизайны. Она не предназначена для построения страниц приложения «с нуля» и не поддерживает работу со слоями. Альтернативой работы со слоями может служить поддержка GIF-анимированных макетов.

Несмотря на свою простоту, Mockup.io — очень продуманный инструмент. В процессе работы с ним открываешь для себя очень много приятных «мелочей», которые существенно упрощают работу. Это еще раз доказывает тот факт, что инструмент создавался специалистами, которые постоянно работают с прототипами и знают, как можно улучшить и упростить работу с ними.


Присылайте собственные интерфейсные кейсы, в результате которых вам удалось заметно улучшить (или, наоборот, ухудшить) показатели проекта, а также описания инструментов, которые будут полезны представителям индустрии. Интересные материалы обязательно попадут на страницы рубрики «Интерфейсы».
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Зарегистрировался нормально, а вот попробовать не могу. У них socket.io сбрасывает подключение :(

0

Андрей, это скорее всего связано с ограничениями вашей сети. Вы не пробовали зайти в приложение с другой сети?

0

Не приходит письмо для подтверждения. Не могу потестить

0

В сафари тексты на сайте отказываются появляться

0

а зачем все это нужно если есть инвижен?

Сервис удовлетворил!

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Sasha Zivers

Мы ещё и яиц сами не несём, но пригорелую яичницу враз распробовать можем.

«Никому не выгодно, чтобы у вас скапливались деньги»
0
Sasha Zivers

*паталогически собирает

«Никому не выгодно, чтобы у вас скапливались деньги»
0
Sasha Zivers

Не в Плюшкина, а в Скруджа.
"Синдром Плюшкина" в психиатрии это когда человек собирает бесполезный хлам.
А Скрудж (у Диккенса) собирал деньги всю жизнь и не пользовался ими.

«Никому не выгодно, чтобы у вас скапливались деньги»
0
Sasha Zivers

Ну вот об этом как раз и много говорит и повторяет Кийосаки.
Но до многих так и не доходит и продолжают твердить как заводные: "его книжки не работают в россии!!"
Рилли? Не работает экономить на пассивах и умножать активы?)

«Никому не выгодно, чтобы у вас скапливались деньги»
0
Sasha Zivers

Ну да, лучше послушайте гипнотезёра, лол.

(уточнил, т.к большинство не знает, кто это вообще)

«Никому не выгодно, чтобы у вас скапливались деньги»
0
Показать еще