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

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

Для автоматизации данного процесса наиболее часто используют специализированные программы Microsoft Visio, Adobe InDesign и др.
В мире свободного программного обеспечения особую популярность получили программы Gimp и Inscape. Обе программы доступны как для операционной системы Linux так и для Windows (для Windows требуются установить GTK+ Runtime Environment). Программы доступны на множестве языков, включая и Русский язык.

Gimp представляет собой мощный графический редактор растровой графики, а Inscape представляет собой редактор векторной графики.
Данный редактор в себя некоторые черты таких известных программных продуктов как Adobe Illustrator, Corel Draw, Freehand и Xara X. Этот редактор работает с форматом хранения векторной графики Scalable Vector Graphics (SVG).

Использование векторной графики позволяет создавать сложные графические объекты без потери качества при масштабировании. Для удобства просмотра заказчиком, векторные рисунки обычно экспортируют в растровый формат, например PNG (Portable Network Graphics). Который без проблем можно просмотреть практически любой программой для просмотра изображений. На данный момент SVG формат поддерживается браузерами Firefox и Opera, а для Internet Explorer доступен модуль расширения от Adobe. Так что векторную графику уже можно интегрировать в WEB документацию, например на основе например html.

Прототип панели файлового навигатора

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

Для того чтобы было удобнее работать, осветлим его в редакторе Gimp. Вся операция по подготовке подложки включает следующие действия:
·Загружаем проводник Windows;
·Делаем его скриншот нажатием клавиш "Ctrl + PrintScreen";
·Загружаем Gimp;
·Создаем рисунок из скриншота, меню "File->Aquire->Paste as new..";
·Выделяем требуемую панель и делаем обрезку, меню "Image->Crop Image";
·Убираем цветность и осветляем изображение установкой яркости на 80% в меню "Layer->Colors->Colorize";
·Сохраняем созданное изображение в формате PNG, меню "File->Save as..".

Рис. 1. Редактирование скриншота в редакторе Gimp

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

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

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

Рис. 2. Создание прототипа экрана в редакторе Inkscape

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

Рис. 3. Прототип панели файлового навигатора

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

Файлы дизайна интерфейса пользователя можно найти в репозитории проекта "FileArranger", в папке сайт

Рекомендуемые ресурсы:

Сайт проекта "Аранжировщик файлов". сайт
Графический редактор Gimp. сайт
GTk+ и GIMP для Windows сайт
Редактор векторной графики Inscape. сайт
Программа для оптимизации PNG графики OptiPNG. сайт

Сергей Бердачук
сайт