В предыдущих сериях…

В предыдущих статьях цикла мы в деталях описали процесс поиска подходящего нам инструмента прототипирования и историю создания собственного инструмента – GUI Machine. Теперь пришло время рассказать более подробно о том, что у нас получилось. Дабы не тратить драгоценное время читателя, приступлю к описанию инструмента прототипирования GUI Machine, его функциональности и возможностей без замедления и лирических отступлений. Статья будет интересна не только тем, кто уже знаком с инструментом и хочет узнать о нём больше, но и тем, кто находится в активном поиске инструмента прототипирования и проводит их сравнительный анализ.

Резюме

Имя: GUI Machine

Год рождения: 2009

Дата выхода в свет: 24 января 2011 года

Место рождения: Санкт-Петербург, Россия

Организация: Alee Software

Проф. призвание: инструмент динамического прототипирования.

Проф. навыки: создание интерактивных прототипов сложных десктоп и веб-приложений без написания программного кода

Среда обитания: Windows, Mac OS, Linux

Зарубежные аналоги: Axure RP, GUI Design Studio, MS Expression Blend

Отечественные аналоги: отсутствуют

Личные качества: простота, функциональная наполненность, интуитивность, высокая скорость и удобство создания прототипов.

Знание языков: русский и английский

О себе: рождён в успешной ИТ-компании, постоянно пополняюсь новой функциональностью, улучшаюсь и избавляюсь от ошибок. Амбициозный, имею грандиозные планы. Будущий революционер мира разработки программного обеспечения.

Контакты: http://www.guimachine.ru

Первое знакомство

Для начала считаю нужным в двух словах описать предназначение приложения, решаемые задачи, специализацию и представить интерфейс приложения.

Итак, GUI Machine – это инструмент для создания интерактивных прототипов десктоп (настольных) и веб-приложений— определение, говорящее само за себя. Такие прототипы позволяют описывать как внешний вид, графический интерфейс, так и поведение, интерфейсную логику разрабатываемой системы. Прототипы, созданные в GUI Machine, характеризуются высокой достоверностью, детализацией, визуальной точностью и по степени близости к конечной системе относятся к классу High-fidelity прототипов. В качестве примеров предлагаю посмотреть видео-презентации прототипов, созданных в GUI Machine:

Прототип веб-интерфейса CRM-системы:

Прототип внутрикорпоративного портала Alee Software:

Для прототипирования в GUI Machine не требуются какие-либо специальные знания и навыки, не требуется написание программного кода. Таким образом, инструмент предназначен не только, и даже не столько разработчикам, сколько аналитикам, менеджерам проектов, проектировщикам, техническим писателям, юзабилити-специалистам, которые непосредственно общаются с заказчиком/будущим пользователем и наиболее полно и точно представляют их требования и пожелания, которые впоследствии будут воплощены в прототипе с минимальными потерями значимой информации.

Как следствие, разработчик помимо ТЗ получит рабочий прототип разрабатываемой системы, который позволит уточнить, конкретизировать неясные или двусмысленные требования и значительно уменьшит вероятность неверной интерпретации требований. Соответственно, значительно повысится вероятность того, что система, полностью соответствующая требованиям заказчика и полностью его удовлетворяющая, будет реализована с первого раза либо с минимальным количеством переделок. Меньше итераций разработки — меньше затраченного времени и денег. Кроме того, не стоит забывать про довольного заказчика, возросшая лояльность которого — далеко не самый маловажный фактор. Это лишь один из вариантов использования прототипов, но далеко не единственный.

Впрочем, о пользе прототипирования писали, говорили, спорили не раз и не два, поэтому не буду утруждать читателя дальнейшими рассуждениями на тему, а перейду к описанию интерфейса GUI Machine.

Интерфейс GUI Machine

Рабочая область GUI Machine организована таким образом, чтобы помочь сосредоточиться на создании и редактировании программных интерфейсов.

В верхней части окна приложения представлено меню, выполненное в Ribbon стиле, предоставляющее быстрый доступ к наиболее востребованным операциям и настройкам. Ниже по центру располагается область редактирования прототипа, на которой из различных компонентов создаются, собираются экраны интерфейса. Под областью редактирования показаны корешки страниц проекта. Слева и справа располагаются основные рабочие панели: Компоненты, Слои, Свойства объекта, Шаблоны и История. Все панели могут быть свёрнуты, спрятаны по краям области редактирования, изменены в размерах (как по высоте, так и по ширине), перемещены и закрыты. Меню также можно сворачивать, оставляя лишь только одну верхнюю строчку. Таким образом, можно настроить вид приложения «под себя» и освободить максимальное количество места под область редактирования прототипа для более удобной и приятной работы. Быстро скрыть все панели можно при помощи сочетания клавиш Ctrl+H.

