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

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

Ключевым средством взаимодействия пользователя с программой является графический пользовательский интерфейс (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. Созданный интерфейс максимально реализовывает возможности программы, но вместе с тем не перегружает пользователя обилием меню, кнопок, изображений и текста.

СТРУКТУРА ДОКУМЕНТА

4.1. Технология визуального программирования

4.1.2. Главное окно Visual Studio

4.1.3. Главное меню VS и панель инструментов

4.1.4. Окна панелей Visual Studio

4.1.5. Настройка параметров интегрированной среды разра ботки VS

4.1.6. Тестовые задания

4.1.7. Лабораторная работа по теме «Среда разработки VS .NET»

4.1. Технология визуального программирования
и основные понятия

По сравнению с предыдущими поколениями языков программирования, языкпрограммирования высокого уровня Visual Basic .Net (VB)имеет ряд принципиальных отличий. Это мощная, профессиональная система программирования, позволяющая быстро и эффективно создавать приложения для MS Windows. Поскольку система является «визуальной », программист может создавать видимую часть приложения MS Windows, не написав почти ни строчки программного кода. Эта видимая часть является основой интерфейса пользователя « программный проект – пользователь », с помощью которого осуществляется взаимодействие пользователя с программным проектом. Разработка, как программного кода классов и методов для решения поставленной задачи, так и программного интерфейса приложения осуществляется на принципах объектно-ориентированного подхода , реализованного в Visual Studio .Net (VS). Приложения (проекты) выполняются под управлением MS Windowsс помощью Интегрированной Среды Разработки (IDE) .

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



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

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

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

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

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

Основной единицей в объектно-ориентированном программировании является программный объект, который объединяет в себе как описывающие его данные (свойства), так и средства обработки этих данных (методы). То есть, программные объекты обладают свойствами, могут использовать методы и реагировать на события.

Основными объектами визуального программирования являются форма и ее элементы управления.

Форма (Form) – это объект, представляющий собой окно, на котором размещаются элементы управления, например, Кнопка(Button); Метка(Label); ТекстовоеПоле(TextBox); Флажок(CheckBox); Список(ListBox); РаскрывающийсяСписок(ComboBox); Переключатель(RadioButton )и др.

Среда визуального программирования позволяет увидеть объекты на экране на этапе проектирования приложения, дает возможность настроить объекты, изменяя их расположение, размеры и другие свойства. Форма является контейнером объектов , ив то же время сама также является объектом. При размещении объекта на форме основные параметры объекта сохраняются в исполняемом программном коде. При этом объектами также являются программные блоки или фрагменты программного кода (классы, процедуры, методы, модули), из которых «собирается» проектируемый проект (приложение).

Свойство объекта – это значение или характеристика, хранимая объектом. В то же время совокупность свойств объекта определяет его состояние. Например, Текст (Text) или Цвет (BackColor) формы, способ Выравнивания текста (Alignment) или Цвет символов (ForeColor) текстового поля – это свойства. В программе обращение к объекту происходит по имени объекта . Свойства объектов можно задавать в окне Свойства и менять свойства объектов в программном коде.

В программном коде существуют определенные правила (определенный формат) для установки свойства – имя объекта и название свойства согласно правилам точечной нотации разделяются точкой .

Класс – это совокупность объектов, обладающих общими свойствами и поведением. Например, Button1 (Кнопка1) на Form1 (Форма1) со всеми своими конкретными свойствами и действием является объектом класса Button. Класс характеризуется такими основополагающими понятиями объектно-ориентированного программирования, как:

· наследование – объект класса обладает всеми свойствами, методами и событиями класса;

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

· полиморфизм – объекты разных классов могут использовать одноименные методы, работающие по-разному для разных объектов.

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

· Forms (Формы) – множество загруженных форм приложения;

· Controls (Элементы управления) – множество всех элементов управления в форме.

Пространство имен – это иерархическая библиотека классов, организованная под уникальными именами такими, например, как System.Windows или System.Math. Для доступа к классам и основанным на них объектам, входящим в пространство имен, в начале программного кода может быть помещен оператор Imports. Каждый проект в VSтакже содержит корневое пространство имен. Пространство имен в документации по VSназывается также библиотеками классов .

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

В языке VB, как и во многих других языках программирования, предназначенных для написания приложений для MS Windows, используется
событийно-управляемая модель программирования. Фактически это означает, что ни одно приложение не может функционировать само по себе, не взаимодействуя с другими приложениями и с операционной системой. Для примера возьмем самый простой случай, когда команда задана нажатием клавиши на клавиатуре. Она не может непосредственно воздействовать ни на одно из приложений, и MS Windowsв данном случае выступает в роли посредника. Восприняв событие, связанное с нажатием клавиши, операционная система решает, куда передать обработку этого события. Затем сообщение о нажатии клавиши посылается приложению. Приложение обрабатывает его, анализируя ввод с клавиатуры, и отображает сообщение, например, в активном текстовом поле.

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

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

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

Кроме событийных процедур пользователь может создать общие процедуры (процедуры пользователя).

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

Метод – это процедура, которая реализует действия, возможные с объектом. В результате этих действий в объекте что-либо меняется. VBпредоставляет пользователю большое количество встроенных процедур, находящихся в библиотеке, и, готовых к использованию. Эти процедуры являются неотъемлемой частью библиотеки классов, то есть являются методами классов, Framework .NET.

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

В среде VBможно создавать собственные процедуры, создаваемые разработчиком ПО.

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

Процедуры-подпрограммы начинаются ключевым словом Sub End Sub , а процедуры-функции начинаются ключевым словом Function и заканчиваются ключевыми словами End Function, между которыми помещается программный код данной процедуры. Программный код каждой процедуры состоит из одного или нескольких операторов языка программирования VB.

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

Имя событийной процедуры состоит из трех частей (включая подчеркивание): ИмяОбъекта_ИмяСобытия.

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

Оператор – это конструкция языка программирования, задающая одну или несколько операций , производимых над операндами . В качестве операндов могут выступать константы, переменные, выражения, функции и т.д. Любой оператор записывается в соответствии с синтаксическими правилами языка программирования. Например, в операторе присваивания знак «= » читается «присвоить» и означает, что в память компьютера записывается значение, равное значению выражения справа от знака «= ». Например, строка

Form4.1.Text = "Форма с картинкой" означает, что в памяти с именем Form4.1.Text записывается значение – текст "Форма с картинкой" , а строка Р=А+В+С используется в программе для вычисления значения выражения и присваивания его переменной Р.

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

Проект является также единицей компиляции. Результатом компиляции проекта является сборка. Каждый проект содержит одно или несколько пространств имен. На начальном этапе создания проекта по заданному типу проекта автоматически строится каркас проекта , состоящий из классов, являющихся наследниками классов, входящих в состав библиотеки FCL (Framework Class Library) - библиотеки классов платформы.NET Framework. Так, если разработчик указывает, что он будет создавать проект типа «Приложение Windows Forms », то в состав каркаса проекта по умолчанию войдет объект Form1 – наследник библиотечного класса Form . Разработчик программного проекта дополнит созданную форму элементами управления – объектами соответствующих классов, тем самым расширив возможности формы, построенной по умолчанию.

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

В зависимости от выбранного типа проект может быть выполняемым или невыполняемым . К выполняемым проектам относятся, например, проекты типа Консольное приложение или Приложение Windows Forms . При построении каркаса выполняемого проекта в него включается класс, содержащий статическую процедуру с именем Main() . В результате компиляции такого проекта создается PE -файл – выполняемый переносимый файл с расширением .exe . Такой PE -файл может выполняться только на компьютерах, где установлена Framework .Net , поскольку это файл с управляемым кодом.

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

Этапы реализации простейших проектов – можно разделить на несколько шагов:

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

· установка значений свойств объектов графического интерфейса;

· создание, редактирование и отладка программного кода проекта;

· сохранение проекта для дальнейшего использования;

· выполнение проекта.

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

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

Итак, обратите внимание еще раз на следующее:

Класс – это центральное понятие объектно-ориентированного программирования. Разработчик проектов на VB использует стандартные классы из библиотеки FCL и создает собственные классы. Причем класс выполняет две различные роли:

· Класс – во-первых, это модуль – архитектурная единица построения проекта по модульному принципу. Справиться со сложностью большого проекта можно только путем деления его на модули, - сравнительно небольшие единицы, допускающие независимую разработку и последующее объединение в большую систему.

· Класс – во-вторых, это тип данных, то есть семантическая единица, описывающая свойства и поведение множества объектов, называемых экземплярами класса. Синтаксически класс представляет описание данных, называемых полями класса, описание методов класса и описание событий класса . Для класса, рассматриваемого как тип данных, поля определяют состояние объектов, методы – поведение объектов. События – это некоторые специальные состояния, в которых может находиться объект, и которые могут обрабатываться внешними по отношению к классу обработчиками события. Так, например, объект класса ЧЕЛОВЕК может иметь событие «День рождения » и каждый из обработчиков этого события может принести объекту свои поздравления по этому случаю.

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

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

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

Главное окно VS

Отметим, что процесс создания простейшего приложения в среде VS подробно будет описан в следующей Теме 4.2 , а также в лабораторной работе по Теме 4.1. «Интегрированная среда разработки Visual Studio .NET». Сейчас познакомьтесь с интерфейсом среды VS.

Запустить MS Visual Studio.

На экране появится Начальная страница - MS VS(рис. 4.1.2-1).

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

Рис. 4.1.2-1. Начальная страница - Microsoft Visual Studio

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

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

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

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

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

Для создания нового проекта используется диалоговое окно
Создать проект (рис. 4.1.2-2). Для его открытия необходимо выполнить одно из следующих действий:

· выполнить команду Создать проект из элементаГлавного меню – Файл;

· нажать кнопку Создать проект , расположенную на стандартной панели инструментов.

Рис. 4.1.2-2. Диалоговое окно Создать проект

В VBможно создавать приложения по различным шаблонам. В этом пособии будем использовать только шаблон Приложение Windows Forms.

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

Рассмотрим на примереосновные шаги, необходимые для создания проекта Приложение Windows Forms .

Пример 4.1.2-1. Создать проект с именем Пример 4.1.2-1и графическим интерфейсом, состоящим из формы, на которой имеется одна кнопка и одно текстовое поле. При нажатии на кнопку должно появиться «Привет, МТУСИ!».

Форма проекта Пример-4.1.2-1 может иметь вид как на рис. 4.1.2-3.

Рис. 4.1.2-3.Графический интерфейс (Форма) проекта Пример 4.1.2-1

Для реализации проекта Пример 4.1.2-1 необходимы следующие шаги:

1) Запустить VS .

