Начало работы с вайрфреймингом с помощью Balsamiq

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

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

В этой статье мы поможем вам разобраться в таких вопросах, как:

• • Что такое Бальзамик?

• • Как начать?

• Как экспортировать окончательный каркас/макет?

Что такое Бальзамик?

Вайрфрейминг, по сути, можно провести на салфетке с помощью ручки. В конце концов, это всего лишь набросок. Однако, когда дело доходит до совместной работы и обмена данными с профессионалами, лучше переключиться на один из многих инструментов, представленных сегодня на рынке. Одним из таких инструментов является Balsamiq — он прост в использовании и предоставляет множество функций для создания удобного каркаса.
Balsamiq — отличный инструмент, отвечающий всем требованиям вайрфрейминга и совместной работы. Он обладает уникальным набором функций, позволяющих быстро создавать каркасы, получать отзывы в режиме реального времени, включать эти отзывы и улучшать каркасы. Это в конечном итоге приводит всю команду в соответствие с функциональностью приложения в отношении макета.
С Balsamiq сотрудничество с удаленными членами команды также очень просто, поскольку он может экспортировать каркасы в форматах PNG или PDF, что обеспечивает гибкость при совместном использовании каркасов.
10 самых эффективных инструментов каркасного моделирования

Начало работы с бальзамиком

Balsamiq доступен для Windows и Mac OS и может быть загружен онлайн . После того, как вы загрузили инструмент и открыли его, вы увидите такой экран:

Как показано на снимке экрана выше, пользовательский интерфейс Balsamiq разделен на четыре следующие части.

• • Навигатор

• • Библиотека пользовательского интерфейса

• • Инспектор

• Каркасное пространство/площадь

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

Библиотека пользовательского интерфейса

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

• • Все — нажав на это, вы увидите все элементы пользовательского интерфейса, которые предлагает Balsamiq. Горизонтальная прокрутка позволит вам просматривать или использовать их.

• • Активы — этот раздел включает в себя то, что вы можете загрузить, а затем использовать в своих каркасах.

• • Большой — включает в себя достаточно большие элементы экрана, такие как заполнители, окно браузера, iPhone и iPad.

• • Кнопки — этот раздел включает в себя все элементы управления кнопками, которые вам понадобятся в каркасе, например — кнопки действий, флажки и т. Д.

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

• • Контейнеры — включает в себя такие параметры, как Window, FieldSet, Browser и т. д. Как следует из названия, он включает в себя Window, FieldSet, браузеры и т. д.

• • Формы — эта категория содержит все элементы управления, связанные с формами, такие как элементы ввода, переключатели, кнопка отправки и т. д.

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

• • iOS — содержит элементы управления пользовательского интерфейса, характерные для iOS.

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

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

• • Мультимедиа — в этом разделе доступны все элементы управления пользовательским интерфейсом, связанные с мультимедиа, которые помогают отображать изображение / видео / звук в каркасе.

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

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

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

Теперь предположим, что для вашего веб-сайта вы создали каркас этих четырех страниц — «Главная», «Продукты и услуги», «Свяжитесь с нами» и «О нас». Теперь нам нужно выполнить еще одну важную задачу, которая сделает наш каркас более похожим на полноценный веб-сайт, а не на набросок. Для этого нам нужно связать наши страницы, так как в идеале они должны быть связаны на веб-сайте. Связывание также помогает вам легко переключаться между каркасами.

Связывание страниц

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

• • Перейти на главную страницу

• Нажмите на панель ссылок в правом верхнем углу

Обратитесь к панели свойств

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

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

Экспорт каркаса

Каркас, который вы только что создали, бесполезен, если вы не можете представить его своему клиенту/конечному пользователю в более распространенном формате, таком как PDF или PNG. Для этой цели Balsamiq позволяет легко экспортировать макеты в любой из этих форматов.
В этом примере мы экспортируем наш макет в формате PDF. Для этого щелкните меню «Проект», затем нажмите « Экспорт в PDF».
Вы получите экран, подобный показанному ниже:

Установите флажок – «Показывать подсказки по ссылкам».
Затем нажмите «Экспорт в PDF » . Появится всплывающее окно, в котором вы можете указать локальное место, куда вы хотите экспортировать PDF. Прогресс будет отображаться в индикаторе выполнения, как показано ниже.

Когда экспорт будет завершен, появится окно подтверждения. Нажав на поле, вы сможете просмотреть PDF-файл вместе со всеми настроенными вами навигациями.
Создание минимально жизнеспособных продуктов — насколько это слишком много?

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

Изучайте онлайн-курсы MBA от лучших университетов мира. Заработайте программы Masters, Executive PGP или Advanced Certificate Programs, чтобы ускорить свою карьеру.