| Разработчик:
Текущая версия: 1.5.15 Стоимость: $79
|
Задача, которую помогает решить рассматриваемая сегодня программа, не относится к числу постоянно возникающих. Хотя, сказать что она совсем экзотична — будет тоже не вполне верно. В общем, речь пойдет о прототипировании интерфейсов разнообразных компьютерных программ под Mac OS X. В переводе с заумного на человеческий – прототипирование означает создание наброска (скетча) для будущего творения. Безусловно, такое важное дело как полное проектирование интерфейса надо поручать высокопрофессиональному дизайнеру (или даже не одному), так как ошибки в этом самом интерфейсе могут стоить очень дорого (если вообще не привести к краху).
Но, как всем известно, до того как заняться серьезным проектированием – обычно делают макеты, на которых примерно отображают будущее творение. Точно так же и с интерфейсом программы или сайта, до того как дизайнер(ы) возьмутся его рисовать, делается примерны набросок, который носит множество названий: прототип, эскиз, мокап, скетч, и т.п.
На рынке ПО для прототипирования существует масса решений разной степени крутизны (и дороговизны) для пользователей разного уровня.
Этот обзор посвящен одному из самых популярных инструментов среднего уровня – программе Balsmiq Mockups for Desktop и ее версии для Mac.
Программа написана с использованием технологии Adobe AIR, поэтому является кроссплатформенной, вплоть до возможности запуска прямо в браузере. Правда платой за эту универсальность выступает «не родной» вид на всех платформах, хотя стоит признать, что разработчики максимально постарались сгладить это неудобство вылизыванием интерфейса до мелочей.
Устанавливается она, как и любое другое AIR приложение путем нажатия на кнопку прямо в окне браузера. После этого, на ваш компьютер будет установлена сначала среда выполнения AIR, а уже потом и сам Balsamiq.
Интерфейс программы прост и функционален. Работать с ним может фактически любой, так как программа рассчитана как раз не на профессионального дизайнера/программиста, а на обычного пользователя.
В верхней части расположено меню, чуть ниже – отцентрированная панель кнопок. Ниже – библиотека элементов (ее можно разместить справа или слева). Остальную часть окна занимает рабочее пространство, в котором и рисуется скетч.
Я решил в качестве примера создать прототип одного хорошо вам знакомого сайта. Ниже покажу этот процесс пошагово и с картинками. Для удобства я передвинул панель с инструментами влево.
На вкладке Big берем Browser Window и перетаскиваем его в рабочую область. Тут же откроется поле для ввода текста. Первая строка станет заголовком браузера, вторая будет показываться в его адресной строке. Введем туда нужную информацию. После этого поменяем размер окна до нужного.
Теперь смоделируем шапку сайта и навигацию. Для этого нам понадобятся: Label, Link bar, Search box и Panel
Следующий шаг — правый баннер и список категорий. Для них подойдут Scratch out и List
Теперь собственно сами статьи. ОНи не представляют собой ничего сложного, уже знакомые вам панели и метки. Для рисунков используется Image.
Для загрузки рисунка надо добавить сам элемент управления и щелкнуть по нему два раза. Обратите внимание на флажок Sketch it! в окне загрузки рисунка —
он позволит стилизовать рисунок под общий стиль Balsamiq-а.
Вот так выглядит макет с первой статьей.
Полученную статью осталось сгруппировать и скопировать необходимое число раз. В итоге мы получаем полноценный макет сайта.
Вот так, за 15 минут мы получили полноценный (и достаточно стильно выглядящий) макет интерфейса сайта MacOS World. В заверение разговора следует заметить, что программа активно развивается. Новые версии выходят ежедневно.
Также существует , на котором выкладываются дополнительные элементы управления для создания скетчей UI таких платформ как Android, iPad и многих других.
Подводя итог, можно сказать, что эта программа не зря стала эталоном в своей отрасли. Она позволяет даже неподготовленному человеку быстро показать свои идеи, и таким образом быть намного лучше понятым их реализаторами.
P.S. Заключительный вопрос (конкурс Versions): жук сидит в центре деревянного куба, состоящего на 27 секций (3х3х3). Он может перемещаться из одной секции в другую, если они имеют общую грань (прогрызая стенки). Жук решает обойти все секции куба, побывав в каждой только по одному разу. Вопрос: получится ли у него это? Ответ обосновать.