2) Создать новый проект:

Файл , а затем выполнить команду Создать проект;

· выбрать шаблон проекта Приложение Windows Forms.

В результате откроется окно Form1.vb[Конструктор] Конструктор форм (на что указывает соответствующая вкладка), позволяющий реализовать графический интерфейс приложения.

· выбрать элемент Главного меню Файл , а затем выполнить команду Сохранить все ;

в результате откроется диалоговое окно Cохранить проект ;

· ввести в поле Имя наименование проекта Пример-4.1.2-1 (по умолчанию среда VB присваивает имя WindowsApplication1), а затем ввести в поле Расположение имя каталога , где будет располагаться проект, или воспользоваться кнопкой Обзор для поиска необходимого каталога (рис. 4.1.2-4);

· щелкнуть по кнопке Cохранить ;

в результате среда разработки примет вид как на рис. 4.1.2-5.

Рис. 4.1.2-5. Среда разработки

Окна панелей Visual Studio

Окно панели Начальная страница (рис. 4.1.1-1) позволяет просмотреть последние использовавшиеся проекты, осуществить поиск примеров программ, как из справки, так и Интернета, а также просмотреть ссылки на сайты, содержащие новости о продукте VS, документацию, учебные пособия.

Рис. 4.1.4-1.Окно панели Конструктор форм и ее контекстное меню

