Установка Balsamiq (mockup)

Установка Balsamiq (mockup)

Категория: Balsamiq / Добавил: Артём

Что такое Balsamiq (mockup)?

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

Balsamiq доступен для всех операционных систем: Linux, Windows и MacOS.

Где скачать Balsamiq (mockup)?

Скачать программное обеспечение вы можете на официальном сайте:

https://balsamiq.com/download/

Установка Balsamiq (mockup)

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

Установка balsamiq (mockup)

После нажатия кнопки Install, пошел процесс распаковки файлов.

Распаковка файлов программного обеспечения Balsamiq (mockup)

Все файлы успешно распакованы и программное обеспечение «Balsamiq», готово к работе.

Нажимаем кнопку — Finish.

Завершение установки Balsamiq

Интерфейс программы Balsamiq.

Интерфейс программы balsamiq

С уважением, Артём Санников

Сайт: ArtemSannikov.ru

Теги: Balsamiq, Программное обеспечение.

Balsamiq Mockups. Подробно об инструменте

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

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

  • каркасы (wireframes) – представляют собой условную схему структуры и компонентов формы приложения;
  • макеты (mockups) – в основном фокусируют внимание на визуальной составляющей, очень часто они по внешнему виду идентичны или очень близки к окончательному дизайну приложения. Включают проработанные графические элементы, типографику и т.д.;
  • прототипы (prototypes) – по сути, представляют собой полуфункциональные с высокой степенью детализации формы приложения. Чаще всего создаются на основе HTML/CSS и даже иногда используют JavaScript для иллюстрации того, как работает GUI. Интерактивны, часто содержат бизнес логику и полнофункциональную навигацию по приложению.

Из-за того, что макеты и прототипы требуют гораздо больше усилий и времени на свою подготовку, они часто создаются тогда, когда основные идеи и каркасы обсуждены и согласованы. Таким образом, каркасы создаются первыми, на этом этапе продумывается концепция взаимодействия пользователя со страницей или формой, поэтому этот этап очень важен. Дальнейшие же действия определяется нуждами проекта. Причем каркасы в свою очередь принято делить на:
— каркасы низкой степени детализации (low-fidelity wireframes) – очень простые, содержащие только основные элементы формы (часто в виде базовых фигур, символизирующих элементы управления) или функциональные блоки и подписи к ним,
— и высокой степени детализации (high-fidelity wireframes) – уже более подробные и проработанные, содержащие чуть больше деталей. 

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

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

Приложение
 

 
Экран приложения включает следующее:
·         Меню (включает стандартные пункты File, View, Edit и Help)
·         Быстрый поиск и добавление элементов  в рабочую область (Quick Add)
·         Панель действий для редактирования (Copy, Paste, Duplicate, Groupи т.д.).
·         Библиотеку элементов пользовательского интерфейса, сгруппированных по категориям (All, Big, Buttons, Containers, Layout и т.д.). Для экономии места и снижения визуального шума библиотеку можно прятать и пользоваться только быстрым добавлением.
·         Собственно рабочую область, на которой располагаются добавленные элементы управления.
 
Функциональные особенности приложения:
 
1. Чтобы в полной мере обеспечить высокую скорость прототипирования приложение предоставляет в своей библиотеке элементов управления не только базовые, но также и часто встречающиеся производные от базовых (например, панель ссылок, набор флаговых кнопок, окно браузера).

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

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

 

3. Текстовые элементы поддерживают вики-форматирование.

 
4. Для выравнивания элементов каркаса при их перемещении используется привязка к сетке из направляющих.
 
 
5. Приложение поддерживает широкий набор клавиш быстрого доступа. Хорошую подсказку по ним можно найти тут.
 
6. Для презентации идей коллегам или заказчикам можно использовать специальный полноэкранный режим.

 
7. А работать с несколькими каркасами одновременно, возможно переключая вкладки снизу экрана.

 
Распространение

