Виртуальный кабинет информатики и ИКТ Горловского лицея № 88 "Мечта"
menu

Урок 15. Пользовательский интерфейс

Пользовательский интерфейс

 

 

 

 

Ключевые слова:

• пользовательский интерфейс
• командный интерфейс
• графический интерфейс
• основные элементы графического интерфейса
• индивидуальное информационное пространство

2.5.1. Пользовательский интерфейс и его разновидности

imageПользовательский интерфейс — это совокупность средств и правил взаимодействия человека и компьютера.

По мере развития и совершенствования компьютерной техники разрабатывались различные варианты пользовательских интерфейсов.

На компьютерах, оперировавших только числами и символами, был реализован командный интерфейс (рис. 2.11):

• команда подавалась с помощью последовательности символов (командной строки); 
• компьютер сопоставлял поступившую команду с имеющимся в его памяти набором команд; 
• выполнялось действие, соответствующее поступившей команде.

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

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

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

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

В наши дни взаимодействие человека и компьютера строится на основе объектно-ориентированного графического интерфейса, в котором:

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

Объекты обладают определёнными свойствами. Например:

С объектами можно совершать разнообразные действия. Например:

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

Основными приёмами управления с помощью мыши являются:

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

Интуитивная понятность объектно-ориентированного графического интерфейса объясняется тем, что в нём реализованы аналогии с привычными человеку прямым манипулированием конкретными объектами и визуализацией результатов производимых действий. Действительно, при выполнении какой-либо операции пользователь сначала выбирает объект, а затем — действие над этим объектом; мышь позволяет осуществлять прямое манипулирование выбранным объектом. Так, для копирования файла с одного каталога в другой уже не нужно набирать в командной строке определённую последовательность символов. Достаточно выделить щелчком пиктограмму предназначенного для копирования файла в окне содержащего его каталога и перетащить её в окно или на пиктограмму другого каталога. Результатом копирования файла будет его изображение в окне нового каталога.

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

2.5.2. Основные элементы графического интерфейса

Основными элементами графического интерфейса являются окна и меню.

Можно выделить следующие типы окон:

• основное окно операционной системы — Рабочий стол; 
• окна папок; 
• диалоговые окна; 
• окна приложений; 
• окна документов.

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

imageМеню — это выводимый на экран список команд, которые можно задать компьютеру. Выбор команды производится щелчком кнопкой мыши.

imageКонтекстное меню — это список команд, относящихся к текущему объекту; оно появляется при щелчке правой 1 кнопкой мыши на выделенном объекте. Контекстное меню позволяет получить доступ ко всем командам, возможным для данного объекта.

imageРабочий стол

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

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

 

1 Для «левшей» мышь исходно настраивается по-другому: там, где «правша» щёлкает правой кнопкой, «левша» — левой и наоборот.

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

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

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

imageДиалоговые окна

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

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

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

Раскрывающийся список открывается щелчком на раскрывающей кнопке (на ней изображён треугольник-стрелка).

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

Флажки служат для выбора нескольких возможных вариантов. Флажки располагаются перед возможными вариантами и имеют форму квадратиков. Установленный флажок отмечается «галочкой».

Счётчик представляет собой пару стрелок, позволяющих увеличивать или уменьшать значение в связанном с ними поле.

Ползунок позволяет плавно изменять значение соответствующего параметра.

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

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

imageОкна папок и приложений

Окно папки — это область экрана, в которой графически представлено содержимое папки.

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

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

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

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

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

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

Границы окна — рамка, ограничивающая окно с четырёх сторон; с помощью операции протягивания границы можно изменять размеры окна.

В строке состояния выводится дополнительная справочная информация.

imageОкно приложения — это область экрана, в которой представлено запущенное на выполнение приложение; открыть или закрыть окно приложения — то же, что и запустить программу на выполнение или завершить её.

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

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

2.5.3. Организация индивидуального информационного пространства

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

Информационные ресурсы, доступные пользователю при работе на компьютере, будем называть его индивидуальным информационным пространством.

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

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

САМОЕ ГЛАВНОЕ

Пользовательский интерфейс — это совокупность средств и правил взаимодействия человека и компьютера.

Взаимодействие человека и компьютера в наши дни строится на основе объектно-ориентированного графического интерфейса, в котором:

• все объекты представляются в виде значков; 
• оперирование объектами осуществляется в окнах; 
• основным элементом программного управления является меню; 
• основным элементом аппаратного управления являются различные манипуляторы.

Многооконность — важная характеристика современного пользовательского интерфейса.

Информационное пространство пользователя — это информационные ресурсы (файлы с программами, документы, web-сайты, фотографии, видеофрагменты и др.), доступные пользователю при работе на компьютере. 

Вопросы и задания

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

2. Что такое пользовательский интерфейс?

3. Почему командный пользовательский интерфейс не способствовал широкому распространению компьютерной техники? Почему специалисты до сих пор используют интерфейс командной строки?

