Лекция. Проектирование графического интерфейса пользователя Лекция №11





Скачать 106.56 Kb.
НазваниеЛекция. Проектирование графического интерфейса пользователя Лекция №11
Дата публикации11.10.2013
Размер106.56 Kb.
ТипЛекция
100-bal.ru > Информатика > Лекция

Лекция. Проектирование графического интерфейса пользователя


Лекция № 11



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

(Программные вопросы лекции)
1. Особенности графического пользовательского интерфейса и принципы объектного подхода к его проектированию

2. Основные компоненты ГИП и рекомендации по их применению

Литература

1. [13], стр. 39-211;

2. Конспект лекций
Учебно-материальное обеспечение

  1. Плакат "Основные компоненты графического интерфейса пользователя".



Организационно-методические указания

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

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

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

Учебные вопросы
1. Особенности графического пользовательского интерфейса и принципы объектного подхода к его проектированию
Графическим пользовательским интерфейсом (ГИП) (graphical user interfaceGUI) называется пользовательский интерфейс, основанный на визуализации объектов, с которыми взаимодействует пользователь в процессе работы.

Первой особенностью ГИП являются, то что в основе его разработки лежат принципы:

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

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

"что вы видите, то и получите" (WISIWYG), обозначающий идентичность визуального представления информации (документа) как на этапе разработки, так и на этапе использования (например, электронный документ, созданный с помощью редактора Word, выглядит также, как и его бумажная копия; визуальный HTML-редактор (Dreamweaver, FrontPage и др.) позволяет Web-дизайнеру представить создаваемую страницу в том виде, в котором ее сможет просматривать пользователь с помощью броузера; RAD-система (Delphi, Visual C++ и др.) позволяет разработчику приложения представить его в таком виде, в котором с ним будет работать пользователь).

В рамках ГИП все три принципа получили адекватное воплощение: пространство экрана монитора – это рабочий стол пользователя, необходимые для решения задачи объекты представлены на нем в виде соответствующих графических образов (пиктограмм и окон), а чтобы изменить рабочую среду, пользователю достаточно изменить состав объектов, представленных на рабочем столе; при этом все необходимые действия выполняются не с помощью команд, а путем прямого манипулирования образами объектов.

Достоинства прямого манипулирования:

обеспечивает визуальный контроль за выполняемыми операциями;

позволяет легко восстановить предшествующее состояние "рабочего стола";

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

Недостатки прямого манипулирования:

оно не всегда удобно, прежде всего для опытного пользователя;

снижает гибкость диалога, поскольку изначально ГИП базируется на структуре меню.

Второй особенностью ГИП является его многооконность, обладающая следующими достоинствами:

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

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

Третьей особенностью ГИП является то, что в основе его лежит концепция интерфейса, управляемого данными (Data-centered Design – DCD).

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

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

Четвертой особенностью ГИП является то, что в основе его проектирования лежит объектный подход.

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

Следующие понятия описывают основные аспекты и характеристики объектов, имеющих компьютерное воплощение:

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

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

3. Связь (отношения) между объектами. Любой объект тем или иным образом взаимодействует с другими объектами. Различают следующие типы взаимодействия (отношений):

набор (наличие у объектов некоторых общих свойств);

объединение (изменение объекта влияет на некоторый другой объект в наборе);

композиция (получение нового объекта со своим собственным множеством свойств и допустимых операций в результате агрегации нескольких объектов);

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

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

Достоинства объектного подхода:

эффективность работы пользователя существенно возрастает при условии последовательной и согласованной реализации базовых соглашений;

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

Недостатки объектного подхода:

его использование не гарантирует требуемого качества ГИП.

Для создания эффективного ГИП необходимо дополнить объектный подход тщательным проектированием всех компонентов ГИП в следующем порядке:

1. Анализ целей пользователей и особенностей выполняемых ими заданий. Здесь определяются основные компоненты или объекты, с которыми взаимодействует пользователь, характерные особенности объектов каждого типа и их операции.

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

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

Таким образом, ГИП расширяет пространство обзора и облегчает работу пользователя. Вместе с тем, само по себе представление пользователю ГИП еще не гарантирует повышения эффективности его работы ("рабочий стол" не всегда означает "аккуратный рабочий стол").

С другой стороны с появлением инструментов визуального программирования (RAD-систем), таких как Visual C++, Visual Basic, Delphi, Power Builder и др., создание ГИП перестало быть прерогативой лишь немногих специалистов. Это повлекло в появлении большого количества ГИП, низкого качества: не согласованных, не дружественных, громоздких, слабо функциональных, не помогающих, а мешающих пользователю решать стоящие перед ним задачи. Изложению некоторых рекомендаций, позволяющих повысить качество разработки ГИП, посвящен второй вопрос.
2. Основные компоненты ГИП и рекомендации по их применению
Основные компоненты ГИП приведены на рис. 1.

Рекомендации по применению компонентов ГИП.

I. Композиция и организация.

При проектировании визуальных элементов ГИП целесообразно опираться на следующие принципы:

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

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

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

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

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

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

II. Цвет.

При выборе цветовой палитры:

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

2. Разрешите пользователю самому настраивать цветовую гамму, где это возможно.

III. Шрифт.

При выборе шрифта:

1. Старайтесь не использовать курсив и рубленный шрифт (Serif), поскольку они трудны для чтения, особенно при низком разрешении монитора.

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

