Elettracompany.com

Компьютерный справочник
1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Прототип мобильного приложения онлайн

Бесплатные программы для прототипирования интерфейсов

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

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

Marvel

Золотая середина в плане богатства функциональных возможностей и лёгкости освоения. Программа поможет вам сделать очень классный постраничный прототип мобильного приложения. В ней вы сможете закрепить навбар и таббар и листать контент внутри, а плагин Marvel для Sketch позволяет импортировать макет из Sketch в Marvel. Но при этом в программе можно накидать дизайн с помощью внутренней «дизайн-студии». Здесь даже есть функции послойного прототипирования, хотя полноценными их назвать трудно.

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

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

Минусы: нет удобных символов (как, например, в InVision) и разных состояний экранов. На десктопе приложение работает только в вебе.

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

Цена: бесплатно — для двух проектов, больше — 14 $.

POP App

Это был первый сервис для прототипирования приложений, с которой я познакомился. Она позиционирует себя как простой инструмент для работы даже с очень сырым макетом. Вы прикидываете на бумаге, как будут выглядеть экраны в вашем приложении, фотографируете наброски и обрабатываете с помощью POP App. Объекты интерфейса, которые должны быть интерактивными, можно выделить и связать с другими объектами и экранами; например, кнопка login связывается с экраном регистрации. В итоге у вас получается быстрый прототип, экраны которого нарисованы на бумаге в буквальном смысле. Но вместо ручных эскизов вы можете использовать и макеты, созданные в графических редакторах.

POP App работает по принципу постраничных программ для прототипирования пользовательского интерфейса. Вы загружаете в них кипу экранов (порядка 50–100) и соединяете их переходами. Редактор воспринимает каждый экран в макете как слитую картинку. На ней вы выделяете какую-то область и указываете, на какой экран человек попадёт, если нажмёт на эту область.

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

Как показать прототип заказчику или пользователю: попросить его поставить на свой девайс специальное приложение.

Цена: бесплатно для двух проектов и одного пользователя. Создать в POP App больше проектов можно, заплатив от 12 $ в месяц.

Эта программа для прототипирования интерфейса более продвинутая, чем Marvel, и позиционирует она себя как инструмент для профессионалов. У программы есть плагин для Sketch — Craft, который позволяет превращать дизайн-макет в прототип прямо в Sketch, без отрыва от производства. Среди других бонусов быстрая подстановка шаблонов имён, заголовков, дат и текстов. Например, в макете вам нужно быстро представить кучу разных имён, тогда вы выделяете нужные слои и нажимаете соответствующую кнопку в плагине, и вуаля, плагин сам подставляет рандомный контент. Этот же плагин даёт возможность использовать фото с бесплатного стока Unsplash. Сделать дизайн прямо в InVision пока не получится, но, по слухам, скоро появится и такая возможность.

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

Плюсы: удобные комментарии к прототипам — можно прямо в чате обсуждать ту или иную функцию. Также недавно появилась возможность «инспектить» макет: разработчик может посмотреть размеры объектов в прототипе, расстояние между ними и так далее — прямо как в Zeplin. А ещё есть возможность совместной работы и менеджер задач, похожий на Trello.

Минусы: после Marvel интерфейс InVision не самый удобный. Чтобы выбрать нужный экран, нужно долго искать его в списке, то есть предварительно нужно запоминать название. А если экранов больше 50, это превращается в сущий ад.

Как показать прототип заказчику или пользователю. Показывать прототип пользователю можно также через мобильное приложение.

Цена: бесплатно навсегда.

Origami Studio от Facebook

На фоне вышеописанных программ для разработки прототипов приложений Origami Studio самый сложный. Работает инструмент только на Mac и только с аккаунтом разработчика Apple. К программе можно подключить очень много патчей, что расширяет её возможности, но разобраться в них без туториала сложно.

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

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

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

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

Atomic

Цена: бесплатно для одного проекта; 19 $ в месяц для неограниченного количества проектов; 99 $ в месяц, если программой пользуется команда до пяти человек, от 145 $ в месяц, если больше.

Adobe XD

RapidUI

Цена: бесплатно, и это тоже бета-версия .

Webflow

Цена: бесплатно для двух проектов. Для десяти — 16 $ в месяц, за 35 $ в месяц можно получить неограниченный доступ. Эти цены не включают стоимость поддержки хостинга и действуют, если вы платите за год использования.

