хм (_guard_) wrote,
хм
_guard_

Categories:

Balsamiq Mockups

Сегодняшний день объявляется днем интерфейса :)
Я таки добрался поделиться с вами радостью от использования Balsamiq Mockups.

По работе мне в основном приходится рисовать интерфейсы. То есть придумывать, как будет выглядеть программа или сайт (последнее чаще).
До недавнего времени мне были известны следующие альтернативы: бумага, рестровый редактор (например, Photoshop), векторный редактор общего назначения (какой-нибудь Inkscape или Corel DRAW), специализированный векторный редатктор (Visio).


С бумагой работать удобно (быстро и привычно), но неудобно исправлять, да и обмениваться сканами не слишком приятно.

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

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

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


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

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

Основные свойства ее таковы:
* имеются версии в виде плагинов к Jira, Confluence, XWiki, он-лайн демо-версия и версия для десктопа (ей я и пользуюсь)
* декстоп-версия написана на Adobe AIR, а потому полностью кросс-платформенная
* программа является по сути векторным редактором с экспортом в PNG
* программа создана специально для рисования интерфейсов и решает именно эту задачу
* рабочая область - блокнотный лист, на который можно тягать элементы из очень обширной библиотеки. Наряду со стандартными текстовыми полями, выпадающими списками, кнопками, полями выбора дат и т.п. есть много специализированных, но часто нужных элементов - скетч карты, флеш-плеер, веб-камера, тулбар текстового редактора и т.п.
* все элементы выдержаны в стиле скетча, с нарочито неровными границами. В мокап можно вставлять свои картинки, при этом их можно по желанию автоматически "скетчировать".
* невероятно удобно сделана работа со всякими таблицами, таб-контролами, группами кнопок (см. скриншот ниже). В двух словах - вы просто пишете текст, остальное программа делает сама

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




Здесь мы видим маленький мокап, нарисованный за 30 секунд. Всплавающее окошко с настройками позволяет, к примеру, убрать или показать кнопку закрытия окна.



Тут наглядно показана работа с таблицей. Сверху - как выглядит сама таблица. А внизу - она же в режиме редактирования. Каждая строка содержит значения клеток - через запятую. Обратите внимание на то, как легко делаются отмеченные и неотмеченные чекбоксы. Хотите добавить колонку - введите еще одно значение. Точно так же работает, к примеру, таб-контрол - вы просто пишете в нем через запятую заголовки вкладок.



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


Что еще очень приятно - это философия и подход разработчика программы Giacomo 'Peldi' Guilizzoni. Можно, к примеру. посмотреть его корпоративный блог. А мне очень понравилось, как он общается с пользователями в фид-бэк системе Get Satisfaction.
Subscribe

  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 7 comments