Начальная страница автоматически открывается при запуске VS. Если же окно Начальная страница не появилось, его можно вызвать с помощью команды Начальная страница элемента главного меню Вид (View).

Окно панели Form1.vb [Конструктор] (Конструктор форм)
Основного окна
является Основным рабочим окном , в котором выполняется визуальное проектирование приложения (рис. 4.1.4-1). Отобразить на экране это окно можно щелкнув на вкладке Form1.vb [Конструктор] или двойным щелчком на названии формы в окне Обозреватель решений.

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

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

Для работы в окне Form1.vb [Конструктор] можно использовать контекстное меню (рис. 4.1.4-1).

Рис. 4.1-2. Окно панели Редактора кода и ее и контекстное меню

Окно панели Form1.vb (Редактор кода) – это мощный текстовый редактор с большим количеством возможностей, являющийся основным инструментом программиста для создания и отладки программного кода. Оно также может располагать в Основном рабочим окне (рис.4.1-2).

Окно панели Обозреватель решения и ее контекстное меню представлено на рис. 4.1.4-3.

Рис. 4.1.4-3. Окно панели Обозреватель решений и ее контекстное меню

Панель Элементов управления сгруппирована по разделам
(Рис. 4.1.4-4). Для создании форм пособия необходим в основном раздел Стандартных элементов управления (рис. 4.1.4-5).

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

