Проектирование интерфейса пользователя программного обеспечения
 Скачать 0.69 Mb.
|
|
09.03.03 Прикладная информатика, 3 курс ОЗО Проектный практикум 1 Лабораторные работы 7, 8 Тема: Проектирование интерфейса пользователя программного обеспечения Цель: Изучение приемов проектирования интерфейса пользователя программного обеспечения. План: 1. Этапы разработки пользовательского интерфейса 2. Формы в Delphi 3. Фреймы 4. Методы работы с элементами управления 4.1. Размещение и удаление элементов управления 4.2. Выравнивание компонентов на форме 4.3. Выделение группы элементов управления 4.4. Команды выравнивания компонентов 4.5. Порядок обхода элементов 5. Компонент TPageControl Литература: 1. Базы данных. Интеллектуальная обработка информации / В.В. Корнеев, А.Ф. Гареев, С.В. Васютин, В.В. Райх. М., 2000. С. 13-29. 2. Диго С.М. Базы данных: проектирование и использование: учебник / С.М. Диго. М., 2005. 3. Кузин А.В. Базы данных: Учеб. пособие для студ. высш. учеб. заведений/А. В. Кузин, С.В. Левенисова.-М.: ИЦ " Академия", 2008.-320 с. 4. Культин Н.Б. Основы программирования в Delphi XE / Н.Б. Культин. - СПб.: БХВ-Петербург, 2011. – 416 с. 5. Смирнова Г.Н. Проектирование экономических информационных систем: учебник / Г.Н. Смирнова, А.А. Сорокин, Ю.Ф. Тельнов. М., 2003. С. 132-140. 6. Советов Б.Я. Базы данных: теория и практика: Учебник для бакалавров / Б.Я. Советов, В.В. Цехановский, В.Д. Чертовский Юрайт, 2012. – 464 с. 7. Фуфаев Д.Э., Фуфаев Э.В. Разработка и эксплуатация автоматизированных информационных систем М.: Издательский центр «Академия», 2010. С. 13-42. 8. Хомоненко А.Д. Базы данных: учебник для высших учебных заведений / А.Д. Хомоненко, В.М. Цыганков, М.Г. Мальцев. СПб., 2002. 9. Петров В.Н. Информационные системы: учебник для вузов / В.Н. Петров. – СПб.: Питер, 2003. – С. 174-212. Теоретические сведения 1. Этапы разработки пользовательского интерфейса Дизайн пользовательского интерфейса является фактором, оказывающим влияние на три основных показателя качества программного продукта: его функциональность, эстетику и производительность. Функциональность является фактором, характеризующим возможность пользователи выполнять свои задачи. Эстетичный внешний вид самого приложения и способа его представления (вплоть до упаковки) позволяет сформировать у потребителя положительное мнение о программе. Вся эстетика приложения зачастую сводится к простому выбору: соотносятся 09.03.03 Прикладная информатика, 3 курс ОЗО Проектный практикум 2 ли между собой используемые цвета, передают ли элементы интерфейса их назначение и смысл представляемых операций, что ощущает человек при использовании тех или иных элементов управления и насколько успешно он их использует. Производительность, а равно и надежность, также влияют на перспективу применения программы. Если приложение хорошо выглядит, имеет простое и удобное управление, но, к примеру, медленно прорисовывает экраны, регулярно «подвисает» на десяток-другой секунд или, того хуже, падает с критической ошибкой при некорректных действиях пользователя, у него, вероятно, будет мало шансов на длительную эксплуатацию. В свою очередь, быстрая и стабильная работа приложения могут отчасти компенсировать его не самый стильный дизайн или отсутствие каких-то вторичных функций. Для обеспечения успешной работы пользователя от дизайнера интерфейса требуется соблюдать баланс между вышеперечисленными факторами на протяжении всего жизненного цикла разработки приложения. Это достигается последовательной и тщательной проработкой деталей интерактивного взаимодействия на каждом из этапов разработки пользовательского интерфейса (рис. 1), включающих: 1. Проектирование • Функциональные требования: определение цели разработки и исходных требований. • Анализ пользователей: определение потребностей пользователей, разработка сценариев, оценка соответствия сценариев ожиданиям пользователей. • Концептуальное проектирование: моделирование процесса, для которого разрабатывается приложение. • Логическое проектирование: определение информационных потоков в приложении. • Физическое проектирование: выбор платформы, на которой будет реализован проект и средств разработки. 2. Реализация • Прототипирование: разработка бумажных и/или интерактивных макетов экранных форм. • Конструирование: создание приложения с учетом возможности изменения его дизайна. 3.Тестирование Юзабилити-тестирование: тестирование приложения различными пользователями, в т. ч. и пользователями с ограниченными возможностями. 09.03.03 Прикладная информатика, 3 курс ОЗО Проектный практикум 3 Рис. 1. Этапы разработки пользовательского интерфейса [http://www.4stud.info/user-interfaces/stages-of-development-user-interface.html] 2. Формы в Delphi Форма представляет окно приложения на этапе разработки и обеспечивает создание интерфейса пользователя, являясь контейнером для размещения элементов интерфейса. Все свойства класса TForm можно разделить на две группы – опубликованные свойства, то есть те свойства, которые отображаются в окне инспектора объектов во время разработки приложения, и свойства, которые можно изменять только в процессе выполнения программы [9]. Ниже приведены основные опубликованные свойства формы. • ActiveControl - указывает на элемент управления, имеющий фокус ввода. • AutoScroll - определяет необходимость создания автоматических полос прокрутки, если размер формы не позволяет отобразить все расположенные на ней элементы управления. • AutoSize - если значение данного свойства равно true, то размеры формы автоматически изменяются таким образом, чтобы вместить все расположенные на ней элементы управления. • BorderIcons - определяет набор кнопок в заголовке окна. • BorderStyle - определяет тип границы окна и задает вид заголовка формы, отображение строки меню, наличие кнопок в заголовке окна. • BorderWidth - ширина рамки вокруг окна. • Caption - заголовок окна. • ClientHeight - высота клиентской области в пикселах. • ClientWidth - ширина клиентской области в пикселах. • Color - цвет фона окна. • Constraints - ограничения на изменения размера окна. • Ctl3D - определяет внешний вид окна — «трехмерное» или «плоское». • Cursor - вид указателя мыши над формой. • FormStyle - стиль окна: fsNormal - обычное окно SDI; fsStayOnTop - окно SDI, всегда остающееся поверх всех других окон; fsMDIForm - главная форма MDI; fsMDIChild - дочерняя форма MDI. • Height - высота окна в пикселах. 09.03.03 Прикладная информатика, 3 курс ОЗО Проектный практикум 4 • Icon - значок формы, отображающийся в верхнем левом углу окна. • Left - левая граница формы в координатах экрана. • Menu - указатель на главное меню окна. • Name - идентификатор экземпляра TForm. • PopupMenu - указатель на контекстное меню окна. • Top - верхняя граница формы в координатах экрана. • Visible - определяет видимость формы. • Width - ширина. • WindowState - состояние окна: wsMinimized - свернуто; wsMaximized - развернуто на весь экран; wsNormal - обычное состояние. Свойства, приведенные ниже, доступны для изменений как в инспекторе объектов во время разработки приложения, так и в процессе выполнения программы. • Active - определяет, активна форма или нет (только для чтения). • Canvas - используется для «рисования» на форме. • MDIChildCount - количество дочерних окон (только для чтения). • MDIChildren [i : integer] - указывает на i-е дочернее окно (только для чтения). В классе TForm определен ряд методов-обработчиков событий, которые позволяют задавать реакцию экземпляра класса TForm на определенные действия. Здесь мы рассмотрим только основные из них: • OnActivate – вызывается при передаче форме фокуса ввода; • OnClick – вызывается при одиночном щелчке на форме; • OnDblClick – вызывается при двойном щелчке на форме; • OnClose – вызывается при закрытии формы; •OnCloseQuery – вызывается перед закрытием формы. Используется для задания параметра, возвращаемого методом CloseQuery; • OnCreate – вызывается при создании формы; • OnDeactivate – вызывается при потере формой фокуса ввода; • OnDestroy – вызывается перед уничтожением формы; • OnPaint – вызывается при перерисовке формы; • OnShow – вызывается при отображении формы; • OnKeyPress – вызывается при нажатии на клавишу; • OnMouseDown – вызывается при нажатии левой кнопки мыши в области формы; • OnMouseUp – вызывается при отпускании левой кнопки мыши в области формы; • OnMouseMove – вызывается при движении указателя мыши над формой [9]. 3. Фреймы Фреймы представляют собой контейнеры, предназначенные для размещения на них элементов управления. В этом плане фреймы подобны формам, однако в отличие от них фреймы могут помещаться на формы и другие фреймы. Перед размещением фрейма на форме его необходимо предварительно создать с помощью команды File → Other → Delphi Files → VCL Frame. Процедура размещения элементов управления на фрейме производится точно так же, как и на форме. Для помещения готового фрейма на форму используется компонент TFrames палитры компонентов (страница Standard). При этом отображается список всех фреймов, существующих в текущем проекте. Выбранный из списка фрейм помещается на форме как обычный компонент. Так как фреймы очень похожи на формы, то они обладают примерно теми же свойствами. Однако в отличие от форм фреймы содержат меньшее число методов и реагируют на меньшее количество событий. Так, например, у фреймов нет методов Show и ShowModal, так как они не могут отображаться вне форм [9]. 09.03.03 Прикладная информатика, 3 курс ОЗО Проектный практикум 5 4. Методы работы с элементами управления 4.1. Размещение и удаление элементов управления Для создания новой формы используется команда File → New → VCL Form главного меню. После создания формы на ней можно размещать элементы управления. Для этого щелкните на соответствующем значке компонента в палитре, а затем – в том месте формы, где предполагается разместить компонент. Для удаления компонента с формы выделите его щелчком мыши и нажмите клавишу «Delete». Можно также воспользоваться командой главного меню Edit → Delete [9]. 4.2. Выравнивание компонентов на форме Для выравнивания элементов управления относительно формы, друг друга или заданной сетки в Delphi используется редактор форм. Кроме того, имеется возможность установки одинаковых размеров для группы выделенных объектов. Доступ к командам выравнивания обеспечивается с помощью подпункта «Align» пункта «Position» контекстного меню. 4.3. Выделение группы элементов управления Команды выравнивания, как правило, применяются к группе выделенных компонентов. Для выделения нескольких элементов можно воспользоваться двумя способами: • удерживая клавишу «Shift», последовательно щелкните на нужных компонентах; • удерживая левую кнопку мыши нажатой, обведите область формы, на которой расположены выбираемые компоненты, контуром выделения. 4.4. Команды выравнивания компонентов Для выравнивания компонентов можно использовать окно диалога Alignment, открывающееся командой Align контекстного меню редактора форм. 4.5. Порядок обхода элементов Хотя основным инструментом при работе в среде Windows является мышь, иногда пользователю приходится использовать и клавиатуру. Для передачи фокуса ввода от одного элемента управления к другому с помощью клавиатуры используется клавиша «Tab». По умолчанию порядок передачи фокуса ввода при нажатии на клавишу «Tab» определяется порядком помещения элементов на форму на стадии разработки приложения. Однако заранее довольно трудно определить предпочтительное направление обхода, чтобы в соответствии с ним размещать элементы. Поэтому в Delphi предусмотрена возможность изменения порядка обхода после размещения элементов. Для этого используется свойство TabOrder, имеющееся у всех визуальных элементов управления. Значение, присвоенное этому свойству, определяет порядок передачи фокуса ввода. Компонент, для которого TabOrder = 0, получит фокус ввода при открытии формы. Свойство TabStopопределяет, может элемент получить фокус ввода (true) или нет (false). 5. Компонент TPageControl рис. 2.2), причем доступ к каждой странице, содержащей свой набор элементов управления, осуществляется через корешки, на которых можно написать название, определяющее содержание страницы. Данный элемент управления удобен тем, что позволяет эффективно использовать ограниченное пространство экрана, создавая эффект книги, которую можно раскрыть на любой странице. Основные свойства этого компонента: MultiLine – свойство, определяющее, разрешен ли вывод надписей на ярлычках в несколько строк; 09.03.03 Прикладная информатика, 3 курс ОЗО Проектный практикум 6 Pages – массив компонентов типа TTabSheet, которые можно создавать, выбрав пункт «New Page» из контекстного меню компонента PageControl; PageCount – число страниц; ActivePage – имя выбранной страницы (символьная строка). У траниц наиболее важными являются свойства Pagelndex (0,1,...), указывающее порядок, в котором появляются страницы, и TabVisible, указывающее, видима ли данная страница [9]. Пример: Счет-фактура Создать форму для ввода и редактирования данных счет-фактуры (см. рис. 8.2). Счет- фактура представляет собой документ, служащий основанием для принятия предъявленных сумм налога на добавленную стоимость к вычету. При реализации товаров (работ, услуг) налогоплательщик налога на добавленную стоимость обязан выставить покупателю счет- фактуру не позднее пяти дней считая со дня отгрузки товара (выполнения работ, оказания услуг). Для создания электронной формы надо выполнить последовательность следующих действий: 1. Создайте папку и дайте ей имя. 2. Создайте приложение Delphi (для этого запустите Delphi, выполнить команды File New VCL Forms Application). 3. Сохраните приложение в созданную папку(File Save project as…, в появившемся окне выберите свою папку и введитн имя приложения). 4. Разместите на форме следующие компоненты (см. рис. 8.3): • компонент TPageControl и командой «New Page»контекстного меню этого компонента добавьте две страницы «Данные агентов» и «Таблица»; • на первую страницу «Данные агентов» добавьте 4 компонента TGroupBox для объединения данных о продавце, покупателе, грузоотправителе, грузополучателе и др. компоненты (см. рис. 8.3); • на вторую страницу компонент TStringGrid для ввода данных о товарах (таблица на рис. 8.4) и кнопку TButton; • на форму три компонента TButton для очистки формы, расчета суммы, заполнения документа. 09.03.03 Прикладная информатика, 3 курс ОЗО Проектный практикум 7 09.03.03 Прикладная информатика, 3 курс ОЗО Проектный практикум 8 Рис. 8.3. Вкладка «Ввод данных агентов» Рис. 8.4. Вкладка «Таблица» для ввода данных о товаре 5. Далее запрограммируем кнопку «Добавить новую строку». Для этого нужно дважды щелкнуть компонент Button1 и в появившемся окне кода между begin и end ввести необходимые команды: Листинг программы: unit Unit6; 09.03.03 Прикладная информатика, 3 курс ОЗО Проектный практикум 9 interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, Grids, StdCtrls, ComCtrls; type TForm6 = class(TForm) PageControl1: TPageControl; Label1: TLabel; Edit1: TEdit; Label2: TLabel; Edit2: TEdit; TabSheet1: TTabSheet; GroupBox1: TGroupBox; Label3: TLabel; Label4: TLabel; Label5: TLabel; Edit3: TEdit; Edit4: TEdit; Edit5: TEdit; GroupBox2: TGroupBox; Label6: TLabel; Label7: TLabel; Label8: TLabel; Edit6: TEdit; Edit7: TEdit; Edit8: TEdit; GroupBox3: TGroupBox; Label9: TLabel; Label10: TLabel; Edit9: TEdit; Edit10: TEdit; GroupBox4: TGroupBox; Label11: TLabel; Label12: TLabel; Edit11: TEdit; Edit12: TEdit; Label13: TLabel; Edit13: TEdit; Label14: TLabel; Edit14: TEdit; TabSheet2: TTabSheet; StringGrid1: TStringGrid; Button1: TButton; Button2: TButton; Button3: TButton; Label15: TLabel; Label16: TLabel; Button4: TButton; procedure Button4Click(Sender: TObject); 09.03.03 Прикладная информатика, 3 курс ОЗО Проектный практикум 10 procedure Button2Click(Sender: TObject); procedure Button1Click(Sender: TObject); procedure FormShow(Sender: TObject); private { Private declarations } public { Public declarations } end; var Form6: TForm6; implementation {$R *.dfm} procedure TForm6.FormShow(Sender: TObject); begin // заполнение шапки таблицы при создании формы stringGrid1.Cells[0,0]:='Наименование товара'; stringGrid1.Cells[1,0]:='Единица измерения'; stringGrid1.Cells[2,0]:='Количество'; stringGrid1.Cells[3,0]:='Цена'; stringGrid1.Cells[4,0]:='Стоимость'; stringGrid1.Cells[5,0]:='В том числе акциз'; stringGrid1.Cells[6,0]:='Налоговая ставка'; stringGrid1.Cells[7,0]:='Сумма налога'; stringGrid1.Cells[8,0]:='Стоимость с учетом налогов'; stringGrid1.Cells[9,0]:='Страна'; stringGrid1.Cells[10,0]:='Номер должностной декларации'; end; procedure TForm6.Button1Click(Sender: TObject); begin // добавление одной строки в таблицу StringGrid1.RowCount:=StringGrid1.RowCount+1; end; procedure TForm6.Button2Click(Sender: TObject); var i,j:integer; begin // очистка формы edit1.Text:=''; edit2.Text:=''; edit3.Text:=''; edit4.Text:=''; edit5.Text:=''; edit6.Text:=''; edit7.Text:=''; edit8.Text:=''; edit9.Text:=''; edit10.Text:=''; edit11.Text:=''; 09.03.03 Прикладная информатика, 3 курс ОЗО Проектный практикум 11 edit12.Text:=''; edit13.Text:=''; edit14.Text:=''; for i:=1 to StringGrid1.RowCount do for j:=0 to stringgrid1.ColCount do StringGrid1.Cells[j,i]:=''; StringGrid1.RowCount:=2; end; procedure TForm6.Button4Click(Sender: TObject); var i,j:integer; s:real; begin // вычисление суммы к оплате for i:=1 to StringGrid1.RowCount do if StringGrid1.cells[8,i]<>'' then s:=s+StrToFloat(StringGrid1.Cells[8,i]); label16.Caption:=FloatToStr(s); end; end. Рис. 8.5. Тестирование приложения Задания для самостоятельного выполнения 1. Проектирование интерфейса пользователя: • Определить предметную область и сферу применения программного продукта. • Определить целевую аудиторию (выделить потенциальных пользователей разрабатываемой программы). • Построить описательную модель пользователя (наиболее общие черты, характерные для представителей группы и может представлять следующую информацию о пользователе: социальные и демографические характеристики (возраст, пол, основной язык, род занятий, потребности, привычки и т.п.); уровень компьютерной грамотности; цель и задачи, решаемые пользователем; окружение (рабочее место, конфигурация оборудования, используемая операционная система и т.п.); требования, специфичные для конкретной целевой группы.). При необходимости — выделить группы пользователей. 09.03.03 Прикладная информатика, 3 курс ОЗО Проектный практикум 12 • Сформировать множество сценариев поведения пользователей на основании составленной модели. • Выделить функциональные блоки приложения и схему навигации между ними (структуру диалога). 2. Создать прототипы для следующих страниц: • Заставка приложения. • Стартовая (начальная) страница. • Страница раздела/категории. 3. Создать прототип одного из перечисленных сценариев: 3.1. регистрация нового пользователя; 3.2. вход в систему зарегистрированного пользователя; 3.3. поиск информации по заданному критерию (условия поиска определить самостоятельно, в соответствии с темой разработки); 3.4. процедура добавления комментария к статье/заметке; 3.5. добавление новой статьи/заметки зарегистрированным пользователем; 3.6. собственный сценарий, разработанный на первом этапе разработки. 4. Создать форму для ввода и редактирования данных согласно Вашему варианту. При создании формы определите поля, которые вводятся пользователем, какого они типа, какие значения могут принимать. В согласии с этим выберите компоненты для ввода данных, их размер и расположение на форме. При необходимости разместить большое число компонентов, используйте компоненты TPageControl или добавьте еще формы в приложение. 5. Раскройте смысл следующих понятий: • интерфейс пользователя; • проектирование интерфейса пользователя: • реализация интерфейса пользователя; • тестирование интерфейса пользователя; • форма; • фрейм; • компонент TPageControl. |