Также управление панелями доступно со вкладки Утилиты и фреймы верхнего горизонтального меню приложения:

Здесь можно скрыть либо отобразить панели (по одной либо все вместе), закрепить их положение, выключить отображение их заголовков.

Компоненты

Панель Компоненты — основной рабочий инструмент при построении интерфейсов, содержащий множество различных компонентов. Инструмент предназначен для добавления на область редактирования объектов. Панель содержит 4 набора компонентов: Стандартные, Расширенные, Фигуры, Vaadin. Помимо своего стандартного вида (дерево компонентов с названиями) панель имеет альтернативное компактное представление:
Изменить способ отображения компонентов можно кликом правой кнопки мыши внутри панели.

Стандартные компоненты

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

Все стандартные компоненты можно обнаружить также на вкладке Стандартные верхнего горизонтального меню приложения:

На рисунке ниже показано запущенное в Windows 7 в режиме просмотра окно, содержащее стандартные компоненты:

А теперь то же самое окно, но запущенное на Mac OS:

и на Linux:

В набор, помимо привычных элементов интерфейса, также входят лэйауты — динамический и статический — объекты, на которых основывается любой интерфейс, созданный в GUI Machine. Именно они обуславливают специфику работы в GUI Machine.

Статический лэйаут

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

В левой части рисунка показан статический лэйаут на области редактирования, содержащий несколько объектов. В павой части — тот же лэйаут, но запущенный в просмотр. Окно просмотра намеренно вытянуто по вертикали с целью показать «статичность» этого лэйаута: при изменении размеров окна положение и размер содержимых объектов осталось неизменным.

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

Инструменты выравнивания в GUI Machine

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

Динамический лэйаут

Если же требуется полностью интерактивный и динамичный прототип, то он должен быть создан на основе динамических лэйаутов. Этот объект представляет собой контейнер, который может быть разбит на несколько ячеек, образуя таким образом своего рода каркас интерфейса. Вставляемые в динамический лэйаут объекты располгаются строго по ячейкам (размер вставляемого объекта будет изменён до размера ячейки/ячеек). При изменении размера запущенного в режиме просмотра окна, положение и размер вставленных в лэйаут объектов также будут изменены. Работа с динамическими лэйаутами несколько более сложна, необходимо потратить некоторое время на изучение его поведения (минут 10 с документацией), однако при определённой сноровке работа с ним не доставляет каких-либо сложностей или неудобств.

Также, как и на предыдущем рисунке, здесь окно просмотра лэйаута намеренно вытянуто. При изменении размера окна положение и размер некоторых объектов также изменились. Зависит это от типа ячейки лэйаута, в которой расположен тот или иной объект (их существует 3 типа).

Плейсхолдер

Помимо лэйаутов, выбивается из линейки стандартных элементов интерфейса компонент Плейсхолдер. Как говорит его название — это объект, который занимает определённое место на прототипе и хранит ссылку на другой объект. При запуске прототипа в режиме просмотра, плэйсхолдер будет автоматически заменён объектом, на который он ссылается.

Расширенные компоненты

Набор расширенных компонентов содержит нестандартные компоненты интерфейса (такие, как “Карта Google”, “Сворачиваемая панель”, “Список чек-боксов”) и компоненты, предназначенные исключительно для создания сложных, нетривиальных действий (например, “Таймер”, “Аудио проигрыватель”, “Объект связи”). Последние не являются элементами интерфейса и не могут быть вставлены ни в какой из лэйаутов.

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

Веб-компоненты Vaadin

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

Как вы догадались, компоненты Vaadin также продублированы на вкладке Vaadin верхнего горизонтального меню приложения:

На рисунке ниже показано запущенное в режиме просмотра окно, содержащее веб-компоненты Vaadin:

Фигуры

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

Фигуры также можно найти на вкладке Фигуры верхнего горизонтального меню приложения:

