Хотите изучить UX с нуля? Получите всю коллекцию UX-книг, охватывающую основы, проекты, советы, инструменты и многое другое с SitePoint Premium. Присоединяйтесь сейчас всего за $ 14,99 / месяц .
За прошедшие годы мы стали намного лучше осведомлены о процессе проектирования UX, особенно в том, что касается каркасного проектирования — очень полезного упражнения по проектированию, которое может значительно улучшить общее впечатление пользователя от конечного продукта.
В этом обзоре мы рассмотрим лучшие инструменты для создания каркасов.
Что такое каркас?
Каркас — это скелетный макет дизайна — фундамент без основы, существующий до добавления шрифтов, цветов и любой другой визуальной эстетики. Создание каркаса часто происходит после идеи, но до создания высококачественного прототипа.
Каркасную конструкцию иногда называют «средним качеством», и инструмент каркасного моделирования определяет тот факт, что они позволяют дизайнерам перетаскивать готовые элементы дизайна и компоненты на холст, чтобы они могли быстро экспериментировать с идеями в неразрушающую среду, собирать отзывы от заинтересованных сторон и даже проводить пользовательское тестирование.
Как используются каркасы в UX?
Wireframing предлагает дизайнерам возможность тщательно продумать основной UX их дизайна, включая удобство использования, доступность, сканируемость, кликабельность и т. Д. (Часто с особым акцентом на UX навигации, формы и проверки).
Хотя визуальный дизайн также вносит свой вклад в UX, проектирование «поверхностного слоя» вместе с ядром UX может быстро превратиться в сложный беспорядок, поэтому мы проектируем эти скелетные макеты, известные как каркасы, прежде чем перейти к высокоточному воспроизведению.
Давайте посмотрим на лучшие инструменты каркаса, которые в настоящее время доступны.
Balsamiq
- Платформы: Web, macOS, Windows
- Ценообразование : различные варианты для веб и рабочего стола
Бальзамик является крупным игроком в сфере каркасов.
Что выделяет его из всего остального, так это его (необязательная) эскизная визуальная эстетика, которая напоминает нам о том, что каркасы должны быть экспериментальными, с низкой / средней точностью и даже одноразовыми — такое отношение, которое делает каркасное процветание.
Balsamiq идеально подходит для гибких, гибких команд, с функциями, которые помогают разработчикам тестировать каркасы на реальных устройствах, а также взаимодействовать с заинтересованными сторонами. Благодаря интеграции, которая позволяет отслеживать ошибки (например, с помощью Jira Cloud), Balsamiq подходит как для дизайнеров, так и для менеджеров.
Что касается каркасных компонентов, Balsamiq является одним из наиболее оснащенных, являясь одним из самых опытных инструментов на рынке сегодня. Как и во всех инструментах каркасного моделирования, они используются простым перетаскиванием компонентов на холст для быстрой визуализации идей.
капризный
- Платформы: только веб
- Ценообразование : бесплатный план, 8 долларов США или 12 долларов США / месяц
Несмотря на то, что Whimsical является относительно новым для отрасли и, таким образом, обладает наименьшим набором компонентов для каркасной конструкции, это самый красивый, самый простой в использовании, интересный в использовании и, наконец, самый дешевый инструмент для каркасной обработки на рынке сегодня (за исключением Justinmind, которая бесплатна для «только каркасной»).
Основным недостатком является то, что нет никаких пользовательских функций тестирования. Однако другие соавторы могут, по крайней мере, добавлять свои отзывы, комментируя каркасы, и даже управлять ошибками, задачами и улучшениями в Trello-подобной доске в стиле канбан. Пока что набор функций готовится быть чрезвычайно полезным в рабочем процессе в стиле спринта .
Кроме того, на пути находятся функции отображения разума.
Axure RP
- Платформы: macOS и Windows
- Ценообразование : различные варианты для команд и отдельных лиц
Axure RP, как и Balsamiq, является еще одним огромным инструментом для создания каркасов, скромно предлагающим динамические, управляемые данными функции контента, анимации, а также адаптивные и условные макеты. Неудивительно, что «87% компаний из списка Fortune 100 используют Axure».
Axure существует уже целых 16 лет. Единственным недостатком является отсутствие функций тестирования юзабилити / юзабилити.
диво
- Платформы: Веб
- Ценообразование : бесплатный план, 12 долларов, 42 доллара или 84 доллара (в месяц)
Marvel известен как один из самых простых инструментов для освоения, который включает в себя его каркасные функции. Хотя большая часть рабочего процесса происходит в Sketch, где проекты затем передаются разработчикам, менее известные инструменты Marvel для создания каркасов просты в использовании и на них приятно смотреть — так же, как и в Whimsical.
Поскольку Marvel интегрируется с пользовательским средством тестирования Lookback, можно сказать, что Marvel — более прихотливый причудливый, хотя и более дорогой из-за добавления функций прототипирования и передачи обслуживания, но, тем не менее, очень достойное дополнение к этому списку.
Moqups
- Платформы: Веб
- Цены : бесплатный план, 13 долларов США или 19 долларов США / месяц
Moqups — это современный инструмент для создания каркасов в традиционном стиле, который делает его уникальным для заинтересованных лиц управленческого типа. Он предлагает приличное количество каркасных компонентов, называемых «трафареты», а также включает в себя интерактивные функции прототипирования.
Это может показаться немного неуклюжим для дизайнеров UX, но для команд, стремящихся сделать дизайн более демократичным на ранних стадиях дизайна UX, Moqups помогает не дизайнерам стать дизайнерами.
OmniGraffle
- Платформы: только macOS
- Цена : 99,99 долларов США за стандартную версию или 199,99 долларов США за профессиональную (разовая)
Если вы настроены на использование инструмента, который обеспечивает высококачественное проектирование, но основывает его основы на каркасном дизайне, OmniGraffle является достойным выбором. Хотя это не так красиво, как Whimsical, OmniGraffle — это приложение, предназначенное только для macOS, которое выигрывает от использования встроенного пользовательского интерфейса macOS, что делает его немного менее загруженным по сравнению с таким инструментом, как Moqups.
OmniGraffle также обладает огромными возможностями, которых нет в других инструментах каркасного моделирования, такими как возможность создавать расширения на лету с помощью JavaScript или AppleScript, которые могут помочь дизайнерам автоматизировать их рабочий процесс. Как вы можете видеть, OmniGraffle более техничен, чем большинство инструментов для создания каркасов, поэтому об этом стоит помнить, если вы решите двигаться дальше с этим инструментом.
Вам понадобится Pro Plan, чтобы перейти от каркасного к высококачественному дизайну, который можно экспортировать. Pro Plan включает монтажные области, общие слои, векторные инструменты, режимы наложения, действия (то есть взаимодействия) и, конечно же, экспорт (включая SVG).
Стандартный аккаунт ограничит вас диаграммами и каркасами, что хорошо, если это все, что вы ищете.
Justinmind
- Платформы: Веб
- Цены : бесплатный план, $ 0, $ 19 или $ 39 (в месяц)
Justinmind является единственным по- настоящему бесплатным инструментом для создания каркасов, поскольку он позволяет неограниченное количество досок, команд и пользователей — до тех пор, пока вы все еще работаете с каркасом (и еще не переходите на высокую точность).
По сравнению с другими инструментами, обеспечивающими «полный спектр» (то есть дизайн с низкой, средней и высокой точностью), Justinmind восхитителен в использовании. Он чище и модернизированнее, чем ветераны, такие как Axure и OmniGraffle.
Justinmind содержит все функции, которые вам когда-либо понадобятся, чтобы перенести ваш дизайн с каркасного на высококачественный для передачи дизайна.
Не каркасные инструменты (но они могут быть)
В нашем обзоре дизайна экрана мы поговорим о ряде инструментов, которые используются для создания макетов с высокой точностью. Хотя это не совсем инструменты для создания каркасов, нет никаких причин, по которым их нельзя использовать как таковые, хотя и не ожидайте увидеть какие-либо реальные компоненты для каркасных работ. Вам придется создавать любые компоненты с нуля.
Преимущество выбора одного из следующих инструментов состоит в том, что вы можете включить ваш рабочий процесс в одну подписку.