MockFlow

бесплатно для одного проекта. Лимит в количестве проектов снимается за 14 $ в месяц. Для команд подписка стоит от 29 $ в месяц.

MOCKUP.IO

Заключение

Прототипирование — обязательный этап при создании дизайна в компании Лайв Тайпинг. После того как прототип утверждён, мы создаём макет, который идёт в разработку (подробнее о смысле этого этапа мы писали в нашей статье «Как мы делаем проекты: проектирование и прототипирование»). И это только начало работы над вашим проектом, но очень важное. Подробно о каждом этапе создания мобильного приложения вы можете на нашей бесплатной консультации. Расскажите о своём проекте в форме заявки, и мы вам позвоним.

Рабочий макет: 5 сервисов для создания прототипов приложений

5 февраля 2014 в 10:24

Читать еще:  Решить егэ по литературе онлайн

Хотя Google обогнал Apple в 2013 году по количеству созданных приложений, платформа iOS всё ещё остаётся самой прибыльной для разработчиков. H&F нашёл несколько сервисов создания прототипов и эскизов приложений на iOS.

Приложение Prototyping on Paper позволяет использовать для прототипирования самые простые и доступные инструменты — карандаш, бумагу и айфон. Нарисуйте эскизы от руки, сфотографируйте их — сервис автоматически отрегулирует яркость и размер, позволит сделать симулятор вашего будущего приложения. В POP можно создать систему линков и с её помощью проследить, как приложение будет реагировать на нажатие той или иной кнопки. Также POP позволяет делиться созданным прототипом с коллегами и друзьями, собирать фидбэк.

Редактор для создания интерактивных мокапов — моделей дизайна в натуральную величину — в вебе. Бесплатно можно отрисовать одно приложение, за $7 в месяц — три, за $15 в месяц — неограниченное количество. Сервис представляет собой настоящий конструктор графических элементов, которые могут понадобиться при создании дизайна приложения для AppStore. При желании можно найти ряд похожих по функционалу редакторов, например Balsamiq или MockingBird.

Приложение позволяет создавать мокап прямо на айпаде. Рисовать эскизы можно пальцем, также существует возможность выбора графических элементов из библиотеки. Некоторые элементы линкуются и при желании можно создать подобие работающего приложения для демонстрации. AppCooker предлагает много функций для любителей поковыряться в деталях. Например, можно сделать несколько разных вариантов иконки или поиграть с калькулятором цены приложения. Стоит недёшево — $13,99. Этот и похожие сервисы идеально подходят для прототипирования в условиях долгого перелёта.

Редактор для создания интерактивного прототипа. Для того чтобы им пользоваться, необходимо иметь готовые макеты. Впрочем, загрузить в приложение можно не только хорошо проработанные мокапы, но и совсем сырые скетчи. Оно легко и удобно расставляет линки между разными элементами и загружает прототип прямо на рабочий стол вашего устройства для более удобной демонстрации. Стоимость подписки на месяц для индивидуальных разработчиков — $10, для команды — $25 с каждого участника. У приложения имеются более дорогие и навороченные аналоги, а также альтернативы для десктопа: Prototype и Briefs (Mac only).

Продукт, который больше подойдёт разработчикам, предназначен в том числе для прототипирования простой и сложной анимации. С помощью Framer можно создавать интерактивные приложения на десктопе. Приложение интегрируется в программу Photoshop, то есть для начала работы вам достаточно загрузить приложение, открыть файлы проекта в фотошопе и нажать кнопку Run в Framer. Перед вами появится папка проекта, здесь же можно писать код и наблюдать за тем, как ваш прототип становится неотличим от настоящего работающего приложения.

Помощь в отборе приложений: дизайнер и проектировщик Игорь Сафонов

20 инструментов для дизайнера мобильных приложений

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

1. Proto

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

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

2. Moqups

Инструмент для создания мокапов на HTML5 с простым интерфейсом и набором форм, кнопок, полей, контейнеров и основных элементов интерфейса.

Содержит шаблоны для прототипирования приложений под iPhone и iPad.

3. UXPin

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

4. Balsamiq

Один из самых популярных инструментов прототипирования мобильных интерфейсов и приложений. В комплекте — десятки и сотни иконок и элементов интерфейса. Есть шаблоны под несколько основных смартфонов и мобильных операционных систем.