Существуют следующие возможности использования Balsamiq Mockups:
·         Бесплатная онлайн демо-версия
·         Настольное приложение на Adobe Air( http://balsamiq.com/buy/ ) с лицензиями:
o   Single User License — $79
o   Volume Pack – стоимостью от $ 379 за пакет на 5 пользователей
o   Upgrade License – различные по своей стоимости варианты смены лицензий
o   A Discounted License for Existing Plugin Customers – текущие пользователи приложения, приобретавшие ранее плагин, могут использовать его, чтобы купить со скидкой $40/пользователя.

 
Операционные системы

Приложение поддерживает все распространенные операционные системы:

 
Оценка (по субъективной шкале): 5 / 5.

 
Заключение

Несмотря на кажущуюся простоту приложения, свою поставленную задачу (быстрое и удобное создание и обсуждение каркасов) оно выполняет отлично. Приложение работает стабильно и на действия пользователя реагирует ожидаемым образом,  что, несомненно, является признаком грамотно проработанного пользовательского интерфейса.
 
В следующей статье мы рассмотрим вопросы более сложной работы с приложением с использованием примеров: добавление интерактивности, работа с импортом и экспортом, активами (assets) и проектами. А также коснемся сопутствующих продуктов: myBalsamiq и плагинов. 
 
Обзор подготовила

Тарасюк Надежда, участник сообщества analyst.by, аналитик с 6-летним опытом в сфере.   

 

 

Balsamiq Mockups Desktop. Создание макетов сайта, приложений.





Здравствуйте, сегодня речь пойдёт о создании макетов(mockups) сайтов и приложений. Под макетами подразумевается визуальное отображение интерфейсной части. Это бывает нужно для быстрого наброска и передачи всего этого на следующий этап. Мне например понадобились макеты страниц сайта для вставки в техническое задание, чтобы заказчик мог примерно знать, как это всё будет выглядеть. Макеты создавал в Balsamiq Mockups. Об этой программе и пойдёт речь.

Коротко о том, почему выбрал именно эту программу. Банально не было времени и взял первое, что попалось под руку.  Конечно когда искал в сети, мелькали такие название как Axure, MS Visio и куча других. Но под руку мне первой попала эта и полностью удовлетворила мои требования. Далее искать в сети не стал. Хотя можно опробовать всё и сделать сравнительный анализ.

И так.

Balsamiq Mockups? Коротко о программе

Скриншот программы

Сайт разработчиков программы здесь. Скачать программу можно здесь. Программа кросс-платформенная. Работает на основе Air. Более того, есть on-line версия для ознакомления. При этом должен быть установлен Flash.

К сожалению программа Balsamiq Mockups Desktop платная. Скаченная для ознакомления версия работает 7 дней. После семи дней программа продолжает работать, но отсутствует возможность сохранения сделанного макета. Ну вообще, если очень хочется, то можно! 🙂 Crack Balsamiq Mockups Desktop — просто передвиньте системные часы назад. Видимо программа при первой установке отмечает у себя дату завершения ознакомительной версии как текущая дата на момент установки плюс 7 дней. Только не забудьте обратно время перевести, чтобы: 1) не затеряться во времени 🙂 2) когда перевёл время и забыл обратно перевести, лазая по сайтам были проблемы с сертификатами; 3) возможны другие сбои в системе.  Кстати, в сети искал кряк, но не нашёл, наверное потому что и не нужен, все так обходят защиту видимо.

Что можно в программе:

  • рисовать макеты для сайтов
  • создавать макеты для мобильных приложений, в частности iPhone — там специально виджеты есть для iPhone контролов;
  • для desktop программ так же можно клепать макеты интерфейса

Думаю стоит отметить, что на выходе получается просто файл — графический в формате PNG, документ PDF или файл проекта. Никакого функционала к макету, как например в Axure, не прикрепляется.

Balsamiq Mockups Desktop в действии

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

Как видите, элементы макета имеют вид «начертание от руки». По моему смотрится хорошо и не очень по детски. Самое то. Хотя кому то наверное данный вид отрисовки не понравится.

Рассмотрим интерфейс программы.

По сути насчёт создания мокапов больше сказать нечего — там всё просто.

Итоги

Мне понравилось:

  1. программа кросс-платформенность и наличие on-line версии — это круто
  2. простота в освоении
  3. быстрая в работе
  4. наличие множества контролов, виджетов, как то текстовое поле, Combobox, окно браузера и тд