IV. "Многомерность" экрана. При изображении многих элементов ГИП полезно использовать перспективу, подсветку и затенения с целью обеспечения эффекта трехмерного образа. Это способствует повышению функциональности интерфейса и наглядности обратной связи при работе пользователя с компьютерными аналогами реального мира. При этом:

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

V. Пространственное размещение визуальных элементов.

При размещении визуальных элементов:

1. Старайтесь группировать взаимосвязанные элементы управления ГИП.

Для этого используйте либо специальный элемент – группирующий блок (в Delphi – GroupBox, TPanel), либо просто размещение элементов на соответствующем расстоянии друг от друга.

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

При пространственном размещении элементов управления:

рекомендуется оставлять между элементами в группе промежуток, равный по крайней мере 4 дискретам, а расстояние до края окна и между группами должно быть не менее 7 дискрет;

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

при работе с набором кнопок управления лучше установить кнопку Отменить в конце набора, но перед кнопкой Справка.

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

2. Старайтесь выравнивать взаимосвязанные элементы управления ГИП.

Различают три способа выравнивания:

вертикальное (по левому или правому краю выравниваемых элементов);

горизонтальное (по верхней строке или по верхнему краю элемента);

смежное выравнивание (когда элементы смыкаются краями, например, в сгруппированные кнопки в панели инструментов).

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

Целесообразно использовать следующие виды визуализации:

визуализация операций выбора, предусматривающая изменение изображения выбираемого элемента или области;

визуализация операций пересылки, предусматривающая перемещение образа пересылаемого объекта одновременно с перемещением указателя;

анимация (например, анимация операции копирования или удаления).

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


Добавить документ в свой блог или на сайт

Похожие:

Лекция. Проектирование графического интерфейса пользователя Лекция №11 iconЛекция I и проблема языка и сознания лекция II 31 слово и его семантическое...
Монография представляет собой изложение курса лекций, про* читанных автором на факультете психологии Московского государственного...
Лекция. Проектирование графического интерфейса пользователя Лекция №11 iconЛекция религии современных неписьменных народов: человек и его мир...
Редактор Т. Липкина Художник Л. Чинёное Корректор Г. Казакова Компьютерная верстка М. Егоровой
Лекция. Проектирование графического интерфейса пользователя Лекция №11 iconЛекция №5
Лекция №5 Вредные вещества и их воздействие на человека. Основы промышленной токсикологии
Лекция. Проектирование графического интерфейса пользователя Лекция №11 iconЛекция-диалог, проблемная лекция, консультация, собеседование, реферат,...
Активные формы и методы проведения учебных занятий – это способы и приемы воздействия, побуждающие
Лекция. Проектирование графического интерфейса пользователя Лекция №11 iconЛекция должна отвечать следующим
Лекция – одна из основных форм организации учебного процесса, представляющая собой устное, монологическое, систематическое, последовательное...
Лекция. Проектирование графического интерфейса пользователя Лекция №11 icon«Давление газа»
Данный урок является развивающим, так как он проводится с использованием новых технологий (интерактивная лекция). Лекция сопровождается...
Лекция. Проектирование графического интерфейса пользователя Лекция №11 iconЛекция «Олимпийские игры древности» Лекция «Возрождение Олимпийских игр»
Перечень мероприятий по внедрению системы олимпийского образования «Сочи 2014» в образовательных учреждениях Кемеровского муниципального...
Лекция. Проектирование графического интерфейса пользователя Лекция №11 iconОтчет по преддипломной практике На тему: «Проектирование программного...
Целью работы является проектирование программного человеко-машинного интерфейса для социально-ориентированной системы поддержки очного...
Лекция. Проектирование графического интерфейса пользователя Лекция №11 iconЛекция Компьютерные слайды как
Лекция Компьютерные слайды как средство виртуальной наглядности. Технология создания дидактического компьютерного материала в программе...
Лекция. Проектирование графического интерфейса пользователя Лекция №11 iconЛекция 1"государство как социальная структура общества"(8часов) 61...
Умк по дисциплине «Правоведение» разработан кафедрой правосудия, прокуроского надзора и криминалистик юш двфу для студентов не юридических...
Лекция. Проектирование графического интерфейса пользователя Лекция №11 iconИдентификация пользователей веб-сайтов с помощью графического интерфейса zip-auth

Лекция. Проектирование графического интерфейса пользователя Лекция №11 iconИдентификация пользователей веб-сайтов с помощью графического интерфейса zip-auth

Лекция. Проектирование графического интерфейса пользователя Лекция №11 iconРеферат по курсу: Синергетические Системы По теме: ЭВМ > Интерфейс
Пользовательские интерфейсы состоят из систем графического представления, команд, запросов и т п., обеспечивающих эффективное "общение"...
Лекция. Проектирование графического интерфейса пользователя Лекция №11 iconПамятка для студентов специальности «Проектирование зданий» по изучению...
...
Лекция. Проектирование графического интерфейса пользователя Лекция №11 iconЛекция: Основные понятия технологии проектирования информационных...
Функционально-ориентированные и объектно-ориентированные методологии описания предметной области 61
Лекция. Проектирование графического интерфейса пользователя Лекция №11 iconПояснительная записка На тему: «Проектирование программного пользовательского...
На тему: «Проектирование программного пользовательского интерфейса для электронной социально-ориентированной системы поддержки очного...


Школьные материалы


При копировании материала укажите ссылку © 2013
контакты
100-bal.ru
Поиск