Когда работаешь над приложением или веб-сервисом, часто бывает нужно быстро набросать внешний вид будущего интерфейса, чтобы не показывать «на пальцах» свои идеи коллегам и заказчикам. В этой статье я рассмотрю инструменты, с помощью которых можно быстро создавать макеты пользовательских интерфейсов, позволяющие передать замысел автора о функциональности, не затрагивая вопросы графического дизайна.
Balsamiq Mockups
Эта программа — самый известный инструмент для создания прототипов. Balsamiq доступен для всех операционных систем, и его можно интегрировать с различными системами совместной работы, включая Jira, Confluence и Google Drive. Также есть онлайн-версия Balsamiq. Лицензия для одного ПК обойдется в 79 долларов, а доступ к веб-приложению — от 12 долларов в месяц (не более трех активных проектов).
В Balsamiq есть большая библиотека шаблонов, причем почти любой элемент интерфейса можно настроить под конкретный сценарий. Например, добавив на форму выпадающее меню, можно задать, какое из его полей должно быть подсвечено как выбранное.
Шаблонов для мобильных платформ в Balsamiq очень мало — всего предусмотрено семь макетов и элементов для iPhone. Это макет самого iPhone и некоторые элементы, характерные для мобильной ОС: форма picker (используется в мобильных ОС для ввода времени и других параметров), экранная клавиатура, тумблер ON/OFF и другие. Впрочем, все остальные элементы, необходимые для создания макета мобильного приложения, можно взять из других разделов библиотеки. К сожалению, шаблонов для других мобильных устройств не предусмотрено. Учитывая схематичность получаемых макетов, шаблон iPhone вполне подошел бы для прототипирования интерфейса приложения для любого смартфона или планшета. Но Balsamiq не позволяет изменять соотношение сторон экрана смартфона.
Полученные макеты можно сохранять в собственном формате программы для дальнейшего редактирования либо экспортировать в PNG или PDF.
Также есть режим презентации макета. При его включении макет отображается в полноэкранном режиме, а курсор представляет собой стрелку, постоянно направленную в центр экрана. Нажав курсором на элемент интерфейса можно переместиться в другой макет, либо перейти по URL.
WireframeSketcher Studio
WireframeSketcher Studio — возможно, самый удобный инструмент создания макетов из рассмотренных в этой статье. В нем библиотека шаблонов даже больше, чем в Balsamiq, есть макеты под все популярные мобильные ОС (iOS, Windows Phone и Android) и даже некоторые веб-фреймворки, например Bootstrap. Интерфейс этой программы, по сравнению с тем же Balsamiq Mockups, более удобен: наиболее часто используемые функции, такие как группировка элементов и вынос их на передний или задний план, выполняется кнопками на главной панели, а не из меню.
Проект может включать в себя несколько «экранов», а внутри каждого экрана элементы интерфейса можно объединять в группы. При редактировании навигация по экранам и группам элементов осуществляется при помощи панели, постоянно расположенной в левой части окна программы, что весьма удобно при работе над сложными макетами. Правую сторону окна занимает браузер библиотеки шаблонов.
Все элементы поддаются тонкой настройке. Проиллюстрировать механизм работы интерфейса можно с помощью функции клонирования начального экрана. После этого каждый шаг можно проиллюстрировать отдельно, изменив соответствующие элементы. Еще одна полезная функция — возможность импортировать графические файлы. Благодаря этому можно сделать скриншот реального интерфейса, а затем дорисовать изменения.
WireframeSketcher Studio доступна для Windows, Linux и OS X, а также в виде плагина для Eclipse. Бессрочная лицензия, включающая в себя один год технической поддержки, обойдется в 99 долларов.
FlairBuilder
Эта программа по функциональности во многом повторяет Balsamiq. Разработчики даже обеспечили импорт макетов из Balsamiq. В библиотеке шаблонов присутствуют элементы для веба и iPhone, но других мобильных ОС нет. Шаблон браузера называется Chrome и представляет собой не окно, как в остальных программах, а лишь верхнюю часть интерфейса браузера: адресную строку и кнопки «Вперед», «Назад», «Домой».
Настройка шаблонов производится примитивно, но удобно: при выборе одного из элементов, уже помещенных на лист, рядом с ним появляется несколько кнопок, назначение которых очевидно из пиктограмм.
FlairBuilder поддерживает интерактивность. По клику на любой элемент интерфейса можно перейти на другую страницу документа, спрятать/показать или сделать активным/неактивным какой-либо элемент макета, перелистывать табы, изменять положение и размер элементов интерфейса. К любому из перечисленных действий можно добавить условие выполнения на основе состояния других элементов.
Программа поддерживает импорт растровых изображений и экспорт готовых макетов в PDF, HTML и растровые форматы. Для просмотра интерактивных шаблонов на сайте разработчика доступен бесплатный viewer. Цена лицензии на FlairBuilder для одного пользователя — 99 долларов.
DesignerVista mockup tool
DesignerVista заточен исключительно для проектирования интерфейсов десктопных приложений под Windows. Отсюда и особенности библиотеки: в ней есть, например, огромный набор шаблонов для построения ленточного интерфейса (ribbon). Даже простой шаблон окна представлен в двух вариантах: из Windows 7 и 8.
Помимо шаблонов элементов управления, в макет можно добавлять ссылки на другие макеты, страницы этого же макета или URL. Сама ссылка может быть видимой или прозрачной. Это позволяет вставить в макет скриншот готового интерфейса и разместить на месте его кнопок ссылки на макеты будущих частей приложения. Экспорт макета возможен в PDF, HTML и растровые форматы.
Интерфейс программы стилизован под последние версии Microsoft Office. Работать с ним удобно. Единственный недостаток — нет автоматического выравнивания элементов. Например, в WireframeSketcher Studio шаблон при перетаскивании его на лист старается автоматически выровняться относительно соседних элементов. При этом отображаются линии, подсказывающие логику этого выравнивания. В DesignerVista для выравнивания используются отдельные кнопки на панели инструментов, это слегка увеличивает время создания макета.
В общем, если нужно работать только с макетами десктопных Windows-приложений, то DesignerVista — идеальное решение, полученный прототип будет почти не отличаться от скриншота реальной программы. Цена лицензии — 169 долларов для одного пользователя.
Caretta GUI Design Studio
http://www.carettasoftware.com
GUI Design Studio распространяется в двух версиях: Professional и Express, по цене 129 и 499 долларов соответственно. Эту программу отличают от остальных наиболее широкие возможности программирования поведения интерфейса, доступные только в версии Professional. Видимо, этим и объясняется столь высокая цена.
Содержимому форм макета можно присваивать имена переменных. Переменные хранятся в базе данных, которая понимает слова SELECT, FROM и WHERE. Помимо данных, вводимых пользователем, в базу можно заранее загрузить свои данные. Для каждого элемента можно задать условия видимости и активности, исходя из значения тех или иных переменных.
Помимо графически видимых элементов, в прототип можно добавлять и невидимые элементы, при навигации на которые будут происходить различные события: выполняться запросы к базе данных, воспроизводиться звуки или запускаться анимация некоторых элементов интерфейса.
Запускать интерактивные прототипы можно либо из самой программы, либо из специального viewer’а, который распространяется бесплатно. Разумеется, ничто не мешает просто экспортировать макеты в PNG, если не требуется интерактивность. Версия Professional поддерживает контроль версий макетов с помощью SVN.
GUI Design Studio ориентирована на создание макетов программ для ОС Windows. Набор шаблонов здесь не такой богатый, как в DesignerVista. Его можно немного расширить, импортировав собственные иконки в формате ico.
UXToolbox
Продукт английской компании softandGUI в первую очередь разработан для работы с мобильными приложениями. При создании нового проекта UXToolbox просит выбрать целевое устройство, под которое будет разрабатываться интерфейс. Шаблон с изображением этого устройства будет по умолчанию помещен на каждый из листов документа. В библиотеке присутствуют шаблоны нескольких современных смартфонов, а также MP3-плееров и портативных игровых консолей. Смысл наличия этих шаблонов не только в том, чтобы повторить внешний вид устройства. Они нужны также для того, чтобы элементы интерфейса соотносились по размеру с физическим размером экрана. Учитывая разнообразие устройств на Android, полезно было бы иметь шаблон некоего обобщенного смартфона, для которого можно было бы задать любой размер экрана. К сожалению, такой шаблон не предусмотрен разработчиками UXToolbox, а предложенный набор смартфонов довольно скуден: это все поколения iPhone, HTC Desire, Samsung Galaxy S, S3, Note 2, Omnia 7, а также несколько моделей Nokia и BlackBerry.
Интерактивность в UXToolbox реализована довольно примитивно. Любой элемент интерфейса можно использовать как ссылку на другой лист документа. Листы одного документа представляют собой полностью независимые макеты.
В программе есть два режима отображения макета: wireframe и high-res. Последний делает изображение более приятным для глаза, интерфейс становится похожим на скриншот.
К сожалению, библиотека шаблонов довольно скудна. С другой стороны, в ней есть специфические элементы интерфейса из iOS и Android. В программах, способных генерировать только схематические изображения, многие элементы (например, кнопки или полосы прокрутки) изображаются одними и теми же шаблонами для макетов веб-сайтов и мобильных приложений. Но если необходимо создать более реалистичный макет, такой подход неприемлем.
Просят за UXToolbox немало — 266 долларов за лицензию для одного пользователя. Обратить на нее внимание стоит, если ты хочешь быстро создавать аккуратные макеты, которые можно вставить не только в ТЗ разработчика, но и в презентацию.
Microsoft PowerPoint
Если ты часто готовишь презентации в PowerPoint, то, возможно, тебе было бы удобно составлять макеты интерфейсов для них прямо там. Для этой цели существует плагин под названием PowerMockup. Лицензия для одного пользователя обойдется в 60 долларов — недешево, если учесть, что это не полноценный программный продукт, а всего лишь библиотека шаблонов для PowerPoint. Чуть ли не половина предложенных элементов — пиктограммы, не имеющие особого смысла при создании прототипа интерфейса. Впрочем, все базовые элементы присутствуют. Есть даже шаблоны, изображающие корпуса смартфона и планшета. А вот экранной клавиатуры, необходимой, чтобы полноценно изобразить интерфейс мобильной ОС, не предусмотрено.
Хотя эта библиотека и уступает по числу полезных шаблонов лучшим программам в нашем обзоре, в ней есть все, что нужно для работы на скорую руку. Разумеется, можно изменять шаблоны в размерах и редактировать текст, который на них присутствует. А вот изменять состояние элементов управления, например нажать кнопку или выбрать один из пунктов выпадающего меню, как это позволяют делать полноценные программы, к сожалению, не получится.
Microsoft Visio
Учитывая хорошую репутацию Microsoft Visio как средства создания всевозможных схем, я не мог не посмотреть, годится ли он для составления макетов пользовательских интерфейсов.
Беглый поиск в Google привел к набору шаблонов Updated Sketch GUI Shapes for Visio, который, по всей видимости, когда-то распространялся автором Джонатаном Аббеттом на его сайте abbett.org. На момент написания этой статьи набора шаблонов на сайте уже не было. Мне удалось скачать его только со Stack Overflow, куда ее выложил один из пользователей конференции. В отличие от плагина для PowerPoint, этот набор шаблонов доступен в качестве родного для Visio файла с расширением vss и не пытается устанавливаться в системе как отдельная программа. Набор довольно скуден — всего 34 наименования.
Как выяснилось, Visio 2013 имеет родной набор шаблонов для создания схем интерфейсов. Для того чтобы им воспользоваться, нужно при создании нового файла выбрать из категории «Программное обеспечение» пункт «Проволочная диаграмма». Штатный набор шаблонов Visio более полон и включает в себя почти все, что есть в специализированных программах, кроме макетов для мобильных приложений.
К сожалению, в данном случае специальное оказалось лучше универсального. В Visio отсутствует возможность изменять состояния элементов управления. Например, отсутствует такой элемент, как пустая (не выбранная) радиокнопка. А чтобы создать раскрывающийся список, придется использовать отдельные шаблоны для кнопки со стрелкой и каждого из элементов списка. Все это приводит к тому, что процесс создания макета в Visio занимает заметно больше времени, чем в специализированной программе.
Макеты как сервис
Заниматься прототипированием можно и с помощью веб-сервисов. Очевидное преимущество тут в возможностях совместной работы. Число таких сервисов настолько велико, что рассматривать их так же детально, как и программы, было бы довольно скучно. Дело в том, что по функциональности большинство из них повторяют друг друга. Поэтому я дам сжатое описание десяти веб-сервисов, которые первыми попались мне на глаза.
- http://proto.io Довольно дорогой сервис — 288 долларов в год для одного пользователя. При этом число проектов ограничено пятью. Набор шаблонов в библиотеке базовый. Интерактивность реализована лишь в виде ссылок на другие макеты.
- http://lumzy.com Также базовый набор шаблонов, но широкие возможности для обеспечения интерактивности макета. Этот сервис примечателен моделью оплаты. Несколько лет он функционировал как бесплатный. Теперь для пользования сервисом придется приобретать жетоны. Цена одного жетона — 26 центов, а срок действия — 12 часов. По истечении срока действия жетона сервис продолжит работать без ограничений, но время от времени будет напоминать о необходимости оплаты всплывающими сообщениями.
- https://gomockingbird.com Этот сервис отличается способностью быстро поделиться готовым макетом. Набор шаблонов годится только для отрисовки веб-приложений. Цена использования — 9 долларов в месяц при двух активных проектах.
- http://cacoo.com Этот сервис предлагает набор готовых макетов, представляющих собой примитивные изображения некоторых типовых вариантов верстки сайта. Впоследствии предложенный макет можно доработать под свои нужды. Есть возможность совместного редактирования макета, а вот просто показать макет человеку, не зарегистрированному на сайте, не получится. Возможен экспорт в форматы PNG, SVG, PDF, PS, PPT. Цена — 49 долларов в год для одного пользователя. Также есть бесплатный план, несколько ограниченный в возможностях совместного редактирования.
- https://moqups.com/ Очень простой инструмент с понятным интерфейсом. Библиотека шаблонов не самая богатая, но включает в себя элементы интерфейса iOS. Минимальный тарифный план стоит 99 долларов в год. Он позволяет иметь десять активных проектов и дает гигабайт дискового пространства для хранения изображений.
- http://www.ninjamock.com Сервис интересен в основном возможностью создания макетов интерфейсов мобильных приложений. Поддерживаются все популярные ОС, не исключая Windows Phone и Windows RT. Набор шаблонов довольно богатый, хотя в него включены некоторые странные элементы. Такие, как, например, стандартное уведомление о встрече, запланированной в календаре. Пользоваться ninjamock.com можно бесплатно в некоммерческих целях и создавая не более трех проектов на аккаунт.
- https://www.wireframes.org Набор шаблонов и функциональность позволяют отрисовывать довольно примитивные макеты веб-интерфейсов. Присутствует возможность совместного редактирования макетов, а также экспорт в PNG, PDF и (внимание)… JSON. Последнее может быть полезно ввиду того, что у сервиса есть братья-близнецы, очевидно работающие на том же ПО. Например, сайт mockuptiger.com. Пользоваться описанным приложением можно в онлайне за 0–500 долларов в год, в зависимости от необходимого числа проектов. А можно один раз купить лицензию за 97 долларов и установить его на свой сервер.
- http://www.appmockuptools.com/ На этом сайте можно купить блокнот для ручной отрисовки макетов интерфейсов для iPad и iPhone. Блокнот продается в виде PDF-файла, печатать который придется самостоятельно.
- http://www.invisionapp.com/ Этот сервис позволит превратить растровый макет сайта или приложения в интерактивный. Для этого нужно импортировать в облачное приложение растровые файлы, нанести на них разметку и задать действия, выполняемые при нажатии на тот или иной участок макета. Таким действием может быть переход к другой странице макета или другой области этой же страницы, а также переход по внешней ссылке. Минимальная цена использования — 15 долларов в месяц при трех активных проектах.
- http://concept.ly/ Близкий аналог invisionapp.com. Проект запустился недавно, поэтому в течение некоторого времени его использование бесплатно.
