Разработка дизайна пользовательского интерфейса для конструкторского модуля САПР трикотажных изделий

Терминационные кнопки –  это стандартные элементы для  всех систем. К ним относятся кнопки «ОК», «Отмена», «Далее», «Применить» и прочие (рисунок 6).

Рисунок 6. Терминационные кнопки

Радио-кнопка (radio button) – элемент интерфейса, который позволяет пользователю выбрать одну опцию (пункт) из предопределенного набора (группы). Радио-кнопки также называют переключателями. Они предоставляют пользователю возможность выбрать единственный вариант из предлагаемого множества взаимоисключающих альтернатив (рисунок 8). Поэтому если окно содержит радио-кнопки, относящиеся к разным объектам или к различным свойствам одного объекта, они обязательно должны быть явным образом разделены на соответствующие группы. Радио-кнопки изображаются в виде небольших кружков. Если кнопка выбрана, в середине кружка появляется точка (маркер).

 

Рисунок 8. Пример использования радио-кнопок

 

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

Список (list) предоставляет пользователю удобное средство управления выбором требуемых объектов или их свойств (рисунок 9). Элементы списков могут быть представлены как в текстовой, так и в графической форме. Любой список как элемент интерфейса должен обеспечивать не только визуальное отображение сделанного пользователем выбора, но и поддержку связанных с выбранными пунктами (или пунктом) действий. Различают списки пролистываемые и раскрывающие.

Рисунок 9. Раскрывающий список методик  конструирования

Комбобокс (combo box) – это комбинация пролистываемого списка и однострочного текстового поля. Комбобокс позволяет пользователю либо вводить необходимое значение, либо выбирать его из существующих вариантов (рисунок 10).

Рисунок 10. Группа комбобоксов для выбора или ввода параметров фигуры

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

Рисунок 11. Панель инструментов

Панель инструментария - это элемент интерфейса, использующийся для доступа к инструментам.

Рисунок 12. Панель инструментария

Меню (menu)  –  это метод взаимодействия пользователя с системой, при котором пользователь выбирает из предложенных вариантов, а не предоставляет системе свою команду (рисунок 13). Меню предоставляет пользователю возможность выбора необходимого средства решения задачи, не требуя от него запоминания имен команд и их синтаксиса, и также показывает пользователям объем действий, которые они могут совершить благодаря системе, и тем самым обучают пользователей. Существуют различные типы меню, в том числе выпадающие, всплывающие и каскадные (иерархические).

Рисунок 13. Выпадающее меню

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

Рисунок 14. Поля ввода коэффициентов модификации конструкции

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

Рисунок 15. Горизонтальная полоса прокрутки

3. Технический проект: процессы проектирования пользовательского интерфейса

 

1.  Первоначальное проектирование

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

1. При открытии программы  появляется окно с верхней панелью инструментов. Пользователю предоставляется возможность выбрать следующую последовательность кликов: создать – новый проект.
2. На рабочем пространстве программы появляется окно «Новый проект (выбор методики)», в котором предлагается выбрать методику построения конструкции (ЕМКО СЭВ, ВДМИТИ, Укр. НИИШП). После выбора методики и нажатия кнопки «Далее» окно закрывается и появляется новое.
3. В следующем окне «Выбор типа фигуры» указывается пол заказчика и тип фигуры. После завершения выбора и нажатия кнопки «Далее» открывается следующее окно.
4. В окне «Размерные признаки» отражаются величины размерных признаков согласно нормативному документу (рост, обхват груди, бедер и талии). Пользователь выбирает из предложенных значений нужное и нажимает кнопку «Далее». Данное окно также, как и следующее, может вызывается при обращении к панели инструментов.
5. В окне «Корректировка размерных признаков» происходит построение конструкции и предлагается провести корректировку размерных признаков (высота линии талии, обхват бедер с учетом живота, обхват запястья и так далее). Данные характеристики позволяют установить прибавки для индивидуального типа фигуры. При выборе новых параметров происходит перестроение конструкции. На данном этапе у пользователя есть возможность вернуться на шаг назад, сохранить или распечатать получившийся результат.
6. В следующем окне «Полотно» выбираются из списков вид полотна и размер прибавки на толщину материала, здесь же устанавливаются коэффициенты учета условно остаточной информации и учета усадки. Нажимается кнопка «Далее».
7. Затем появляется окно «Предварительный просмотр». В результате чего пользователь может  вернуться назад, распечатать или сохранить проект. При сохранении проект заносится в базу для возможности дальнейшего использования.

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

Левой кнопкой мыши пользователь совершает двойной щелчок по ярлыку программы (0,2 сек.), после чего открывается  окно (0,1 сек.). Наведение мыши на панель инструментов, нажатие на кнопки «Создать – Новый проект» занимает примерно 2,4 секунды. Далее открывается окно с выбором методик построения конструкции (0,1 сек.). Пользователь нажимает левой кнопкой мыши на комбобокс и наводит на методику мышь, после чего щелкает на нужной позиции. Это занимает 1,5 секунды. Затем нажимается кнопка «ОК» (1,3 сек.). В итоге общее время для выполнения выше перечисленных операций составляет 5,4 секунды.

2. Создание прототипа

Дизайн пользовательского  интерфейса для прототипа  конструкторского модуля САПР трикотажных изделий выполнен в программе Adobe Photoshop CS5 и представлен на следующих рисунках:

Рисунок 16. Стартовое окно программы

 

Рисунок 17. Окно выбора методики конструирования

 

Рисунок 18. Окно выбора типа фигуры

 

Рисунок 19. Окно выбора размерных признаков

 

Рисунок 20.  Окно корректировки размерных признаков

 

Рисунок 21. Окно выбора вида полотна

 

Рисунок 22. Окно предварительного просмотра

3. Тестирование прототипа

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

Эксперт №1: «Интересное цветовое решение. Присутствуют красиво нарисованные кнопки, реализованы основные функции. В мастере присутствуют все нужные параметры. Не хватает немного функционала, например, полностью открывающихся пунктов меню».

Эксперт №2: «Нестандартная цветовая гамма, несомненно, привлекает внимание. Сразу виден творческий подход к делу. В целом дизайн прост и лаконичен, нет лишних элементов. Все достаточно практично, интуитивно понятно и удобно».

 

Заключение

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

 

 

 

 

 

 

 

 

 

 

Список используемых источников

1. Гультяев А.К., Машин В.А. Проектирование и дизайн пользовательского интерфейса. Учебное пособие. – СПб.: Корона-Принт, 2007. – 239 с.
2. Элемент интерфейса / Википедия – свободная энциклопедия [Электронный ресурс] – Режим доступа: http://ru.wikipedia.org/wiki/ Элемент_интерфейса, свободный