На рисунке ниже показано запущенное в режиме просмотра окно, содержащее все фигуры.

Свойства объектов

Для каждого компонента в GUI Machine мы постарались «вынести наружу» и сделать изменяемыми максимальное количество его свойств. Это позволяет детально настраивать, видоизменять, кастомизировать любой объект.

Все свойства объектов разделяются на 3 группы: свойства типа, стандартные свойства, свойства для редактора.

Первая группа включает в себя свойства, характерные только для объектов данного конкретного типа (на рисунке — свойства окна, объекта типа JWindow). Набор свойств для объекта другого типа (например, для кнопки — объекта типа JButton) будет иным.

Набор стандартных свойств одинаков для объектов любого типа и включает в себя свойства общего характера, применимые для многих объектов: текст подсказки (тултип при наведении), курсор при наведении, настройки отображения и прозрачности, настройки полос прокрутки (скроллов). Однако часть свойств этой группы заблокирована для некоторых объектов (как на рисунке).

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

GUI Machine позволяет изменять свойства сразу нескольких объектов одного типа, выделенных на области редактирования.

Часть наиболее востребованных и часто встречающихся свойств объектов, отвечающих за форматирование и расположение текстового содержимого, представлена также на вкладке Редактирование верхнего горизонтального меню приложения:

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

HTML-редактор

Практически все свойства объектов с текстовым содержимым могут быть отредактированы во встроенном HTML-редакторе. Для его запуска нужно нажать на маленькую кнопку справа от текстового свойства:

HTML-редактор позволяет как редактировать текст в визуальном редакторе, так и непосредственно писать HTML-код.

HTML-редактор, как вы понимаете, значительно расширяет возможности кастомизации объектов. Как ни странно, в большинстве инструментов прототипирования подобная функциональность отсутствует.

Редакторы сложных объектов

Большинству сложных объектов — таблице, дереву, таб-панели, обычному и выпадающему спискам, обычному и всплывающему меню, списку чекбоксов — свойств на соответствующей панели недостаточно для изменения и детальной настройки их вида и содержимого. Поэтому в GUI Machine встроены отдельные редакторы для каждого из перечисленных объектов. Для их запуска требуется нажать на значение первого свойства объектов:

В качестве примера ниже приведёно описание редактора таблицы:

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

Для других сложных объектов имеются аналогичные редакторы со своим набором операций.

Свойства объектов по умолчанию

Обычно объекты одного типа (например, кнопки) в интерфейсе или прототипе оформлены в одном стиле. Для того, чтобы не нужно было вновь и вновь стилизовать каждый добавляемый в интерфейс объект, имеется возможность задать свойства объекта по умолчанию один раз. После этого при добавлении объекта на область он будет оформлен так, как указано в этих свойствах по умолчанию. Свойства объектов по умолчанию можно задать на последней вкладке настроек приложения:

Слои

На панели Слои отображаются все объекты текущей страницы проекта. Вид по умолчанию — дерево. Объект является дочерним к другому объекту, если первый вставлен во второй, расположен внутри него. Объект является родительским к другому объекту, если первый содержит внутри себя второй.

По этому принципу многослойности строятся все интерфейсы в GUI Machine. Благодаря нему, объекты жёстко привязаны друг к другу. Это позволяет, например, перемещать родительский объект вместе со всеми дочерними, что очень и очень удобно.

Контекстное меню панели позволяет отобразить её альтернативный вид — список слоёв. В этом варианте иерархия объектов не отображается, а показывается список слоёв от самого верхнего к самому нижнему. Каждому слою соответствует один объект. Здесь понятие слоёв используется в классическом понимании: объект самого верхнего слоя (с наибольшим номером) отображается поверх других, самого нижнего слоя (с номером 0) — позади других объектов.

Инструмент позволяет менять слои объектов и, тем самым, обеспечивает корректное их расположение в интерфейсе.

Инструменты для работы со слоями доступны также на вкладке Редактирование верхнего горизонтального меню приложения:

Шаблоны

Шаблон — заранее подготовленный макет часто используемых объектов. Использование шаблонов значительно ускоряет и облегчает проектирование прототипа, особенно в случае, когда разные интерфейсы прототипа содержат похожие объекты или интерфейсные части.

Возможно создание шаблонов 3-х типов:

• простого — шаблона отдельного объекта;
• составного — шаблона объекта со всеми дочерними объектами, содержимыми в нём (например, целого интерфейса);
• интерактивного — шаблона интерфейса с предзаданными действиями.

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

Созданные шаблоны хранятся в папке /templates/data каталога установки GUI Machine. Для передачи созданных шаблонов другому пользователю достаточно скопировать содержимое папки templates в директорию установки GUI Machine на его компьютере.

История

Для полноты картины осталось представить последнюю панель — История.

Этот инструмент, думаю, в подробном описании не нуждается. С помощью него можно вернуться к любому предыдущему состоянию проектного файла.

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

Область редактирования

Описание основных рабочих панелей завершено — дело осталось за малым — представить функциональность области редактирования.

Предназначение её понятно без объяснения: на ней непосредственно строятся интерфейсы из отдельных объектов. Для более удобной и продуктивной работы область редактирования имеет ряд настроек: цвет фона и размер области, тип сетки (крупная, мелкая или обе) и её размерность (пиксели, сантиметры, миллиметры или дюймы). Часть из них можно найти в настройках приложения:

Другие настройки располагаются на вкладке Утилиты и фреймы верхнего горизонтального меню приложения:

Инструменты данного набора, помимо настройки самой области, позволяют изменить параметры отображения объектов, расположенных на ней (показывать или не показывать область и размер объектов, глубину их вложенности в лэйаутах, действия между ними), и направляющих линий. Также можно отобразить либо скрыть боковые навигационные полосы, на которых отображены иконки объектов в соответствии с их расположением на области.

Область редактирования с указанными выше настройками будет выглядеть так:

Оживляем интерфейсы

После знакомства с интерфейсом GUI Machine и особенностями построения интерфейсов в нём у читателя, вероятно, возникнет вопрос: как сделать интерфейсы «живыми», кликабельными, интерактивными? Отвечаю: проще простого, и сейчас вы в этом сами убедитесь.

В тексте выше уже пару раз промелькнуло понятие «действие» — это и есть основа, эликсир для оживления интерфейсов. Говоря более формальным языком, действие — это механизм задания реакции одного объекта (объекта действия) на событие, произошедшее с другим объектом (объектом события). Создание любого действия в GUI Machine сводится к нескольким простым шагам:

• Сначала нужно определиться с объектом события и объектом действия. Для верного выбора нужно помнить порядок работы механизма: при выполнении заданной операции над объектом события будет выполнена заданная операция над объектом действия.

• Затем нужно выделить на области редактирования объект события, вызвать его контекстное меню (клик правой кнопкой мыши), выбрать пункт Добавить действие. После этого нужно кликнуть по объекту действия. На рисунке ниже объектом события является чекбокс (флажок), а объектом действия — окно:

• Будет открыто окно создания действия:

• Здесь нужно выбрать, во-первых, событие (в примере — изменение состояния выбора флажка) и его параметры (состояние — выбран), во-вторых, действие (открытие/закрытие окна) и его параметры (открыть окно по центру экрана, не позволять открывать окно за краями экрана).

• Всё сделано. Нажимаем кнопку Создать действие.

Таким образом было создано следующее действие: при выборе флажка будет открыто окно по центру экрана. Для проверки можно запустить в просмотр окно (то, что слева) и выбрать содержимый в нём флажок. Будет открыто второе окно. Как я и обещал — всё просто.

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

События

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

Больший интерес представляют сложные события. Например — событие мыши на части объекта. Допустим в интерфейсе имеется элемент управления в виде изображения — клевера:

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

Выбираем объектом события наше изображение, объектом действия — какой-либо другой объект. В открывшемся диалоге выбираем Событие мыши. В параметрах события выбираем Клик кнопки. Устанавливаем флажок Определенная область события и выделяем нужный фрагмент рисунка:

Жмём Сохранить изменения и проверяем: запускаем изображение в просмотр и кликаем по верхнему лепестку — будет выполнено заданное действие (открытие окна).

Помимо описанного, существует ещё несколько сложных интересных событий: событие таймера, получение сообщения с порта и другие.

Действия

К простым действиям можно отнести следующие: изменение текста объекта, блокировка/разблокировка объекта, изменение его видимости, открытие/закрытие окна и многие другие. Также, как при рассмотрении событий, без объяснений перейду к описанию сложных действий.