5. Justinmind

Платформа для дизайна и прототипирования мобильных приложений для iPhone, Android-смартфонов и iPad. Поддерживает работу с виджетами.

6. Fluid

Баузерное приложение на HTML5 для создания интерактивных прототипов мобильных приложений под Android, iOS и Windows 8. Поддерживает редактирование перетаскиванием, анимацию и библиотеку из 1700+ готовых элементов интерфейса. Есть возможность экспорта дизайнерских прототипов в различные типы документов и изображений.

7. Axure

Генератор интерактивных прототипов с возможность быстрого визуального редактирования и скачиваемыми библиотеками для виджетов с поддержкой фреймов для iOS, Retina-экранов, библиотеками для iPhone, iPad и Android.

8. Mockflow

Быстрый инструмент фрейминга приложений и библиотека элементов для прототипирования с поддержкой разработки дизайна приложений для iPhone, Android, iPad и Windows Phone.

9. Protoshare

Мощная платформа-конструктор с поддержкой 2D- и 3D-анимации готовых прототипов. Прототипы дизайнерских решений можно экспортировать и устанавливать на iPhone, iPad или Android-смартфон для дальнейшего тестирования.

10. Wireframe

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

11. Wireframe Sketcher

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

12. Omnigraffle

Инструмент создания интерфейсов и диаграмм для приложений под iPhone.

13. Pidoco

Веб-приложение для прототипирования с поддержкой кликабельных элементов интерфейса и модулем для тестирования прототипов. Есть симуляторы для iPhone и iPad.

14. Flair Builder

Плоские прототипы интерфейса на основе виджетов и дополнительной библиотеки элементов. НА выходе получаете полнофункциональный HTML-прототип будущего приложения с эффектами и внутренней структурой. Готовый прототип можно экспортировать для тестирования на реальных устройствах под iOS и Android.

15. iPhone Mockup

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

16. HotGloo

Мощная библиотека элементов внутри веб-приложения для прототипирования, есть поддержка CSS3-эффектов. Поддерживает совместную работу над одним проектом и комментирование в реальном времени.

17. Invision

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

18. Mokk.me

Быстрый конструктор прототипов с функциональностью drag-and-drop и редактированием виджетов. Результат можно тестировать на iOS- и Android-устройствах.

19. iPlotz

Позволяет создавать кликабельные мокапы с возможностью навигации по элементам и структуре прототипа приложения. Есть шаблоны для iPhone/iPad и устройств на основе Android. Готовый прототип можно экспортировать в IPML, JPG, PNG, PDF или HTML, либо отправить ссылкой на веб-страницу другим участникам проекта для обсуждения и совместного тестирования.

20. Pencil Project

Завершает подборку open-source инструмент разработки диаграмм и прототипов интерфейса с поддержкой встроенной библиотеки форм и элементов и возможностью создавать визуальные блок-схемы для дизайнеров мобильных приложений.

4 отличных сервиса для создания прототипов сайтов

Время чтения | 5 min read

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

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

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

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

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

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

Wireframe.cc

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

Для создание наброска потребовалась одна минута:

А если посидеть чуть дольше:

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

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

Премиум-тариф позволяет работать в личном аккаунте, с многостраничными проектами, поддержкой ревизий действий, кликабельными элементами и возможностью экспорта в PDF и PNG. Цена вопроса от $15 в месяц.

InVision App

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

Тот же макет сайта, с помощью InVisionn App, можно сделать настолько качественно, что останется только отправить созданный проект на верстку. Есть встроенные инструменты для проектного менеджмента, контроль версий, совместная работа в реальном времени и много всего другого:

Прайс довольно демократичный. Возможность создания трех и более проектов от $15. Если вы собираетесь работать только над одним проектом, можно пользоваться сервисом неограниченное время.

NinjaMock

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

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

Пример макета страницы Toster.ru, из официального блога NinjaMock на Хабре:

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

Moqups.com

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

Библиотека Moqups содержит сотни элементов, которые можно использовать для «конструирования» сайтов, сервисов, настольных и мобильных приложений. Создаете страницу (можно сортировать по папкам), и просто перетаскиваете на холст нужный объект из вкладки «Stensils»:

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

Есть возможность создавать свои собственные шаблоны, рабочее пространство отличается гибким управлением, есть огромная библиотека иконок и широкие возможности для экспорта:

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

