Прототип GUI без строчки кода

Автор: Виктор Деревянко
Опубликовано: 09.10.2008
Источник: SoftKey.info

В небезызвестной книге "Getting Real" рекомендуется начинать разработку любого программного продукта с создания прототипа его пользовательского интерфейса. Причины очевидны. Пользовательский интерфейс - это то, что видит пользователь, с чем он фактически работает. Поэтому успех продукта в немалой степени будет зависеть от того, понравится ли пользователям интерфейс, удобно ли будет с ним работать, насколько оперативно с его помощью можно будет выполнять типичные пользовательские задачи. Хороший прототип позволит выявить основные проблемы в интерфейсе на самой ранней стадии разработки - когда еще не написано ни строчки кода и любые изменения в проект вносятся без проблем, путем корректировки технического задания. Если же обойтись без прототипа, то огрехи интерфейса могут проявиться на поздних этапах разработки, когда большая часть кодирования уже выполнена и изменить что-либо уже очень и очень сложно. Риск слишком высок, поэтому при разработке большинства программных продуктов прототип пользовательского интерфейса обязательно создается.

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

Существует множество способов прототипирования пользовательского интерфейса. Многие разработчики по прежнему используют бумажное прототипирование, когда интерфейс рисуется ручкой на бумаге. Другие рисуют экраны программы в Microsoft Visio, Photoshop, PowerPoint или InDesign. Третьи каждый раз пишут отдельную программу, реализующую пустой интерфейс будущего продукта. И, наконец, отдельная категория разработчиков использует для прототипирования интерфейса специальное программное обеспечение. Как обычно, в форумах активно ведутся активные дискуссии на тему, какой способ предпочтителен и какую программу лучше использовать. И, как обычно, однозначного ответа тут нет и быть не может - каждый способ оптимален в тех или иных случаях, у каждого есть как достоинства, так и недостатки.

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

Специальное программное обеспечение для создания прототипов стремиться совместить достоинства указанных методов. С одной стороны, оно позволяет создавать прототипы практически так же быстро и просто, как с помощью карандаша и бумаги. С другой стороны, создаваемые прототипы имеют массу дополнительных возможностей: интерактивность (или "кликабельность"), внешний вид максимально приближенный к дизайну будущего программного продукта, возможности документирования элементов интерфейса и т.д. Одним из представителей такого класса программ является программный продукт GUI Design Studio, разработанный фирмой Caretta Software Ltd и, судя по отзывам в Интернет, хорошо зарекомендовавший себя на практике.

GUI Design Studio - это профессиональный инструмент для создания интерактивных прототипов графического пользовательского интерфейса Windows-приложений и Web-интерфейсов. Акцент в нем сделан на простоте использования. Для того, чтобы создать в GUI Design Studio прототип интерфейса не требуется никакого программирования - все операции выполняются через графический интерфейс пользователя, преимущественно мышкой. По сути дела, работа по созданию прототипа интерфейса сводится к двум действиям - нарисовать все экраны приложения и снабдить элементы интерфейса требуемой функциональностью, т.е. сделать прототип интерактивным.

Создание прототипа окна

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

Создание прототипа диалогового окна в GUI Design Studio

Справа от рабочей области документа расположена панель управления, содержащая несколько вкладок. На вкладке "Элементы" расположен набор поддерживаемых элементов управления, которые могут быть использованы при построении прототипа интерфейса. Элементы управления разбиты по группам - "Кнопки", "Сетки", "Списки, деревья и таблицы", "Окна и диалоги" и т.д.

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

GUI Design Studio поддерживает, пожалуй, все стандартные элементы управления, используемые в приложениях Windows - кнопки, полосы прокрутки, вкладки, списки, панели инструментов, меню и т.д. Поддерживаются и нестандартные элементы, такие как ленточные панели Ribbon и линейки.

Имитатор GUI Design Studio

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

Добавление интерактивности

Возможность задания функциональности элементам управления в GUI Design Studio реализована замечательно просто. Фактически, дело всегда ограничивается выполнением одной единственной операции - установлением связи между двумя элементами управления.

Нажатие кнопки должно приводить к открытию окна? Вы протягиваете стрелочку от кнопки к требуемому окну. Элемент управления "Combo box" должен открываться? Вы связываете его со списком элементов, который требуется показать. При нажатии на кнопку должно появляться сообщение об ошибке? Вы связываете кнопку со специальным элементом управления, отвечающим за показ модального информационного окна. И так далее. Появляющееся окно должно быть немодальным? Без проблем - щелкаете по связывающей стрелочке и выбираете требуемый тип действия - "показать окно", "скрыть окно", "всплывающее окно" и т.д. и т.п.

Окно раскадровки: связываем три окна и привязываем к ссылкам окна сообщений

Соединяя элементы управления стрелочками, вы можете смоделировать правильный порядок отображения окон приложения при любом сценарии работы. Что, собственно, и требуется от интерактивного прототипа. Единственной особенностью здесь является необходимость вводить в прототип дополнительные окна, такие как списки элементов для "combo box" или меню, но это не составляет особых проблем.

Для описания сценария работы, включающего работу нескольких окон, разработчики рекомендуют создавать отдельные документы, называемые в терминологии GUI Design Studio "storyboard documents" или раскадровки. В пустой документ раскадровки вы мышкой перетаскиваете документы, содержащие прототипы необходимых окон (вот почему рекомендуется для каждого окна создавать отдельный документ). Прототипы окон появляются в раскадровке и вы можете установить между ними необходимые связи. Копирования прототипов не происходит - если в исходный документ внести какие-либо изменения, то они отразятся и в раскадровке.

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

Прочие функции

Программа GUI Design Studio разрабатывается уже несколько лет, "доросла" до версии 3.0 и успела обрасти множеством полезных функций. В их числе следует отметить:

наличие поддержки "загрубления" дизайна при отображении, когда окна приложения отображаются так, как будто они отрисованы от руки; это очень полезная функция - хорошо известно распространенное заблуждение многих клиентов, которые считают, что если приложение выглядит как готовое, значит оно действительно готово;
многофайловость проекта, что делает возможным организацию командной работы над проектом путем использования системы контроля версий;
возможность сохранить готовый прототип в виде единственного файла, в который все требуемые файлы включаются автоматически, включая и те, на которые в проекте имеются лишь ссылки;
наличие бесплатной программы просмотра, которую можно послать клиенту, чтобы тот мог просмотреть у себя подготовленный прототип интерфейса не имея при этом GUI Design Studio;
возможность экспорта прототипа в виде документации в форматы RTF и HTML;
возможность создания и использования библиотек компонентов дизайна;
возможность выбора цветовой схемы Windows, используемой в процессе работы над прототипом;
наличие поддержки любых языков, в том числе, русского и тех, в которых текст пишется справа налево.

Впечатления

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