Человеко-машинное взаимодействие

 

 

Федеральное агентство связи 

 

Федеральное государственное образовательное бюджетное учреждение  

высшего профессионального образования 

«Сибирский государственный университет телекоммуникаций и информатики» 

(ФГОБУ ВПО «СибГУТИ») 

 

 

 

Е. Ю. Мерзлякова 

 

 

 

Человеко-машинное  

взаимодействие 

 

Учебно-методическое пособие 

 

 

 

 

 

 

 

 

Новосибирск 2015 

 

 

 

УДК 004.5(075.8) 
 
Мерзлякова Е. Ю. Человеко-машинное взаимодействие : Учебно-методическое 
пособие. – Новосибирск: Изд-во СибГУТИ, 2015. – 34 с. 
 

Пособие предназначено для студентов технических специальностей, изу-

чающих дисциплину «Человеко-машинное взаимодействие» и содержит методические 
указания по выполнению РГЗ, описание лабораторных работ. 
 
 
Рисунков – 8, список лит. – 13 наим. 
 
Кафедра прикладной математики и кибернетики 
 
Рецензент  д-р техн. наук С. Н. Мамойленко  
 
 
 
 
 
 
 

Утверждено редакционно-издательским советом СибГУТИ в качестве 

учебно-методического пособия. 
 
 
 
 
 
 

 
 
 
 
 
 
 
 
 
 

   Мерзлякова Е.Ю., 2015 
 Сибирский государственный университет 

телекоммуникаций и информатики, 2015 

ОГЛАВЛЕНИЕ 

 

I. Практикум…………………………………………………………………..
4

Лабораторная работа 1…………………………………………………….
4

Лабораторная работа 2…………………………………………………….
8

Лабораторная работа 3…………………………………………………….
10

Лабораторная работа 4…………………………………………………….
12

Лабораторная работа 5…………………………………………………….
13

Лабораторная работа 6…………………………………………………….
14

Лабораторная работа 7…………………………………………………….
14

II. Выполнение РГЗ…………………………………………………………..
15

1. Теоретические сведения…………………………………………………
15

1.1. Проблемно-центрированная разработка интерфейса……………..
15

1.2. CWT-анализ интерфейса…………………………………………….
19

1.3. Анализ GOMS………………………………………………………..
21

1.4. Золотые правила построения интерфейсов………………………..
24

1.4.1. Правила Нильсена Молиха (Nielsen Molich)…………………….
24

1.4.2. Принципы организации графического интерфейса…………….
25

2. Задание……………………………………………………………………
26

3. Варианты заданий………………………………………………………..
27

4. Список литературы………………………………………………………
33

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

I. Практикум 

 

ЛАБОРАТОРНАЯ РАБОТА 1 

 

Цель: знакомство со средой QtCreator, изучение механизма сигналов          

и слотов. 

Требование: каждая подгруппа выполняет общее задание. 

 
1. Запустить QtCreator. Создать приложение Qt Widgets. 
2. Открыть форму MainWindow и создать 2 пункта главного меню: «Авторы» 

и «Выход». В свойстве «window title» задать заголовок окна «Лабораторная работа №
1».  

 

 

Рис. 1. Создание меню на главной форме 

 

3. В режиме редактирования сигналов и слотов установить соответствующий 

слот для меню «Выход». 

Рис. 2. Создание меню на главной форме 

 

4. В файле mainwindow.cpp,  пользуясь функцией connect, установить соеди-

нение со слотом About_Lab1()  при выборе пункта меню «Авторы»: 

 
connect(ui->action_4,SIGNAL(triggered()),this,SLOT(About_Lab1())); 
 

5. Указать данный слот в заголовочном файле mainwindow.h. 

private slots: 
 
void  About_Lab1(); 

 
 
 
 
 
 
 
 
 
 

6. Разместить на форме календарь. Изучить следующие свойства: 

 

Рис. 3. Свойства виджета календаря 

 

Установить возможность выбора даты только на текущий год. Установить 

курсивный шрифт и сетку на календаре. 

7. Поместить на форму ComboBox справа от календаря. Под ComboBox по-

местить заполнитель пространства VerticalSpacer. Скомпоновать ComboBox и 
VerticalSpacer  по вертикали (выделить оба элемента и правой кнопкой мыши 
выбрать компоновку). Затем выделить все и скомпоновать по горизонтали. 

8. Щелкнуть по ComboBox мышкой два раза и добавить все дни недели. Этот 

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

Класс QComboBox позволяет прикреплять пользовательские данные как 

 QVariant к каждому элементу. Позднее данные могут быть получены с помощью 
функции QComboBox - itemData().  

QVariant непосредственно не поддерживает тип данных Qt::DayOfWeek, но 

поддерживает int, а C++ успешно преобразует любое перечислимое значение 
в int. 

9. Правой кнопкой мыши на ComboBox  вызвать из меню «Перейти к слоту», 

выбрать currentIndexChanged(int).  

Откроется обработчик, в котором прописываем: 

   
ui->calendarWidget->setFirstDayOfWeek(Qt::DayOfWeek(index+1)); 
 

Здесь номер выбранного пункта приводится к типу данных «DayOfWeek» с 

нумерацией от 1 (Пн). 