4. Какие основные возможности реализованы в современных графических интерфейсах?

5. Почему современные пользовательские интерфейсы можно считать объектно-ориентированными?

6. Какой пользовательский интерфейс, по вашему мнению, является дружественным?

7. Назовите основные элементы графического интерфейса.

8. Опишите основное окно операционной системы — рабочий стол.

9. Какие управляющие элементы могут содержаться в диалоговых окнах?

10. Перечислите основные элементы окон папок. Какие из них присутствуют в окнах известных вам приложений? Приведите примеры.

11. Какие аналогии с повседневной жизнью реализованы в современном пользовательском интерфейсе?

12. Представьте в виде графа основные понятия п. 2.5.2 «Основные элементы графического интерфейса».

13. Каких правил следует придерживаться при создании индивидуального информационного пространства? 
 

Электронное приложение к учебнику

 Презентация «Пользовательский интерфейс»

 Презентация «Пользовательский интерфейс» (Open Document Format)

Ссылки на ресурсы ФЦИОР:

imageПрезентация «Пользовательский интерфейс» 

Презентация на сайте "Электронное приложение к учебнику"

Ресурсы ФЦИОР

image(Внимание! Для воспроизведения модуля необходимо установить на компьютере проигрыватель ресурсов.)    Скачать проигрыватель ресурсов ФЦИОР 
 

image1) информационный модуль по теме «Основные элементы интерфейса и управления»;

Карточка ресурса на портале ФЦИОР 

image2) практический модуль теме «Основные элементы интерфейса и управления»;

Карточка ресурса на портале ФЦИОР 

image3) контрольный модуль по теме «Основные элементы интерфейса и управления»;

Карточка ресурса на портале ФЦИОР 
 

Практическая часть урока

imageИндивидуальная работа учащихся с практическими и контрольным модулями «Основные элементы интерфейса и управления». 
 

Практическая работа №6
"Настройка пользовательского интерфейса"

imageЗадание 1. Оформление Рабочего стола

1. Откройте контекстное меню Рабочего стола, щелкнув правой кнопкой мыши на его любом свободном участке.

2. Выберите в контекстном меню пункт Вид. Измените размеры значков.

3. Выберите в контекстном меню пункт Сортировка. Упорядочите все значки, расположенные на Рабочем столе, по имени.

4. Выберите в контекстном меню пункт Персонализация (Свойства).

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

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

7. Верните изменённые параметры в исходное положение. 

imageЗадание 2. Объекты Рабочего стола

1. Выйдите в Интернет и перейдите на страницу сайта LearningApps.org http://learningapps.org/1179245

2. Установите соответствие между отмеченными объектами Рабочего стола и их названиями.

3. После выполнения задания щелкните мышью на кнопке Перепроверить решение, покажите результат учителю. 

imageЗадание 3. Панель задач

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

2. Откройте контекстное меню панели задач.

3. Измените положение панели задач.

4. Верните изменённые параметры в исходное положение. 

imageЗадание 4. Окно

1. Выйдите в Интернет и перейдите на страницу сайта LearningApps.org http://learningapps.org/498261.

2. Укажите элемент окна, с помощью которого можно выполнить то или иное действие.

3. Покажите результат учителю. 

imageЗадание 5.Операции с окнами

1. Запустите программу Блокнот и выполните с её окном следующие операции: измените размер окна; переместите окно в правый нижний угол рабочего стола; разверните окно на весь экран; сверните окно в кнопку панели задач; восстановите предыдущий размер окна; закройте окно программы.

2. Запустите программы Калькулятор, WordPad, Paint и выполните следующие операции с окнами: разместите окна открытых программ одно под другим (стопкой); разместите окна открытых программ рядом; разместите окна открытых программ каскадом; сверните все окна; переключитесь между окнами программ.

3. Закройте окно программы Paint.

4. С помощью программы Калькулятор выполните требуемые вычисления. Ответы (в форме развёрнутых предложений) запишите в программе WordPad и сохраните в личной папке в файле с именем Человек.doc.

a. Количество сердцебиений человека за год составляет 36 800 000. Определите среднюю скорость биения сердца в ударах в минуту. 
b. Через печень человека в течение одной минуты протекает 1,5 литров крови. Подсчитайте, какое количество крови пропускает печень за сутки. 
c. Нервные импульсы в человеческом теле передаются со скоростью примерно 90 метров в секунду. Выразите эту скорость в километрах в час. 

imageЗадание 6. Объекты графического интерфейса

1. Выйдите в Интернет и перейдите на страницу сайта LearningApps.org http://learningapps.org/700856.

2. Установите соответствие между объектами графического интерфейса и их названиями.

3. После выполнения задания щелкните мышью на кнопке Перепроверить решение, покажите результат учителю. 

imageТеперь вы умеете:

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