Наиболее интересным, полезным и часто используемым сложным действием является Вставка объекта в лэйаут. Как говорит его название, это действие динамического лэйаута. Оно позволяет по какому-либо событию вставить в одну или несколько ячеек лэйаута выбранный объект или часть интерфейса.

Пусть имеется динамический лэйаут (в левой части рисунка) с кнопкой, по нажатии на которую в две центральные ячейки лэйаута должна быть вставлена таб-панель (в правой части рисунка) вместе со всем содержимым.

Выбираем объектом события кнопку, а объектом действия — динамический лэйаут.

В правой части открывшегося диалога выбираем действие Вставка объекта или очистка ячеек, выделяем две центральные ячейки лэйаута, выбираем объект для вставки (таб-панель).

Жмём Сохранить действие и проверяем: запускаем лэйаут в просмотр и нажимаем кнопку — таб-панель вместе с содержимым будет вставлена в динамический лэйаут.

Помимо описанного действия, существует масса не менее интересных сложных действий.

Просмотр прототипа

Инструмент просмотра прототипов можно без стеснения назвать уникальным.

В отличие от других инструментов прототипирования, в GUI Machine прототип запускается в просмотр в виде отдельного независимого окна. Его можно сворачивать и разворачивать, перемещать и изменять в размерах — поведение точно такое же, как и у любого другого независимого окна. Это позволяет достичь максимальный эффект реальности, сымитировать работу программы.

Ещё одна особенность инструмента: возможен просмотр как целого интерфейса, так и его части или даже отдельного объекта. Можно одновременно просматривать несколько интерфейсов — они будут запущены в разных окнах.

Для запуска объекта в просмотр нужно выделить его и воспользоваться одним из трёх способов запуска: клавишей f5, при помощи пункта Просмотр контекстного меню либо кнопкой на панели запуска в правом верхнем углу приложения:

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

Кроме того, при помощи инструмента можно настроить положение объекта при запуске его в просмотр:

Экспорт прототипа

Последнее, что я представлю вам, но далеко не последнее, что есть в GUI Machine — это механизм экспорта прототипа. Он позволяет экспортировать (виноват, тавтология) прототип в независимое приложение, для запуска которого не требуется ни GUI Machine, ни какое-либо другое ПО. Таким образом, имеется возможность представить разработанный прототип, например, на компьютере заказчика (если мы исполнители), у которого не будет установленного GUI Machine или GUI Machine Viewer. Более того, экспортированный прототип может работать как на Windows, так и на Linux (в перспективе — и на Mac OS). На рисунке ниже представлено окно экспорта прототипа:

Экспортированный прототип представляет собой папку с несколькими подпапками и исполняемым файлом designerviewer.exe (или .sh, если прототип создан для Linux), запуск которого приводит к запуску прототипа. Для передачи прототипа на другую машину нужно отправить всю папку целиком.

P.S.

Статья вышла немаленькая, хоть описал я далеко не всё, что умеет GUI Machine. Например, я совсем не затронул встроенные в приложение полезные утилиты (коих немало), не представил некоторые интерфейсы (настройки проекта, контекстное меню в различных ситуациях), и, естественно, описал лишь малую часть доступных действий, объектов и их настроек. Впрочем есть несколько вариантов поближе познакомиться с GUI Machine: скачать демо-версию с нашего сайта, посмотреть более подробную информацию в руководстве пользователя или на сайте либо задать интересующие вас вопросы здесь — с удовольствием отвечу.

Поиск подходящего инструмента прототипирования (об этом мы достаточно подробно написали в предыдущем посте) занял у нас довольно много времени и… окончился ничем. Нам так и не удалось найти инструмент, который в полной мере покрывал бы все наши потребности. Похоже, что программы для прототипирования, полностью отвечающей всем нашим представлениям и пожеланиям, в природе просто не существовало… Единичные кандидаты были близки к победе, но в любом из них был какой-нибудь неприятный и неприемлемый для нас «нюанс», который не позволял честно и без кривляния душой сказать: «Это именно то, что мы искали». Конечно, можно было закрыть глаза и пойти на компромисы, но это не наш путь. Недосказанность — это то, чего мы очень не любим.

