Хотите изучить UX с нуля? Получите всю коллекцию UX-книг, охватывающую основы, проекты, советы, инструменты и многое другое с SitePoint Premium. Присоединяйтесь сейчас всего за $ 14,99 / месяц .
По мере того, как число и разнообразие инструментов для создания прототипов продолжает расти, становится все труднее выяснить, какие инструменты отвечают каким потребностям и для кого они подходят. С тех пор, как мы впервые написали эту статью в 2015 году, бесчисленное количество дизайнерских приложений доминировало (и изменило) пространство прототипирования.
Отзывы заинтересованных сторон и тестирование пользователей в настоящее время играют гораздо более важную роль в разработке пользовательского интерфейса, и это новое поколение инструментов призвано соединить эти два ранее отдельных этапа процесса проектирования. Клиенты хотят быть вовлеченными, и электронная почта больше не сокращает это. Некоторые приложения, такие как UXPin, также заботятся о этапах создания каркаса, в то время как другие, такие как InVision App, сокращают разрыв между дизайнером и разработчиком, предлагая инструменты передачи дизайна.
Кроме того, теперь существует четкое разделение между настольными инструментами с облачным общим доступом (Adobe XD, Axure, Balsamiq, Sketch + InVision) и совместными онлайн-инструментами (Figma, UXPin, Fluid UI, Proto.io).
Многие из этих инструментов, похоже, сходятся в наборе функций, который определяет роль современного дизайнера пользовательского опыта. TL; DR — вот быстрое сравнение инструментов прототипирования.
Эта статья была обновлена в марте 2019 года, чтобы отразить текущее состояние рынка инструментов для прототипирования.
Adobe XD
Adobe, возможно, была застигнута врасплох во время появления Sketch, но они быстро восполняют это с помощью Adobe XD. Запущенный в марте 2016 года, он является последним дополнением к Adobe Creative Cloud Suite. Хотя вы можете создавать прототипы взаимодействий в Sketch с помощью Craft Plugin, Adobe XD впечатляюще предлагает эти инструменты прямо из коробки, поэтому дизайнеры уже сравнивают Adobe XD с Sketch, как давние конкуренты.
Это определенно стоит посмотреть, если вы заинтересованы в инструменте, который охватывает все ваши базы (прототипирование с низкой точностью, прототипирование с высокой точностью , пользовательские потоки, совместное использование и обратная связь) в одном приложении.
Сильные стороны
- Доступно для macOS и Windows
- Все, что вам нужно в одном приложении
Слабые стороны
- Рабочий процесс плагина не существует, вы заблокированы в экосистеме Adobe
Приложение InVision
InVision App — это самый большой и самый успешный инструмент для совместной работы на рынке, который в настоящее время существует на рынке. Это основной инструмент для серьезных дизайнеров и корпоративных групп. Благодаря таким инструментам, как совместная работа с доской, динамическое создание прототипов, комментарии, предварительный просмотр устройства, видеовызовы, тестирование пользователей, управление версиями и передача дизайна, InVision уже является колоссальной силой в пространстве прототипирования, но если учесть ее интеграцию с Sketch и Photoshop, она становится универсальный дизайнерский пакет, особенно когда вы добавляете в Craft плагин Sketch / Photoshop, который предоставляет множество этих функций непосредственно в выбранном вами приложении для дизайна.
Начиная с первого выпуска этой статьи, компания также выпустила InVision Studio, бесплатный, но мощный инструмент UX-дизайна, который получил положительные отзывы. Это позволяет пользователям отказаться от Sketch и Photoshop и сохранить весь процесс проектирования в экосистеме InVision. Теперь он доступен на Mac, версия для Windows находится в разработке.
Сильные стороны
- Мощная, зрелая платформа
- Полностью интегрирован со Sketch для высококачественного дизайна
- Постоянно обновляется новыми функциями
Слабые стороны
- Поначалу набор функций может быть немного подавляющим
- InVision Studio в настоящее время доступна только для macOS, но поддержка Windows уже началась. Эскиз доступен только для пользователей MacOS (но вы можете связать InVision с Photoshop в Windows, хотя Photoshop не является инструментом разработки пользовательского интерфейса).
Marvel App
Очень сильный фаворит для тех, кто ищет более простые и дружественные альтернативы InVision App. Marvel App преуспел в создании инструмента для создания прототипов, который подойдет как продвинутым дизайнерам UX, так и тем, кто просто хочет донести концепцию высокой и низкой точности. Кроме того, несмотря на то, что они выступают за работу со Sketch, они также предлагают библиотеки компонентов, обеспечивающие полный рабочий процесс в Marvel. В Marvel App также недавно была добавлена любимая фанатами POP , которая позволяет дизайнерам воплощать свои идеи, касающиеся перьев и бумаги, в приложения для iPhone и Android.
Сильные стороны
- Отличная поддержка переходов для дополнительного реализма
- Дружественный для не дизайнеров, особенно когда дает обратную связь
Слабые стороны
- Только веб
- Нет автономного проектирования
UXPin
UXPin является наиболее полным онлайн-решением для дизайнеров UX с точки зрения их предложения. Хотя вы можете импортировать из Sketch и Photoshop, вы также можете создавать сложные и гибкие интерфейсы с помощью встроенных библиотек UXPin, что делает UXPin чем-то вроде инструмента для создания каркасов. Благодаря своим функциям систем проектирования , UXPin становится одним из самых сложных инструментов с точки зрения автоматизированной документации, переноса между разработчиками и разработчиками и совместной работы. Планы начинаются с 20 долларов в месяц.
Сильные стороны
- Адаптивный дизайн с точками останова
- Мощные анимации ( не только ссылки на экраны )
- Комплексное проектное решение для совместной работы
Слабые стороны
- Дополнительные функции увеличивают сложность использования
WebFlow
Webflow — это визуальный инструмент для разработки адаптивных веб-сайтов, который также экспортирует чистый код — он устраняет головную боль при переходе от дизайна к публикации в Интернете . Конкурируя как с WordPress, так и с Sketch App, Webflow позволяет создавать полнофункциональные адаптивные веб-сайты, включающие фоновые данные (API), и может автоматически развертываться на полностью масштабируемом хостинге без лишних забот одним нажатием кнопки. В основном это Adobe Dreamweaver для современного дизайнера, который заботится о чистом коде и удобном для мобильных устройств веб-дизайне.
Сильные стороны
- Реальные данные могут быть включены (из API / JSON / и т. Д.)
- Создает качественный, многократно используемый код
- Адаптивные веб-сайты могут быть легко спроектированы и развернуты
Слабые стороны
- Не полезно для разработки собственных мобильных приложений
- Требуются некоторые знания HTML / CSS, чтобы быть максимально эффективным
Figma
Относительно недавнее дополнение к пространству прототипов, Figma может похвастаться самыми захватывающими возможностями совместной работы над дизайном любого инструмента для создания прототипов, в то же время моделируя свой набор функций на многих инструментах интуитивного дизайна Sketch и Adobe XD (таких как символы и предварительный просмотр устройства). наряду с кучей инструментов, обычно предназначенных для онлайновой аудитории (например, управление версиями и передача дизайна). Версия 2.0, выпущенная в июле 2017 года, включает режим создания прототипов с горячими точками и передачей обслуживания разработчикам для дальнейшей оптимизации рабочего процесса проектирования. Он работает в браузере, на macOS и в Windows, хотя иногда он может быть медленным.
Сильные стороны
- Функции совместной работы в режиме реального времени не имеют себе равных
- Полнофункциональный, идеально подходит для дизайнеров от начала до конца
Слабые стороны
- Figma может отставать от времени, особенно в режиме реального времени
Еще 9 инструментов для создания прототипов, которые стоит рассмотреть
Fluid UI
Сосредоточенный на простоте и общении, Fluid UI включает встроенные библиотеки компонентов с высокой и низкой точностью, совместную работу в реальном времени, предварительный просмотр устройств и видеопрезентации, что делает его превосходным решением для дизайнеров, менеджеров по продуктам и основателей.
Proto.io
Зрелый и многофункциональный, Proto.io лучше всего используется дизайнерами, которые хотят создавать высококачественные и анимированные прототипы в браузере.
Axure RP 8
Axure, созданная еще в 2003 году, является отличным выбором для дизайнеров UX, которым необходимо создавать спецификации для дизайна и анимации с максимальной детализацией. Axure включает поддержку условных потоков, динамического контента и адаптивного / адаптивного дизайна, а также прототипирование с высокой и низкой точностью. Axure — серьезный инструмент для серьезных дизайнеров.
Framer X
Перемещая грань между дизайном и кодом, Framer X позволяет дизайнеру создавать потрясающе детализированные анимации с минимальным количеством кода (он использует упрощенную версию JavaScript под названием CoffeeScript) и хорошо интегрируется с другими инструментами, такими как Sketch и Figma. Вам придется кодировать анимацию и взаимодействия, но возможности по существу безграничны.
Mockplus
Mockplus — это инструмент для создания прототипов с низким качеством воспроизведения, с относительно простой кривой обучения и поддержкой Windows, macOS, iOS и Android. С более чем 200 встроенными компонентами и 3000 значками, помогающими быстро создавать макеты, Mockplus является довольно надежным решением для быстрого создания прототипов для групп, использующих различные устройства и операционные системы.
Justinmind
Justinmind — это многофункциональное настольное приложение, которое удивительно поддерживает фантастическое удобство использования для инструмента, который расширяется в функциях в течение 8 лет. Хотя это и не так широко, как InVision и Adobe XD, его довольно легко использовать, и дизайнеры могут создавать кликабельные каркасы и функциональные высококачественные прототипы без каких-либо проблем. Определенно надежный выбор.
Flinto
Flinto — это приложение для MacOS для настольных компьютеров с более легкой веб-альтернативой под названием Flinto Lite, в которой обе компании уделяют большое внимание высокопроизводительному прототипированию мобильных приложений с настраиваемой анимацией. У Flinto есть интересная структура ценообразования, которая выделяет ее: Flinto для macOS стоит 99 долларов за один раз, а Flinto Lite — 20 долларов в месяц, но также поставляется с Flinto для macOS. Если вы дизайнер, работающий в одиночку, Flinto для macOS — более дешевое и разумное решение.
Инструменты для создания прототипов анимации
Студия оригами
Origami — это дизайнерское приложение Facebook. Проекты из Sketch можно скопировать в Origami, где мощные анимационные функции позволят вам исследовать различные анимации с бесконечным творческим потенциалом. Origami поставляется с приложениями предварительного просмотра для iOS и Android, однако основное приложение доступно только для пользователей MacOS. Прототипирование ограничено только анимацией.
Принцип для Mac
Principle — это еще один инструмент на основе macOS, ориентированный на анимацию, и, хотя он стоит очень дорого — $ 129 на пользователя, у него очень хорошая клиентская база. Principle позволяет вам импортировать из Sketch и просматривать эскизы в их приложениях для iOS, но, к сожалению, нет приложения для Android для тестирования.
Wireframing Tool Tool Инструмент для создания прототипов
Прототипирование не обязательно = каркас. Вы можете создавать каркасы макетов с высокой (э) точностью (дизайнеры, которым впоследствии больше нравится рисовать макеты lo-fi, как правило, больше на каркасах), а также вы можете создавать прототипы макетов с низкой точностью в стиле каркасов, поэтому некоторые приложения для создания прототипов также включают каркасные инструменты (такие как Axure и UXPin, о которых я упоминал выше). Если есть какие-либо другие инструменты для создания прототипов, которые, по вашему мнению, заслуживают отдельного упоминания, сообщите нам об этом в комментариях!