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

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

13.1 Виджеты (Widgets)

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

Примеры виджетов:

• Кнопка (класс QPushButton );
• Метка (класс QLabel );
• Поле ввода (класс QLineEdit );
• Числовое поле-счётчик (класс QSpinBox );
• Строка прокрутки (класс QScrollBar ).

В Qt есть около 50-ти готовых классов графических элементов доступных для использования. Родительским классом для всех виджетов является класс QWidget . От него наследуются все главные свойства визуальных элементов, которые мы тщательно рассмотрим. Исследование способов разработки программ с графическим интерфейсом начнём с примера.

Создадим пустой файл проекта. Запустим мастера проектов и выберем в разделе Projects (Проекты) пункт Other Project (Другой проект) . Далее выберем тип проекта Empty Qt Project (Пустой проект Qt) . К файлу проекта добавим содержимое:

TEMPLATE = app #Модули Qt, которые мы будем использовать QT += widgets #Добавляем модуль widgets для работы с виджетами (необходимо для Qt5). TARGET = widget#Название исполняемого файла SOURCES += \ main.cpp

Теперь создадим простую программу с окном, в котором мы будем выводить надпись. Установим размер окна и текст его заголовка, а также установим шрифт для надписи. Для этого создадим файл main.cpp со следующим содержанием:

#include #include int main (int lArgc, char * lArgv ) { //Создаём объект QApplication, который инициализирует и настраивает оконную программу, //управляет её выполнением с помощью цикла обработки событий QApplication lApplication (lArgc, lArgv); QLabel lLabel; //Создаём виджет QLabel - метка lLabel.setText (" I am widget! "); //Задаём текст для метки lLabel.setGeometry (200, 200, 300, 150); //Задаём размеры - позицию (x, y) ширину и высоту. Задаём выравнивание текста lLabel.setAlignment (Qt::AlignHCenter | Qt::AlignVCenter); //Класс QFont используют для настройки параметров шрифта. //Выбираем семейство шрифтов Arial Black и размер 12. QFont lBlackFont (" Arial Black ", 12); lLabel.setFont (lBlackFont); //Задаём шрифт для метки lLabel.show (); //Вызываем метод show() для показа метки на экране. return lApplication.exec (); //Запускаем программу на выполнение exec() выполняет //цикл обработки событий. Программа ожидает действия пользователя и выполняет их обработку. }

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

Рис. 13.1.

Для создания структуры виджеты организовывают в иерархию по принципу "часть - целое". Каждый из виджетов может содержать другие виджеты. Такой визуальный элемент становится "родителем" (родительским виджетом) для элементов, которые он содержит. Отметим, что такие отношения не следует путать с наследованием в C++ - отношениями между классами в программе. Отношения между виджетами являются отношениями между объектами. Такие отношения порождают несколько последствий:

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

Виджеты, которые не имеют родителя (виджеты верхнего уровня), имеют вид отдельных окон в программе. Рассмотрим пример. Назовём новый проект ParentExample . Файл проекта будет содержать обычные для GUI -проекта настройки:

TEMPLATE = app TARGET = ParentExample QT += widgets

Для виджета, который мы будем использовать в качестве главного окна создадим новый класс. Для этого в категории Files and Classes (Файлы и классы) выберем раздел С++ и выберем С++ Class (см. рис. 13.2).

Следующим шагом будет создание нескольких элементов на окне. Для этого откроем файл parentwidget.cpp и изменим код конструктора класса. Для отображения элементов достаточно создать их в конструкторе класса и задать ParentWidget как отца для них. Код parentwidget.cpp выглядит так:

#include " parentwidget.h " #include #include #include ParentWidget::ParentWidget (QWidget * parent) : QWidget (parent) { //Создаём метку, указывая родительский виджет - this, то есть экземпляр класса ParentWidget. QLabel * lLabel=new QLabel (this); //Позиция относительно левого верхнего угла родительского виджета. lLabel ->setGeometry (50, 0, 100, 30); lLabel ->setText (" TextLabel "); //Текст на метке. //Создаём кнопку, задаём "родителя", геометрию и текст QPushButton * lPushButton = new QPushButton (this); lPushButton->setGeometry (50, 50, 100, 30); lPushButton->setText (" PushButton "); //Создаём поле ввода, задаём "родителя", геометрию и текст QLineEdit * lLineEdit = new QLineEdit (this); lLineEdit ->setGeometry (50, 100, 100, 30); lLineEdit ->setText (" LineEdit "); lLineEdit ->selectAll (); //Выделяем текст в поле ввода (просто для примера) //Наконец изменяем размер родительского виджета setGeometry (x (), y (), 300, 150); //и задаём текст заголовка окна setWindowTitle (" parent widgetExample "); }

Поскольку родительским элементом является ParentWidget , то метка (QLabel ), кнопка (QPushButton ) и текстовое поле (QLineEdit) находятся в его пределах. Позицию дочерних виджетов задают относительно левого верхнего угла отца. В этом легко убедиться изменив размеры и позицию окна нашей программы. Обратите внимание на то, как мы создавали элементы пользовательского интерфейса в динамической памяти используя оператор new . Это гарантирует, что элементы не будут удалены после завершения работы конструктора ParentWidget .

Разработка графического интерфейса

Ключевым средством взаимодействия пользователя с программой является графический пользовательский интерфейс (Graphical User Interface, GUI). GUI любого программного продукта является одним из ключевых факторов его популярности.

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

На практике программирование Windows-приложений предполагает экстенсивное использование различных инструментальных средств и мастеров. Таким образом, учитывая стандарты выбранной операционной системы, программное средство будет иметь оконный интерфейс. Это обусловлено, прежде всего, тем, что окна являются основными элементами графического интерфейса в операционных системах (ОС) семейства «Windows». Они представляют собой прямоугольные области, которые имеют свои настройки, свойства и типы .

Графическая часть обучающего блока включает в себя окна четырех типов:

Главное окно -- содержит все элементы навигации по программе, а также дополнительную информацию, необходимую для удобства работы с ПС;

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

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

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

Главное окно программы будет содержать следующие элементы управления и вывода информации:

Заголовок окна, который содержит название программы и назначение окна;

Кнопки системного меню, которые отвечают за изменение размера, минимизацию и закрытие программы;

Область названия окна, которая носит исключительно функцию украшения и необходима для соответствия общему дизайн-решению;

Область приветствия;

Область вывода дня недели, текущей даты и времени;

Пользовательская панель инструментов, содержащая кнопки для доступа к основным функциям программы;

Административная панель, включает в себя кнопку для доступа к административным элементам управления ПС;

Строка состояния, отображающая информацию обо всех режимах работы программы.

Схема главного окна графического интерфейса (вид окна для административной учетной записи) представлена на рисунке 3.2

Рисунок 3.2 -- Схема главного окна графического интерфейса: 1 -- заголовок окна; 2 -- кнопки системного меню; 3 -- область названия окна; 4 -- строка состояния; 5 -- область приветствия; 6 -- область вывода дня недели, даты и времени; 7 -- административная панель; 8 -- пользовательская панель; 9 -- кнопка для доступа к стадии обучения; 10 -- кнопка для доступа к стадии тестирования; 11 -- кнопка для вывода статистики и графиков; 12 -- выход; 13 -- кнопка для доступа в административную часть приложения

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

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

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

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

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

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

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

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

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

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

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

¦ При активизации всех пиктограмм, как отмечалось выше, следует использовать двойной щелчок мышью. А для получения аналогичного результата для пиктограмм объектов, которые активизируются одинарным щелчком мышью, рекомендуется также запрограммировать двойной щелчок. Многие опции, например из меню Control Panel, выглядят как пиктограммы, но являются объектами, которые активизируются одинарным щелчком мышью. Следует предусмотреть возможное поведение пользователей при работе с такими объектами (т.е. допустить, что они будут дважды щелкать по ним мышью) и помочь им достигнуть желаемого результата.

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

¦ Элементы, общие для различных меню, следует размещать в одном месте. Нопример, кнопки ОК и Cancel должны всегда располагаться одиноково относительно друг друга и занимать одно и то же место в различных диалоговых окнах.

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

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

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

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

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