На этой почве мы приняли не самое лёгкое решение попробовать собственноручно воплотить все наши идеи в жизнь и создать свой инструмент прототипирования. Подспорьем для разработки нашего собственного продукта стали также результаты анализа перспектив рынка инструментов прототипирования: существовало решений немного и покрывали они не все требования IT-компаний (по крайней мере — нашей компании, ну а мы, стоит ли сомневаться, далеко не единственные в своём роде). Ещё одним ощутимым толчком являлась перспектива выпустить первый российский полноценный инструмент прототипирования. Вобщем, плюсов мы насчитали больше, чем минусов.

Создание собственного инструмента прототипирования началось не с чистого листа, а на основе… впрочем, историю создания нашего инструмента опишу ниже.

История

2005 год

Основной продукт компании АЛЕЕ Софтвер представляет собой корпоративную систему класса ERM (система управления электронными записями) . Система состоит из двух тонких клиентов, через которые работают пользователи: десктопное приложение и веб. Веб-представление системы нередко требует кастомизации ее графического интерфейса под стандарты заказчика, а также под другие используемые им корпоративные информационные системы. Для выполнения этой задачи у нас родилась идея создать специальный инструмент — конструктор, с помощью которого можно было бы легко перестраивать графический интерфейс веб-составляющей системы. Предполагалось сделать его простым в использовании настолько, чтобы Заказчик своими силами смог кастомизировать интерфейс системы без написания программного кода и без привлечения сторонних специалистов. Так, ведомые этой идеей, мы начали экспериментальную работу по созданию подобного инструмента. Мы планировали сделать конструктор составной частью системы. Естественно, в таком случае его следовало бы и написать на языке основной системы, т.е. на Java. Впоследствии, однако, стало ясно, что существовавшие на тот момент технологии и возможности Java поставленную задачу решить не позволяют. Почему? Во-первых, на проектах большого размера скорость интерпретации Java-классов в нативный код Java-машиной была слишком низкой; значительно замедлялась и скорость работы приложения. Во-вторых, в стандартной сборке JDK отсутствовали нативные компоненты различных операционных систем. Эту проблему можно решить путем привлечения дополнительных библиотек, но это было бы связано и с дополнительными сложностями. К тому же качество и цены нас не устраивали. В-третьих, в самом языке Java не было многих необходимых для создания нового инструмента средств, на тот момент уже реализованных во многих других языках программирования. Список проблем и ограничений можно продолжать, вдаваясь в глубокие подробности и мелкие детали, но речь не о том. В конце концов мы решили отложить планируемую разработку, что называется, до лучших времен. В результате проведённых работ были созданы экспериментальные наработки, применение которым на тот момент мы не нашли. А проблема кастомизации интерфейсов системы была решена другим способом. В процессе разработки нами было создано запускаемое приложение, включавшее: область редактирования графического интерфейса, минимальный набор компонентов для тестирования графического редактора, отдельный фрейм для управления слоями и отдельный фрейм для настройки компонентов.

2006-2008

Около трёх лет наши экспериментальные наработки, как говорится, «лежали на полке» и терпеливо ждали своего часа.

2009

В определённый момент перед нашей компанией остро встал вопрос выбора инструмента прототипирования. Мы активно занялись поиском такового, о чём в подробностях повествует первая часть цикла. Именно в это время у нас родилась идея создания своего собственного инструмента прототипирования. И тут мы вспомнили про наши экспериментальные наработки: они подходили в качестве основы будущего инструмента наилучшим образом. Началась активная разработка инструмента прототипирования, который впоследствии получил название GUI Machine.

Постановка требований

Осмыслив специфику стоявших перед нами задач и проанализировав имеющиеся на рынке продукты, мы четко сформулировали требования относительно качеств, которыми должен обладать наш инструмент прототипирования:

• возможность прототипирования как десктоп-, так и веб-приложений; не обязательно, но желательно — возможность прототипирования приложений для мобильных устройств;
• более высокая (по сравнению с существующими аналогами) степень интерактивности создаваемых прототипов, большой набор обрабатываемых событий и выполняемых действий;
• наличие большого набора готовых графических элементов, как платформно-зависимых (т.е. «подстраивающихся» под вид операционной системы и ее оформление), так и платформно-независимых. В этот набор должны входить элементы для десктоп-, веб- и мобильных приложений. Они должны быть максимально кастомизируемыми;
• высокая реалистичность создаваемых прототипов;
• возможность просмотра прототипов собственными средствами, без привлечения сторонних программных продуктов;
• простота освоения: инструмент должен быть таким, чтобы с его помощью смог создавать прототипы человек, вообще не обладающий навыками программирования;
• высокая скорость создания прототипов;
• кросс-платформенность (инструмент должен работать по крайней мере в основных операционных системах — Windows, Mac OS, Linux).

