Проектирование интерфейсов информационных систем

1. ПРОЕКТИРОВАНИЕ ИНТЕРФЕЙСОВ ИНФОРМАЦИОННЫХ СИСТЕМ

2. Balsamiq Mockups http://balsamiq.com

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

3. Balsamiq Mockups http://balsamiq.com

• Шаблонов для мобильных платформ в Balsamiq очень мало — всего
предусмотрено семь макетов и элементов для iPhone (макет самого
iPhone и некоторые элементы, характерные для мобильной ОС: форма
picker (используется в мобильных ОС для ввода времени и других
параметров), экранная клавиатура, тумблер ON/OFF и другие).
• Однако, все остальные элементы, необходимые для создания макета
мобильного приложения, можно взять из других разделов библиотеки.
• Шаблонов для других мобильных устройств не предусмотрено.
• Учитывая схематичность получаемых макетов, шаблон iPhone вполне
подошел бы для прототипирования интерфейса приложения для любого
смартфона или планшета. Но Balsamiq не позволяет изменять
соотношение сторон экрана смартфона.
3

4. WireframeSketcher Studio http://wireframesketcher.com

• WireframeSketcher Studio —удобный инструмент создания макетов. В нем
библиотека шаблонов больше, чем в Balsamiq, есть макеты под все
популярные мобильные ОС (iOS, Windows Phone и Android) и даже
некоторые веб-фреймворки, например Bootstrap. Интерфейс программы
удобный: наиболее часто используемые функции, такие как группировка
элементов и вынос их на передний или задний план, выполняется
кнопками на главной панели, а не из меню.
• Проект может включать в себя несколько «экранов», а внутри каждого
экрана элементы интерфейса можно объединять в группы. При
редактировании навигация по экранам и группам элементов
осуществляется при помощи панели, постоянно расположенной в левой
части окна программы, что весьма удобно при работе над сложными
макетами. Правую сторону окна занимает браузер библиотеки шаблонов.
4

5. WireframeSketcher Studio http://wireframesketcher.com

• Все элементы поддаются тонкой настройке. Проиллюстрировать механизм
работы интерфейса можно с помощью функции клонирования начального
экрана. После этого каждый шаг можно проиллюстрировать отдельно,
изменив соответствующие элементы.
• Еще одна полезная функция — возможность импортировать графические
файлы. Благодаря этому можно сделать скриншот реального интерфейса, а
затем дорисовать изменения.
• WireframeSketcher Studio доступна для Windows, Linux и OS X, а также в
виде плагина для Eclipse.
5

6. FlairBuilder http://www.flairbuilder.com

• По функциональности во многом повторяет Balsamiq. Обеспечен импорт
макетов из Balsamiq. В библиотеке шаблонов присутствуют элементы для
веба и iPhone, но других мобильных ОС нет.
• Настройка шаблонов производится примитивно: при выборе одного из
элементов, уже помещенных на лист, рядом с ним появляется несколько
кнопок, назначение которых очевидно из пиктограмм.
• FlairBuilder поддерживает интерактивность. По клику на любой элемент
интерфейса можно перейти на другую страницу документа,
спрятать/показать или сделать активным/неактивным какой-либо элемент
макета, перелистывать табы, изменять положение и размер элементов
интерфейса
• Программа поддерживает импорт растровых изображений и экспорт
готовых макетов в PDF, HTML и растровые форматы. Для просмотра
интерактивных шаблонов на сайте разработчика доступен бесплатный
6
viewer.

7. DesignerVista mockup tool http://www.designervista.com

• DesignerVista исключительно для проектирования интерфейсов
десктопных приложений под Windows.
• Помимо шаблонов элементов управления, в макет можно добавлять ссылки
на другие макеты, страницы этого же макета или URL. Сама ссылка может
быть видимой или прозрачной. Это позволяет вставить в макет скриншот
готового интерфейса и разместить на месте его кнопок ссылки на макеты
будущих частей приложения. Экспорт макета возможен в PDF, HTML и
растровые форматы.
• Интерфейс программы стилизован под последние версии Microsoft Office.
• В общем, если нужно работать только с макетами десктопных Windowsприложений, то DesignerVista — идеальное решение, полученный
прототип будет почти не отличаться от скриншота реальной программы.
7

8. UXToolbox http://www.softandgui.co.uk

• Разработан для работы с мобильными приложениями.
• При создании нового проекта UXToolbox просит выбрать целевое
устройство, под которое будет разрабатываться интерфейс. Шаблон с
изображением этого устройства будет по умолчанию помещен на каждый
из листов документа.
• В библиотеке присутствуют шаблоны нескольких современных
смартфонов, а также MP3-плееров и портативных игровых консолей.
Смысл наличия этих шаблонов не только в том, чтобы повторить внешний
вид устройства. Они нужны также для того, чтобы элементы интерфейса
соотносились по размеру с физическим размером экрана.
• Не предусмотрен шаблон некоего обобщенного смартфона, для которого
можно было бы задать любой размер экрана.
• Предложенный набор смартфонов довольно скуден: это все поколения
iPhone, HTC Desire, Samsung Galaxy S, S3, Note 2, Omnia 7, а также
несколько моделей Nokia.
8

9. Microsoft Visio

• Visio 2013 имеет родной набор шаблонов для создания схем
интерфейсов. Для того чтобы им воспользоваться, нужно при
создании нового файла выбрать из категории «Программное
обеспечение» пункт «Проволочная диаграмма». Штатный набор
шаблонов Visio более полон и включает в себя почти все, что есть в
специализированных программах, кроме макетов для мобильных
приложений.
К сожалению: В Visio отсутствует возможность изменять состояния
элементов управления.
(-) Отсутствует пустая (не выбранная) радиокнопка, чтобы создать
раскрывающийся список, придется использовать отдельные шаблоны
для кнопки со стрелкой и каждого из элементов списка.
9

10. Преимущество - в возможностях совместной работы Макеты как сервис

http://proto.io - число проектов ограничено пятью. Набор шаблонов в
библиотеке базовый. Интерактивность реализована в виде ссылок на
другие макеты.
http://lumzy.com базовый набор шаблонов, но широкие возможности для
обеспечения интерактивности макета.
https://gomockingbird.com отличается способностью быстро поделиться
готовым макетом. Набор шаблонов годится только для отрисовки вебприложений..
http://cacoo.com сервис предлагает набор готовых макетов, представляющих
собой примитивные изображения некоторых типовых вариантов верстки
сайта. Впоследствии предложенный макет можно доработать под свои
нужды. Есть возможность совместного редактирования макета, а вот
просто показать макет человеку, не зарегистрированному на сайте, не
получится.
10

11. Преимущество - в возможностях совместной работы Макеты как сервис

https://moqups.com/ Очень простой инструмент с понятным интерфейсом.
Библиотека шаблонов не самая богатая, но включает в себя элементы
интерфейса iOS.
http://www.ninjamock.com сервис интересен в основном возможностью
создания макетов интерфейсов мобильных приложений.
Поддерживаются все популярные ОС, не исключая Windows Phone и
Windows RT. Набор шаблонов довольно богатый, хотя в него
включены некоторые странные элементы. Такие, как, например,
стандартное уведомление о встрече, запланированной в календаре.
https://www.wireframes.org набор шаблонов и функциональность
позволяют отрисовывать довольно примитивные макеты вебинтерфейсов. Присутствует возможность совместного редактирования
макетов, а также экспорт в PNG, PDF.
11