+7(499)-938-42-58 Москва
+7(800)-333-37-98 Горячая линия

6 инструментов для создания прототипов ПО

Содержание

6 инструментов для прототипирования сайта

6 инструментов для создания прототипов ПО

Из статьи вы узнаете:

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

Что такое прототипирование

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

Прототипирование особенно пригодится, если вам нужно создать интернет-магазин. Такие сайты всегда имеют сложную структуру, множество страниц и большой объем работы с расстановкой акцентов и управлением вниманием посетителя.

Структура интернет-магазина штор, сделанная в программе Xmind (источник)

Узнать, как продвигать интернет-магазин, избежать ошибок и вдохновиться на процесс можно на бесплатной онлайн-конференции “Интернет-магазин от А до Я” от обучающего центра Cybermarketing.

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

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

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

Пример вайрфрейма интернет-магазина в приложении Moqups

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

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

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

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

Сложность прототипа зависит от того, какие перед вами стоят задачи.

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

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

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

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

Зачем нужно прототипирование

  • Сэкономить время: вы не обращаете внимание на мелкие недочеты в дизайне, пока не ясна и утверждена общая концепция. Прототип станет дополнением к техническому заданию дизайнеру. Это сэкономит ваши деньги и время на последующие правки.
  • Отслеживать развитие продукта.
  • Эффективно коммуницировать внутри команды: инженеры, бизнес-партнеры и маркетологи говорят на одном языке.
  • Протестировать дополнение на реальных пользователях. Если вы не уверены в важности новой функции или раздела.

Инструменты для прототипирования

Существует множество программ для прототипирования. Одни подходят для формирования структуры, расстановки акцентов. Другие позволяют создать модель, которая практически не будет отличаться от готового магазина.

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

Principle

Приложение для MacOS, совмещающее в себе возможности дизайнерских программ Sketch и After Effects.

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

Посмотрите, как работает готовый прототип модуля “Чек-лист” от SeoPult, сделанный в Principle:

Прототип модуля «Чек-лист» в Principle

Balsamiq

Balsamiq позволяет создавать прототипы с нуля без дополнительных файлов. Встроенная библиотека средств пользовательского интерфейса включает приятные мелочи типа «аккордеон» или выпадающее меню.

Оглавление книги в интерфейсе приложения для чтения — пример «аккордеон»-меню, созданный в Balsamiq (источник)

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

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

Moqups

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

Moqups имеет большую библиотеку готовых шаблонов для дизайна веб-страниц и мобильных приложений, с помощью которой можно разработать модель любого уровня сложности.

Прототип мобильного приложения с сайта Moqups (источник)

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

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

InVision

Если есть макеты в формате Photoshop или Sketch, и вы хотите лучше понять, как будет работать будущий сервис, то в InVision можно связать экраны и добавить анимацию. Загрузить черновые макеты в разные проекты, разделить и группировать их, чтобы следить за процессом.

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

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

Pixate

Бесплатное приложение для рабочего стола Pixate Studio создаёт прототипы для мобильных, которые будут выглядеть как реальный продукт. Затем можно связать его с системой IOS или Android и протестировать на экране телефона.

Прототип интернет-магазина в Pixate

Чтобы делиться работой с коллегами, загрузите макеты в облако.

Axure

Дорогой, долгий, но фундаментальный. Он остаётся стандартом профессионализма для дизайнеров из России.

Пример интернет-магазина в Axure

С помощью платформы можно создавать кликабельные и адаптивные прототипы для ПК и мобильных, добавлять готовые средства из библиотеки — popup, выпадающие меню и другие формы.

Вызывает противоречивые мнения: одни говорят, что Axure сложная программа для быстрого прототипирования, другие разбираются в ней за 20 минут. Вы можете попробовать Axure. Для этого в инструменте есть пробная бесплатная версия на 30 дней.

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

В библиотеках есть готовые шаблоны форм, меню и всплывающих окон, часто встречающиеся в интернет-магазинах.

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

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

Источник: https://blog.cybermarketing.ru/6-instrumentov-dlya-prototipirovaniya-sajta/

Инструменты для прототипирования статичных изображений, анимаций и переменных — Дизайн на vc.ru

6 инструментов для создания прототипов ПО

Подборка актуальных в 2018 году сервисов от дизайнера «Сбербанка» Александра Отважного.

Новые инструменты и сервисы для дизайна и прототипирования выходят и обновляются каждый день. Я провёл полное и глубокое исследование инструментов, представленных сегодня на рынке, и помогу в них разобраться.