Ложка дегтя в Moqups – аккаунт платный. Базовый тариф $19 в месяц включает до 10 проектов. На мой взгляд дороговато для жителей тех стран, чьей национальной валютой не является доллар США.

Стоит ли использовать такие сервисы?

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

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

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

А вы используете сервисы для создания прототипов в своей работе? Как часто и для чего?

Сравнение: 5 инструментов для прототипирования приложений

Proto.io, Pixate, Origami, Framer и Form

Я взял за основу процесс онбординга в приложении IF от IFTTT и решил воссоздать этот процесс в пяти инструментах для прототипирования: Proto.io, Pixate, Framer, Origami от Facebook и Form от RelativeWave. Цель была — сравнить эти инструменты.

На видео ниже видно, как работают 5 моих прототипов в сравнении с оригиналом:

Страницы или слои?

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

Когда в основе страницы

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

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

Новое. Журнал для digital-дизайнеров. Посмотреть, что за зверь.

Примеры инструментов, в основе которых страницы: Briefs, InVision, Notism, Flinto, Fluid, Mockup.io, Prott, POP, Marvel, Balsamiq, Red Pen и Keynotopia. Конечно, в некоторых из них можно настроить анимации или зоны прокрутки на странице, но все же они не дают воссоздать все возможные взаимодействия, какие будут в настоящем приложении.

Когда в основе слои

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

Я пробовал инструменты Proto.io, Pixate, Framer, Origami от Facebook и Form от RelativeWave. Честно говоря, есть и другие — Axure и Indigo Studio — но они показались мне корпоративными (читай: достаточно дорогими). Возможно, я попробую их в другой раз.

Читать еще:  Эрудит онлайн олимпиады по химии

А пока поговорим об избранных.

Proto.io

Веб-приложение, есть плееры под iOS и Android.

Proto.io — на удивление мощное веб-приложение с кучей функций. Но там бывает сложно найти нужную настройку, потому что все работает через перетаскивание, нажимание кнопочек и выбор значений из списка.

Чтобы реализовать фишку прототипа IF (разные объекты двигаются с разной скоростью), мне пришлось добавить несколько собственных JavaScript-вычислений. В соответствующее текстовое поле влезала только одна строчка, поэтому пришлось хранить мои длинные вычисления в отдельном файлике на компьютере. Хочу также отметить, что эти JavaScript-выражения могут просто взять и не сработать. Если что-то не работает, обязательно проверьте консоль своего браузера. (У меня выдавало ошибку из-за отрицательного значения переменной).

Предпросмотр в процессе создания прототипа

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

Как отправить прототип клиенту

  • в веб: очень просто — генерируем публичную ссылку вроде этой. (Такую ссылку можно открыть и с мобильного устройства, и сохранить на рабочий стол в iOS в виде “приложения”). Также можно выложить работу для широкой аудитории на Proto.io Spaces.
  • через устройство: можно создать для клиентов специальные аккаунтырецензентов (они бесплатные) и дать доступ к проекту. Клиенты смогут смотреть прототипы через приложение (iOS или Android).

Разница между прототипом и живым приложением

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

Плюсы

  • легко создавать быстрые макеты, потому что есть большая библиотека стандартных элементов интерфейса, и многие из них можно настроить.
  • Proto.io — единственный (из выбранных пяти) работает на основе страниц: у вас может быть несколько экранов в рамках одного проекта и вы можете создавать переходы между этими экранами.
  • объекты можно синхронизировать через Dropbox.

Минусы

  • нет предпросмотра в реальном времени
  • анимации могут тормозить, если добавить много взаимодействий (как в этом примере)
  • все прототипы сохраняются на их веб-платформе, а значит, если вы удалите аккаунт, то не сможете даже запустить старые прототипы. (Правда есть возможность “законсервировать” аккаунт за 5$ в месяц: ваши проекты будут храниться в системе, и позже вы сможете реактивировать аккаунт)
  • нет 3D анимации

Прототип

Можно посмотреть на Proto.io Spaces (зарегистрируйтесь, чтобы импортировать его в свой аккаунт)

Приложение под iOS:

Приложение под Android:

Цена:

$29/месяц или $288/год за 5 активных проектов

Есть планы для 10, 15 или 30 активных проектов, а также бесплатный 15-дневный триал.