Для открытия диалогового окна Свойства следует выполнить одно из следующих действий:

· в элементе главного меню Вид выбрать команду Окно Свойств ;

· нажать кнопку Окно свойств, расположенную на Стандартной
панели инструментов;

· выбрать команду Свойства контекстного меню выделенного объекта;

· нажать клавишу клавиатуры .

Рис. 4.1.4-4. Окно панели элементов 4.1.4-5. Панель

управления, сгруппированных по разделам (Стандартные элементы)

Рис. 4.1.4-6. Окно панели Свойства

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

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

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

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

4.1.5. Настройка параметров интегрированной
среды разработки

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

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

1) В элементе главного меню Сервис выполнить команду Импорт и экспорт параметров . Для сохранения настроек среды с целью их использования на другом компьютере, загрузки настроек с другого компьютера или сброса настроек – опции, которую требуется выбрать сейчас – можно исполь­зовать появляющийся при этом мастер.

2) Выбрать Сбросить все настройки , а затем щелкнуть на кнопку Далее . VS спросит, необходимо ли перед настройкой сохранить текущие настройки в файле. Следует всегда сохранять резервную копию своих текущих настроек с тем, чтобы была возможность вернуться к ним, если новые настройки окажутся «неудобными».

3) Проверить, что выбрана опция Да , и обратить внимание на имя файла и папки, в которых VS собирается сохранить эти настройки.

4) Если необходимо вернуться к этим настройкам, для их восстановления используется этот же мастер и опция Импорт выбранных настроек среды.

5) Чтобы увидеть список по умолчанию параметров, используемых для VS, следует щелкнуть на кнопке Далее .

6) Щелкнуть на Параметры для разработки на VB , а за тем щелкнуть на кнопке Готово .

7) Мастер переключит параметры IDE, включая команды меню, панели инструментов и настройки некоторых диалоговых окон, окон Инструментов и Редактор кода .

8) Можно повторить этот процесс настройки в любой момент, когда потребуется сбросить текущие параметры (например, если вы сделали ошибку в настройках), или если потребуется настроить VS для использования другого инструмента программирования.

9) Чтобы закрыть мастер, щелкнуть на кнопке Закрыть .

Если параметры среды для работы с VBнастроены, то можно выполнять задания. Но если они были изменены, необходимо выполнить следующие действия, позволяющие проверить, что настройки, связанные с проектами и компилятором VBсоответствуют тем, которые используются при проведении практических работ. Для проверки параметров проекта и компилятора необходимы выполнить следующие действия:

1) Щелкнуть на команде Параметры элемента меню Сервис и открыть диалоговое окно Параметры.

2) Диалоговое окно Параметры – это окно, в котором находятся многие из настроечных параметров VS. Чтобы увидеть все параметры, которые можно изменить, надо щелкнуть на флажке Показать все параметры , расположенном в нижнем левом углу диалогового окна.

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

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

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

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 - номер графика. Кроме того,

Рис. 9. Общий вид визуального графического редактора и окна редактирования

справа от собственно подокон с графиками мы хотим иметь три редактируемых по-

ля, в которых можно осуществлять ввод/редактирование числовых значений трех

переменных. Пусть эти переменные принимают произвольные значения.

В данном изложении мы не будем оснащать наши редактируемые окна провер-

кой, удовлетворяют ли введенные значения каким-либо условиям, хотя такое воз-

можно. Назовем эти переменные N, R, C. В данном примере имеется в виду расчет