Я разбил список на три большие группы по функциональности и разберу каждую отдельно.

  1. Связанные статичные изображения.
  2. Компоненты и состояния, послойная анимация переходов.
  3. Переменные, программируемое реалистичное поведение, логические операторы.

Инструментов намного больше. Здесь собраны сильные и интересные решения, которые можно относительно надёжно использовать в работе. Все они имеют средства для просмотра созданных прототипов и одинаково подходят как для веб-сайтов, так и для мобильной разработки.

Спойлер: ещё нет идеального инструмента, который закроет все задачи и будет иметь всю необходимую функциональность. До сих пор приходится идти на компромиссы, использовать костыли и смекалочку. Axure в 2018 году не нужен.

Первая группа — структура, лоу-сценарии

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

Скриншот экранов с настроенными связями в Sketch

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

Самые заметные инструменты на сегодня: Marvel, Invision и нативные средства Adobe XD, Figma и Sketch (с 49-й версии).

Marvel

Простейший онлайн-сервис для создания прототипов. Работает как в виде дополнения к дизайн-редакторам, так и самостоятельно в виде веб-сервиса. Недавно обзавёлся собственным простым редактором.

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

Плюсы

  • Простота и удобство.
  • Автономность (можно работать без редакторов).
  • Условная бесплатность.
  • Инструменты для совместной работы и тестирования.

Invision App

Invision (не Studio) — тоже дополнение для редакторов, но в отличие от Marvel позволяет связывать экраны напрямую в Sketch и экспортировать уже готовый прототип без настройки переходов и связей.

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

Платная подписка стоит от $13 в месяц.

Adobe XD

Стоимость подписки 644 рублей в месяц (бесплатная версия даёт пошарить всего один прототип).

Sketch

Стоимость подписки $99 в год.

Figma

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

Например, Adobe XD сам по себе сильно отстаёт от конкурентов, а в Sketch (50) пока ещё нет удобного механизма шеринга, но в общих моментах все стремятся к единому опыту, лучше всех реализованному в Figma.

Есть бесплатная версия.

Вторая группа — переходы между экранами, послойная анимация

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

Пример экрана настройки анимации в Invison Studio

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

Principle

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

Не подходит для сборки сложных разветвлённых прототипов из-за неудачного способа организации экранов, невозможности переиспользовать элементы и сложного редактирования анимации. Нет экспорта в код.

Лицензия стоит $129.

Invision Studio

Многообещающий инструмент от Invision находится в раннем доступе. Заявляется как ещё один дизайн-редактор с большой функциональностью. И действительно, несмотря на проблемы со стабильностью, инструмент предоставляет удобную работу с прототипом, отличный редактор анимации, полную поддержку всех сервисов Invision. И сейчас он распространяется бесплатно.

Flinto for Mac

Flinto использует тот же принцип создания и анимации прототипов, что и Invision Studio, чем выгодно отличается от Principle. Подход, при котором сложная детальная анимация настраивается в отдельном от общего экрана интерфейсе, позволяет легко управлять процессами, редактировать и переиспользовать компоненты в следующих прототипах.

Лицензия стоит $99.

Kite Composer

Kite Composer станет отличной заменой перечисленным инструментам для тех, кто привык анимировать интерфейсы в After Effects. Принцип работы, при котором основным инструментом становится таймлайн, а параметры и события навешиваются на объекты как фильтры, позволяет сфокусироваться на качестве анимации. Также имеются экспорт кода в macOS или iOS и встроенный инспектор.

Лицензия стоит $99.

Третья группа — программируемое поведение

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

Настройка поведения прототипа в Framer

Каждый инструмент отличается своим подходом к процессу и своим способом программирования — от упрощённого JavaScript в Framer до визуального Quartz Composer в Origami Studio.

Прототип, собранный в Origami Studio. По ссылке — исходный файл, который можно открыть на телефоне в приложении Origami Live

Haiku

Уже сейчас, в бете, Haiku предлагает широкий набор возможностей для анимации и интерактивности. Вкратце, инструмент подключается к Sketch- или Figma-файлу и позволяет редактировать параметры объектов на общем таймлайне. Больше подходит для анимации, но благодаря редактору Actions, работающем на JavaSript, можно прописать сложную логику прототипа.

Полученный результат экспортируется с помощью библиотеки Lottie.js на все возможные платформы и форматы.

Сервис находится в бета-версии, пока бесплатен.

Proto.io

Стоимость подписки от $24 в месяц.

Atomic.io

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