2) создание интерфейса - это работо не одиночки, а представителей трех областей: специалиста, который выясняет мнение пользователей об основных элементах интерфейса и описывает их; разработчика интерфейса и создателя графики;

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

4) проверка, создание макета и снова проверка, так как даже если совершенно точно понято назначение программного продукта, невозможно предусмотреть все потребности пользователей.

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

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

Из приведенного выше краткого введения понятно, что обязателными элементами графического интерфейса при решении научных и/или учебных задач должны быть:

1. Одно или несколько окон для вывода графических результатов расчета.

2. Несколько редактируемых окон, с помощью которых задаются и/или изменяются значения параметров задачи.

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

4. Поясняющие надписи (статический текст).

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

Для создания такого интерфейса можно воспользоваться функциями графического вывода, а также специальной функцией, разработанной для интерактивного взаимодействия пользователя с рисунком. Эта функция называется uicontrol . Но для упрощения работы и создания однотипных элементов интерфейса в системеMATLAB имеется специальная программа, которая позволяет на уровне визуального программирования, почти без написания кода создать требуемые элементы.

Рис. 8. Простейщий графический интерфейс пользователя для решения задачи “Биения”

9.1. Создание внешнего вида интерфейса

В этом параграфе мы рассмотрим использование MATLAB для разработки внешнего вида графического интерфейса (GUI -GraphicsUserInterface) с использованием средств графического (визуального) программирования. Для вызова визуального редактора необходимо в командном окнеMATLAB набрать командуguide . По истечении определенного времени, определяемого быстродействием вашего компьютера, появятся два новых окна, показанные на рис.9 . Одно из них – панель управления (Control Panel , на рисунке слева) и форма или область рисования (Figure , на рисунке справа). Эти окна могут перекрываться, но мы для ясности изложения расположили их рядом. Показанная выше картинка появится на экране в том случае, если перед вызовомguide отсутствует какой-либо открытый рисунок. В случае же если функцияguide вызывается после отрисовки какого-либо рисунка, то он открывается вместо пустого. Мы же рассмотрим создание графического интерфейса с самого начала.

Перед созданием графического интерфейса желательно “разработать проект” того, что вы хотите иметь в качестве интерфейса. Мы рассмотрим пример вывода трех разных сигналов в трех подокнах, что в терминах графики высокого уровня определялось бы операторами subplot(3,1,k), где k - номер графика. Кроме того,

вывода графиков (axes в терминах панели управления), три статических надписи N,R,C (text ), три окна ввода/редактирования данных (edit ) и две кнопки (push ).

Для создания подокон, в которые будут выводиться графики, ис- пользуется кнопка, показанная справа на рисунке (окно и оси). Щелк-нув по этому элементу на панели управления и переведя мышь на панель рисунка, необходимо поместить крест, котрый будет на кончике мыши, в то

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

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

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

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

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

Построенные таким образом окна вывода и редактирования, окна статического текста и кнопки, а также другие объекты можно выровнять и установить определенные промежутки между ними с помощью панели выравнивания (Alignment Tools ).

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

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

При работе с графическими объектами на панели рисунка желательно раскрыть (с помощью соответствующей кнопки окна Windows) панель рисунка на весь экран и выбрать размер всех объектов на панели рисунка.

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

писью Property editor . Выделив в верхнем окне редактора свойств все введенные нами объекты (с помощью удерживаемой клавишиCtrl и выделения объектов левой кнопкой мыши), в нижнем окне редактора свойств находим свойствоUnits (единицы измерения) и выбираем его щелчком левой кнопки мыши. После этого в средней части редактора в специальном окне слева появится свойствоUnits , а справа - окно выбора значений, в котором имеется раскрывающийся список с допустимыми значениями свойства. Для свойстваUnits необходимо выбрать значениеnormalized . Анологично надо задать значение свойстваFontUnits – единицы измерения размера шрифтов. Это обеспечивает изменение размера шрифта при изменении размера окна.

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

8 Редактор свойств можно вызвать не только с помощью кнопки на панели управления, но

и двойным щелчком на соответствующем объекте.