тока в RC-цепи при подаче на зажимы сигнала с номером N, а R и C - сопротив-

ление и емкость в цепи (подробное описание задачи см. в параграфе 10 основного

текста пособия).

Наш интерфейс должен позволить менять зна-

чения N, R, и C, получая в трех расположенных

друг над другом подокнах сигнал (напряжение,

подаваемое на зажимы), производную от сигна-

ла и напряжение на сопротивлении U r . Помимо

окон для вывода графиков и редактируемых окон

R u n E x i t

ввода необходимо поместить на панель интерфей-

са еще две кнопки - RUN - запуск программы на

Рис. 10. Вид интерфейса

счет и EXIT - прекращение работы и удаление

графического окна.

На первом этапе необходимо разработать внешний вид интерфейса. Пусть по

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

следующим образом (рис. 10 ). Элементами этого интерфейса являются три окна

вывода графиков (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 Редактор свойств можно вызвать не только с помощью кнопки на панели управления, но

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

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

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 .

Правило 2: уменьшить нагрузку на пользователя

Правило 3: сделать интерфейс совместимым

Руководящие принципы

Программа "Tidy Start Menu"

Заключение

Литература

Введение

"Золотое правило проектировщика гласит: "Никогда не делай другим того, что они сделали тебе". Вспомните, что вам не нравится в программном обеспечении, которым вы пользуетесь. И не делайте того же самого в программе, над которой работаете."

Трэйси Леонард

Почему надо следовать принципам построения пользовательского интерфейса?

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

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

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

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

Три принципа разработки пользовательского интерфейса формулируются так:

1)контроль пользователем интерфейса;

2)уменьшение загрузки памяти пользователя;

3)последовательность пользовательского интерфейса.

Где найти принципы разработки пользовательского интерфейса

Хансен представил первый список принципов проектирования. Принципы таковы:

1)знать пользователя;

2)сократить запоминание;

3)оптимизировать операции;

4)устранить ошибки.

Многие крупные производители операционных систем, выпусти на рынок свои новые продукты, публикуют соответствующие руководства и инструкции. В этих изданиях раскрываются принципы подхода к проектированию интерфейса. Руководства выпускали Apple Computer, Inc. (1992), IBM Corporation (1992), Microsoft Corporation (1995) и UNIX OSF/Motif (1993).

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

Важность соблюдения принципов

"Несовместимость интерфейса может стоить большой компании миллионов долларов убытка из-за потери продуктивности и увеличения стоимости технической поддержки." - Джесси Брист.

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

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

Трактовка этих принципов будет зависеть от аппаратного обеспечения, операционной системы, составляющих пользовательского интерфейса и его задач. Зачастую деловое решение довлеет над использованием принципов проектировщиками. Пользовательские модели и модели проектировщика также различны и влияют на то, как будут применяться принципы. На некоторых важных этапах разработки проекта может встать вопрос: "Что произойдет далее?". Ответ должен быть таким: "Что захочет пользователь!".

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

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

"Делай это проще, но не примитивнее."

Альберт Эйнштейн

Правило 1: дать контроль пользователю

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

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

1)использовать режимы благоразумно;

2)предоставить пользователю возможность выбирать: работать либо мышью, либо клавиатурой, либо их комбинацией;

3)позволить пользователю сфокусировать внимание;

4)демонстрировать сообщения, которые помогут ему в работе;

5)создать условия для немедленных и обратимых действий, а также обратной связи;

6)обеспечить соответствующие пути и выходы;

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

8)сделать пользовательский интерфейс более понятным;

9)дать пользователю возможность настраивать интерфейс по своему вкусу;

10)разрешить пользователю напрямую манипулировать объектами интерфейса;

Использовать режимы благоразумно

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

Позволить человеку использовать мышь и клавиатуру

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

Позволить пользователю переключить внимание

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

Показывать поясняющие сообщения и тексты

Во всем интерфейсе использовать понятные для пользователя термины. Они не обязаны знать о битах и байтах!

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

Обеспечить немедленные и обратимые действия и обратную связь

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

Предоставлять понятные пути и выходы

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

Приспосабливаться к пользователям с разными уровнями навыков

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

Сделать пользовательский интерфейс "прозрачным"

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