К сожалению, в таком формате собирать и редактировать связи сложнее, чем специальными средствами. Также необходимость работы в браузере накладывает свои ограничения на процесс.

Есть бесплатная версия.

Framer

Один из самых популярных на сегодня инструментов со своим дизайн-редактором и средой программирования на CoffeeScript — упрощённой версии JavaScript.

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

Однако на сложных прототипах работа с кодом, правка и отладка занимают много времени. На выходе получается условный HTML в браузере, который нельзя использовать в мобильной разработке. Поэтому Framer не может использовать нативные возможности мобильных устройств, камеру, вибро, гироскоп и другие.

Стоимость подписки от $12 в месяц.

Origami Studio

Бесплатный инструмент от использует визуальную среду программирования Quartz Composer.

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

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

Phase

Многообещающий инструмент, который должен выйти в июне 2018 года. Разработчики заявляют, что будет революционный процесс, объединяющий визуальное программирование и таймлайн. Звучит очень хорошо, обязательно нужно попробовать.

В 2018 году отпала необходимость в отдельных простых инструментах прототипирования — вся функциональность в той или иной степени поддерживается дизайн-редакторами. Лично мне для простых прототипов хватает Figma.

Сложные логические штуки я сейчас собираю в Origami. Также перешёл с Principle на Invision Studio — даже в раннем доступе это очень удобный инструмент для анимации. Очень надеюсь на Phase, кажется, он сможет заменить нам все инструменты и предложить удобный для всех рабочий процесс в одном окне.

#дизайн #инструменты

Источник: https://vc.ru/design/41007-instrumenty-dlya-prototipirovaniya-statichnyh-izobrazheniy-animaciy-i-peremennyh

8 инструментов для создания UX/UI прототипов, на которые стоит обратить внимание

6 инструментов для создания прототипов ПО

Программы для прототипирования – это связующее звено между творческой идеей и конечным продуктом. Совсем недавно в области UX/UI дизайна царил Photoshop, однако, проведенный опрос показал, что этот самый известный графический редактор стал терять популярность среди разработчиков.

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

Инструменты для UX/UI проектирования

В последнее время на рынке появилось множество новых инструментов для прототипирования, среди них популярная программа Axure и новинка Mockplus.

В данном обзоре приводится краткое описание восьми программ, на которые, по мнению редакции, стоит обратить внимание в этом году.

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

1. Axure RP

Axure RP Pro – это программное обеспечение для создания прототипов, макетов, спецификаций веб-сайтов и приложений. Программа позволяет вставлять виджеты простым перетаскиванием мышью, а также изменять их размер и формат.

Axure RP Pro является полноценным UX-инструментом, позволяющим разработчикам проектировать сложные интерактивные прототипы, но для ее освоения потребуется время.

Если вы профессиональный разработчик, с помощью Axure RP Pro вы сможете создавать более сложные интерактивные прототипы.

2. Mockplus

Mockplus – это простой инструмент для создания прототипов, созданный быстрорастущей инновационной компанией Jongde Software LLC. Программа рассчитана на автономное использование и поддерживает работу по прототипированию программного обеспечения для всех основных платформ: ПК, мобильные приложения и веб-приложения.

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

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

Программа имеет необходимый набор UI-виджетов и иконок – все, что нужно для работы с вашими виджетами. Существует возможность предварительного просмотра прототипа путем экспорта HTML/изображения, либо его тестированием на существующем устройстве с помощью QR-кода.

Рекомендуем к прочтению: https://primeliber.com/mockplus/mockplus-sozdanie-prototipov-bystree-kachestvennee-i-proshche

3. Balsamiq Mockups

Balsamiq Mockups – это экспресс-инструмент для прототипирования, который поможет вам работать быстрее и эффективнее. В программе реализован метод работы, максимально приближенный к рисованию на простой доске.

Программа отличается простым интерфейсом и имеет большой набор UI-элементов. Стандартные виджеты упорядочиваются на экране простым перетаскиванием мышью.

Существует две версии программы: для автономного использования и в виде расширения для Google Drive, Confluence и JIRA.

4. Justinmind

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

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

Если вы не профессиональный разработчик, вам будет сложно освоить этот инструмент – вот такой недостаток.

5. InVision

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

6. UX Pin

UX Pin – это онлайн-инструмент для прототипирования, который позволяет построить требуемую модель интерфейса простым перетаскиванием мышью, без необходимости обращаться к программированию.

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

С помощью UX Pin можно создавать реалистичные модели и импортировать слои из таких программ, как Sketch и Photoshop.