Способ разработки

Для разработки инструмента прототипирования мы использовали методику экстремального программирования (ХР). Этот выбор был обусловлен целым рядом причин. Во-первых, необходимо было создать инструмент как можно быстрее. ХР является подходящей методикой для решения задач оперативной разработки. Во-вторых, у нас не было фиксированных требований к создаваемому инструменту, все изменялось и дополнялось в процессе разработки. В-третьих, применение методов ХР обеспечивает минимальный риск получения на выходе не соответствующего требованиям инструмента. Мы попытались адаптировать требования ХР под специфику нашей работы: так, в нашей команде был всего один программист, поэтому мы не пользовались приемами парного программирования и взаимной проверки кода. Разработка осуществлялась в тесном взаимодействии программиста, менеджера проекта и будущих пользователей системы. Работа над программой велась в быстром темпе: изменения в исходный вариант вносились ежедневно (а иногда — даже несколько раз в день). На начальных этапах работы мы намеренно не уделяли повышенного внимания вопросам дизайна, что позволило максимально сосредоточится на реализации функционала, а также избежать задержек.

2010

Работу по созданию собственного инструмента прототипирования мы начали 22 ноября 2009 года. Уже в мае 2010, задолго до выпуска релизной версии, надежность и функциональность продукта достигли такого уровня, что он был успешно опробован на реальном проекте компании. Этот факт, кстати, стал еще одним свидетельством того, что мы сделали правильный выбор, обратившись к экстремальному программированию.

Эксплуатация продукта

Замечу, что изначально мы не ставили перед собой цель выпустить собственный инструмент прототипирования на рынок, а планировали использовать его исключительно для проектов компании. Так, 2010 год ознаменовался рядом проектов, при реализации которых использовался наш инструмент. Ниже приведу пару примеров

Разработка веб-интерфейса CRM системы

Впервые инструмент был использован для разработки прототипа веб-интерфейса CRM системы (Customer Relationship Management System — система управления взаимодействием с клиентами) — сложной системы корпоративного уровня. Основой для него была существовавшая десктопная CRM система (внутренняя разработка компании). Для того, чтобы заказчик мог увидеть интерфейс будущей системы и высказать свои пожелания еще до фактического начала разработки, был создан его высокоточный и интерактивный прототип. Он адекватно и реалистично представлял как дизайн, так и функциональность системы:

Разработка внутрикорпоративного портала

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

Промышленная эксплуатация инструмента показала состоятельность инструмента, способность его успешно решать возложенные на него задачи. Получив такие результаты, было решено доработать и выпустить инструмент на рынок программного обеспечения. 1 декабря 2010 года была выпущена релизная версия продукта.

2011

24 января 2011 года мы провели семинар «Проблемы и решения проектирования и прототипирования графических пользовательских интерфейсов», на котором впервые был представлен разработанный нами инструмент под названием GUI Machine.

Что получилось?

Результатом нашей работы стал продукт, получивший название GUI Machine. К числу несомненных плюсов продукта мы относим:

• возможность прототипирования как веб, так и десктоп-приложений;
• высокую интерактивность создаваемых прототипов;
• высокую визуальную точность и эстетическую привлекательность создаваемых прототипов;
• простоту освоения и работы в инструменте: GUI Machine могут использовать в своей работе не только и не столько программисты, но и менеджеры, аналитики, осуществляющие взаимодействие с клиентом, и даже сами клиенты;
• высокую скорость создания прототипирования;
• кросс-платформенность: работает на Windows, MacOS и Linux;
• полную русскую локализацию продукта (интерфейс продукта, руководство пользователя на русском языке) и русскоязычную поддержку (обучение, консультации).

Было бы нечестно указывать лишь на плюсы. Конечно же, у нашего продукта тоже есть свои минусы и недостатки:

• пока нет возможности полноценной совместной работы над прототипом;
• пока нет возможности генерации спецификации на основе прототипа;
• пока отсутствуют компоненты для прототипирования приложений для мобильных ОС;
• пока нет инструментов рисования UML-диаграмм;
• инструмент достаточно требовательный.

