Лабораторная работа №1
Проектирование дизайна пользовательского интерфейса программы
Цель работы – получение теоретических и практических навыков проектирования дизайна пользовательского интерфейса программного обеспечения для платформы Microsoft Windows XP с помощью профессионального редактора.
Microsoft Office Visio 2003. Графический редактор пользовательских интерфейсов Windows XP
На данный момент рынок программного обеспечения в сфере проектирования программных интерфейсов не богат выбором. Так как корпорация Microsoft является «законодателем мод» в сфере графических интерфейсов к программному обеспечению в ОС Windows, а большинство программного обеспечения в мире разрабатывается именно для ОС от компании Microsoft, предлагается рассмотреть тот продукт, который предлагает корпорация для создания графических программных интерфейсов (ГИП, англ. , graphical user interface, GUI). Но, для начала необходимо понимать, что подразумевается под ГИП.
Мы начинаем знакомство с графическим редактором Microsoft Visio 2003, предназначенным для быстрого и эффективного создания графических изображений любой сложности, в том числе и графического пользовательского интерфейса.
Создание нового документа для проектирования ГИП
После запуска программы Microsoft Office Visio 2003, Вам доступны несколько способов создания страницы проектирования ГИП:
Рисунок 1. Шаблоны типов рисунков в Microsoft Visio 2003.
В главном окне программы, после запуска, расположены шаблоны типов рисунковШаблоны типов рисунков содержат наборы основных фигур (Shapes) необходимых для того или иного типа рисунка.
Нам необходим тип Software и шаблон Windows XP User Interface. После выбора этого шаблона у Вас будет создан необходимый набор фигур и новый лист для проектирования.
Через главное меню Файл(File) программы необходимо выбрать Новый (New) > Software >Windows XP User Interface, после чего, у Вас будет создан необходимый набор фигур и новый лист для проектирования. Через главное меню Файл(File) программы необходимо выбрать Новый (New) > Новый рисунок (Drawing), после чего, у Вас будет создан новый лист для проектирования. Далее Вы можете сами выбрать необходимые фигуры для Вашего пользовательского интерфейса. Для этого Вам необходимо через меню Файл (File) выбрать Объекты (Shapes) и выбрать те типы фигур, которые могут понадобится при проектировании Вашего ГИП.В итоге Ваших действий должны получить пустой лист для проектирования ГИП и наборы необходимых фигур (Рисунок 2)
Рисунок 2. Окно Microsoft Visio 2003, подготовленное к проектированию ГИП
Основные элементы ГИП, представленные в Microsoft Visio 2003 и работа с ними
Далее будут описаны основные фигуры, используемые в Microsoft Visio 2003, необходимые для проектирования ГИП программы для Windows XP. Описание будет дано на примере создания ГИП программы.
Все элементы программы собраны в окне Формы (Shapes), расположенном слева от листа проектирования. Если окно Формы у Вас закрыто, открыть его можно через меню Вид (View) > Формы (Shapes).
Для того, чтобы перенести любой объект из окна Shapes на Ваш лист, необходимо выбрать этот объект мышью, нажать на левую кнопку мыши и с зажатой кнопкой перенести объект на Ваш лист.
Многие объекты поддерживают возможность изменения размеров, нажав на любой из объектов, Вы можете потянуть за один из зелёных маркеров, которым помечен каждый выделенный объект (рисунок 3).
а б
Рисунок 3. Примеры выделенных объектов:
а) поддерживает изменение высоты и ширины;
б) не поддерживает изменение высоты.
Если объект может иметь подпись, её можно поменять двойным нажатием левой кнопкой мыши на объект или нажав F2 на выделенном в данный момент объекте. Так же, для подписей можно задать уникальные настройки шрифта.
Далее рассмотрим подробнее основные элементы. В качестве примера, возьмём задание. Предположим, что нам необходимо создать графический пользовательский интерфейс для электроплиты с духовкой и тремя конфорками. Какие элементы нам могут понадобится для этого:
Окно
Элемент «Окно»/«Диалог»/«Форма» (Blank Form) программы расположен в группе Windows and Dialogs окна Shape.
Рисунок 4. Элемент «Blank Form»
Почти каждая фигура, предназначенная для создания ГИП имеет свои индивидуальные настройки, которые можно изменить, нажав правой кнопкой мыши на выделенную фигуру. Откроется контекстное меню, где сверху меню будут расположены некотороые возможные настройки.
Для «Окна» это:
- белый фон внутри окна; серый фон внутри окна (как в классической теме оформления Windows XP); выбор цвета фона; активное/не активное окно; сдвиг надписи под место для иконки 16x16 pix.
Набор стандартных кнопок в заголовке программы
После выбора Windows Buttons в группе Windows and Dialogs и выноса их на лист перед Вами открывается диалог выбора типа кнопки:
Restore –кнопка изменения размера окна с «полноэкранного» режима в более маленькое окно 
Minimize – кнопка минимизации окна в область панели задач 
Maximize – кнопка изменения размеров окна до «полноэкранного» режима 
Close – кнопка закрытия окна 
Help – кнопка вызова инструмента «помощник» для данного окна 
Настройки для этих кнопок:
- вызов окна выбора другой кнопки вместо текущей; активная/не активная кнопка
Эти кнопки необходимо разместить в правой стороне заголовка программы (рисунок 5)
Рисунок 5. Размещение стандартных кнопок в заголовке.
Строка состояния
Status Bar группы Windows and Dialogs (рисунок 6) - это нижняя часть окна, в которой, зачастую, отображается информация о статусе документа, в котором Вы работаете, некоторые текущие настройки, появляются подсказки для кнопок, на которые Вы наводитесь, размещаются индикаторы степени прогресса и т. д.
Этот элемент в Visio не имеет никаких настроек кроме того, что Вы можете менять надпись на нём.
Рисунок 6. Строка состояния в нижней части окна
Строку состояния рекомендуется использовать в MDI приложениях, или приложениях, работающих с документами. Нам нет необходимости использовать её в нашем окне.
Вкладки
Для элементов вкладок в Visio объекты разделены на Tab control (body) и Tab control (tabs). Оба элемента расположены в группе Windows and Dialogs.
Tab control (body) – так называемо «тело» вкладки, в котором будут расположены уникальные для этой конкретной вкладки элементы.
Tab control (tabs) – сами вкладки, при нажатии на которую, выполняется переход к содержимому этой вкладки.
Настроек для Tab control (body) нет, поэтому рассмотрим настройки для Tab control (tabs):
- Текущая выбранная вкладка – сделать текущую вкладку выбранной среди всех других вкладок Не выбранная вкладка.
Следует отметить: так как изображение на листе не динамическое, для каждой вкладки необходимо рисовать отдельно содержимое её «тела», то есть, если у заданны 2 вкладки, будет необходимо создать 2 рисунка. На первом рисунке, первая вкладка содержит набор инструментов, принадлежащий её, она помечена как текущая выбранная, на втором рисунке вторая вкладка помечена как текущая выбранная и изображены элементы принадлежащие ей (рисунок 7).
Рисунок 7. Элементы «Вкладки» в окне программы
Рамка группировки
Элемент Group box (рисунок 8) группы Windows and Dialogs предназначен для условного объединения нескольких элементов, имеющим один смысловой базис.
Настройки рамки:
- доступна/не доступна.
Рисунок 8. Рамки группировки в окне программы.
Кнопка
Элемент Command Button (рисунок 9) группы Common Controls. Кнопкой называется элемент управления, всё взаимодействие пользователя с которым ограничивается одним действием – нажатием [1].
Рисунок 9. Примеры изображения кнопок
Элемент кнопки в Visio имеет следующие настройки:
- кнопка доступна для нажатия; кнопка не доступна для нажатия; кнопка доступна для нажатия и является выбранной по умолчанию в окне программы (кнопка Сохранить на рисунке 9); стандартный размер кнопки; большой размер кнопки.
Помимо последних двух настроек, элементу кнопки можно задать размер вручную.
Рисунок 9. Пример кнопок в окне программы.
Чекбокс
Элемент Check box группы Common Controls – элемент с тремя состояниями: выбран, не выбран, смешанное. Чекбокс – элемент управления «отложенным действием», то есть при нажатии на него, не должно происходить никаких серьёзных действий в программе. Как правило, используется пользователем для настройки каких либо параметров.
Настройки элемента чекбокс в Visio:
- элемент отмечается как выбранный; элемент отмечается как не выбранный; элемент в смешанном состоянии (применяется в основном в совокупности с представлением дерева в окне программы); доступен/не доступен для использования.
Радио кнопки
Элемент Radio box группы Common Controls – элемент управления с двумя состояниями. В отличии от чекбоксов, его необходимо использовать в совокупности с другими радио кнопками для предоставления пользователю выбора одной настройки из нескольких (зачастую больше чем двух). Для выбора между двумя настройками можно использовать чекбокс.
Настройки элемента радио кнопки в Visio:
- доступен/не доступен для использования.
Рисунок 10. Пример использования чекбоксов и радио кнопок в программе.
Поле ввода
Элементы Text box группы Common Controls могут быть:
- Text box (multi-line) – многострочное поле ввода; Text box (single-line) – однострочное поле ввода (пример на рисунке 10).
Применяется для ввода произвольных строк.
Если Text box (single-line) имеет одну возможную настройку в Visio – это выбор доступен/не доступен для использования, то Text box (multi-line), ввиду наличия у такого способа ввода полос прокрутки, имеет несколько настроек в Visio:
- включение/выключение отображения горизонтальной полосы прокрутки; доступна/не доступна для использования горизонтальная полоса прокрутки; включение/выключение отображения вертикальной полосы прокрутки. доступна/не доступна для использования вертикальная полоса прокрутки; настройка процента отображения «бегунка» от общего размера горизонтальной полосы прокрутки; настройка процента отображения «бегунка» от общего размера вертикальной полосы прокрутки.
Так же возможно переместить бегунок в рамках одной полосы прокрутки.
Рисунок 10. Пример использования поля ввода для ввода имени пользователя.
Выпадающий список
Элементы Combo box состоит из двух элементов: самого Combo box (поле ввода со стрелкой, вызывающей меню) и Combo box expansion (само выпадающее меню) группы Common Controls. Таким образом есть возможность разместить как скрытый список так и раскрытый, после нажатия на кнопку, вызывающую выпадание списка.
Настройки для Combo box:
- доступен/не доступен для использования.
Настройки для и Combo box expansion:
- включение/выключение отображения вертикальной полосы прокрутки. доступна/не доступна для использования вертикальная полоса прокрутки; доступен/не доступен для использования. настройка процента отображения «бегунка» от общего размера вертикальной полосы прокрутки.
Элемент прокрутки
Это элемент Spin группы Common Controls, зачастую, используемый в совокупности с полем ввода. Элемент встраивается в однострочное поле ввода слева (корректнее) или справа внутренней части поля. Имеет настройку доступности/недоступности для использования. На примере изображен в настройке времени (рисунок 11)
.
Рисунок 11. Графический интерфейс пользователя вкладки «Общие настройки» программы.
Остальные доступные элементы необходимо изучить самостоятельно и использовать их при выполнении задания к лабораторной работе.
Задание к лабораторной работе.
№ Варианта | Задание |
1 | Спроектировать пользовательский интерфейс программы управления 3-х конфорочной электроплитой с духовкой (продолжение примера в методичке). С возможностью настройки электропитания, языка, даты и времени, а также индивидуальных настроек всех конфорок (температура, таймер, режимы), духовки (температура, таймер, режимы, индивидуальные настройки каждого режима) и т. д. |
2 | Спроектировать пользовательский интерфейс программы управления кондиционером. С возможностью настройки таймера работы, режимов работы, как температурных так и направленности и типа воздуха и т. д. |
3 | Спроектировать пользовательский интерфейс программы управления лифтом. Должны быть включены возможности выбора лифта, просмотра текущего состояния, настройки скорости движения, времени и количества технических перерывов и т. д. |
4 | Спроектировать пользовательский интерфейс программы управления телевизором. Так как интерфейс дистанционного пульта управления – не лучшее решение задачи взаимодействия с пользователем, необходимо взять все возможные настройки дистанционного пульта управления и спроектировать по ним интерфейс программы управления телевизором. |
Требования к ГИП:
Если действие какого либо элемента управления ведёт изменения в ГИП программы, эти действия должны быть прокомментированы. Если имеется несколько серьёзных изменений состояния ГИП, каждое состояние должно быть изображено и прокомментировано. Все элементы управления должны быть упорядочены и выровнены друг относительно друга. Расстояние между элементами должно быть достаточным для того, чтобы пользователь не ошибся при нажатии на элемент. Создание собственных элементов управления путём группировки фигур, не входящих в наборы Windows XP User Interface должно быть мотивировано.Содержание отчёта
1. Титульный лист
2. Цели работы
3. Задание
4. Описание основных состояний ГИП, комментарии к элементам управления, итоговый проект дизайна ГИП.
5. Выводы
6. Список использованных источников
Контрольные вопросы:
1. Какие есть способы создания нового рисунка в Microsoft Visio 2003?
2. Возможно ли изменение высоты элемента управления чекбокс?
3. Чем отличается чекбокс от радио кнопки?
4. Является ли гипертекстовая ссылка кнопкой?
5. Какая цель использования рамки группировки?
6. Корректно ли показать в проекте ГИП все вкладки выбранными?
7. Совместно с каким элементом управления используется элемент прокрутки (spin)?
8. Сколько состояний имеет элемент чекбокс? Что означает каждое из состояний?
Литература
1 Р. TeachPro Microsoft Visio 2003: Учеб. пособие. – Москва.: ММТиДО, 2006. – 216 с.
2 В. Дизайн программных интерфейсов: Книга. – Москва, Usetech, 2001. – 147 c.
3 Д. Практическое руководство по проектированию и разработки пользовательского интерфейса: Книга. – Москва, Диалектика-Вильямс, 2002. – 400 с.
Основные порталы (построено редакторами)