7. OmniGraffle

OmniGraffle – это приложение, разработанное компанией The Omni Group, для создания диаграмм и цифровых изображений, которое работает с Mac, iPhone, iPad и iPod touch.

Программа может использоваться как автономно, так и как веб-приложение; в ее состав входит несколько инструментов для разработчиков.

OmniGraffle позволяет перетаскивать объекты мышью, а также снабжена функцией вставки примечаний и создания спецификаций прототипов и моделей. Данное приложение является идеальным инструментом для работы на iPhone и iPad.

8. Flinto

C помощью Flinto разработчик может быстро создавать интерактивные прототипы и макеты для мобильных, автономных и веб-приложений. Программа снабжена всем необходимыми инструментами для создания анимации переходов, а также системой управления экраном для работы с большим количеством экранов приложений. Если вам необходим прототип для приложения под управлением iOS, Flinto – ваш выбор.

Заключение

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

Если вам необходим простой недорогой инструмент, рекомендуем Mockplus, так как он не такой сложный, как Axure и Justinmind, а по функционалу превосходит Balsamiq.

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

Рекомендуем к прочтению:https://primeliber.com/Osmanov%20Emil/chto-nuyono-znat-ui-ux-dizajneram-ob-instrumentah-dlya-sozdaniya-prototipov

Источник: https://medium.com/@Mockplus/8-ux-and-ui-wireframe-tools-you-must-try-in-2016-f8cccf7f6e#.w17ngo3ie

Источник: https://spark.ru/post/15598

?‍♂️ Как выбрать инструмент для прототипирования в 2018 году?

6 инструментов для создания прототипов ПО

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

На самом деле, инструментов намного больше. Здесь собраны сильные и интересные решения, которые можно относительно надёжно использовать в работе. Все они имеют средства для просмотра созданных прототипов и одинаково подходят как для веб-сайтов, так и для мобильной разработки.

Спойлер: Ещё не подвезли идеального инструмента, который закроет все задачи и содержит весь функционал. До сих пор приходится идти на компромиссы, использовать костыли и смекалочку. Axure в 2018-м году не нужен.

? 1-я группа — структура, лоу-сценари

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

Скриншот экранов с настроенными связями в Sketch

low-test-one

Интерактивный прототип, собранный в Figma. Нажмите на красный квадрат.

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

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

На сегодняшний день самые заметные инструменты — Marvel, Invision, и нативные средства Adobe XD, Figma, и Sketch (с 49-й версии).

Marvel

https://marvelapp.com/ — есть бесплатная версия

Простейший онлайн-сервис для создания прототипов. Работает как в виде дополнения к дизайн-редакторам, так и самостоятельно в виде веб-сервиса. Недавно обзавелся собственным простым редактором.

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

Бесплатная версия имеет ограничение на количество проектов, но в приложении оно выключено и можно вполне легально создавать сколько угодно проектов.

? Плюсы
+ Простота и удобство+ Автономность (можно работать без редакторов)+ Условная бесплатность+ Инструменты для совместной работы и тестирования? Минусы− Не замечено

Invision App

https://invisionapp.com/— от 13$ в месяц

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

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

Вместе с инструментом прототипирования идёт широкий набор сервисов для совместной работы, хранения библиотек, собственного стока и много другого.

? Плюсы

+ Развитая экосистема дополнительных сервисов

+ Возможность настраивать связи прямо в скетче

? Минусы

− Не замечено

Adobe XD

https://www.adobe.com/ru/products/xd.html — 644 ₽ в месяц

Sketch

https://www.sketchapp.com — 99 $ в год

Figma

https://www.figma.com — есть бесплатная версия
Встроенные в дизайн-редакторы инструменты прототипирования полностью закрывают функционал отдельных веб-сервисов.

Имеются небольшие отличия, связанные с развитием редакторов.

Например, Adobe XD сам по себе сильно отстаёт от конкурентов, а в скетче (50) пока еще нет удобного механизма шеринга, но в общих моментах все стремятся к единому опыту, лучше всех реализованному в Figma.

? Плюсы

+ All-in-one платформа — один инструмент для всего рабочего процесса

+ Не стоит дополнительных денег.

? Минусы

− Наследуются от инструмента. Например, Скетч запускается только на маках, а Фигма не работает без интернета.

?‍? 2-я группа — переходы между экранами, послойная анимация

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

Пример экрана настройки анимации в Invison Studio

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

Источник: https://ux.pub/kak-vybrat-instrument-dlya-prototipirovaniya-v-2018-godu/