Мне не понравилось:

  1. платность, хотя как написано выше, есть так сказать crack 🙂 вообще тут наверное не так надо выразиться «не понравилась платность», это же разработчики, им кушать охото, семьи кормить; назовём платность просто небольшим минусом;
  2. отсутствие слоёв;  я конечно понимаю что самая изюминка в простоте, но блин так хочется чтобы были;
  3. у некоторых виджетов всё таки отсутствует что то нужное, например если куча вкладок, то они в два ряда не встанут, надо будет растягивать этот виджет чтобы все вкладки видны были;

Вот вроде бы и всё, пишите в комментах

Balsamiq Mockups. Продолжение.

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

 

 

 

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

 

Интерактивность

Самой очевидной вещи, которой не хватает статическим макетам и схемам, – это динамики. Так же рассудили и разработчики Balsamiq и добавили ее в свой инструмент. Динамика здесь реализована только по одному событию – по нажатию (on click). И работает она как ссылка на другую схему. С одной стороны, это далеко не полный список возможных событий, и вообще триггеров для изменений состояний макета / схемы. С другой стороны, это наиболее часто встречающееся взаимодействие: по нажатию на некоторый элемент на странице перевести пользователя на другую страницу.

Рассмотрим на примере. С сайта Mockups to go (я его упоминала в предыдущем обзоре) скачаем заготовку для страницы Coming soon. Откроем скачанный bmml файл в инструменте, разгруппируем элементы, чтобы их можно было изменять, отредактируем под наши нужды.

 

Сохраняем получившуюся схему интерфейса под именем на диске. Теперь создадим вторую страницу. Для экономии времени скопируем на нее все элементы исходной страницы, используя клавиши быстрого вызова (Ctrl+A, Ctrl+C, Ctrl+V).

 

 

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

 

Чтобы увидеть, как работает ссылка, выбираем в меню File -> Export to pdf file. Открываем сгенерированный файл и нажимаем на кнопку Sign Up.

 

Также добавленные ссылки между макетами будут работать в полноэкранном режиме презентации (Ctrl+F). Таким образом можно показать заказчику или команде такие динамические элементы как меню, работу кнопок, вкладок и т.д.

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

 

Работа с проектами

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

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

  1. На своей рабочей машине можно создать отдельную папку для каждого проекта. Ее же впоследствии можно будет сделать общедоступной (share) с возможностью изменения файлов по сети, если над проектом работает несколько специалистов.
  2. Внутри папки не рекомендуется делать подпапок, а хранить все схемы плоским списком (причину я упоминала выше, когда рассказывала о связанных макетах).
  3. Нажатием правой кнопки мыши на вкладке (или в области) с названиями файлов можно быстро открыть все схемы данного проекта.

 

Советы просты и незатейливы, но не лишены здравого смысла.

 

Активы

Помимо упомянутого в предыдущем пункте, в папке для каждого проекта рекомендуется создать папку с активами проекта (project assets). В ней могут быть общие для проекта изображения (jpg, jpeg, gif, png). В примере со страницей Coming Soon это может быть не просто заготовка под логотип продукта (серый квадрат), а реальный логотип из визуальных стандартов (brand book) компании. Чтобы он был доступен в выпадающем списке для элемента Image в инспекторе компонента, необходимо сохранить его в папку с активами проекта.

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

В принципе, существует возможность использовать изображения как общие и между проектами, а не только между схемами в рамках одного проекта. Для этого вводится отдельное понятие – активы учетной записи (account assets). Однако эта функциональность считается более сложной, и ее необходимо сначала сделать доступной. Для этого надо создать папку Balsamiq Mockups внутри папки Documents. А внутри папки Balsamiq Mockups создать папку assets. Это и будут активы учетной записи. Если по каким-то причинам папка Documents по умолчанию не подходит, ее можно переопределить в конфигурационном файле.

 

Сопутствующие продукты