Pixate

Десктопное приложение для OS X и Windows.

Плееры под iOS и Android.

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

Предпросмотр

Pixate Studio может использовать Xcode iOS Simulator (на Mac) для запуска прототипа. Тоже можно соединиться с приложением (iOS или Android) через местный WiFi. Такой способ отлично работает, особенно потому, что оба прототипа (в симуляторе и в приложении) мгновенно обновляются.

Как отправить прототип клиенту

  1. Если у вас план Cloud (5$ в месяц), можно опубликовать проект. Чтобы запустить прототип, клиенту нужно отсканировать QR-код на странице через плеер (на iOS или Android).
  2. Также можно добавить сколько угодно соавторов в ваш Cloud-аккаунт и дать им доступ к прототипам. Им нужно будет войти в свой аккаунт в приложении.
  3. Или можно просто отправить по почте файл формата .pixate. Этот файл можно запустить в Pixate Studio (также можно будет увидеть, как прототип сделан, и что-то поменять).

Разница между прототипом и живым приложением

Нет шестой страницы, потому что холст в Pixate ограниченной ширины.

Плюсы

  • можно быстро освоить

Минусы

  • есть некоторые баги, иногда придется искать обходные пути.

Прототип

Приложение для Mac или PC:

Мобильные приложения:

Цена:

Бесплатно! (Раньше было $149, пока Google не купил Pixate в июле 2015.)

$5 с пользователя в месяц или $50 с пользователя в год. (Есть бесплатный 30-дневный триал)

Facebook Origami

Запускается в Apple’s Quartz Composer для Mac.

Есть возможность просмотра на iPhone и iPad для тестирования.

Как вы, наверное, знаете, Origami создала та же команда дизайнеров Facebook, которая работала над Paper. Origami — это не отдельная программа, а что-то вроде плагина для Quartz Composer, визуальной программной среды, которая входит в инструменты разработчиков Apple.

Вы программируете в Quartz Composer путем соединения патчей друг с другом. У разных патчей разные функции, а Origami — это по сути набор дополнительных патчей, заточенных под дизайн мобильных интерфейсов. Многим людям (не мне) такой подход нравится больше, чем кодить; но здесь все равно приходится описывать процесс в формате “если это, то сделай то, со значением полученным через такой-то расчет, но если не это, то…” — а это все равно своего рода программирование, просто не через строчки кода, а через соединение патчей.

И кстати: IDEO также создали фреймворк для прототипирования на основе Quartz Composer, он называется Avocado. Там есть несколько функций, которые могут пригодиться для некоторых проектов: интеграция по Bluetooth, интерактивная iOS клавиатура, патч “дисковый телефон” (dial) для прокрутки круглых элементов интерфейса, патч “переворачивающаяся карта” (flippable card). Слои также можно сделать перетаскиваемыми.

Предпросмотр

  • На десктопе: у Quartz Composer есть режим просмотра, и любые изменения, сделанные в редакторе, сразу отображаются в окне просмотра.
  • На устройстве: Можно тестировать на iOS-устройстве, подключенном к Mac — в приложении Origami Live. Приложение реагирует на любые жесты (тапы, смахивания и т.д.), но это на самом деле проекция того, что запущено в Quartz Composer. Так что если ваш Mac не тянет прототип на 60fps, в Origami Live на мобильном он не будет работать быстрее.

Как отправить прототип клиенту

Это будет сложно. Конечно, можно просто запустить прототип и сделать запись экрана, но тогда пропадает вся суть интерактивного прототипа; с тем же успехом можно сделать прототип в After Effects. Единственный настоящий способ испробовать прототип на другом устройстве — это воспользоваться теми же средствами. У клиента должен быть Mac, куда он поставит Quartz Composer + Origami, чтобы запустить ваши прототипы — конечно же, после того, как зарегистрируется как разработчик Apple.

Разница между прототипом и живым приложением

Прототип может работать немного медленнее, чем живое приложение — все зависит от вашего компьютера. Quartz Composer — довольно мощная штука, скорее всего вы услышите, как работает кулер, особенно если у мака недостаточно мощная видеокарта (как на Mac Mini) или если подключено несколько мониторов (виноват!). Мой максимум — 20 fps, даже с одним монитором.

Ссылка на основную публикацию
ВсеИнструменты 220 Вольт
Adblock
detector