6 инструментов для создания прототипов ПО

6 инструментов для создания прототипов ПО

28 апреля в Москве проходит двухдневный «хакатон» — марафон среди разработчиков мобильных приложений и веб-сервисов. Пройдет мероприятие мероприятие на территории акселератора стартапов API Moscow на «Красном Октябре».

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

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

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

POP — Prototyping on Paper

POP — Prototyping on Paper. Платформа: iOS, Android. Стоимость: бесплатно.

Это бесплатное приложение позволяет быстро создать прототип мобильного приложения для нового проекта, проверить его связность и структуру экранов. Пользователь POP может сделать наброски будущего интерфейса своего приложения просто на бумаге формата А4 с помощью ручки или карандаша.

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

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

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

Кроме того, это приложение будет полезно тем, кто заказывает новый продукт iOS– или Android-разработчику, но не может внятно «на пальцах» объяснить тому, как конкретно должен выглядеть конечный продукт.

Balsamiq

Balsamiq. Платформа: Mac OS, Windows, Linux. Стоимость: $79.

Это еще один — на этот раз, «настольный» — инструмент для прототипирования.Процесс взаимодействия с сервисом любому разработчику покажется довольно простым и интуитивно понятным.

 С помощью Balsamiq можно быстро составить условную схему структуры и компонентов формы приложения.

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

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

Keynotopia

Keynotopia. Платформа: Mac OS, Windows, iOS. Стоимость: $39 – 97.

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

Преимущество Keynotopia в том, что эта программа предлагает пользователю не рисовать макеты «с нуля», а взять за основу готовый шаблон и изменить его в соответствии со своими потребностями и требованиями.

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

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

Стоимость использования сервиса зависит от выбранного пользователем шаблона. Их продают по цене от $39 до $97. C помощью Keynotopia можно создавать макеты приложений для iOS, Android, BlackBerry OS, Windows Phone, Windows, Mac OS, а также веб-приложений и аппов для .

FluidUI

FluidUI. Платформа: Web. Стоимость: бесплатно

Это еще один инструмент для прототипирования приложений для iOS, Android, Windows Phone и Windows 8. Его отличие в том, что создавать макеты будущих программ здесь предлагается в режиме онлайн прямо в окне браузера.

FluidUI — мощный инструмент: пользователю предлагают огромный выбор различных элементов интерфейса (кнопки, поля ввода, переключатели, чекбоксы, полосы прокрутки и т.д.

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

То есть разработчик может смоделировать макет, а затем загрузить его на своем смартфоне.

Основные функции сервиса можно протестировать бесплатно, но для его полноценного использования придется заплатить. Сколько — зависит от выбранного тарифного плана (от $12 до $49 в месяц). Каждый из них подразумевает разное количество доступных инструментов.

AppCooker

AppCooker. Платформа: iOS. Стоимость: $19,99

Это приложение для iPad предназначено для создания прототипов других программ для мобильных устройств Apple. Создавать макеты с его помощью примерно так же просто, как заниматься творчеством в Garage Band и iMovie. Дизайн соответствующий: крупные изображения проектов, которые можно пролистывать влево-вправо. В общем-то, своей простотой AppCooker и подкупает в первую очередь.

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

Следующим этапом будет редактирование внешнего вида иконки будущего приложения. А в самом конце сервис предложит определиться со стоимостью будущего приложения.

Чтобы пользователь мог правильно определиться с ценовой политикой здесь есть целый ряд подсказок и специальная формула, позволяющая определить «оптимальную» с точки зрения будущих дохов стоимость аппа.

же «фишка» AppCooker — в том, что в момент разработки макета приложения пользователь всегда будет видеть, как оно будет выглядеть непосредственно на iPad.

Proto.io

Proto.io. Платформа: Стоимость: $24 – 160 в месяц

Proto.io — это продвинутый и симпатичный веб-сервис для тестирования предварительных версий своих приложений. С помощью Proto.io можно тестировать и проверять все свои идеи в области программных решений. Никаких знаний в области программирования при этом не требуется: все нужные элементы добавляются в программу с помощью техники drag and drop.

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

Бесплатная версия сервиса создавать макеты объемом не более пяти страниц, а пространство под их хранение не превышает 10 Мб. Платные тарифы до определенной степени снимают эти ограничения.

Источник: https://otchetonline.ru/art/direktoru/40008-6-instrumentov-dlya-sozdaniya-prototipov-po.html

Поделиться:
Нет комментариев

    Добавить комментарий

    Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.