Основные компоненты графических пользовательских интерфейсов

Графические пользовательские интерфейсы поддерживаются операционными системами Windows, AppleMacintosh, OS/2 и т. д. В рамках указанных операционных систем для таких интерфейсов разработаны наборы стандартных компонентов взаимодействия с пользователем. Эти наборы не идентичны, как и основные приемы работы с интерфейсами различных операционных систем.

Пользовательские интерфейсы большинства современных программ строятся по технологии WIMP: W - Windows (окна), I - Icons (пиктограммы), М - Mouse (мышь), Р - Pop-up (всплывающие или выпадающие меню). Основными элементами графических интерфейсов, таким образом, являются:окна, пиктограммы, компоненты ввода-вывода и мышь, которую используют в качестве указующего устройства и устройства прямого манипулирования объектами на экране.

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

• основные окна (окна приложений);

• дочерние или подчиненные окна;

• окна диалога;

• информационные окна;

• окна меню.

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

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

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

• строку заголовка с кнопкой системного меню;

• компоненты, обеспечивающие пользователю возможность ввода или выбора ответа;

• вспомогательные компоненты, обеспечивающие подсказку, например поле предварительного просмотра или кнопку вызова справки.

Как правило, размер диалогового окна неизменяем, но его можно перемещать по экрану.

Информационные окна бывают двух типов: окна сообщений и окна помощи. Окна сообщений (рис. 8.15, в) кроме заголовка с кнопкой системного меню обычно содержат текст сообщения и одну или несколько кнопок реакции пользователя, например кнопки Yes и No или кнопки Yes, No и Cancel.

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

Рис. 8.14. Окно приложения и его элементы

 

Рис. 8.15. Примеры вспомогательных окон Windows: а - дочернее окно; 6 - окно диалога; в - окно сообщения; г - окно меню (адаптивное)

 

Окна меню Windows (рис. 8.15, г) можно использовать как открывающиеся панели иерархического меню или как отдельные контекстные меню. Каждой строке окна меню может соответствовать:

• команда;

• меню следующего уровня, что обозначается стрелкой;

• окно диалога, что обозначается тремя точками.

Кроме того, в некоторых строках добавляется указание клавиш быстрого вызова.

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

• программные пиктограммы;

• пиктограммы дочерних окон;

• пиктограммы панели инструментов;

• пиктограммы объектов.

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

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

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

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

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

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

По реакции на воздействие различают следующие типы адресатов:

• указание и выбор (развертывание пиктограмм, определение активного окна и т. п.);

• буксировка и «резиновая нить» (перенос объекта или его границ);

• экранные кнопки и «скользящие» барьеры (выполнение дискретных или циклически повторяемых действий, например, выполнение некоторойоперации или рисование, подразумеваемых при активизации определенной области экрана - кнопки).

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

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

Иерархические меню используют, чтобы организовать выполняемые программным обеспечением операции, если их число превышает 5-8 (6 в соответствии с рекомендациями фирмы IBM), и обеспечить пользователю их обзор. Панели инструментов и контекстные меню применяют для обеспечения быстрого доступа к часто используемым командам, обеспечивая пользователю возможность относительно свободной навигации.

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

 

Диаграммы IDEF8

 

IDEF8 (Human-SystemInteractionDesign) – стандарт описания интерфейсов взаимодействия оператора и системы (пользовательских интерфейсов). IDEF8 фокусирует внимание разработчиков интерфейса на программировании желаемого взаимного поведения интерфейса и пользователя на трех уровнях: выполняемой операции (что это за операция); сценарии взаимодействия, определяемом специфической ролью пользователя (по какому сценарию она должна выполняться тем или иным пользователем) и на деталях интерфейса (какие элементы управления предлагает интерфейс для выполнения операции).

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

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

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

В следующем списке перечислены ситуации, в которых результаты, полученные посредством использования инструментария IDEF8, будут создаваться и использоваться.

1) Анализ. IDEF8-модели используются как способ понимания и моделирования взаимодействия человека и системы. Взаимодействие с системой отражены в IDEF8-моделях. Моделирование существующих систем помогает выявить недостатки их проектирования или реализации

2) Проектирование. IDEF8-модели используются для проектирования взаимодействия между пользователями и при этом системы могут разрабатываться на нескольких уровнях абстракции.

3) Реализация. IDEF8-модели могут использоваться, чтобы обеспечить дополнительными характеристиками (спецификациями) разработчиков.

4) Документирование. С помощью IDEF8-метода происходит документирование существующей системы или описание дизайна новой системы. В зависимости от потребностей проекта IDEF8-метод может использоваться для поддержки одной или более стадии процесса разработки. Пример использования метода:

Функциональный элемент (UOB). Описание процесса представляет всевозможные ситуации (процессы, функции, действия, акты, события, сценарии, процедуры, операции или решения), которые могут происходить в моделируемой системе в логических и временных отношениях. Каждый процесс представлен полем, отображающим название процесса. Номер идентификатора процесса назначается последовательно. В правом нижнем углу UOB элемента располагается ссылка и используется для указания ссылок либо на элементы из функциональной модели IDEF0, либо для указания на отделы или конкретных исполнителей, которые будут выполнять указанную работу.

 

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

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

 

Относительные (прерывистые) связи не несут никакой определенной семантики. По этой причине их часто называют пользовательскими связями. Этот тип ссылок подчеркивает существование (возможно, ограничивающие) отношения между двумя UOBs. Например, связь на рис. 2.11 может означать ограничение между блоками «Подписать расписание» «Получить расписание», которое свидетельствует о том, что нельзя утверждать собственное расписание. Точный характер отношения указывают в документе Разработки.

Перекрестки используются для отображения логики отношений между множеством событий и временной синхронизации активизации элементов IDEF3-диаграмм. Различают перекрестки для слияния (Fan-inJunction) и разветвления (Fan-outJunction) стрелок. Перекресток не может использоваться одновременно для слияния и для разветвления. При внесении перекрестка в диаграмму необходимо указать его тип. Тип перекрестка определяет логику и временные параметры отношений между элементами диаграммы. Все перекрестки на диаграмме нумеруются, каждый номер имеет префикс «J». Тип перекрестка обозначается внутри элемента: & - логический И; О – логический ИЛИ; X – логический перекресток неэквивалентности.

Стандарт IDEF3 предусматривает разделение перекрестков типа & и О на синхронные и асинхронные. Это разделение позволяет учитывать в диаграммах описания процессов синхронизацию времени активизации.

Методология IDEF3 использует пять логических типов для моделирования возможных последствий действий в сценарии.

 

 

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

Графические символы для двух основных стилей референтов отображены на рис. 2.13. Каждый тип референта может быть использован либо в схеме процесса, либо на объекте схемы. Чаще всего используется референт Вызова-и-Продолжения, который возникает в процессе исполнения блока и нужен до того, как блок, его вызвавший, завершится. Референт Вызов-и-Ожидание должен начаться и завершиться до того, как блок, его вызвавший, завершится.

 

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

· для идентификации специфических объектов или отношений, связанных с функциональным элементом UOB связью или переходом;

· присоединения примеров, объектов, например экранных форм и т.п.;

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