Разработчики Balsamiq предоставляют следующие приложения:

  • Balsamiq Mockups for Desktop – основной продукт.
  • myBalsamiq – веб приложение, позволяющее группировать схемы интерфейса по проектам, а также работать совместно членам команды и клиентам (можно изучить на примере уже упомянутого mockupstogo).
  • Расширения (plugin) для Google Drive, Atlassian Confluence, Atlassian JIRA, Fogcreek Fogbugz, XWiki. К примеру, если подключить такое расширение к системе управления задач, то можно создавать и редактировать схемы интерфейса, связанные с конкретной задачей, прямо в системе.

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

  • дополнительные GUI элементы (помимо mockupstogo, можно упомянуть шаблоны для UML Mock4U),
  • дополнительные пиктограммы в рисованном от руки стиле (например, платный набор handdrawnicons),
  • функциональность для экспорта готовых схем в код, изображения и приложения (например, Napkee),
  • схемы, созданные в Balsamiq, можно тестировать с помощью известных инструментов, таких как Usabilla, Kupima и Loop 11 (как это делается можно посмотреть тут).

Детальнее об этом можно посмотреть в официальном блоге компании.

 

Импорт, экспорт

Отдельно хочется упомянуть формат bmml– это Balsamiq Mockups Markup Language. Все схемы сохраняются в открытом, легко читаемом, специфицированном формате на основе xml. Некоторые сторонние инструменты и приложения, позволяют импортировать или экспортировать bmml файлы (например, Flairbuilder).

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

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

 

Оценка (по субъективной шкале) 4 / 5.

 

Заключение

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

В моем личном рейтинге среди пунктов данного обзора самыми полезными являются добавление динамики (ссылки между страницами), а также расширение для Atlassian JIRA.

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

Обзор подготовила

Тарасюк Надежда,

участник сообщества analyst.by,

аналитик с 6-летним опытом в сфере.

 

Обзор Balsamiq Mockups

В данном обзоре мы остановимся на таком средстве прототипирования как Balsamiq Mockups (http://balsamiq.com/products/mockups). Первое, что хотелось бы отметить, это позитив и юмор разработчиков, которые охарактеризовали себя как «small group of passionate individuals who believe work should be fun and that life is too short for bad software». Попробуем же разобраться, какой fun (и в первую очередь — value) мы можем получить от использования Balsamiq Mockups.

Макеты, получаемые с помощью Balsamiq Mockups, относятся к так называемым макетам с низкой степенью детализации (low-fidelity mockups). Предполагается, что именно скорость создания макетов является ключевым преимуществом Balsamiq Mockups. Это обусловлено тем, что зачастую от менее удачного варианта психологически сложнее отказаться, если на его создание было затрачено много усилий.

Основные возможности

Экран приложения состоит из следующих элементов:

  • Меню (включает стандартные пункты  File, View, Edit и Help)
  • Быстрый поиск и добавление элементов (Quick Add)
  • Панель действий для редактирования макета (Copy, Paste, Duplicate и т.д.)
  • Библиотеку элементов пользовательского интерфейса, сгруппированных по категориям (All, Big, Buttons, Containers, Layout и т.д.)
  • Рабочая область.

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

 

Примеры выполнения базовых операций:

1)       Рисование стандартной иконки: добавляем на макет элемент ‘icon’ -> правим подпись под элементом -> выбираем иконку в виде дискеты из набора существующих –> меняем положение подписи с “под иконкой” на “рядом с иконкой” -> с помощью бегунка меняем размер иконки с большого на маленький.

 

 

 

 

 

 

 

 

 

 

2)       Работа с таблицей: по двойному щелчку мыши на таблице переходим в режим редактирования –> используя синтаксические конструкции, правим набор колонок, заполняем таблицу данными, выставляем сортировку по колонке, добавляем флаги (checkboxes) -> c помощью панели настройки добавляем вертикальную полосу прокрутки, выставляем ее положение, высоту строк, изменяем цветовую гамму.

 

 

 

 

 

 

 

3)       Добавление с помощью Quick Add: начинаем набирать название желаемого элемента в строке поиска -> система отображает предложенные варианты в выпадающем списке -> вводим имя добавляемого элемента полностью или пользуемся предложенным вариантом из списка -> элемент появляется на макете по нажатию на Enter.

 

 

 

 

 

 

 

 

