Создание прототипов экранных форм

Создадим прототип панели файлового навигатора в соответствии с ранее рассмотренным высокоуровневым дизайном (см. проект “Аранжировщик Файлов”). Для ускорения процесса создания прототипа можно воспользоваться отсканированным наброском данной панели на бумаге. Но, учитывая, что в общих чертах панель будет напоминать панель Windows Explorer, то проще всего воспользоваться скриншотом данной программы. На начальном этапе скриншот будет подложкой для разрабатываемого прототипа.

Для того чтобы было удобнее работать, осветлим его в редакторе Gimp. Вся операция по подготовке подложки включает следующие действия:

Начиная работать над новым документом в Inscape, сразу выставляем размер холста. Для прототипов экранных форм удобнее всего выставить наиболее типовое разрешение экрана, например 1028 x 768, что позволит сразу работать с предполагаемыми размерами элементов.

Редактор Inkscape, как и большинство графических редакторов позволяет работать со слоями. Слои можно представить себе как стопку прозрачных пленок, на каждой из которых можно рисовать свою часть рисунка, а при накладывании их друг на друга получаем картину в целом. Это очень удобно, так как можно отделить части рисунка по функциональному назначению, например фоновое изображение. Слои можно делать невидимыми, что позволяет убрать некоторые части изображения при необходимости, например сноски с комментариями. Объекты, или точнее выделенные группы объектов можно перемещать между слоями. Слои можно “запирать” для защиты от случайного редактирования.

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

На этапе создания документа высокоуровневого дизайна (“Видение”) был создан прототип размещения элементов приложения. Возьмем его в качестве подложки для создания прототипа экрана проводника. Создадим дополнительный слой, который будет содержать ранее созданный скриншот проводника Windows, и опустим его вниз при помощи меню “ Layer->Layer to Bottom ”. Впоследствии, когда прототип формы будет создан, данный слой с растровым изображением можно будет удалить.

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

Хочется отметить, что редактор Inkscape позволяет “Векторизировать” рисунки, т.е. производить преобразование из растровой графики в векторную. Данная опция доступна в меню “ Path->Trace Bitmap ”. Это позволяет упростить создание сложных объектов, например дерева и списка файлов в создаваемом прототипе. Прототипы можно создавать с различной степенью детализации от простейших контурных рисунков, до полной имитации создаваемого приложения с раскраской, подсветкой, вращением и т.д. Пример созданного прототипа показан на рисунке.

Отдельным слоем можно создать сноски на разные элементы формы для последующего описания в документах по разработке программного продукта.