10. Формат текста столбца календаря задан как QTextCharFormat, который 

кроме цвета фона позволяет задавать различную информацию о форматирова-

нии символов. Например, установим определенный цвет на первый день недели. 
Подключаем: 

 
#include <QTextCharFormat> 

 

и в том же обработчике выбора первого дня недели прописываем: 

 

QTextCharFormat format; 
 format.setForeground(qvariant_cast<QColor>("green")); 
 ui->calendarWidget->setWeekdayTextFormat(Qt::DayOfWeek(index+1), format); 

 

При каждой смене первого дня недели соответствующие дни будут выделены 

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

11. Создать новый класс формы Qt Designer. Назовем, например, auth (об ав-

торах).  

 

 

Рис. 4. Создание новой формы 

 
12. Установить заголовок окна формы «Информация об авторах». Разрабо-

тать конкурентоспособный логотип кампании по выбранному варианту из РГЗ. 
Установить его как иконку данной формы. Расположить рисунок логотипа на 

форме слева (с помощью label и его свойства pixmap). Данные об авторах разместить 
на форме справа в TextEdit (двойным щелчком в нем открывается редактор 
текста).  Цвет и вид текста должен сочетаться с логотипом. Скомпоновать 
по горизонтали для правильного расположения элементов формы (выделить 
оба элемента и правой кнопкой мыши выбрать компоновку). 

13. В файле mainwindow.cpp прописать процедуру открытия формы об авто-

рах  

 
void MainWindow::About_Lab1() 
{ 
    auth *dg = new auth(); 
    dg->show(); 
} 

 

ЛАБОРАТОРНАЯ РАБОТА 2 

 

Цель: создание диалогового приложения. 
Требование: каждый студент выполняет работу отдельно. 

 
1. Большинство программ с графическим интерфейсом имеют главное окно, 

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

2. В заголовочном файле определите класс MyDialog, унаследованный от 

QDialog: 
 

#include <QDialog> 
class MyDialog : public QDialog 
{ 
    Q_OBJECT 
public: 
    explicit MyDialog(QWidget *parent = 0); 
… 
 
3. В файле main.cpp создайте виджет класса MyDialog: 
 
int main(int argc, char *argv[]) 
{ 
    QApplication a(argc, argv); 

MyDialog dg; 
    dg.show(); 
    return a.exec(); 
} 
 
4. В конструкторе класса MyDialog установите заголовок диалога «Анкета» и 

создайте виджеты QSpinBox и QTextEdit: 

 
MyDialog::MyDialog(QWidget *parent) : QDialog(parent) 
{ 
    setWindowTitle("Анкета"); 
    QSpinBox *sBox = new QSpinBox; 
    QTextEdit *tEdit = new QTextEdit; 
 
5. Там же создайте менеджер компоновки и разместите в нем созданные ви-

джеты. Установите менеджер компоновки для диалога: 

 
  QHBoxLayout *Hlay = new QHBoxLayout; 
    Hlay->addWidget(sBox); 
    Hlay->addWidget(tEdit); 
    dg.setLayout(Hlay); 
 
Не забудьте добавить библиотеки:  
 
#include <QSpinBox> 
#include <QTextEdit> 
#include <QHBoxLayout> 
 
Вот что должно получиться: 

 

Рис. 5. Вид диалога 

6. Таким же образом добавьте виджеты QComboBox со списком из трех зна-

чений и QPushButton «Сохранить». 

7. Соедините сигнал нажатия кнопки (назовем её But) со слотом Wrf(): 

 

QObject::connect(But, SIGNAL(clicked()), this, SLOT(Wrf())); 
 
8. Создайте слот Wrf(), в котором происходит сохранение всех данных из 

диалога в заданный текстовый файл. Для этого понадобятся библиотеки: 

 
#include <QFile> 
#include<QIODevice> 
#include<QTextStream> 
 

ЛАБОРАТОРНАЯ РАБОТА 3 

 

Цель: создание простого текстового редактора, использование таймера. 
Требование: каждый студент выполняет работу отдельно. 

 
1. Запустить QtCreator. Создать приложение Qt Widgets. Поместить на форму 

элементы: textEdit, Label, pushButton (4), verticalSpacer  и скомпоновать: 

 

 

Рис. 6. Компоновка виджетов на форме 

 
 

2. Прописать процедуры для каждой кнопки: 

 

Рис. 7. Переход к слоту для кнопки 

 

 кнопка «Открыть», objectName - open_text. Текст должен открываться как 

на английском, так и на русском языках. Использовать QTextStream; 

 кнопка «Сохранить», objectName - save_text. Текст должен сохраняться и 

читаться в файле как на английском, так и на русском языках. Использовать 
QTextStream; 

 кнопка «Очистить», objectName - clear_text.: используя функцию clear() 

очистить содержимое TextEdit; 

 кнопка «Выход», objectName - exit_text. Выход из программы с предвари-

тельным сохранением содержимого textEdit по запросу. 

3. Реализовать автосохранение во временный файл с помощью таймера. Вы-

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

Например, можно сделать так: 

1. Пишем функцию автосохранения autosave(), в которой будет происхо-

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

2. В MainWindow создаем таймер и соединяем сигнал timeout() (запускает-

ся по истечении указанного промежутка времени) с нашей функцией.