Приложение поддерживает также такие стандартные действия как группировку элементов (group/ungroup), отмену предыдущего шага (undo/redo), блокировку элементов от случайного перемещения (lock in place) и размещение элементов слоями (bring to front, send to back и т.д.).

Редактирование текста поддерживает вики-форматирование (например, добавив нижнее подчеркивание перед текстом и после него можно изменить его стиль на курсив).

Дополнительные возможности

Balsamiq Mockups предоставляет возможность экспорта нарисованного макета в форматы png и pdf (что, очевидно, незаменимо в случае, если надо показать макет без использования приложения), а также в xml (что можно использовать в качестве backup или пересылки макета по почте в его минимальном размере).

 

 

 

 

Добавив ссылки на другие макеты, с помощью экспорта в pdf можно получить интерактивный pdf-файл.

 

 

 

 

 

 

 

 

С помощью экспорта в xml можно разработать аналог шаблонов для макетов (или master sliders по терминологии разработчиков) (http://www.balsamiq.com/products/mockups/help#templates).

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

Лицензии

Существуют следующие возможности использования Balsamiq Mockups:

1) Бесплатная онлайн демо-версия

2) Настольное приложение ( http://balsamiq.com/buy/ ) с лицензиями:

  • Single User License — $79
  • Volume Pack – стоимостью от $ 379 за пакет на 5 пользователей
  • Upgrade License – различные по своей стоимости варианта смены лицензий

Плагины и myBalsamiq

В дополнение к Balsamiq Mockups разработчики предлагают приобрести/скачать следующие приложения/плагины.

  • myBalsamiq (http://balsamiq.com/products/mockups/mybalsamiq) — средство для совместной работы команды разработки и заказчиков. Сервис на данный момент находится в стадии закрытого бета-тестирования.
  • Плагины для Atlassian Confluence, Jira, Fogcreek FogBugz, XWiki.

Вердикт:

В качестве недостатков Balsamiq Mockups можно отметить следующее:

  • Если настроек приложения не хватает, создать/нарисовать собственный элемент управления достаточно сложно и отнимает много времени.
  • Нет возможности вставить картинку в макет, используя Copy/Paste. Вместо этого приходится добавлять на макет элемент  Image и уже в него импортировать выбранную картинку.
  • Отсутствует возможность ввода пояснительного текста, который при экспорте преображался бы в описание макета

Несмотря на перечисленное выше, отметим, что приложение тщательно продуманно и является довольным удобным и приятным в использовании. В своей сфере (создание low-fidelity макетов) приложение завоевывает все большую популярность и в интернете уже можно найти много готовых решений для Balsamiq Mockups (к примеру, http://mockupstogo.net/), которые можно использовать как заготовки (stencils) либо просто для заимствования идей.

Обзор подготовила: Melissa

Обсуждение на форуме: http://analyst.by/forum/materialy-saita/obzor-balsamiq-mockups

 

Установка Balsamiq (макет)

Установка Balsamiq (макет)

Категория: Balsamiq / Добавил: Артём

Что такое Balsamiq (мокап)?

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

Balsamiq доступен для всех операционных систем: Linux, Windows и MacOS.

Где скачать Balsamiq (мокап)?

Скачать программное обеспечение вы на официальном сайте:

https://balsamiq.com/download/

Установка Balsamiq (макет)

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

Установка balsamiq (mockup)

После использования кнопки Install, пошел процесс распаковки файлов.

Распаковка файлов программного обеспечения Balsamiq (mockup)

Все файлы успешно распакованы и программное обеспечение «Balsamiq», готово к работе.

Нажимаем кнопку — Готово.

Завершение установки Balsamiq

Интерфейс программы Balsamiq.

Интерфейс программы balsamiq

С уважением, Артём Санников

Сайт: ArtemSannikov.ru

Теги : Balsamiq, Программное обеспечение.

.

мокапов Balsamiq. Подробно об инструменте

Я решила присоединиться к хорошей традиции analyst.by писать серии статей и, т.к. Мне по душе минимализм, я решила посвятить свою личную мини-серию средству прототипирования Balsamiq Mockups. Когда-то я уже делала краткий обзор, а теперь хочу рассказать о самом инструменте подробнее, о тех возможностях, которые он предоставляет, о том, как с ним работать, а также о сопутствующих сервисах и плагинах.

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

  • каркасы ( каркасов) — предоставить собой условную схему структуры и компонентов формы приложения;
  • макеты ( мокапов) — в основном фокусируют внимание на визуальной составляющей, очень часто они по внешнему виду идентичны или очень близки к окончательному дизайну приложения. Включают проработанные графические элементы, типографику и т.д .;
  • прототипы ( прототипов) — по сути, предоставляет собой полуфункциональные с высокой степенью детализации приложения. Чаще всего на основе HTML / CSS и даже иногда используют JavaScript для того, как работает графический интерфейс. Интерактивны, часто содержат логику и полнофункциональную навигацию по приложению.

Из-за того, что макеты и прототипы идеи требуют больше усилий и времени на свою подготовку, они часто используются, когда основные и каркасы обсуждены и согласованы.Таким образом, каркасы схем первыми, на этом этапе продумывается концепция пользователя со страницей или схемой, поэтому этот этап очень важен. Дальнейшие же действия определены нуждами проекта. Причем каркасы в свою очередь принято делить на:
каркасы низкой степени детализации ( low- fidelity wireframes) — очень простые, содержащие только основные элементы (часто в виде базовых фигур, символизирующие элементы управления) или функциональные блоки и подписи к ним,
— и высокой степени детализации ( high- fidelity wireframes) — уже более подробные и проработанные, содержащие чуть больше деталей.

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

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

Приложение

Экран включает следующее:
· Меню (включает в себя: Файл, Просмотр, Редактирование и Помощь)
· Быстрый поиск и добавление элементов в рабочую область (Quick Add)
· Панель действий для редактирования (Копировать, Вставить, Дублировать, Группировать т.д.).
· Библиотеку элементов пользовательского интерфейса, сгруппированных по категориям (Все, Большие, Кнопки, Контейнеры, Макет и т.д.). Для экономии места и снижения визуального шума библиотеку можно прятать и пользоваться только тем добавлением.
· Собственно рабочую область, на которой располагаются добавленные элементы управления.

Функциональные особенности приложения:

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

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

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

3. Текстовые элементы панели вики-форматирование.

4. Для выравнивания элементов каркаса при их перемещении используется привязка к сетке из направляющих.

5. Приложение поддерживает широкий набор клавиш быстрого доступа. Хорошую подсказку по ним можно найти тут.

6. Для презентации идей коллегам или заказчика можно использовать специальный полноэкранный режим.

7. А работать с использованием каркасами одновременно, возможно переключить вкладки снизу экрана.

Распространение

Существуют следующие возможности использования Balsamiq Mockups:
· Бесплатная онлайн демо-версия
· Настольное приложение на Adobe Air (http: // balsamiq.com / buy /) с лицензиями:
o Лицензия на одного пользователя — $ 79
o Пакет Volume Pack — стоимостью от $ 379 за пакет на 5 пользователей
o Лицензия на обновление — различные по своей стоимости смены лицензий
o Лицензия со скидкой для существующих клиентов плагина — текущие пользователи приложения, приобретенные ранее плагин, могут использовать его, чтобы купить со скидкой 40 $ / пользователя.

Операционные системы

Приложение поддерживает все распространенные операционные системы:

Оценка (по субъективной шкале): 5/5.

Заключение

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

В следующей статье мы рассмотрим более сложные работы с использованием примеров: добавление интерактивности, работа с импортом и экспортом активами (активами) и проектами.А также коснемся сопутствующих продуктов: myBalsamiq и плагинов.

Обзор подготовила

Тарасюк Надежда, участник сообщества analyst.by, аналитик с 6-летним опытом в сфере.

.Обзор

Balsamiq Мокапы

В данном обзоре мы остановимся на таком средстве прототипирования как мокапы Balsamiq (http://balsamiq.com/products/mockups). «Небольшая группа увлеченных людей, которые считают, что работа должна приносить удовольствие, а жизнь слишком коротка для плохого программного обеспечения», — первое, что хотелось бы отметить, это позитивно и юмор разработчиков, которые охарактеризовали себя. Попробуем же разобраться, какой веселье (и в первую очередь — значение) мы можем получить от использования Balsamiq Mockups.

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

Основные возможности

Экран приложения из следующих элементов:

  • Меню (включает стандартные пункты Файл, Просмотр, Редактирование и Справка)
  • Быстрый поиск и добавление элементов (Quick Add)
  • Панель действий для редактирования макета (Копировать, Вставить, Дублировать и т.д.)
  • Библиотеку элементов пользовательского интерфейса, сгруппированных по категориям (Все, Большие, Кнопки, Контейнеры, Макет и т.д.)
  • Рабочая область.

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

Примеры выполнения базовых операций:

1) Рисование стандартных иконок: добавляем на макет ‘icon’ -> правим подпись под элементом -> выбираем иконку в виде дискеты из набора -> меняем положение подписи с «под иконкой» на «рядом с иконкой» -> с помощью бегунка меняем размер иконки с большого на маленький.

2) Работа с таблицей: по двойному щелчку мыши в таблице переходим в режим редактирования -> используя синтаксические конструкции, правим набор колонок, заполняем таблицу данных, сортировку по колонке, добавляем флаги (флажки) -> c помощью панели настройки добавляем вертикальную полосу прокрутки, выставляем положение, высоту строк, изменяем цветовую гамму.

3) Добавление с помощью Quick Добавить : начинаем набирать название желаемого элемента в строке поиска -> система отображает предложенные варианты в выпадающем списке -> вводим имя добавляемого элемента или пользуемся предложенным из список -> элемент появляется на макете по номерам на Enter.

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

Редактирование текста поддерживает вики-форматирование (например, добавление нижнего подчеркивания перед текстом и после него можно изменить его стиль на курсив).

Дополнительные возможности

Balsamiq Mockups предоставляет возможность экспортировать макета в форматы png и pdf (что, очевидно, незаменимо в случае, если надо показать макет без использования приложения), а также в качестве xml (что можно использовать в качестве резервной копии или пересылки макета по почте в его минимальном) размер).

Добавив ссылки на другие макеты, с помощью экспорта в pdf можно получить интерактивный pdf-файл.

С помощью экспорта в xml можно разработать аналог шаблонов для макетов (или мастер-слайдеров по терминологии разработчиков) (http://www.balsamiq.com/products/mockups/help#templates).

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

Лицензии

Существуют следующие возможности использования Balsamiq Mockups:

1) Бесплатная онлайн демо-версия

2) Настольное приложение (http: // balsamiq.com / buy /) с лицензиями:

  • Лицензия на одного пользователя — 79
  • долларов США

  • Volume Pack — стоимостью от $ 379 за пакет на 5 пользователей
  • Лицензия на обновление

  • — различные по своей стоимости смены лицензий

Плагины и myBalsamiq

В дополнение к Balsamiq Mockups разработчики приобрести / скачать следующие приложения / плагины.

  • myBalsamiq (http://balsamiq.com/products/mockups/mybalsamiq) — средство для совместной работы команд разработки и заказчиков.Сервис на данный момент находится в стадии закрытого бета-тестирования.
  • Плагины для Atlassian Confluence, Jira, Fogcreek FogBugz, XWiki.

Вердикт:

В качестве недостатков Balsamiq Mockups можно отметить следующее:

  • Если настроек приложения не хватает, создать / нарисовать собственный элемент управления достаточно сложно и отнимает много времени.
  • Нет возможности вставить картинку в макет, используя Copy / Paste.Вместо этого включает в себя макет элемент Изображение и уже в него импортировать выбранную картинку.
  • Отсутствует возможность ввода пояснительного текста, который при экспорте преображался бы в описание макета

Несмотря на перечисленное выше, отметим, что приложение тщательно продуманно и является довольным, отметим, что оно было проведено. В своей сфере (создание макетов низкого качества) приложение завоевывает большую популярность и в интернете уже можно найти много готовых решений для Balsamiq Mockups (к примеру, http: // mockupstogo.net /), которые можно использовать как заготовки (трафареты) либо просто для заимствования идей.

Обзор подготовила: Мелисса

Обсуждение на форуме: http://analyst.by/forum/materialy-saita/obzor-balsamiq-mockups

.