Почему во многих пунктах фигурирует слово «пока»? Дело в том, что сейчас мы динамично развиваемся, расширяем функциональность инструмента и, конечно, планируем избавиться от перечисленных недостатков.

P.S.

Мы не питаем иллюзий и не считаем GUI Machine панацеей, позволяющей решать любые задачи лучше всех. Однако для тех, кто в поисках подходящего инструмента прототипирования столкнулся с проблемами, подобными описанным нами, наш инструмент, вероятно, окажется весьма и весьма полезным.

В следующей статье цикла будет представлен подробный обзор инструмента прототипирования GUI Machine

]]> https://guimachine.ru/?feed=rss2&p=930 0 https://guimachine.ru/?p=927 https://guimachine.ru/?p=927#comments Wed, 02 Oct 2013 10:53:47 +0000 admin http://savvinov/?p=927 Подробнее]]>

Между разработчиками ПО и пользователями ситуации непонимания имеют место достаточно часто. Пользователь хочет получить эффективный инструмент для решения тех или иных задач, к тому же простой в освоении и удобный в использовании, но имеет весьма приблизительное представление о специфике работы программиста. Программист же зачастую имеет весьма и весьма приблизительное представление о круге задач, с которыми имеет дело пользователь. То, что разработчику кажется блестяще реализованным, конечному пользователю может показаться неудобным. На вещи, которые представляются вполне очевидными пользователю, программист может вообще не обратить внимания. (Подробный анализ этих проблем см., например, в книге Дэвида Платта с провокационным, но выразительным названием «Софт — отстой! И что с этим делать?»). Как избежать ситуаций непонимания и помочь программисту и пользователю найти общий язык? (Данная тема уже не раз становилась предметом исследования представителей самых разных областей знаний — программистов, психологов, специалистов в области эргономики. Подробный и интересный обзор литературы по теме – здесь)

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

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

В деятельности нашей компании есть такие аспекты, при работе над которыми без прототипирования обойтись невозможно. Мы занимаемся разработкой систем электронного документооборота, систем управления взаимодействием с клиентами и систем управления веб-контентом. Все это — системы промышленного масштаба, построенные на клиент-серверных технологиях; они включают как десктопные, так и веб-интерфейсы. При внедрении таких систем в конкретной организации неизбежно встает проблема кастомизации интерфейсов. Мы считаем, что работе по кастомизации следует уделять особое внимание: зачастую конечными пользователями программных продуктов являются люди, совершенно далекие от компьютерных технологий.

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

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

Проблема 1. Веб и десктоп

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

Проблема 2. Визуализация

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

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


Проблема 3. Движение

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

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

Есть инструменты, создающие интерактивные прототипы, но единственно возможным форматом сохранения этих прототипов является .pdf. Это — очевидный минус: данный формат не обеспечивает высокой степени интерактивности. Прототип в формате .pdf пригоден для демонстрации внешнего вида, но не возможностей системы. «Живой» (запускаемый и кликабельный) прототип показывает будущее приложение в работе и позволяет разглядеть многие нюансы, на которые в статичном pdf-прототипе просто невозможно обратить внимание.

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

Проблема 4. Простота и доступность

Приобретение программного продукта нередко бывает сопряжено с затратами, намного превышающими стоимость покупки. Затраты на обучение сотрудников и техническую поддержку могут существенно превышать первоначальный взнос. В случае приобретения зарубежных программных продуктов для обучения персонала приходится привлекать иностранных специалистов, искать переводчиков и т.п., что значительно увеличивает временные и финансовые затраты. Далеко не все сотрудники российских компаний владеют иностранными языками на столько, чтобы самостоятельно разобраться в специфике работы той или иной программы. Требуется локализация приложений, написание русскоязычной документации, создание русскоязычных профессиональных Интернет-сообществ… Отдельно укажем на необходимость обеспечения постоянной технической поддержки на русском языке.

К сожалению, среди представленных на рынке инструментов прототипирования продуктов российские разработки отсутствуют, и это является существенным минусом для пользователей из России и стран бывшего СССР.

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

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

И что в итоге?

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

• Какое решение в нашей ситуации предложили бы вы?
• Какие характеристики инструментов прототипирования представляются вам наиболее важными?
• Какие инструменты вы используете в своей работе?

Часть II. История создания инструмента прототипирования



]]> https://guimachine.ru/?feed=rss2&p=927 0